Implement redesigned header

src/components/ColorModeToggle.tsx

@@ -3,24 +3,18 @@ import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import type { FunctionComponent } from 'react';
 
-import { DarkModeIcon, LightModeIcon } from './icons';
+import { DarkModeIcon } from './icons';
 
 export const ColorModeToggle: FunctionComponent = () => {
   const { _ } = useLingui();
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { toggleColorMode } = useColorMode();
 
   return (
     <IconButton
-      marginLeft="auto"
+      flexShrink="0"
       aria-label={_(t`Toggle color mode`)}
       variant="clear"
-      icon={
-        colorMode === 'light' ? (
-          <DarkModeIcon width="2.25rem" />
-        ) : (
-          <LightModeIcon width="2.25rem" fill="text.alternative" />
-        )
-      }
+      icon={<DarkModeIcon width="0.75rem" color="text.default" />}
       onClick={toggleColorMode}
     />
   );

src/components/Header.tsx

@@ -1,9 +1,10 @@
 import type { BoxProps } from '@chakra-ui/react';
-import { Box, Container, Stack } from '@chakra-ui/react';
+import { Button, Box, Container, Stack } from '@chakra-ui/react';
 import { Link } from 'gatsby';
 import type { FunctionComponent } from 'react';
 
 import { ColorModeToggle } from './ColorModeToggle';
+import { GlobeIcon } from './icons';
 import { Logo } from './Logo';
 import { FilterSearch, Notifications } from '../features';
 
@@ -26,7 +27,7 @@ export const Header: FunctionComponent<HeaderProps> = (props) => (
     width="100%"
     zIndex="sticky"
   >
-    <Container maxWidth="7xl">
+    <Container maxWidth="100%">
       <Stack
         direction="row"
         alignItems="center"
@@ -38,10 +39,14 @@ export const Header: FunctionComponent<HeaderProps> = (props) => (
             <Logo />
           </Stack>
         </Link>
-        <Stack direction="row" gap="2">
-          <FilterSearch />
+        <Stack direction="row" gap="4">
+          <GlobeIcon flexShrink="0" />
           <ColorModeToggle />
+          <FilterSearch />
           <Notifications />
+          <Button flexShrink="0" variant="primary">
+            Download
+          </Button>
         </Stack>
       </Stack>
     </Container>

src/components/Logo.tsx

@@ -1,7 +1,6 @@
-import { Box, useColorMode } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import type { FunctionComponent } from 'react';
 
-import SmallLogo from './icons/metamask.svg';
 import SvgLogo from '../assets/logo.svg';
 
 /**
@@ -10,37 +9,18 @@ import SvgLogo from '../assets/logo.svg';
  * @returns A React component.
  */
 export const Logo: FunctionComponent = () => {
-  const { colorMode } = useColorMode();
-
-  const fill = colorMode === 'light' ? '#161616' : 'white';
   return (
-    <>
-      <Box
-        width="11.95rem"
-        height="1.5rem"
-        display={{ base: 'none', md: 'block' }}
-      >
-        <SvgLogo
-          width="100%"
-          height="100%"
-          role="img"
-          aria-label="MetaMask Snaps Directory"
-          fill={fill}
-        />
-      </Box>
+    <Box width="4.103rem" height="2.039rem">
       <Box
-        width="1.603rem"
-        height="1.5rem"
-        display={{ base: 'block', md: 'none' }}
-      >
-        <SmallLogo
-          width="100%"
-          height="100%"
-          role="img"
-          aria-label="MetaMask Snaps Directory"
-          fill={fill}
-        />
-      </Box>
-    </>
+        // @ts-expect-error - SVG is a React component but TypeScript thinks
+        // it's a string.
+        as={SvgLogo}
+        width="100%"
+        height="100%"
+        role="img"
+        aria-label="MetaMask Snaps Directory"
+        fill="primary.alternative"
+      />
+    </Box>
   );
 };

src/components/icons/index.ts

@@ -3,6 +3,7 @@ import { defineMessage } from '@lingui/macro';
 import BaseAddSquareIcon from './add-square.svg';
 import BaseAddUserIcon from './add-user.svg';
 import BaseBackIcon from './back.svg';
+import BaseBellIcon from './bell.svg';
 import BaseCheckThinIcon from './check-thin.svg';
 import BaseCheckIcon from './check.svg';
 import BaseClockIcon from './clock.svg';
@@ -17,6 +18,7 @@ import BaseExternalLinkIcon from './external-link.svg';
 import BaseFilterIcon from './filter.svg';
 import BaseFlashIcon from './flash.svg';
 import BaseGlobalIcon from './global.svg';
+import BaseGlobeIcon from './globe.svg';
 import BaseHierarchyIcon from './hierarchy.svg';
 import BaseHomeIcon from './home.svg';
 import { wrapIcon } from './Icon';
@@ -50,6 +52,8 @@ export const AddUserIcon = wrapIcon(BaseAddUserIcon, defineMessage`Add user`);
 
 export const BackIcon = wrapIcon(BaseBackIcon, defineMessage`Back`);
 
+export const BellIcon = wrapIcon(BaseBellIcon, defineMessage`Notifications`);
+
 export const ClockIcon = wrapIcon(BaseClockIcon, defineMessage`Clock`);
 
 export const CloseIcon = wrapIcon(BaseCloseIcon, defineMessage`Close`);
@@ -60,7 +64,7 @@ export const CheckThinIcon = wrapIcon(BaseCheckThinIcon, defineMessage`Check`);
 
 export const DarkModeIcon = wrapIcon(
   BaseDarkModeIcon,
-  defineMessage`Enable dark mode`,
+  defineMessage`Toggle color mode`,
 );
 
 export const DocumentCodeIcon = wrapIcon(
@@ -90,6 +94,8 @@ export const FlashIcon = wrapIcon(BaseFlashIcon, defineMessage`Flash`);
 
 export const GlobalIcon = wrapIcon(BaseGlobalIcon, defineMessage`Global`);
 
+export const GlobeIcon = wrapIcon(BaseGlobeIcon, defineMessage`Language`);
+
 export const HierarchyIcon = wrapIcon(
   BaseHierarchyIcon,
   defineMessage`Hierarchy`,

src/features/filter/components/FilterSearchInput.tsx

@@ -34,24 +34,18 @@ export const FilterSearchInput: FunctionComponent<FilterSearchInputProps> =
     };
 
     return (
-      <InputGroup background="background.default" borderRadius="full" ref={ref}>
-        <InputLeftElement pointerEvents="none">
-          <SearchIcon width="1.25rem" color="green" />
+      <InputGroup ref={ref}>
+        <InputLeftElement>
+          <SearchIcon />
         </InputLeftElement>
         <Input
           type="search"
-          borderRadius="full"
-          placeholder={_(t`Search Snaps`)}
+          variant="outline"
+          placeholder={_(t`Search`)}
           value={query}
           onChange={onFormChange}
           onClick={onFormClick}
           onKeyDown={handleKeyDown}
-          border="none"
-          background="background.alternative"
-          _focusVisible={{
-            border: 'none',
-            outline: 'none',
-          }}
         />
       </InputGroup>
     );

src/features/notifications/components/NoNotifications.tsx

@@ -2,7 +2,7 @@ import { Center, Heading, Text } from '@chakra-ui/react';
 import { Trans } from '@lingui/macro';
 import type { FunctionComponent } from 'react';
 
-import { Fox } from '../../../components';
+import Fox from '../../../assets/fox.svg';
 
 export const NoNotifications: FunctionComponent = () => (
   <Center
@@ -11,7 +11,7 @@ export const NoNotifications: FunctionComponent = () => (
     maxWidth={['calc(100vw - 2rem)', null, '17.188rem']}
     margin={['auto', '4', '10']}
   >
-    <Fox width={200} />
+    <Fox />
     <Heading as="h3" fontSize="2xl" color="text.alternative" marginTop="3">
       <Trans>No updates</Trans>
     </Heading>

src/features/notifications/components/NotificationsButton.tsx

@@ -4,7 +4,7 @@ import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 import { getUnacknowledgedUpdates } from '../..';
-import { DotIcon, NotificationsIcon } from '../../../components';
+import { DotIcon, NotificationIcon } from '../../../components';
 import { useSelector } from '../../../hooks';
 
 export type NotificationsButtonProps = Partial<IconButtonProps>;
@@ -24,14 +24,13 @@ export const NotificationsButton: ComponentWithAs<
       {...props}
       position="relative"
       aria-label={_(t`Open notifications menu`)}
-      variant="clear"
+      variant="outline"
       icon={
         <>
-          <NotificationsIcon
-            fill="icon.alternative"
-            cursor="pointer"
-            width="2.25rem"
-            height="2.25rem"
+          <NotificationIcon
+            color="text.default"
+            width="0.638rem"
+            height="0.75rem"
             sx={{
               '& > svg > rect': {
                 fillOpacity: 1,

src/locales/de-DE/messages.po

@@ -336,10 +336,6 @@ msgstr "MetaMask herunterladen"
 msgid "Dropdown"
 msgstr "Dropdown"
 
-#: src/components/icons/index.ts
-msgid "Enable dark mode"
-msgstr "Dunkelmodus aktivieren"
-
 #: src/components/icons/index.ts
 msgid "Enable light mode"
 msgstr "Lichtmodus aktivieren"
@@ -510,6 +506,10 @@ msgstr "Schlüsselwiederherstellung"
 msgid "Knowledge Base"
 msgstr "Wissensdatenbank"
 
+#: src/components/icons/index.ts
+msgid "Language"
+msgstr ""
+
 #: src/features/filter/constants.tsx
 #: src/pages/index.tsx
 msgid "Latest"
@@ -601,6 +601,7 @@ msgstr "Keine Updates"
 msgid "Notification"
 msgstr "Benachrichtigung"
 
+#: src/components/icons/index.ts
 #: src/components/icons/index.ts
 msgid "Notifications"
 msgstr "Benachrichtigungen"
@@ -669,13 +670,10 @@ msgid "Screenshot for {name}"
 msgstr "Screenshot für {name}"
 
 #: src/components/icons/index.ts
+#: src/features/filter/components/FilterSearchInput.tsx
 msgid "Search"
 msgstr "Suche"
 
-#: src/features/filter/components/FilterSearchInput.tsx
-msgid "Search Snaps"
-msgstr "Snaps suchen"
-
 #: src/components/icons/index.ts
 #: src/constants.ts
 msgid "Security"
@@ -791,6 +789,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in
 msgstr "Um MetaMask Snaps zu verwenden, benötigen Sie die neueste Version (11.0) von MetaMask in Ihrem Browser. <0>Erfahren Sie mehr.</0>"
 
 #: src/components/ColorModeToggle.tsx
+#: src/components/icons/index.ts
 msgid "Toggle color mode"
 msgstr "Farbmodus umschalten"