Apply light mobile header and border styles

cloudscape-design · Sep 20, 2023 · 030fcf4 · 030fcf4
1 parent 6d19d70
commit 030fcf4
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 82 deletions.
diff --git a/src/app-layout/visual-refresh/background.scss b/src/app-layout/visual-refresh/background.scss
@@ -10,7 +10,8 @@ div.background {
   display: contents;
 
   > .scrolling-background {
-    background-color: awsui.$color-background-layout-main;
+    //background-color: awsui.$color-background-layout-main;
+    background-color: awsui.$color-foreground-control-default;
     color: awsui.$color-text-body-default;
     grid-column: 1 / span 5;
     grid-row: 1 / 10;

diff --git a/src/app-layout/visual-refresh/background.tsx b/src/app-layout/visual-refresh/background.tsx
@@ -20,7 +20,7 @@ export default function Background() {
   }
 
   return (
-    <div className={clsx(styles.background, 'awsui-context-content-header')}>
+    <div className={clsx(styles.background)}>
       <div className={styles['scrolling-background']} />
 
       {!isMobile && hasStickyBackground && (

diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
@@ -20,7 +20,9 @@
 
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
-    box-shadow: awsui.$shadow-panel;
+    //box-shadow: awsui.$shadow-panel;
+    box-shadow: none;
+    border-left: solid 2px awsui.$color-border-divider-default;
   }
 
   @include styles.with-motion {

diff --git a/src/app-layout/visual-refresh/header.tsx b/src/app-layout/visual-refresh/header.tsx
@@ -20,8 +20,8 @@ export default function Header() {
           [styles['has-breadcrumbs']]: breadcrumbs,
           [styles['has-notifications-content']]: hasNotificationsContent,
           [styles.unfocusable]: hasDrawerViewportOverlay,
-        },
-        'awsui-context-content-header'
+        }
+        //'awsui-context-content-header'
       )}
     >
       {contentHeader}

diff --git a/src/app-layout/visual-refresh/index.tsx b/src/app-layout/visual-refresh/index.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { AppLayoutInternalsProvider } from './context';
 import { AppLayoutProps } from '../interfaces';
 import Background from './background';
-import Breadcrumbs from './breadcrumbs';
 import Drawers from './drawers';
 import Header from './header';
 import Layout from './layout';
@@ -31,8 +30,6 @@ const AppLayoutWithRef = React.forwardRef(function AppLayout(
 
           <Notifications />
 
-          <Breadcrumbs />
-
           <Header />
 
           <Main />

diff --git a/src/app-layout/visual-refresh/mobile-toolbar.scss b/src/app-layout/visual-refresh/mobile-toolbar.scss
@@ -9,32 +9,37 @@
 
 section.mobile-toolbar {
   align-items: center;
-  background-color: awsui.$color-background-home-header;
-  border-bottom: 1px solid awsui.$color-border-divider-default;
-  box-shadow: awsui.$shadow-panel-toggle;
+  //background-color: awsui.$color-background-home-header;
+  border-bottom: 2px solid awsui.$color-border-divider-default;
+  //box-shadow: awsui.$shadow-panel-toggle;
   box-sizing: border-box;
-  height: var(#{custom-props.$mobileBarHeight});
+  //height: var(#{custom-props.$mobileBarHeight});
   display: grid;
   grid-area: mobileToolbar;
-  grid-column: 1 / span 5;
+  grid-column: 2 / span 3;
   grid-template-columns: auto minmax(0, 1fr) auto;
   padding: 0 awsui.$space-m;
   position: sticky;
   top: var(#{custom-props.$offsetTop});
   z-index: 1000;
 
+  // Custom CSS
+  height: 48px;
+  background-color: awsui.$color-foreground-control-default;
+
   > .mobile-toolbar-nav {
     grid-column: 1;
     margin-right: awsui.$space-m;
   }
 
   > .mobile-toolbar-breadcrumbs {
     grid-column: 2;
-    background-color: awsui.$color-background-layout-main;
+    //background-color: awsui.$color-background-layout-main;
+    background-color: awsui.$color-foreground-control-default;
   }
 
   > .mobile-toolbar-tools {
-    grid-column: 3;
+    grid-column: 2;
     margin-left: awsui.$space-m;
   }
 }
diff --git a/src/app-layout/visual-refresh/mobile-toolbar.tsx b/src/app-layout/visual-refresh/mobile-toolbar.tsx
@@ -25,7 +25,7 @@ export default function MobileToolbar() {
     toolsRefs,
   } = useAppLayoutInternals();
 
-  if (!isMobile || (navigationHide && !breadcrumbs && toolsHide && drawers.length === 0)) {
+  if (navigationHide && !breadcrumbs && toolsHide && drawers.length === 0) {
     return null;
   }
 
@@ -38,8 +38,8 @@ export default function MobileToolbar() {
           [styles.unfocusable]: hasDrawerViewportOverlay,
           [testutilStyles['mobile-bar']]: isMobile,
         },
-        testutilStyles['mobile-bar'],
-        'awsui-context-content-header'
+        testutilStyles['mobile-bar']
+        //'awsui-context-content-header'
       )}
     >
       {!navigationHide && (

diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
@@ -87,7 +87,9 @@ nav.show-navigation {
 
 nav.navigation {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
+  //box-shadow: awsui.$shadow-panel;
+  box-shadow: none;
+  border-right: solid 2px awsui.$color-border-divider-default;
   bottom: 0;
   height: 100%;
   overflow-x: hidden;

diff --git a/src/app-layout/visual-refresh/navigation.tsx b/src/app-layout/visual-refresh/navigation.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useAppLayoutInternals } from './context';
 import { InternalButton } from '../../button/internal';
-import TriggerButton from './trigger-button';
+//import TriggerButton from './trigger-button';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 import { Transition } from '../../internal/components/transition';
@@ -63,27 +63,6 @@ export default function Navigation() {
           // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.
           style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}
         >
-          {!isMobile && (
-            <nav
-              aria-hidden={isMobile || isNavigationOpen ? true : false}
-              aria-label={ariaLabels?.navigation ?? undefined}
-              className={clsx(styles['show-navigation'], {
-                [styles.animating]: state === 'exiting',
-                [styles['is-navigation-open']]: isNavigationOpen,
-              })}
-              ref={state === 'exiting' ? transitionEventsRef : undefined}
-            >
-              <TriggerButton
-                ariaLabel={ariaLabels?.navigationToggle}
-                ariaExpanded={isNavigationOpen ? undefined : false}
-                iconName="menu"
-                className={testutilStyles['navigation-toggle']}
-                onClick={() => handleNavigationClick(true)}
-                ref={navigationRefs.toggle}
-              />
-            </nav>
-          )}
-
           <nav
             aria-label={ariaLabels?.navigation ?? undefined}
             className={clsx(

diff --git a/src/app-layout/visual-refresh/split-panel.scss b/src/app-layout/visual-refresh/split-panel.scss
@@ -121,7 +121,9 @@ section.split-panel-side {
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
-    box-shadow: awsui.$shadow-panel;
+    //box-shadow: awsui.$shadow-panel;
+    box-shadow: none;
+    border-left: solid 2px awsui.$color-border-divider-default;
     max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
     min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
     &.animating {

diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
@@ -61,7 +61,9 @@ viewport size and state of the Tools drawer.
 
 .tools {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
+  //box-shadow: awsui.$shadow-panel;
+  box-shadow: none;
+  border-left: solid 2px awsui.$color-border-divider-default;
   flex-shrink: 0;
   height: 100%;
   overflow-y: auto;

diff --git a/src/app-layout/visual-refresh/tools.tsx b/src/app-layout/visual-refresh/tools.tsx
@@ -4,9 +4,9 @@ import React from 'react';
 import clsx from 'clsx';
 import { InternalButton } from '../../button/internal';
 import { useAppLayoutInternals } from './context';
-import TriggerButton from './trigger-button';
+//import TriggerButton from './trigger-button';
 import styles from './styles.css.js';
-import splitPanelStyles from '../../split-panel/styles.css.js';
+//import splitPanelStyles from '../../split-panel/styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 import { Transition } from '../../internal/components/transition';
 import customCssProps from '../../internal/generated/custom-css-properties';
@@ -28,7 +28,7 @@ export default function Tools({ children }: ToolsProps) {
     ariaLabels,
     disableBodyScroll,
     drawers,
-    handleSplitPanelClick,
+    //handleSplitPanelClick,
     handleToolsClick,
     hasDefaultToolsWidth,
     hasDrawerViewportOverlay,
@@ -37,11 +37,11 @@ export default function Tools({ children }: ToolsProps) {
     isToolsOpen,
     loseToolsFocus,
     splitPanel,
-    splitPanelControlId,
+    //splitPanelControlId,
     splitPanelDisplayed,
     splitPanelPosition,
-    splitPanelRefs,
-    splitPanelToggle,
+    //splitPanelRefs,
+    //splitPanelToggle,
     tools,
     toolsControlId,
     toolsHide,
@@ -50,7 +50,7 @@ export default function Tools({ children }: ToolsProps) {
   } = useAppLayoutInternals();
 
   const hasSplitPanel = !!splitPanel && getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);
-  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);
+  //const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);
   const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);
   const isUnfocusable = hasDrawerViewportOverlay && !isToolsOpen;
 
@@ -118,7 +118,7 @@ export default function Tools({ children }: ToolsProps) {
             </aside>
           )}
 
-          {!isMobile && (
+          {/* {!isMobile && (
             <aside
               aria-hidden={!hasToolsForm ? true : false}
               aria-label={ariaLabels?.tools ?? undefined}
@@ -156,7 +156,7 @@ export default function Tools({ children }: ToolsProps) {
                 />
               )}
             </aside>
-          )}
+          )} */}
         </div>
       )}
     </Transition>
@@ -194,34 +194,34 @@ function getSplitPanelStatus(splitPanelDisplayed: boolean, splitPanelPosition: s
  * In large viewports, however the Tools form and its corresponding buttons
  * should be present in the UI under the below circumstances.
  */
-function getToolsFormStatus(
-  hasSplitPanel: boolean,
-  isMobile: boolean,
-  isSplitPanelOpen?: boolean,
-  isToolsOpen?: boolean,
-  toolsHide?: boolean
-) {
-  let hasToolsForm = false;
-
-  if (!isMobile) {
-    // Both the Split Panel and Tools button are needed
-    if (hasSplitPanel && !toolsHide) {
-      hasToolsForm = true;
-    }
-
-    // The Split Panel button is needed
-    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {
-      hasToolsForm = true;
-    }
-
-    // The Tools button is needed
-    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {
-      hasToolsForm = true;
-    }
-  }
-
-  return hasToolsForm;
-}
+// function getToolsFormStatus(
+//   hasSplitPanel: boolean,
+//   isMobile: boolean,
+//   isSplitPanelOpen?: boolean,
+//   isToolsOpen?: boolean,
+//   toolsHide?: boolean
+// ) {
+//   let hasToolsForm = false;
+
+//   if (!isMobile) {
+//     // Both the Split Panel and Tools button are needed
+//     if (hasSplitPanel && !toolsHide) {
+//       hasToolsForm = true;
+//     }
+
+//     // The Split Panel button is needed
+//     if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {
+//       hasToolsForm = true;
+//     }
+
+//     // The Tools button is needed
+//     if (!hasSplitPanel && !toolsHide && !isToolsOpen) {
+//       hasToolsForm = true;
+//     }
+//   }
+
+//   return hasToolsForm;
+// }
 
 /**
  * Under two scenarios the Tools form that contains the triggers

diff --git a/src/internal/components/selectable-item/styles.scss b/src/internal/components/selectable-item/styles.scss
@@ -6,6 +6,10 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 
+$selected-item-background: awsui.$color-background-status-info;
+//$selected-item-border: #539FE5;
+$selected-item-border: awsui.$color-border-item-selected;
+
 // Outer borders of adjacent cells overlap and we want selected option border
 // to take precedence over the other ones, hence negative margins and z-indices
 .selectable-item {
@@ -64,7 +68,10 @@
   }
 
   &.selected {
-    background-color: awsui.$color-background-dropdown-item-selected;
+    //background-color: awsui.$color-background-dropdown-item-selected;
+    background-color: $selected-item-background;
+    border-color: $selected-item-border;
+    z-index: 1000;
     // smooth adjacent selected borders to avoid bubble effect (visual refresh)
     &.next-item-selected {
       border-bottom-left-radius: 0;

diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
@@ -145,7 +145,9 @@
 
   &::after {
     @include utils.base-pseudo-element;
-    box-shadow: awsui.$shadow-container;
+    //box-shadow: awsui.$shadow-container;
+    box-shadow: none;
+    border: solid 2px awsui.$color-border-divider-default;
     border-radius: awsui.$border-radius-container;
     mix-blend-mode: multiply;
   }