Commit Graph

49 Commits

Author SHA1 Message Date
Priyank Patel 413ea99373 email tooltip: Adjust background color of email toolip in dark-mode.
This commit adjust the email tooltip of popover in dark-mode.
2018-03-12 12:06:40 -07:00
Steve Howell 3a1bf04a56 compose: Add pills for typing in PM recipients.
@brockwhittaker wrote the original prototype for having
pills in the recipient box when users compose PMs (either
1:1 or huddle).  The prototype was test deloyed on our
main realm for several weeks.

This commit includes all the original CSS and HTML from
the prototype.

After some things changed with the codebase after the initial
test deployment, I made the following changes:

    * In prior commits I refactored out a module called
      `user_pill.js` that implemented some common functions
      against a more streamlined version of `input_pill.js`,
      and this commit largely integrates with that.

    * I made changes in a prior commit to handle Zephyr
      semantics (emails don't get validated) and tested
      this commit with zephyr.

    * I fixed a reload bug by extracting code out to
      `compose_pm_pill.js` and re-ordering some
      calls to `initialize`.

There are still two flaws related to un-pill-ified text in the
input:

    * We could be more aggressive about trying to pill-ify
      emails when you blur or tab away.

    * We only look at the pills when you send the message,
      instead of complaining about the un-pill-ified text.
      (Some folks may consider that a feature, but it's
      probably surprising to others.)
2018-03-07 15:53:11 -08:00
Rohitt Vashishtha f215fbe89c dark-mode: Show dark background in popover while avatar loads. 2018-02-16 07:47:56 -08:00
Florian Jüngermann ec3e0caece right-sidebar: Enable up and down arrow keys.
This users the new generic functions in stream_list.js to implement a
similar behaviour for the right sidebar (user list).

Fixes #5920.
2018-02-12 15:38:23 -08:00
Florian Jüngermann b489ccc126 left-sidebar: Enable up and down arrow keys.
When in the stream-searchbar, a user can now use the arrow keys to iterate
through the suggestions. Therefore the currently selected list element is
assigned a CSS class 'highlighted_user'.
The main functional testing is done with casper but node test are still
included to keep the high coverage.
Line-wrapping issues are resolved. Night-mode CSS handling is included.
2018-02-12 15:35:56 -08:00
Brock Whittaker e82564c82c dark-mode: Fix bug with open graph previews.
This fixes a bug where the open graph preview bottom fade is dark
rather than white when not in dark mode, which results in a heavy
dark faded line at the bottom of the description.
2018-02-08 09:22:58 -08:00
Brock Whittaker 06f3cb2b78 message-feed: Add some styling to open graph previews.
This adds some styling to make the open graph previews look a bit nicer,
including:

1. Adding a bottom fading gradient to slowly fade out text that is out
of bounds rather than chopping it off.
2. Using font anti-aliasing to make the characters appear smoother.
3. Increasing the font size of the title to give it prominence.
4. Changing the height to 80px from 70px.
2018-02-05 16:27:31 -08:00
Balaji2198 f49d9d016f hotkeys: Add '>' as a hotkey for quote and reply to message.
Tweaked by tabbott to fix a few minor issues.

Fixes #8146.
2018-02-02 17:37:53 -08:00
Brock Whittaker 693ad9eac8 dark-mode: Make .dropdown-menu links base color in dark mode. 2018-02-01 18:19:48 -08:00
Shubham Dhama 70079e0a12 settings: Makes selector look better in firefox.
This adds a custom selector icon to make our dropdowns look
well-designed in Firefox.

Fixes: #6707.
2018-01-28 12:40:42 -08:00
YJDave 65592375ce dark-mode: Fix background color of dropdown menus. 2018-01-28 12:40:42 -08:00
Brock Whittaker 931261f017 dark-mode: Make all ".modal-bg .modal-header" styles the same.
This is a master selector that selects all the cases that were removed
along with one more (password modal).
2018-01-27 16:19:59 -08:00
Brock Whittaker ca548e8fa9 dark-mode: Add support for password inputs.
This allows for password inputs to be the darker blue in the dark theme now.
2018-01-27 16:18:09 -08:00
Brock Whittaker d06fd9c357 dark-mode: Make settings page code blocks compatible.
This makes the code blocks compatible by changing the background to be darker and the text color to be base (white).
2018-01-24 14:17:33 -08:00
Brock Whittaker 189832deed dark-mode: Make "error" alerts compatible.
This makes them compatible by making the backgrounds darker and the text base color.
2018-01-24 14:17:33 -08:00
Brock Whittaker ca6ea11a98 dark-mode: Make "success" alerts compatible with dark mode. 2018-01-24 14:17:33 -08:00
Brock Whittaker 2d18bade15 dark-mode: Make settings "tip" boxes more compatible.
This makes them compatible by making the background dark and the text base color.
2018-01-24 14:17:33 -08:00
Cynthia Lin 9fe284b442 dark-mode: Fix background color of table headers. 2018-01-17 03:29:07 -05:00
Cynthia Lin be21f831a0 settings: Normalize white boxes in settings. 2018-01-17 03:29:07 -05:00
Cynthia Lin a028097266 dark-mode: Change Stream list chevrons colors to have more contrast.
Fixes #7794.
2018-01-16 17:18:50 -05:00
Cynthia Lin 56f341ffb5 dark-mode: Combine similar CSS selectors together. 2018-01-16 17:18:50 -05:00
Cynthia Lin 240511c2d7 dark-mode: Compact common background-color declarations. 2017-12-12 09:11:34 -06:00
Cynthia Lin 86f87bcb3f dark-mode: Change hex color codes to HSL. 2017-12-12 09:11:34 -06:00
Cynthia Lin 45d0b2bb47 dark-mode: Fix background colors of modals and sidebars in mobile view.
Fixes #7623.
2017-12-12 09:11:34 -06:00
Brock Whittaker 0ed9da9a11 compose: Make compose alerts dark-mode compatible.
This makes all the alerts in the compose box compatible with dark mode
by choosing different colors and fixing borders to be properly
pronounced, along with removing text shadows that make text unreadable.
2017-12-06 16:48:08 -08:00
Brock Whittaker 0e4eef6ef0 dark-mode: Make bankruptcy modal dark-mode compatible.
This makes the bankruptcy modal compatible with dark mode by adding the
`.modal-bg` class to switch it to dark mode, and by setting a darker
background and border color to the modal header.
2017-12-06 16:48:08 -08:00
Brock Whittaker a5da6265eb dark-mode: Make all states of navbar <li> dark mode compatible.
This fixes and adds to the logic in commit `525e8e3`. That commit
would only have the stream be the correct color if it was active,
but really it should be dark text by default regardless of whether
it is the active tab bar list item.
2017-12-06 16:48:08 -08:00
Brock Whittaker 2a7ea5ca53 dark-mode: Change star color to be lighter.
This changes the star color to be lighter and visually softer to be
easier to spot in the page.
2017-11-30 14:40:28 -08:00
Brock Whittaker 5735f8251b dark-mode: Make typeaheads dark mode compatible.
This makes the typeaheads dark-mode compatible by changing to the
background to be dark and the text to inherit from the body text
(rather than bootstrap’s default of #333).
2017-11-30 14:40:28 -08:00
Brock Whittaker 9d255ac7de dark-mode: Respect ".no-style" attr on buttons.
This respects the ".no-style" declaration on buttons and sets
the background back to transparent in dark mode (from a slightly
darkened background).
2017-11-30 14:40:28 -08:00
Brock Whittaker 525e8e36d7 dark-mode: Fix tab list stream to not inherit color.
The streams can be light and if it inherits the white text color they
will not be readable. It should default to dark text with the exception
of when the tab is is `.dark-background`, in which case then it should
revert to inheriting the white color.
2017-11-30 14:40:28 -08:00
Brock Whittaker 4f81bdd0a6 message-edit-history: Make dark mode compatible.
This makes the edit history overlay dark mode compatible by changing
the background to the dark blue along with changing the highlight
colors to work with white text and dark backgrounds.
2017-11-30 14:40:27 -08:00
Brock Whittaker 7883897165 muted-topics: Enable dark mode for mute notifications.
This enables dark mode by changing the background to a dark color
in the stream/topic mute notifications.
2017-11-30 14:40:27 -08:00
Brock Whittaker bc11b0f1e8 Revert "dark-mode: Remove unnecessary CSS and fix dark mode bugs."
This reverts commit 64381b6e38.

It turns out we actually needed this for inline code blocks to work.
2017-11-30 14:40:19 -08:00
Brock Whittaker e0236646bf night-mode: Add custom CSS through JS.
This adds custom CSS through JavaScript for things that do not
scope well and will override other inherited styles.

This should ONLY be used for problematic CSS that has no obvious
or easy CSS-only solution.

(Specifically, we need this for the "default link" styling, which is
hard to override because we don't want to start winning ties due to
specificity that we would not have won in the light theme).
2017-11-29 23:06:11 -08:00
Brock Whittaker 387bdd34c7 dark-mode: Change top-of-messages colors for dark mode.
Make it a white background with the “Z” in the same dark grey/blue
color as the background.
2017-11-29 16:44:43 -08:00
Brock Whittaker a2729c52d0 dark-mode: Fix incorrect hover colors on `.stream_label`.
The headers on some dark stream labels would turn dark and and on some
light turn light. This makes sure that does not happen.
2017-11-29 16:44:43 -08:00
Brock Whittaker 618455c7aa dark-mode: Fix invite overlay to have a dark background and borders.
This changes the modal background to be dark and changes the header
border to be darker instead of lighter like the subs and settings ones
are.
2017-11-29 16:44:43 -08:00
Brock Whittaker 836bfd8f45 dark-mode: Refactor gear-menu icon to be translucent.
This makes the gear-menu icon translucent rather than medium grey and
black (which isn't even our base text color) to be half opaque (approx)
and base text color.
2017-11-29 16:44:43 -08:00
Brock Whittaker edffa56c51 dark-mode: Style alerts to be darker red.
This styles the alerts to be a darker red that blends more with the
blue dark mode theme.
2017-11-29 16:44:43 -08:00
Brock Whittaker 89b38ff87d dark-mode: Change all links to be brighter blue on hover.
This changes the links to become more emphasized by being brighter
rather than darker since they’re on a dark background.
2017-11-29 16:44:43 -08:00
Brock Whittaker 76f6051a1e dark-mode: Change popover arrows to all be dark.
This changes the position-based arrows on popovers to all be dark
rather than light grey.
2017-11-29 16:44:43 -08:00
Brock Whittaker ad9c71b4b1 dark-mode: Change emoji reaction overlay to be dark mode compatible.
This changes it to be compatible with the dark-mode which involves one
change to light mode of changing a grey to a translucent white in
reactions.css.
2017-11-29 16:44:42 -08:00
Brock Whittaker 1716d69c35 dark-mode: Fix @-mention colors.
This fixes mention colors for dark mode.
2017-11-29 16:44:42 -08:00
Brock Whittaker 64381b6e38 dark-mode: Remove unnecessary CSS and fix dark mode bugs. 2017-11-29 16:40:18 -08:00
Tommy Ip f425f9ad3d navbar: Fix transparency issue. 2017-11-22 13:02:13 -08:00
Brock Whittaker 4fb7292dd4 message-feed: Add dark mode support for inline code. 2017-11-17 10:30:24 -08:00
Brock Whittaker aeed2e6863 dark-mode: Remove unnecessary CSS and fix dark mode bugs. 2017-11-17 10:30:18 -08:00
Brock Whittaker b76578ca13 Add an experimental dark mode stylesheet.
Note from tabbott: While this initial version is experimental and
definitely incomplete, we expect to have a solid version done over the
next few weeks (after more refactoring).  We're merging this now to
make it easy to test both versions when refactoring our CSS.

Fixes #267.
2017-11-15 16:45:34 -08:00