From f145af5140affdc752510b181ce393989c315662 Mon Sep 17 00:00:00 2001
From: Maarten Zuidhoorn <maarten@zuidhoorn.com>
Date: Wed, 29 Jan 2025 12:07:57 +0100
Subject: [PATCH] Update header again

---
 src/components/ColorModeToggle.tsx                 |  4 ++--
 src/components/Header.tsx                          | 11 +++--------
 src/components/icons/bell.svg                      |  2 +-
 .../filter/components/FilterSearchInput.tsx        |  6 +++---
 .../components/NotificationsButton.tsx             | 14 +-------------
 src/theme/components/button.ts                     |  9 +++++++++
 src/theme/components/input.ts                      |  4 ++++
 7 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/ColorModeToggle.tsx b/src/components/ColorModeToggle.tsx
index a95514257..02022a520 100644
--- 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
index 8975e11f7..225e4f618 100644
--- 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
index f76a5b7d4..31e3c8321 100644
--- a/src/components/icons/bell.svg
+++ b/src/components/icons/bell.svg
@@ -1,3 +1,3 @@
 <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1.59365 5.08555C1.59365 4.00199 2.02409 2.96282 2.79028 2.19663C3.55647 1.43044 4.59564 1 5.6792 1C6.76275 1 7.80193 1.43044 8.56811 2.19663C9.3343 2.96282 9.76474 4.00199 9.76474 5.08555V7.48427L10.7861 9.01635V11.2139H7.92063C7.80447 11.7213 7.51951 12.1744 7.11238 12.4988C6.70526 12.8233 6.20006 13 5.67945 13C5.15885 13 4.65365 12.8233 4.24652 12.4988C3.83939 12.1744 3.55444 11.7213 3.43828 11.2139H0.572266V9.01635L1.59365 7.48427V5.08555ZM4.50869 11.2139C4.60796 11.4418 4.7716 11.6357 4.97952 11.7719C5.18745 11.9082 5.43062 11.9807 5.6792 11.9807C5.92778 11.9807 6.17095 11.9082 6.37887 11.7719C6.5868 11.6357 6.75044 11.4418 6.84971 11.2139H4.50869ZM5.6792 2.02139C4.86653 2.02139 4.08715 2.34422 3.51251 2.91886C2.93787 3.4935 2.61504 4.27288 2.61504 5.08555V7.79375L1.59365 9.32583V10.1925H9.76474V9.32583L8.74336 7.79375V5.08555C8.74336 4.27288 8.42053 3.4935 7.84589 2.91886C7.27124 2.34422 6.49186 2.02139 5.6792 2.02139Z" fill="black" stroke="black" stroke-width="0.3"/>
+  <path d="M1.59365 5.08555C1.59365 4.00199 2.02409 2.96282 2.79028 2.19663C3.55647 1.43044 4.59564 1 5.6792 1C6.76275 1 7.80193 1.43044 8.56811 2.19663C9.3343 2.96282 9.76474 4.00199 9.76474 5.08555V7.48427L10.7861 9.01635V11.2139H7.92063C7.80447 11.7213 7.51951 12.1744 7.11238 12.4988C6.70526 12.8233 6.20006 13 5.67945 13C5.15885 13 4.65365 12.8233 4.24652 12.4988C3.83939 12.1744 3.55444 11.7213 3.43828 11.2139H0.572266V9.01635L1.59365 7.48427V5.08555ZM4.50869 11.2139C4.60796 11.4418 4.7716 11.6357 4.97952 11.7719C5.18745 11.9082 5.43062 11.9807 5.6792 11.9807C5.92778 11.9807 6.17095 11.9082 6.37887 11.7719C6.5868 11.6357 6.75044 11.4418 6.84971 11.2139H4.50869ZM5.6792 2.02139C4.86653 2.02139 4.08715 2.34422 3.51251 2.91886C2.93787 3.4935 2.61504 4.27288 2.61504 5.08555V7.79375L1.59365 9.32583V10.1925H9.76474V9.32583L8.74336 7.79375V5.08555C8.74336 4.27288 8.42053 3.4935 7.84589 2.91886C7.27124 2.34422 6.49186 2.02139 5.6792 2.02139Z" fill="currentColor" stroke="currentColor" stroke-width="0.3"/>
 </svg>
diff --git a/src/features/filter/components/FilterSearchInput.tsx b/src/features/filter/components/FilterSearchInput.tsx
index d438eb242..91801c49f 100644
--- 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
index 6381db8fb..e035dfc9f 100644
--- 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
index 1be017988..8a5a90c0d 100644
--- 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
index 75ef2341f..faa924994 100644
--- 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',
+        },
       },
     }),
   },