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 = () => {
}
+ variant="outline"
+ icon={}
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 = (props) => (
width="100%"
zIndex="sticky"
>
-
+
= (props) => (
-
-
+
-
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 @@
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 =
forwardRef(({ query, onFormClick, onFormChange, onFormSubmit }, ref) => {
const { _ } = useLingui();
- const handleKeyDown = (event: React.KeyboardEvent) => {
+ const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Enter') {
onFormSubmit();
}
@@ -41,7 +41,7 @@ export const FilterSearchInput: FunctionComponent =
- svg > rect': {
- fillOpacity: 1,
- },
- '& > svg > path': {
- fill: 'text.alternative',
- },
- }}
- />
+
{hasUnacknowledgedUpdates && (
)}
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',
+ },
},
}),
},