diff --git a/webapp/channels/src/components/app_bar/app_bar.scss b/webapp/channels/src/components/app_bar/app_bar.scss index 2bdc0ca303785..b3d01a5210a36 100644 --- a/webapp/channels/src/components/app_bar/app_bar.scss +++ b/webapp/channels/src/components/app_bar/app_bar.scss @@ -4,7 +4,7 @@ @import 'utils/mixins'; $app-bar-icon-size: 24px; -$app-bar-width: 48px; +$app-bar-width: 44px; .app-bar { // Do not show App Bar if on mobile @@ -12,11 +12,10 @@ $app-bar-width: 48px; display: none; } + position: relative; display: flex; min-height: 0; flex-flow: column; - border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12); - background-color: var(--center-channel-bg); &__top { position: relative; @@ -25,7 +24,6 @@ $app-bar-width: 48px; flex: 1; flex-flow: column; padding-top: 15px; - background-color: rgba(var(--center-channel-color-rgb), 0.04); -ms-overflow-style: none; overflow-x: hidden; overflow-y: scroll; @@ -49,7 +47,7 @@ $app-bar-width: 48px; left: 0; width: 3px; height: $app-bar-icon-size; - border-radius: 0 2px 2px 0; + border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background-color: var(--sidebar-text-active-border); content: ''; } @@ -71,18 +69,18 @@ $app-bar-width: 48px; overflow: hidden; width: $app-bar-icon-size; height: $app-bar-icon-size; - border-radius: 50%; + border-radius: var(--radius-full); margin: 0 auto; line-height: 1; &:hover { - box-shadow: 0 0 0 2px rgba(var(--center-channel-color-rgb), 0.16); + box-shadow: 0 0 0 2px rgba(var(--sidebar-text-rgb), 0.16); } img { width: $app-bar-icon-size; height: $app-bar-icon-size; - border-radius: 50%; + border-radius: var(--radius-full); } } @@ -105,11 +103,11 @@ $app-bar-width: 48px; } .app-bar__old-icon { - color: rgba(var(--center-channel-color-rgb), 0.64); + color: rgba(var(--sidebar-text-rgb), 0.64); &:hover, &--active { - color: rgba(var(--center-channel-color-rgb), 0.8); + color: rgba(var(--sidebar-text-rgb), 0.8); } } @@ -121,7 +119,7 @@ $app-bar-width: 48px; .app-bar__divider { width: 28px; - border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.16); + border-top: 1px solid rgba(var(--sidebar-text-rgb), 0.16); margin-top: 0; margin-bottom: 19px; } @@ -140,11 +138,17 @@ $app-bar-width: 48px; align-items: center; padding-top: 24px; padding-bottom: 36px; - background-color: rgba(var(--center-channel-color-rgb), 0.04); .app_bar__marketplace_button { @include icon-button; @include icon-button-small-compact; + + color: rgba(var(--sidebar-text-rgb), 0.64); + + &:hover { + background-color: rgba(var(--sidebar-text-rgb), 0.08); + color: rgba(var(--sidebar-text-rgb), 0.72); + } } } } diff --git a/webapp/channels/src/components/backstage/backstage_controller.tsx b/webapp/channels/src/components/backstage/backstage_controller.tsx index 9115d8a43f921..24b6a8bf561e4 100644 --- a/webapp/channels/src/components/backstage/backstage_controller.tsx +++ b/webapp/channels/src/components/backstage/backstage_controller.tsx @@ -245,7 +245,7 @@ const BackstageGlobalStyle = createGlobalStyle` #root { > #global-header, > .team-sidebar, - > .sidebar--right, + > .main-wrapper .sidebar--right, > .app-bar { display: none; } diff --git a/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.scss b/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.scss index ee01847fc2674..a061d82b10358 100644 --- a/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.scss +++ b/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.scss @@ -9,8 +9,8 @@ overflow: hidden; max-height: calc(100vh - 240px); flex-direction: column; - border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); - border-radius: 12px; + border: var(--border-default); + border-radius: var(--radius-l); box-shadow: var(--elevation-6); } @@ -21,7 +21,7 @@ .modal-header { border: none; - border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08); + border-bottom: var(--border-light); background: none; } @@ -44,7 +44,7 @@ align-items: center; justify-content: flex-end; padding: 24px 32px; - border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08); + border-top: var(--border-light); gap: 8px; } @@ -73,7 +73,7 @@ } &__divider { - border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08); + border-bottom: var(--border-light); } @media screen and (max-width: 768px) { diff --git a/webapp/channels/src/components/drafts/drafts.scss b/webapp/channels/src/components/drafts/drafts.scss index 6b9135075266d..8130e66061865 100644 --- a/webapp/channels/src/components/drafts/drafts.scss +++ b/webapp/channels/src/components/drafts/drafts.scss @@ -2,10 +2,8 @@ // See LICENSE.txt for license information. .Drafts { - --border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); - &__header { - border-bottom: var(--border); + border-bottom: var(--border-default); grid-area: header; } @@ -44,7 +42,7 @@ } .Header { - border-top: var(--border); + border-top: var(--border-default); } } } diff --git a/webapp/channels/src/components/global_header/global_header.tsx b/webapp/channels/src/components/global_header/global_header.tsx index e6863705b4eec..657faf0ff6c7e 100644 --- a/webapp/channels/src/components/global_header/global_header.tsx +++ b/webapp/channels/src/components/global_header/global_header.tsx @@ -22,11 +22,9 @@ const GlobalHeaderContainer = styled.header` flex-shrink: 0; align-items: center; justify-content: space-between; - height: 40px; - background: var(--global-header-background); - border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.08); - color: rgba(var(--global-header-text-rgb), 0.64); - padding: 0 12px; + height: 44px; + color: rgba(var(--sidebar-text-rgb), 0.64); + padding: 0 4px 0 8px; z-index: 99; > * + * { diff --git a/webapp/channels/src/components/header_footer_route/header_footer_route.scss b/webapp/channels/src/components/header_footer_route/header_footer_route.scss index ae8cb192629e5..133a14f10108a 100644 --- a/webapp/channels/src/components/header_footer_route/header_footer_route.scss +++ b/webapp/channels/src/components/header_footer_route/header_footer_route.scss @@ -11,7 +11,7 @@ min-height: 100%; flex-direction: column; margin: 0 auto; - grid-area: center; + grid-area: main; .header-footer-route-container { display: flex; diff --git a/webapp/channels/src/components/menu/menu_styled.tsx b/webapp/channels/src/components/menu/menu_styled.tsx index 03a7c48b6f639..47fe3c504be8b 100644 --- a/webapp/channels/src/components/menu/menu_styled.tsx +++ b/webapp/channels/src/components/menu/menu_styled.tsx @@ -22,7 +22,7 @@ export const MuiMenuStyled = styled(MuiMenu, { backgroundColor: 'var(--center-channel-bg)', boxShadow: `${ asSubMenu ? 'var(--elevation-5)' : 'var(--elevation-4)' - }, 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.16) inset`, + }, 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.12) inset`, minWidth: '114px', maxWidth: '496px', maxHeight: '80vh', diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx index ca3e48ea7818f..10ab824ad1443 100644 --- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx +++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx @@ -43,7 +43,7 @@ import {TaskListPopover} from './onboarding_tasklist_popover'; import {Task} from './onboarding_tasklist_task'; const TaskItems = styled.div` - border-radius: 4px; + border-radius: var(--radius-m); border: solid 1px rgba(var(--center-channel-color-rgb), 0.16); background-color: var(--center-channel-bg); width: 352px; @@ -91,9 +91,9 @@ const Button = styled.button<{open: boolean}>(({open}) => { width: 36px; height: 36px; padding: 7px; - border-radius: 50%; - left: 20px; - bottom: 20px; + border-radius: var(--radius-full); + left: 15px; + bottom: 15px; position: fixed; z-index: 101; display: flex; @@ -113,15 +113,15 @@ const Button = styled.button<{open: boolean}>(({open}) => { width: 20px; height: 16px; background: var(--button-bg); - position: fixed; + position: absolute; display: ${open ? 'none' : 'block'}; border-radius: 12px; color: var(--button-color); font-weight: bold; font-size: 11px; line-height: 16px; - bottom: 47px; - left: 41px; + bottom: 22px; + left: 22px; } `; }); @@ -130,7 +130,7 @@ const PlayButton = styled.button` padding: 10px 0; max-width: 175px; background: var(--button-bg); - border-radius: 4px; + border-radius: var(--radius-s); color: var(--button-color); border: none; font-weight: bold; diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx index 34bec83c3023f..7f0d566f7fe0b 100644 --- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx +++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx @@ -3,7 +3,7 @@ import type {Placement} from 'popper.js'; import React from 'react'; -import type {RefObject} from 'react'; +import type {RefObject, CSSProperties} from 'react'; import {usePopper} from 'react-popper'; import {CSSTransition} from 'react-transition-group'; import styled from 'styled-components'; @@ -83,8 +83,11 @@ export const TaskListPopover = ({ ], }); const style = { - ...popper, - zIndex: isVisible ? 100 : -1, + container: { + ...popper, + zIndex: isVisible ? 100 : -1, + position: 'fixed', + } as CSSProperties, }; return ( <> @@ -101,7 +104,7 @@ export const TaskListPopover = ({
{children} diff --git a/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap b/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap index f9290eb60715a..9a93ccb00b15e 100644 --- a/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap +++ b/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap @@ -99,33 +99,37 @@ exports[`components/Root Routes Should mount public product routes 1`] = ` - - - - + + + + + + + + - - - - - + +
diff --git a/webapp/channels/src/components/root/root.tsx b/webapp/channels/src/components/root/root.tsx index c0f872fa7f283..b7ad84c6ae929 100644 --- a/webapp/channels/src/components/root/root.tsx +++ b/webapp/channels/src/components/root/root.tsx @@ -549,75 +549,77 @@ export default class Root extends React.PureComponent { - - {this.props.products?.filter((product) => Boolean(product.publicComponent)).map((product) => ( - { - return ( +
+ + {this.props.products?.filter((product) => Boolean(product.publicComponent)).map((product) => ( + { + return ( + + ); + }} + /> + ))} + {this.props.products?.map((product) => ( + { + let pluggable = ( + + ); + if (product.wrapped) { + pluggable = ( +
+ {pluggable} +
+ ); + } + return ( + + {pluggable} + + ); + }} + /> + ))} + {this.props.plugins?.map((plugin) => ( + ( - ); - }} - /> - ))} - {this.props.products?.map((product) => ( - { - let pluggable = ( - - ); - if (product.wrapped) { - pluggable = ( -
- {pluggable} -
- ); - } - return ( - - {pluggable} - - ); - }} + )} + /> + ))} + - ))} - {this.props.plugins?.map((plugin) => ( - ( - - )} - /> - ))} - - - - - + + + + +
diff --git a/webapp/channels/src/components/threading/global_threads/global_threads.scss b/webapp/channels/src/components/threading/global_threads/global_threads.scss index 275e73caddcc3..208814c4a9ce6 100644 --- a/webapp/channels/src/components/threading/global_threads/global_threads.scss +++ b/webapp/channels/src/components/threading/global_threads/global_threads.scss @@ -9,11 +9,20 @@ } } -.GlobalThreads { - --border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); +.rhs-open #channel_view.channel-view { + &:has(.GlobalThreads) { + padding-right: 0; + + .ThreadPane, + .no-results__holder { + padding-right: 18px; + } + } +} +.GlobalThreads { .GlobalThreads___header { - border-bottom: var(--border); + border-bottom: var(--border-default); grid-area: header; } @@ -23,13 +32,14 @@ } .ThreadList { - border-right: var(--border); grid-area: list; } .ThreadPane, .ThreadList + .no-results__holder { + box-shadow: var(--elevation-2); grid-area: pane; + outline: var(--border-light); } > .no-results__holder { @@ -59,19 +69,15 @@ display: grid; overflow: hidden; - grid-template-areas: - 'header header' - 'list pane'; + grid-template-areas: 'list pane'; // 2-column grid-template-columns: var(--list) var(--pane); - grid-template-rows: 56px 1fr; + grid-template-rows: 1fr; // single column @media screen and (max-width: 1020px) { - grid-template-areas: - 'header header' - 'main main'; + grid-template-areas: 'main main'; &:not(.thread-selected) { .ThreadList { @@ -111,7 +117,7 @@ } .Header { - border-top: var(--border); + border-top: var(--border-default); } } diff --git a/webapp/channels/src/components/threading/global_threads/global_threads.tsx b/webapp/channels/src/components/threading/global_threads/global_threads.tsx index 6a5ba18d37477..5928d426ef0f1 100644 --- a/webapp/channels/src/components/threading/global_threads/global_threads.tsx +++ b/webapp/channels/src/components/threading/global_threads/global_threads.tsx @@ -29,7 +29,6 @@ import LocalStorageStore from 'stores/local_storage_store'; import LoadingScreen from 'components/loading_screen'; import NoResultsIndicator from 'components/no_results_indicator'; -import Header from 'components/widgets/header'; import {Constants, PreviousViewedTypes} from 'utils/constants'; @@ -153,19 +152,6 @@ const GlobalThreads = () => { id='app-content' className={classNames('GlobalThreads app__content', {'thread-selected': Boolean(selectedThread)})} > -
- {isLoading || isEmptyList ? (
{isLoading ? ( diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss index 370a5e85461b5..ee82f56c5f171 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss @@ -4,8 +4,6 @@ @import "sass/utils/_mixins"; .ThreadItem { - --border: 1px solid rgba(var(--center-channel-color-rgb), 0.08); - position: relative; padding: 18px 18px 18px 28px; cursor: pointer; diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap index 30ab57bc69b7b..3db6010ca8182 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap +++ b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap @@ -18,8 +18,8 @@ exports[`components/threading/global_threads/thread_list should match snapshot 1 onClick={[Function]} >
diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss index 55296515d4126..30e3f03f5e7ea 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss @@ -9,7 +9,7 @@ .Header { padding-right: 12px; padding-left: 12px; - border-bottom: var(--border); + border-bottom: var(--border-default); color: rgba(var(--center-channel-color-rgb), 0.75); grid-area: header; @@ -69,7 +69,7 @@ } .ThreadItem { - border-bottom: var(--border); + border-bottom: var(--border-default); } .virtualized-thread-list { diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx index fcad5d055268e..217953a45cce5 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx +++ b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx @@ -205,8 +205,8 @@ const ThreadList = ({ onClick={handleRead} > diff --git a/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss b/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss index ea50d64c030ee..f65989b556392 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_pane/thread_pane.scss @@ -1,7 +1,6 @@ .ThreadPane { display: grid; - overflow: hidden; grid-template-areas: 'header' 'pane'; @@ -13,7 +12,7 @@ align-items: center; justify-content: space-between; padding: 12px 16px; - border-bottom: var(--border); + border-bottom: var(--border-default); grid-area: header; --button-separator-height: 24px; diff --git a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss index db48a42b5d2eb..6fdd45fa7b8dd 100644 --- a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss +++ b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss @@ -26,7 +26,7 @@ line-height: 16px; } - .content-container { + .main-wrapper { display: flex; flex-direction: column; margin-right: 24px; diff --git a/webapp/channels/src/components/widgets/menu/menu.scss b/webapp/channels/src/components/widgets/menu/menu.scss index b1567ffa3ec4f..d6267a92aeda2 100644 --- a/webapp/channels/src/components/widgets/menu/menu.scss +++ b/webapp/channels/src/components/widgets/menu/menu.scss @@ -7,7 +7,10 @@ max-width: 270px; max-height: 80vh; padding: 8px 0; - border-radius: 4px; + border: solid 1px rgba(var(--center-channel-color-rgb), 0.12); + border-radius: var(--radius-s); + background-color: var(--center-channel-bg); + box-shadow: var(--elevation-4); ul { padding: 8px 0; diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss index 5676535126969..ac0e2747f6d3b 100644 --- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss +++ b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss @@ -95,7 +95,7 @@ padding: 0 3px; margin-right: 4px; margin-bottom: 2px; - color: rgba(var(--center-channel-color-rgb), 0.72); + color: rgba(var(--center-channel-color-rgb), 0.64); vertical-align: middle; &::before { diff --git a/webapp/channels/src/components/widgets/modals/components/modal_header.scss b/webapp/channels/src/components/widgets/modals/components/modal_header.scss index 8304a0506310a..e194bf6eb07d1 100644 --- a/webapp/channels/src/components/widgets/modals/components/modal_header.scss +++ b/webapp/channels/src/components/widgets/modals/components/modal_header.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; padding: 20px 20px 20px 32px; - border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08); + border-bottom: var(--border-light); background: none; gap: 8px; diff --git a/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss b/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss index aa2945e0005d3..2845db098f8be 100644 --- a/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss +++ b/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss @@ -18,7 +18,7 @@ align-items: center; padding: 8px 12px; border: none; - border-radius: 4px; + border-radius: var(--radius-s); background: none; color: rgba(var(--center-channel-color-rgb), 0.56); gap: 8px; diff --git a/webapp/channels/src/components/widgets/team_icon/team_icon.scss b/webapp/channels/src/components/widgets/team_icon/team_icon.scss index 5c9cbabf72be1..e51430e7560a9 100644 --- a/webapp/channels/src/components/widgets/team_icon/team_icon.scss +++ b/webapp/channels/src/components/widgets/team_icon/team_icon.scss @@ -17,6 +17,8 @@ } .TeamIcon__initials { + font-family: Metropolis, sans-serif; + letter-spacing: 0.02em; user-select: none; &.TeamIcon__initials__lg { diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index af26d9afa4c1f..4fa0462a789e4 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -3757,7 +3757,6 @@ "globalThreads.searchGuidance.subtitle": "If you’re looking for older conversations, try searching with {searchShortcut}", "globalThreads.searchGuidance.title": "That’s the end of the list", "globalThreads.sidebarLink": "Threads", - "globalThreads.subtitle": "Threads you’re participating in will automatically show here", "globalThreads.threadList.noUnreadThreads": "No unread threads", "globalThreads.threadPane.unreadMessageLink": "You have {numUnread, plural, =0 {no unread threads} =1 {{numUnread} thread} other {{numUnread} threads}} {numUnread, plural, =0 {} other {with unread messages}}", "globalThreads.threadPane.unselectedTitle": "{numUnread, plural, =0 {Looks like you’re all caught up} other {Catch up on your threads}}", @@ -5117,7 +5116,6 @@ "textbox.quote": ">quote", "textbox.strike": "strike", "threadFromArchivedChannelMessage": "You are viewing a thread from an **archived channel**. New messages cannot be posted.", - "threading.filters.allThreads": "All your threads", "threading.filters.unreads": "Unreads", "threading.following": "Following", "threading.footer.lastReplyAt": "Last reply {formatted}", diff --git a/webapp/channels/src/sass/base/_css_variables.scss b/webapp/channels/src/sass/base/_css_variables.scss index 470744db2ec3e..7a5ee68d9da9a 100644 --- a/webapp/channels/src/sass/base/_css_variables.scss +++ b/webapp/channels/src/sass/base/_css_variables.scss @@ -78,7 +78,7 @@ --elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12); --elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12); - //Corner Radius variables + // Corner Radius variables --radius-xs: 2px; --radius-s: 4px; --radius-m: 8px; @@ -86,6 +86,11 @@ --radius-xl: 16px; --radius-full: 50%; + // Border variables + --border-default: solid 1px rgba(var(--center-channel-color-rgb), 0.12); + --border-light: solid 1px rgba(var(--center-channel-color-rgb), 0.08); + --border-dark: solid 1px rgba(var(--center-channel-color-rgb), 0.16); + // Global Header variables --global-header-background: var(--sidebar-teambar-bg); --global-header-text: var(--sidebar-header-text-color); diff --git a/webapp/channels/src/sass/base/_structure.scss b/webapp/channels/src/sass/base/_structure.scss index 0ca29b0a87c90..c380ee88f95b3 100644 --- a/webapp/channels/src/sass/base/_structure.scss +++ b/webapp/channels/src/sass/base/_structure.scss @@ -92,17 +92,46 @@ body.app__body #root { display: grid; overflow: hidden; - --columns: min-content min-content minmax(385px, 1fr) minmax(0, auto) min-content; grid-template: - 'announcement announcement announcement announcement announcement' min-content - 'header header header header header' min-content - 'team-sidebar lhs center rhs app-sidebar' - 'footer footer footer footer footer' min-content - / var(--columns); + 'header' min-content + 'main' + 'footer' min-content ; + &.channel-view { + background-color: var(--sidebar-header-bg); + --columns: min-content minmax(385px, 1fr) min-content; + grid-template: + 'announcement announcement announcement' min-content + 'header header header' min-content + 'team-sidebar main app-sidebar' + 'footer footer footer' min-content + / var(--columns); + ; + &:has(.backstage-body){ + background-color: $bg--gray; + } + } + + &.console__root { + background-color: inherit; + padding-bottom: 0; + padding-right: 0; + grid-template: + 'announcement announcement' min-content + 'header header' min-content + 'lhs center' + 'footer footer' min-content + ; + grid-template-columns: min-content auto; + } + + &.container-fluid { + background: none; + display: block; + } + > :only-child { - grid-area: center; width: 100%; } @@ -114,52 +143,123 @@ body.app__body #root { #global-header { grid-area: header; } + .team-sidebar { grid-area: team-sidebar; } + + .main-wrapper { + position: relative; + display: grid; + overflow:hidden; + background-color: var(--sidebar-bg); + border: var(--border-light); + margin: 0 4px 4px 4px; + border-radius: var(--radius-l); + grid-area: main; + grid-template: + 'lhs center rhs' + ; + grid-template-columns: min-content minmax(385px, 1fr) min-content; + + &:has(.backstage-body){ + background: inherit; + padding: 0; + margin:0; + border-radius: 0; + grid-template: + 'header' min-content + 'main' + ; + } + + &:has(#playbooks-backstageRoot){ + margin:0; + border-radius: 0; + } + } + + &:has(.app-bar){ + .main-wrapper { + margin-right:0; + } + } + + &:has(.team-sidebar){ + .main-wrapper { + margin-left: 0; + } + } + #SidebarContainer { grid-area: lhs; } + #channel_view, .product-wrapper { grid-area: center; overflow: hidden; } + .sidebar--right--width-holder { grid-area: rhs; } + #sidebar-right { - grid-area: rhs; + top: 0; + right: 0; @media screen and (min-width: 768px) { position: absolute; - right: 0; } } + .app-bar { grid-area: app-sidebar; } &:not(.console__root) { @media screen and (max-width: 768px) { + padding-bottom: 0; + padding-right: 0; + z-index: 17; grid-template: 'announcement' min-content 'header' min-content - 'center' + 'main' auto 'footer' min-content / auto ; .team-sidebar, - #SidebarContainer, - #channel_view, - .product-wrapper, - #sidebar-right, .app-bar { - grid-area: center; + grid-area: main; } #SidebarContainer.move--right { position: relative; } + + .main-wrapper { + margin: 0; + grid-template: + 'main' + ; + padding:0; + border-radius: 0; + + #channel_view, + #SidebarContainer, + .product-wrapper, + #sidebar-right { + grid-area: main; + border-radius: 0; + } + + .channel-view { + border-radius: 0; + border: none; + box-shadow: none; + } + } } } @@ -169,10 +269,12 @@ body.app__body #root { display: none; } #sidebar-right { - position: relative; + position: absolute; width: 100%; + grid-area: center; + transition: width .25s ease-in-out; } - --columns: min-content min-content 0 1fr min-content; + --columns: min-content auto min-content; } #sidebar-right { transition: none; @@ -183,7 +285,19 @@ body.app__body #root { /* stylelint-enable -- grid-template indentation */ #channel_view.channel-view { + overflow: hidden; + border-radius: var(--radius-l); + border-left: var(--border-light); background: var(--center-channel-bg); + box-shadow: var(--elevation-1); +} + +.rhs-open #channel_view.channel-view, +.rhs-open-expanded #channel_view.channel.view { + @media screen and (min-width: 1200px) { + padding-right: 20px; + margin-right: -20px; + } } img { diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss index 3d1a3a98fa2ae..671489859ecef 100644 --- a/webapp/channels/src/sass/components/_modal.scss +++ b/webapp/channels/src/sass/components/_modal.scss @@ -46,8 +46,8 @@ color: rgb(var(--center-channel-color-rgb)); .modal-content { - border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); - border-radius: 12px; + border: var(--border-default); + border-radius: var(--radius-l); background: var(--center-channel-bg); } } @@ -150,7 +150,7 @@ grid-row-gap: 8px; &.divider { - border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08); + border-top: var(--border-light); } &.modal-footer--invisible { @@ -260,7 +260,7 @@ background: transparent; &.divider { - border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12); + border-bottom: var(--border-light); } &::before, @@ -283,7 +283,7 @@ right: 18px; width: 40px; height: 40px; - border-radius: 4px; + border-radius: var(--radius-s); color: rgba(var(--center-channel-color-rgb), 0.64); font-size: 30px; font-weight: 400; @@ -332,8 +332,8 @@ } .modal-content { - border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16); - border-radius: 12px; + border: var(--border-default); + border-radius: var(--radius-l); background: var(--sys-center-channel-bg); } @@ -996,7 +996,7 @@ .filter-controls { padding: 24px 32px; - border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.16); + border-top: var(--border-default); .filter-control__next { float: right; diff --git a/webapp/channels/src/sass/components/_popover.scss b/webapp/channels/src/sass/components/_popover.scss index 00ef2b0ca2c9d..d1cb69362ccf6 100644 --- a/webapp/channels/src/sass/components/_popover.scss +++ b/webapp/channels/src/sass/components/_popover.scss @@ -111,7 +111,7 @@ } &.bottom { - margin-top: -30px; + margin-top: -25px; } } diff --git a/webapp/channels/src/sass/components/_post-right.scss b/webapp/channels/src/sass/components/_post-right.scss index a733872e69236..88b1a307ad4bc 100644 --- a/webapp/channels/src/sass/components/_post-right.scss +++ b/webapp/channels/src/sass/components/_post-right.scss @@ -11,7 +11,6 @@ .post-right-comments-container { position: relative; - margin-right: 5px; .post { &:hover { diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss index 4709250f2044c..bb768e09b68a7 100644 --- a/webapp/channels/src/sass/layout/_headers.scss +++ b/webapp/channels/src/sass/layout/_headers.scss @@ -6,7 +6,7 @@ width: 100%; max-height: 56px; padding: 12px; - border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12); + border-bottom: var(--border-default); background: v(center-channel-bg); font-size: 14px; diff --git a/webapp/channels/src/sass/layout/_sidebar-left.scss b/webapp/channels/src/sass/layout/_sidebar-left.scss index 47d4a77497529..e9c6f3d1ffff0 100644 --- a/webapp/channels/src/sass/layout/_sidebar-left.scss +++ b/webapp/channels/src/sass/layout/_sidebar-left.scss @@ -7,7 +7,7 @@ $sidebarOpacityAnimationDuration: 0.15s; #TeamSidebar { z-index: 13; display: flex; - width: 65px; + width: 64px; height: 100%; flex-direction: column; background-color: var(--sidebar-header-bg); @@ -28,17 +28,17 @@ $sidebarOpacityAnimationDuration: 0.15s; z-index: 16; left: 0; display: flex; - width: var(--overrideLhsWidth, 240px); min-width: 240px; max-width: 240px; height: 100%; flex-direction: column; - border-right: 1px solid rgba(var(--center-channel-color-rgb), 0.12); background-color: var(--sidebar-bg); @media screen and (min-width: 769px) { + width: var(--overrideLhsWidth, 264px); min-width: 200px; max-width: 264px; + background: none; } @media screen and (min-width: 1201px) { @@ -109,8 +109,6 @@ $sidebarOpacityAnimationDuration: 0.15s; } .SidebarHeader { - background-color: var(--sidebar-header-bg); - .header__info { color: var(--sidebar-header-text-color); @@ -832,6 +830,7 @@ $sidebarOpacityAnimationDuration: 0.15s; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; + letter-spacing: 0.05em; text-align: left; text-transform: uppercase; transition: box-shadow 0.25s ease-in-out; diff --git a/webapp/channels/src/sass/layout/_sidebar-right.scss b/webapp/channels/src/sass/layout/_sidebar-right.scss index 966b1a4ef3c52..458a30bb7efad 100644 --- a/webapp/channels/src/sass/layout/_sidebar-right.scss +++ b/webapp/channels/src/sass/layout/_sidebar-right.scss @@ -43,25 +43,6 @@ padding: 0; transform: translateX(100%); - &.is-open { - body:not(.layout-changing) & { - transition: width 0.25s 0s ease-in, z-index 0.25s 0s step-end; - } - } - - &.expanded { - z-index: 13; - box-shadow: 0 8px 24px alpha-color($black, 0.24); - - .sidebar-right__body { - overflow: hidden; - } - - body:not(.layout-changing) & { - transition: width 0.25s 0s ease-in, z-index 0.15s 0.1s step-start; - } - } - .sidebar-right__table { display: table; @@ -92,8 +73,7 @@ height: 100%; flex: 1 1 auto; flex-direction: column; - border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.12); - background: v(center-channel-bg); + background: var(--center-channel-bg); .info-card { padding: 5px 15px 60px 15px; @@ -152,7 +132,7 @@ overflow: hidden; height: 2.4rem; padding: 0 8px; - border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.16); + border-left: var(--border-light); margin: 0 0 0 8px; color: rgba(var(--center-channel-color-rgb), 0.75); cursor: pointer; @@ -180,7 +160,7 @@ overflow: hidden; height: 2.4rem; padding: 0 8px; - border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.16); + border-left: var(--border-default); margin: 0 0 0 8px; color: rgba(var(--center-channel-color-rgb), 0.75); font-family: "Open Sans", sans-serif; @@ -205,8 +185,7 @@ align-items: center; justify-content: space-between; padding: 0 16px 0 0; - border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08); - background: rgba(var(--center-channel-color-rgb), 0.04); + border-bottom: var(--border-default); color: inherit; white-space: nowrap; @@ -296,6 +275,29 @@ } } +#sidebar-right { + overflow: hidden; + height: 100%; + border-left: var(--border-default); + box-shadow: var(--elevation-2); + + &.expanded { + position: absolute; + z-index: 20; + box-shadow: var(--elevation-4); + + .sidebar-right__body { + overflow: hidden; + } + } + + body:not(.layout-changing) & { + transition-duration: 250ms; + transition-property: width, z-index, box-shadow; + transition-timing-function: ease-in-out; + } +} + // global header style adjustments @media screen and (min-width: 769px) { // adjust RHS position and height @@ -303,7 +305,7 @@ // If this is changed, the interaction with the App Bar icons must be tested //(see .app-bar__icon in components/app_bar/app_bar.scss) z-index: 20; - top: 0; + box-shadow: var(--elevation-2); .sidebar-right-container { height: 100%; diff --git a/webapp/channels/src/sass/layout/_team-sidebar.scss b/webapp/channels/src/sass/layout/_team-sidebar.scss index c3c56c1fd5c81..d7dfdcb8be88e 100644 --- a/webapp/channels/src/sass/layout/_team-sidebar.scss +++ b/webapp/channels/src/sass/layout/_team-sidebar.scss @@ -4,7 +4,7 @@ width: 65px; height: 100%; flex-direction: column; - background: var(--sidebar-teambar-bg); + background-color: var(--sidebar-header-bg); text-align: center; .fa { @@ -21,7 +21,6 @@ width: 100%; flex: 0 0 auto; padding: 16px 0 6px; - background-color: var(--sidebar-teambar-bg); } .team-wrapper { @@ -29,7 +28,6 @@ overflow: hidden; height: 100%; flex: 1 1 auto; - background-color: var(--sidebar-teambar-bg); -webkit-overflow-scrolling: touch; .draggable-team-container { @@ -127,7 +125,7 @@ } .scrollbar--view { - padding-top: 15px; + padding-top: 4px; } .team-container a:hover { @@ -139,12 +137,11 @@ @media screen and (min-width: 769px) { // global header style adjustments .team-sidebar { + background: none; // use sidebar header variables for team sidebar --sidebar-teambar-bg: var(--sidebar-header-bg); --sidebar-header-text-color: var(--sidebar-text); --sidebar-teambar-bg-rgb: var(--sidebar-header-bg-rgb); --sidebar-header-text-color-rgb: var(--sidebar-text-rgb); - - border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.08); } } diff --git a/webapp/channels/src/sass/responsive/_mobile.scss b/webapp/channels/src/sass/responsive/_mobile.scss index 608cf7d5a806b..62eb5edec0e34 100644 --- a/webapp/channels/src/sass/responsive/_mobile.scss +++ b/webapp/channels/src/sass/responsive/_mobile.scss @@ -1797,7 +1797,7 @@ left: 0; &.move--right { - left: 65px; + left: 64px; } } diff --git a/webapp/channels/src/sass/routes/_backstage.scss b/webapp/channels/src/sass/routes/_backstage.scss index d0071c85e9294..c531e854266cf 100644 --- a/webapp/channels/src/sass/routes/_backstage.scss +++ b/webapp/channels/src/sass/routes/_backstage.scss @@ -28,7 +28,7 @@ overflow: auto; width: 100%; background-color: $bg--gray; - grid-area: center; + grid-area: main; } .backstage-content { diff --git a/webapp/platform/components/src/generic_modal/generic_modal.scss b/webapp/platform/components/src/generic_modal/generic_modal.scss index 7f007389cff06..425c692662fc0 100644 --- a/webapp/platform/components/src/generic_modal/generic_modal.scss +++ b/webapp/platform/components/src/generic_modal/generic_modal.scss @@ -23,13 +23,13 @@ padding: 0; &.divider { - border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08); + border-top: var(--border-light); } .form-control { height: 40px; box-sizing: border-box; - border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); + border: var(--border-default); border-radius: 4px; &:focus { @@ -96,7 +96,7 @@ border: 1px solid rgba(var(--dnd-indicator-rgb), 0.16); margin-bottom: 24px; background: rgba(var(--dnd-indicator-rgb), 0.08); - border-radius: 4px; + border-radius: var(--radius-s); span { color: var(--center-channel-color);