Update header again

MetaMask · Jan 29, 2025 · f145af5 · f145af5
1 parent 5a48bb5
commit f145af5
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 27 deletions.
diff --git a/src/components/ColorModeToggle.tsx b/src/components/ColorModeToggle.tsx
@@ -13,8 +13,8 @@ export const ColorModeToggle: FunctionComponent = () => {
     <IconButton
       flexShrink="0"
       aria-label={_(t`Toggle color mode`)}
-      variant="clear"
-      icon={<DarkModeIcon width="0.75rem" color="text.default" />}
+      variant="outline"
+      icon={<DarkModeIcon width="0.75rem" />}
       onClick={toggleColorMode}
     />
   );

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,10 +1,9 @@
 import type { BoxProps } from '@chakra-ui/react';
-import { Button, Box, Container, Stack } from '@chakra-ui/react';
+import { 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';
 
@@ -27,7 +26,7 @@ export const Header: FunctionComponent<HeaderProps> = (props) => (
     width="100%"
     zIndex="sticky"
   >
-    <Container maxWidth="100%">
+    <Container maxWidth="7xl">
       <Stack
         direction="row"
         alignItems="center"
@@ -40,13 +39,9 @@ export const Header: FunctionComponent<HeaderProps> = (props) => (
           </Stack>
         </Link>
         <Stack direction="row" gap="4">
-          <GlobeIcon flexShrink="0" />
-          <ColorModeToggle />
           <FilterSearch />
+          <ColorModeToggle />
           <Notifications />
-          <Button flexShrink="0" variant="primary">
-            Download
-          </Button>
         </Stack>
       </Stack>
     </Container>

diff --git a/src/components/icons/bell.svg b/src/components/icons/bell.svg
diff --git a/src/features/filter/components/FilterSearchInput.tsx b/src/features/filter/components/FilterSearchInput.tsx
@@ -6,7 +6,7 @@ import {
 } from '@chakra-ui/react';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
-import type { ChangeEvent, FunctionComponent } from 'react';
+import type { ChangeEvent, FunctionComponent, KeyboardEvent } from 'react';
 
 import { SearchIcon } from '../../../components';
 
@@ -27,7 +27,7 @@ export const FilterSearchInput: FunctionComponent<FilterSearchInputProps> =
   forwardRef(({ query, onFormClick, onFormChange, onFormSubmit }, ref) => {
     const { _ } = useLingui();
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter') {
         onFormSubmit();
       }
@@ -41,7 +41,7 @@ export const FilterSearchInput: FunctionComponent<FilterSearchInputProps> =
         <Input
           type="search"
           variant="outline"
-          placeholder={_(t`Search`)}
+          placeholder={_(t`Search Snaps`)}
           value={query}
           onChange={onFormChange}
           onClick={onFormClick}

diff --git a/src/features/notifications/components/NotificationsButton.tsx b/src/features/notifications/components/NotificationsButton.tsx
@@ -27,19 +27,7 @@ export const NotificationsButton: ComponentWithAs<
       variant="outline"
       icon={
         <>
-          <NotificationIcon
-            color="text.default"
-            width="0.638rem"
-            height="0.75rem"
-            sx={{
-              '& > svg > rect': {
-                fillOpacity: 1,
-              },
-              '& > svg > path': {
-                fill: 'text.alternative',
-              },
-            }}
-          />
+          <NotificationIcon width="0.638rem" height="0.75rem" />
           {hasUnacknowledgedUpdates && (
             <DotIcon position="absolute" top="0" right="0" />
           )}

diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts
@@ -28,6 +28,15 @@ export const Button = defineStyleConfig({
       fontWeight: '500',
       paddingX: '6',
       paddingY: '4',
+      _hover: {
+        opacity: '1',
+        background: 'text.default',
+        color: 'background.default',
+      },
+      _active: {
+        background: 'text.alternative',
+        color: 'background.default',
+      },
     }),
 
     filter: defineStyle({

diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts
@@ -25,6 +25,10 @@ export const Input = defineMultiStyleConfig({
       field: {
         borderWidth: '0.094rem',
         borderColor: 'text.default',
+        _hover: {
+          borderColor: 'text.default',
+          background: 'background.alternative',
+        },
       },
     }),
   },