MM-56975 UI Incremental Refinements (mattermost#26407)

* updated styles to include rounded corners and updated backgrounds/containers * updated snapshots * removed background from app bar top * removed top padding from lhs * updated name of container to better match the grid name in css * fixed lint issue with css * update snapshot * adjusted padding/margin * use radius variables * remove margin and border radius from plabooks for now * fixed tasklist * minor tweaks to menus * add global border variables and use in key places * fixed grid issues with login page and backstage * use border variable * adjust padding in global header * fixed type issues * tweaks to spacing * fixed margin issue on backstage * fixed padding on global header * minor tweaks to header and apps bar * removed background from apps bar * updates to header and app bar and team icon * updated more borders and radii to use variables * fixed style lint issue * adjust letter spacing on category labels * fix lint issue * fixed position of popover * address UX feedback
devinbinnie · May 8, 2024 · 8fa6757 · 8fa6757
1 parent f00efe5
commit 8fa6757
Show file tree

Hide file tree

Showing 37 changed files with 363 additions and 246 deletions.
diff --git a/webapp/channels/src/components/app_bar/app_bar.scss b/webapp/channels/src/components/app_bar/app_bar.scss
@@ -4,19 +4,18 @@
 @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
     @media (max-width: 768px) {
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = ({
             </CSSTransition>
             <div
                 ref={setPopperElement}
-                style={style}
+                style={style.container}
                 {...attributes.popper}
             >
                 {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
@@ -99,33 +99,37 @@ exports[`components/Root Routes Should mount public product routes 1`] = `
       <GlobalHeader />
       <CloudEffectsWrapper />
       <withRouter(Connect(TeamSidebar)) />
-      <Switch>
-        <Route
-          key="productwithpublic-public"
-          path="/productwithpublic/public"
-          render={[Function]}
-        />
-        <Route
-          key="productwithpublic"
-          path="/productwithpublic"
-          render={[Function]}
-        />
-        <Route
-          key="productwithoutpublic"
-          path="/productwithoutpublic"
-          render={[Function]}
+      <div
+        className="main-wrapper"
+      >
+        <Switch>
+          <Route
+            key="productwithpublic-public"
+            path="/productwithpublic/public"
+            render={[Function]}
+          />
+          <Route
+            key="productwithpublic"
+            path="/productwithpublic"
+            render={[Function]}
+          />
+          <Route
+            key="productwithoutpublic"
+            path="/productwithoutpublic"
+            render={[Function]}
+          />
+          <LoggedInRoute
+            component={[Function]}
+            path="/:team([a-z0-9\\\\-_]+)"
+            theme={Object {}}
+          />
+          <Connect(RootRedirect) />
+        </Switch>
+        <Connect(Pluggable)
+          pluggableName="Global"
         />
-        <LoggedInRoute
-          component={[Function]}
-          path="/:team([a-z0-9\\\\-_]+)"
-          theme={Object {}}
-        />
-        <Connect(RootRedirect) />
-      </Switch>
-      <Connect(Pluggable)
-        pluggableName="Global"
-      />
-      <withRouter(Connect(SidebarRight)) />
+        <withRouter(Connect(SidebarRight)) />
+      </div>
       <AppBar />
       <Connect(Component) />
     </CompassThemeProvider>