diff --git a/help/include/left-sidebar-conversations.md b/help/include/left-sidebar-conversations.md index 8242558a3b..dd58786740 100644 --- a/help/include/left-sidebar-conversations.md +++ b/help/include/left-sidebar-conversations.md @@ -12,7 +12,7 @@ and the channels you are subscribed to. !!! tip "" - To see all conversations, click on **more conversations** (in direct messages) or **show all topics** + To see all conversations, click on **MORE CONVERSATIONS** (in direct messages) or **SHOW ALL TOPICS** (in a channel). {end_tabs} diff --git a/help/left-sidebar.md b/help/left-sidebar.md index f9e1d1b45b..1b58e2854f 100644 --- a/help/left-sidebar.md +++ b/help/left-sidebar.md @@ -48,11 +48,11 @@ information you need in the moment. 1. If the **DIRECT MESSAGES** section in the left sidebar is collapsed, click the triangle to the left of **DIRECT MESSAGES** to expand it. -1. Click **more conversations** at the bottom of the list of recent DM conversations. +1. Click **MORE CONVERSATIONS** at the bottom of the list of recent DM conversations. !!! tip "" - To return to the channel list in the left sidebar, click **back to channels**. + To return to the channel list in the left sidebar, click **BACK TO CHANNELS**. {end_tabs} @@ -63,7 +63,7 @@ information you need in the moment. 1. Click on a channel in the left sidebar. -1. Click **show all topics** at the bottom of the list of recent topics in the +1. Click **SHOW ALL TOPICS** at the bottom of the list of recent topics in the selected channel. !!! tip "" diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 859edaa103..8e26f3d5b8 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -330,7 +330,16 @@ /* Shared sidebar typography and effects values. */ --font-weight-sidebar-heading: 600; + --font-weight-sidebar-action-heading: 370; + --font-variant-sidebar-action-heading: all-small-caps; + --font-feature-settings-sidebar-action-heading: "c2sc", "smcp"; + /* 17px at 16px/1em = 1.0625em */ + --font-size-sidebar-action-heading: 1.0625em; + --text-transform-sidebar-action-heading: uppercase; --letter-spacing-sidebar-heading: 0.0469em; + --opacity-sidebar-heading: 0.7; + --opacity-right-sidebar-subheading: 0.65; + --opacity-right-sidebar-subheading-hover: 0.9; /* Message box elements and values. diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index c101fcb118..2666aa5891 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -37,13 +37,6 @@ margin-right: var(--left-sidebar-right-margin); } -li.show-more-topics { - & a { - /* 12px at 14px/1em */ - font-size: 0.8571em; - } -} - #streams_inline_icon, .streams_filter_icon { opacity: 0.5; @@ -243,17 +236,17 @@ li.show-more-topics { } & li#show-more-direct-messages { + font-size: var(--font-size-sidebar-action-heading); + font-weight: var(--font-weight-sidebar-action-heading); + letter-spacing: var(--letter-spacing-sidebar-action-heading); + font-variant: var(--font-variant-sidebar-action-heading); + text-transform: var(--text-transform-sidebar-action-heading); cursor: pointer; /* The 'more conversations' line has no icons, so vertically align the text with the unread count, when one appears there. */ align-items: baseline; - & a { - /* 12px at 14px/1em */ - font-size: 0.8571em; - } - .unread_count { margin-top: 2px; } @@ -996,6 +989,14 @@ li.top_left_scheduled_messages { } } +.sidebar-topic-action-heading { + font-size: var(--font-size-sidebar-action-heading); + font-weight: var(--font-weight-sidebar-action-heading); + font-variant: var(--font-variant-sidebar-action-heading); + font-feature-settings: var(--font-feature-settings-sidebar-action-heading); + text-transform: var(--text-transform-sidebar-action-heading); +} + .topic-list-filter { grid-area: row-content; } @@ -1209,14 +1210,15 @@ li.topic-list-item { .dm-box { grid-template-columns: - var(--left-sidebar-toggle-width-offset) var( + var(--left-sidebar-toggle-width-offset) [action-heading-start] var( --left-sidebar-icon-column-width ) - var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax( + var(--left-sidebar-icon-content-gap) minmax(0, 1fr) [action-heading-end] minmax( 0, max-content ) 30px 0; + grid-template-rows: [action-heading-start] auto [action-heading-end]; .conversation-partners-icon { grid-area: starting-anchor-element; @@ -1224,7 +1226,7 @@ li.topic-list-item { } .dm-name { - grid-area: row-content; + grid-area: action-heading; } .user_circle { @@ -1294,9 +1296,12 @@ li.topic-list-item { .show-all-streams { grid-area: row-content; + font-size: var(--font-size-sidebar-action-heading); + font-weight: var(--font-weight-sidebar-action-heading); + font-variant: var(--font-variant-sidebar-action-heading); + text-transform: var(--text-transform-sidebar-action-heading); color: inherit; text-decoration: none; - text-transform: uppercase; } .unread_count { @@ -1550,10 +1555,12 @@ li.topic-list-item { line-height: var(--line-height-sidebar-row); text-decoration: none; color: inherit; - /* 12px at 14px/1em */ .hide-more-direct-messages-text { - font-size: 0.8571em; + font-size: var(--font-size-sidebar-action-heading); + font-weight: var(--font-weight-sidebar-action-heading); + font-variant: var(--font-variant-sidebar-action-heading); + text-transform: var(--text-transform-sidebar-action-heading); grid-area: row-content; } diff --git a/web/templates/more_topics.hbs b/web/templates/more_topics.hbs index fe26c9bd41..a83690570d 100644 --- a/web/templates/more_topics.hbs +++ b/web/templates/more_topics.hbs @@ -2,7 +2,7 @@ {{#unless more_topics_unreads}}zero-topic-unreads{{/unless}} {{#if more_topics_unread_count_muted}}more_topic_unreads_muted_only{{/if}}">
- {{t "show all topics" }} + {{t "Show all topics" }}
{{#if more_topics_have_unread_mention_messages}}