Add search to mobile, fix light mode drawer background

website/src/components/layout/Header.tsx

@@ -5,7 +5,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import AppBar from '@mui/material/AppBar';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
 import Link from 'next/link';
 import { useCallback, useMemo, useState } from 'react';
@@ -106,6 +106,7 @@ interface HeaderProps {
 }
 
 const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderProps) => {
+  const theme = useTheme();
   const [mobileOpen, setMobileOpen] = useState(false);
 
   const handleDrawerToggle = useCallback(() => {
@@ -151,10 +152,10 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
             <MenuIcon fontSize="large" />
           </StyledMenuButton>
           <Logo />
-          <Search searchablePages={searchablePages} />
           <StyledIconsWrapper>
+            <Search searchablePages={searchablePages} />
             <IconButton
-              sx={{ ml: 1 }}
+              sx={{ [theme.breakpoints.up('lg')]: { ml: 1 } }}
               onClick={toggleColorMode}
               color="inherit"
               title={mode === 'dark' ? 'Turn on the light' : 'Turn off the light'}

website/src/components/layout/Logo.tsx

@@ -2,46 +2,19 @@ import { styled } from '@mui/material/styles';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import transientOptions from '../../util/transientOptions';
-
-interface StyledImageLinkProps {
-  $inDrawer: boolean;
-}
-
-const StyledImageLink = styled(
-  'a',
-  transientOptions,
-)<StyledImageLinkProps>(
-  ({ theme, $inDrawer }) => `
+const StyledImageLink = styled('a')`
   display: flex;
   align-items: center;
-
-    ${
-      !$inDrawer
-        ? `
-          ${theme.breakpoints.down('lg')} {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-          }
-        `
-        : ''
-    }
-  `,
-);
+`;
 
 const StyledImage = styled(Image)`
   cursor: pointer;
 `;
 
-interface LogoProps {
-  inDrawer?: boolean;
-}
-
-const Logo = ({ inDrawer = false }: LogoProps) => {
+const Logo = () => {
   return (
     <Link href="/">
-      <StyledImageLink $inDrawer={inDrawer}>
+      <StyledImageLink>
         <StyledImage src="/static-cms-logo.svg" width={182} height={72} />
       </StyledImageLink>
     </Link>

website/src/components/layout/mobile-drawer/NavigationDrawer.tsx

@@ -12,14 +12,19 @@ import type { MenuItem } from '../../../interface';
 const DRAWER_WIDTH = 300;
 
 const StyledDrawerContents = styled('div')`
-  padding-top: 16px;
   text-align: center;
 `;
 
-const StyledLogoWrapper = styled('div')`
+const StyledLogoWrapper = styled('div')(
+  ({ theme }) => `
     display: flex;
     justify-content: center;
-`;
+    padding: 16px 0;
+    background: ${
+      theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.background.paper
+    };
+  `,
+);
 
 interface NavigationDrawerProps {
   items: MenuItem[];
@@ -39,9 +44,9 @@ const NavigationDrawer = ({ items, mobileOpen, onMobileOpenToggle }: NavigationD
     () => (
       <StyledDrawerContents key="drawer-nav-contents" onClick={onMobileOpenToggle}>
         <StyledLogoWrapper key="drawer-nav-logo-wrapper">
-          <Logo key="drawer-nav-logo" inDrawer />
+          <Logo key="drawer-nav-logo" />
         </StyledLogoWrapper>
-        <Divider key="drawer-nav-divider" sx={{ borderColor: 'rgba(255, 255, 255, 0.8)', pt: 2 }} />
+        <Divider key="drawer-nav-divider" sx={{ borderColor: 'rgba(255, 255, 255, 0.8)' }} />
         <List key="drawer-nav-list">
           {items.map(item => (
             <MobileNavItem key={`drawer-nav-item-${item.title}`} item={item} />
@@ -84,7 +89,7 @@ const NavigationDrawer = ({ items, mobileOpen, onMobileOpenToggle }: NavigationD
           boxSizing: 'border-box',
           width: '80%',
           maxWidth: DRAWER_WIDTH,
-          background: '#2e3034',
+          background: theme.palette.background.paper,
         },
         '& .MuiListSubheader-root': {
           textAlign: 'left',

website/src/components/layout/search/Search.tsx

@@ -3,6 +3,7 @@ import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import { useCallback, useState } from 'react';
+import IconButton from '@mui/material/IconButton';
 
 import SearchModal from './SearchModal';
 
@@ -33,6 +34,14 @@ const StyledSearchPlaceholderBox = styled(Button)(
   `,
 );
 
+const StyledIconButton = styled(IconButton)(
+  ({ theme }) => `
+    ${theme.breakpoints.up('lg')} {
+      display: none;
+    }
+  `,
+);
+
 export interface SearchProps {
   searchablePages: SearchablePage[];
 }
@@ -65,6 +74,9 @@ const Search = ({ searchablePages }: SearchProps) => {
           Search the docs
         </Typography>
       </StyledSearchPlaceholderBox>
+      <StyledIconButton onClick={handleOpen} color="inherit">
+        <SearchIcon />
+      </StyledIconButton>
       <SearchModal open={open} onClose={handleClose} searchablePages={searchablePages} />
     </>
   );

website/src/styles/theme.ts

@@ -13,10 +13,10 @@ const useCreateTheme = (mode: PaletteMode) => {
         ? {
             mode,
             primary: {
-              main: '#3764be',
+              main: '#1b72de',
             },
             secondary: {
-              main: '#3764be',
+              main: '#1b72de',
             },
             background: {
               default: '#f9f9f9',