Aman Agrawal
18a165fa97
personal_menu: Indicate no status text in italics.
...
If user has only set emoji as status, we show a placeholder
text to indicate no status text has been set.
Fixes #27362
2023-10-25 11:09:08 -07:00
Karl Stolley
3385d5862b
left_sidebar: Include right-hand padding on topic, nav labels.
2023-10-25 09:53:05 -07:00
Karl Stolley
4fac53e35c
left_sidebar: Restore and note positioning context for unread dots.
2023-10-25 08:17:11 -07:00
Tim Abbott
db05d7ef0c
css: Revert sidebar-menu-icon specificity change.
...
3ac0c3c401
incorrecly removed
specificity declarations needed to prevent that CSS from applying to
the right sidebar, which hasn't been properly prepared for this
change.
2023-10-24 16:23:30 -07:00
Aman Agrawal
2f33fad5df
left_sidebar: Add popover to make different views default.
...
Fixes #27324
2023-10-24 16:16:56 -07:00
Aman Agrawal
ce804fc37a
navbar: Remove userlist unread count.
2023-10-24 13:57:27 -07:00
Aman Agrawal
6f6a53c909
help-menu: Center align keyboard shortcut hint.
2023-10-24 13:06:11 -07:00
Karl Stolley
1a18faaf02
left_sidebar: Increase size of condensed icons.
2023-10-24 12:29:45 -07:00
Karl Stolley
3ac0c3c401
left_sidebar: Correctly align vdots across all rows.
...
This brings modern alignment methods to all vdots instances,
including in views, streams, and topic rows.
This also aligns the vdots in the condensed view row with
all the others in the left sidebar.
2023-10-24 12:29:45 -07:00
Karl Stolley
21908b7a9e
left_sidebar: Vertically align all vdots.
2023-10-24 12:29:45 -07:00
Karl Stolley
528f494d41
left_sidebar: Establish filter rows as grids.
2023-10-24 12:29:45 -07:00
Karl Stolley
56eaf9b153
left_sidebar: Place redesign icons in expanded views.
2023-10-24 12:29:45 -07:00
Aman Agrawal
75c874fef6
personal_menu: Fix focus outline of clear status icon.
2023-10-23 14:15:13 -07:00
Aman Agrawal
87c87ed41f
personal_menu: Rename clear_status class.
2023-10-23 14:15:13 -07:00
Aman Agrawal
79acefae4c
css: Remove unused hotkey-hint style.
...
The one we use in tooltips is defined in tooltips.css.
2023-10-23 14:15:13 -07:00
Aman Agrawal
c5564668c5
help_menu: Use new style to show hotkey.
...
This is according to Vlad's design in figma which differs from the
style we have in `tooltip-hotkey-hint`.
I used font-weight: 500 instead of 400 as it looked nicer and since
Vlad used Source Sans Pro as font-family which we don't have.
2023-10-23 14:15:13 -07:00
Aman Agrawal
3d870a1f7d
popovers: Use fixed height for navbar-dropdown items.
...
This helps us add elements like hotkey hint which can take more
space that available for text. There are no visual changes.
Removed some duplicate properties too.
2023-10-23 14:15:13 -07:00
Aman Agrawal
8f716cd64a
help_menu: Extract help items from gear menu into a separate popover.
...
Fixes #27202
2023-10-23 14:15:13 -07:00
Aman Agrawal
5dba15160d
css: Fix dark theme hover color for copy invite link.
...
Extracted colors into variables and used them inside the id to
solve the specificity issue.
2023-10-22 14:21:16 -07:00
Aman Agrawal
e4ae826a47
inbox: Improve look of empty inbox view.
2023-10-20 17:13:33 -07:00
Aman Agrawal
af271be1bd
navbar-dropdowns: Use specific classes for everything.
...
Replaced element selectors with specific selectors, those that
remain are intentionally left.
This is to avoid inner-most selectors as element selectors.
The reason being is that browsers evaluate selectors from right
to left, meaning that every time a selector ends in an element,
the browser has to work that much harder whenever and wherever
on a page it encounters the element.
2023-10-20 12:36:39 -07:00
Aman Agrawal
2efc2a5eb5
gear_menu_dropdown: Use better class name for theme buttons.
2023-10-20 12:36:39 -07:00
Aman Agrawal
51797809c4
header-button: Add background effects to different states.
2023-10-20 12:36:39 -07:00
Aman Agrawal
f9e7b814d6
navbar-dropdown-menu: Use focus-visible instead of focus.
2023-10-20 12:36:39 -07:00
Aman Agrawal
1e3e70576b
gear_menu: Extract the new gear and personal menu style as a theme.
...
This also fixes some misalignment happening at some widths for gear
menu. Like at XL widths for spectators.
2023-10-20 12:36:39 -07:00
Aman Agrawal
bc3d48616e
gear_menu: Migrate to use tippy.
2023-10-20 12:36:39 -07:00
Aman Agrawal
d75df10729
gear_menu_popover: Move *-theme class to the li element.
...
It will help us hide the whole `li` element instead of just
`a` tag for spectators.
2023-10-20 12:36:39 -07:00
Aman Agrawal
897c19d17d
css: Add box-shadow to navbar dropdown menu as per figma design.
2023-10-20 12:36:39 -07:00
Aman Agrawal
41c06e2989
CSS: Extract common CSS for .navbar-dropdown-menu.
2023-10-20 12:36:39 -07:00
Aman Agrawal
61bf72d30e
empty_feed_notice: Style empty message feed similar to other views.
2023-10-20 12:29:45 -07:00
Karl Stolley
8e7265fbb4
left_sidebar: Correctly handle focus on views controls.
2023-10-20 12:27:19 -07:00
Karl Stolley
c3062e80bb
left_sidebar: Place redesigned icons in views popover.
2023-10-20 12:27:19 -07:00
Karl Stolley
2c8a688983
left_sidebar: Place redesign icons in condensed views.
2023-10-20 12:27:19 -07:00
Karl Stolley
24d300f3fd
left_sidebar: Tune icon sizes for condensed presentation.
...
This slightly increases the size of the clock for recent
conversations, and descreases the size of the left-aligned icon
for all messages.
Icon sizes in the expanded view are left untouched.
2023-10-20 12:27:19 -07:00
Karl Stolley
41635566fd
left_sidebar: Improve logic for showing Scheduled messages.
2023-10-20 12:27:19 -07:00
Karl Stolley
46ce408a5f
left_sidebar: Add a 3-dot menu to condensed views.
...
Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-20 12:27:19 -07:00
Karl Stolley
4dd1bf7e32
left_sidebar: Expand and condense the VIEWS navigation.
2023-10-20 12:27:19 -07:00
Karl Stolley
458d6411b4
left_sidebar: Handle condensed icon unread states.
2023-10-20 12:27:19 -07:00
Karl Stolley
9f5ca4f6f7
left_sidebar: Set backgrounds on condensed icon visible and hover.
2023-10-20 12:27:19 -07:00
Karl Stolley
7774abfe04
left_sidebar: Structure Views header with standalone icons.
...
This also introduces a combo grid/flex layout, which will also be
applied to the DM and Streams headings.
Because there are now multiple classes referenced from the
Puppeteer tests, those selectors now include the expanded
navigation area's parent ID selector.
2023-10-20 12:27:19 -07:00
Aman Agrawal
b6fb77525f
hello: Adjust padding in client logos to be similar to original design.
...
Since Vlad used zoom in the original design and we used transform
since zoom was not supported by all browsers, some details got
lost in transition.
2023-10-20 10:04:46 -07:00
Aman Agrawal
41f26aebd9
hello: Make cta icons have similar spacing to original design.
...
There were lost when we converted inline svgs to files.
2023-10-20 10:04:46 -07:00
Aman Agrawal
b542984869
personal_menu: Fix semantics of personal menu HTML structure.
...
Only valid tag inside `ul` is `li`. So, we use `ul > li > ul > li`
structure here.
2023-10-18 22:02:38 -07:00
Aman Agrawal
06f14a8caf
personal_menu: Use a more specific name for `.inner` class.
2023-10-18 22:02:38 -07:00
Aman Agrawal
b2dd2d6d29
personal-menu: Rename dropdown-menu to navbar-dropdown-menu.
...
This will contain common css to be used between navbar dropdowns
gear menu and personal menu.
2023-10-18 22:02:38 -07:00
Prakhar Pratyush
5e3b8f5393
css: Improve the css of icon-based tab picker used in topic popover.
...
Remove the solid outline around hovered tabs.
Minor tweaks in height and padding for tabs.
2023-10-17 16:21:06 -07:00
Prakhar Pratyush
2d979fbf0e
css: Use CSS variables for the color values of tab-picker.
...
Use CSS variables for the color values of left sidebar
topic popover, tab-picker widget to change the visibility
policy.
2023-10-17 16:21:06 -07:00
Aman Agrawal
0dd8e40e84
inbox: Use new empty-list-message style and center the text.
2023-10-17 11:55:41 -07:00
Aman Agrawal
4db331ed21
empty_list_widget: Use class instead of id.
...
We were using id before to increase their specificity, but
since it is possible for multiple empty_list_widget_for_list/table
to be in DOM at the same time, we should use a class here. Used
`!important` here so that we can force our padding where these
classes are used.
2023-10-17 11:55:41 -07:00
Aman Agrawal
62c78d5ad5
inbox: Remove side borders.
2023-10-17 10:34:48 -07:00