From 5a48bb59adf0dee2de91b733ab71ab722dbbadfa Mon Sep 17 00:00:00 2001 From: Maarten Zuidhoorn Date: Tue, 28 Jan 2025 12:02:57 +0100 Subject: [PATCH] Implement redesigned header --- src/assets/fox.svg | 24 +++++++ src/assets/logo.svg | 62 +------------------ src/components/ColorModeToggle.tsx | 14 ++--- src/components/Header.tsx | 13 ++-- src/components/Logo.tsx | 44 ++++--------- src/components/icons/bell.svg | 3 + src/components/icons/dark-mode.svg | 8 ++- src/components/icons/globe.svg | 5 ++ src/components/icons/index.ts | 8 ++- src/components/icons/notification.svg | 5 +- src/components/icons/search.svg | 13 +++- .../filter/components/FilterSearchInput.tsx | 16 ++--- .../components/NoNotifications.tsx | 4 +- .../components/NotificationsButton.tsx | 13 ++-- src/locales/de-DE/messages.po | 15 +++-- src/locales/en-US/messages.po | 15 +++-- src/locales/ja-JP/messages.po | 15 +++-- src/locales/pt-BR/messages.po | 15 +++-- src/locales/ru-RU/messages.po | 15 +++-- src/locales/tr-TR/messages.po | 15 +++-- src/locales/zh-CN/messages.po | 15 +++-- src/theme/components/button.ts | 47 +++++--------- src/theme/components/index.ts | 2 + src/theme/components/input.ts | 31 ++++++++++ src/theme/semantic-tokens.ts | 17 ++++- 25 files changed, 206 insertions(+), 228 deletions(-) create mode 100644 src/assets/fox.svg create mode 100644 src/components/icons/bell.svg create mode 100644 src/components/icons/globe.svg create mode 100644 src/theme/components/input.ts diff --git a/src/assets/fox.svg b/src/assets/fox.svg new file mode 100644 index 0000000000..32c6519347 --- /dev/null +++ b/src/assets/fox.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo.svg b/src/assets/logo.svg index c4aa5b4e67..344d84eff8 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,61 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/src/components/ColorModeToggle.tsx b/src/components/ColorModeToggle.tsx index 461233b647..a95514257a 100644 --- a/src/components/ColorModeToggle.tsx +++ b/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 ( - ) : ( - - ) - } + icon={} onClick={toggleColorMode} /> ); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d8b8a9017e..8975e11f71 100644 --- a/src/components/Header.tsx +++ b/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 = (props) => ( width="100%" zIndex="sticky" > - + = (props) => ( - - + + + + diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index 43eb3163e7..65a02ec7c7 100644 --- a/src/components/Logo.tsx +++ b/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 ( - <> - - - + - - - + // @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" + /> + ); }; diff --git a/src/components/icons/bell.svg b/src/components/icons/bell.svg new file mode 100644 index 0000000000..f76a5b7d44 --- /dev/null +++ b/src/components/icons/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icons/dark-mode.svg b/src/components/icons/dark-mode.svg index 7965801dd2..d85ce61f91 100644 --- a/src/components/icons/dark-mode.svg +++ b/src/components/icons/dark-mode.svg @@ -1,4 +1,6 @@ - - - + + + + + diff --git a/src/components/icons/globe.svg b/src/components/icons/globe.svg new file mode 100644 index 0000000000..34f31fff8b --- /dev/null +++ b/src/components/icons/globe.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index ebfb00d50f..a9322ac7c8 100644 --- a/src/components/icons/index.ts +++ b/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`, diff --git a/src/components/icons/notification.svg b/src/components/icons/notification.svg index d40c1c0450..b56d481c71 100644 --- a/src/components/icons/notification.svg +++ b/src/components/icons/notification.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/src/components/icons/search.svg b/src/components/icons/search.svg index 81812d7ea0..5ec0c7ef42 100644 --- a/src/components/icons/search.svg +++ b/src/components/icons/search.svg @@ -1,4 +1,11 @@ - - + + + + + + + + + + diff --git a/src/features/filter/components/FilterSearchInput.tsx b/src/features/filter/components/FilterSearchInput.tsx index 5fbb1a1703..d438eb242c 100644 --- a/src/features/filter/components/FilterSearchInput.tsx +++ b/src/features/filter/components/FilterSearchInput.tsx @@ -34,24 +34,18 @@ export const FilterSearchInput: FunctionComponent = }; return ( - - - + + + ); diff --git a/src/features/notifications/components/NoNotifications.tsx b/src/features/notifications/components/NoNotifications.tsx index b2fcfffe99..8420785568 100644 --- a/src/features/notifications/components/NoNotifications.tsx +++ b/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 = () => (
( maxWidth={['calc(100vw - 2rem)', null, '17.188rem']} margin={['auto', '4', '10']} > - + No updates diff --git a/src/features/notifications/components/NotificationsButton.tsx b/src/features/notifications/components/NotificationsButton.tsx index 74d2dc9e08..6381db8fb2 100644 --- a/src/features/notifications/components/NotificationsButton.tsx +++ b/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; @@ -24,14 +24,13 @@ export const NotificationsButton: ComponentWithAs< {...props} position="relative" aria-label={_(t`Open notifications menu`)} - variant="clear" + variant="outline" icon={ <> - svg > rect': { fillOpacity: 1, diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po index 7e8ee55de8..036e9cb39e 100644 --- a/src/locales/de-DE/messages.po +++ b/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." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Farbmodus umschalten" diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po index 3775966f4f..dbd75d6f7e 100644 --- a/src/locales/en-US/messages.po +++ b/src/locales/en-US/messages.po @@ -331,10 +331,6 @@ msgstr "" msgid "Dropdown" msgstr "" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "" @@ -505,6 +501,10 @@ msgstr "" msgid "Knowledge Base" msgstr "" +#: src/components/icons/index.ts +msgid "Language" +msgstr "Language" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -596,6 +596,7 @@ msgstr "" msgid "Notification" msgstr "" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "" @@ -664,11 +665,8 @@ msgid "Screenshot for {name}" msgstr "Screenshot for {name}" #: src/components/icons/index.ts -msgid "Search" -msgstr "" - #: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" +msgid "Search" msgstr "" #: src/components/icons/index.ts @@ -786,6 +784,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "" #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "" diff --git a/src/locales/ja-JP/messages.po b/src/locales/ja-JP/messages.po index 334664726d..0a1c154ed1 100644 --- a/src/locales/ja-JP/messages.po +++ b/src/locales/ja-JP/messages.po @@ -336,10 +336,6 @@ msgstr "MetaMaskをダウンロード" msgid "Dropdown" msgstr "ドロップダウン" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "ダークモードを有効にする" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "ライトモードを有効にする" @@ -510,6 +506,10 @@ msgstr "キーの復元" msgid "Knowledge Base" msgstr "知識ベース" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "更新はありません" msgid "Notification" msgstr "通知" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "通知" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "{name}のスクリーンショット" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "検索" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Snapの検索" - #: 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 "MetaMask Snapsを使用するには、ブラウザに最新バージョン (11.0) のMetaMaskが必要です。<0>詳細はこちら。" #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "カラーモードを切り替える" diff --git a/src/locales/pt-BR/messages.po b/src/locales/pt-BR/messages.po index c247c09a48..42c986a731 100644 --- a/src/locales/pt-BR/messages.po +++ b/src/locales/pt-BR/messages.po @@ -336,10 +336,6 @@ msgstr "Baixar MetaMask" msgid "Dropdown" msgstr "Suspenso" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "Ativar modo escuro" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "Ativar modo claro" @@ -510,6 +506,10 @@ msgstr "Recuperação de chave" msgid "Knowledge Base" msgstr "Base de conhecimento" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "Nenhuma atualização" msgid "Notification" msgstr "Notificação" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "Notificações" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "Capturas de tela de {name}" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "Pesquisar" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Pesquisar Snaps" - #: 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 "Para usar o MetaMask Snaps, você precisa da versão mais recente (11.0) da MetaMask em seu navegador. <0>Saiba mais." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Alternar modo colorido" diff --git a/src/locales/ru-RU/messages.po b/src/locales/ru-RU/messages.po index af69d56f87..b5ac83c1d9 100644 --- a/src/locales/ru-RU/messages.po +++ b/src/locales/ru-RU/messages.po @@ -336,10 +336,6 @@ msgstr "Скачать MetaMask" msgid "Dropdown" msgstr "Выпадающее меню" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "Включить темный режим" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "Включить светлый режим" @@ -510,6 +506,10 @@ msgstr "Восстановление ключа" msgid "Knowledge Base" msgstr "База знаний" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "Нет обновлений" msgid "Notification" msgstr "Уведомление" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "Уведомления" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "Скриншот для {name}" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "Поиск" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Поиск Snaps" - #: 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 "Для использования MetaMask Snaps вам нужна последняя версия MetaMask (11.0) в вашем браузере. <0>Подробнее." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Сменить цветовой режим" diff --git a/src/locales/tr-TR/messages.po b/src/locales/tr-TR/messages.po index ab933659d5..5c9a6254b5 100644 --- a/src/locales/tr-TR/messages.po +++ b/src/locales/tr-TR/messages.po @@ -336,10 +336,6 @@ msgstr "MetaMask'i İndir" msgid "Dropdown" msgstr "Açılır Menü" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "Karanlık modu etkinleştir" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "Aydınlık modu etkinleştir" @@ -510,6 +506,10 @@ msgstr "Anahtar Kurtarma" msgid "Knowledge Base" msgstr "Bilgi Tabanı" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "Güncelleme yok" msgid "Notification" msgstr "Bildirim" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "Bildirimler" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "{name} için ekran görüntüsü" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "Ara" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Snap'leri Ara" - #: 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 "MetaMask Snaps'i kullanmak için tarayıcınızda en yeni MetaMask sürümüne (11.0) ihtiyacınız vardır. <0>Daha fazla bilgi alın." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Renk modunu değiştir" diff --git a/src/locales/zh-CN/messages.po b/src/locales/zh-CN/messages.po index 9a64ea3599..f7ee2e4630 100644 --- a/src/locales/zh-CN/messages.po +++ b/src/locales/zh-CN/messages.po @@ -336,10 +336,6 @@ msgstr "下载 MetaMask" msgid "Dropdown" msgstr "下拉菜单" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "启用深色模式" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "启用浅色模式" @@ -510,6 +506,10 @@ msgstr "密钥恢复" msgid "Knowledge Base" msgstr "知识库" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "无更新" msgid "Notification" msgstr "通知" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "通知" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "{name} 的截图" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "搜索" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "搜索 Snap" - #: 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 "如需使用 MetaMask Snaps，您需要在浏览器中使用最新版本（11.0）的 MetaMask。<0>了解更多信息。" #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "切换颜色模式" diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index 2c4a5dd79e..1be017988c 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -2,51 +2,32 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; export const Button = defineStyleConfig({ baseStyle: defineStyle({ + borderRadius: 'full', + color: 'text.default', + lineHeight: '1', + textTransform: 'uppercase', _hover: { opacity: '0.75', }, }), variants: { - solid: defineStyle({ - bg: '#24272A', - textColor: 'white', - _hover: { - bg: '#0376C9', - }, - _active: { - bg: '#0376C9', - }, - }), - primary: defineStyle({ - height: '48px', - borderRadius: '30px', - background: 'info.default', - fontSize: 'md', + background: 'primary.default', + fontSize: 'sm', fontWeight: '500', - lineHeight: '157%', - color: 'white', - borderColor: 'info.default', - padding: '4', - _hover: { - _disabled: { - background: 'info.default', - }, - }, + paddingX: '6', + paddingY: '4', + color: 'text.dark', }), outline: defineStyle({ - height: '48px', - borderRadius: '30px', - background: 'transparent', - fontSize: 'md', - fontWeight: '500', - lineHeight: '157%', - color: 'info.default', border: '1.5px solid', - borderColor: 'info.default', - padding: '4', + borderColor: 'text.default', + fontSize: 'sm', + fontWeight: '500', + paddingX: '6', + paddingY: '4', }), filter: defineStyle({ diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts index f45a8ccbbb..bffa2cd916 100644 --- a/src/theme/components/index.ts +++ b/src/theme/components/index.ts @@ -2,6 +2,7 @@ import { Button } from './button'; import { Container } from './container'; import { Divider } from './divider'; import { Heading } from './heading'; +import { Input } from './input'; import { Link } from './link'; import { Menu } from './menu'; import { Modal } from './modal'; @@ -15,6 +16,7 @@ export const components = { Container, Divider, Heading, + Input, Link, Menu, Modal, diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts new file mode 100644 index 0000000000..75ef2341f8 --- /dev/null +++ b/src/theme/components/input.ts @@ -0,0 +1,31 @@ +import { inputAnatomy } from '@chakra-ui/anatomy'; +import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; + +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(inputAnatomy.keys); + +export const Input = defineMultiStyleConfig({ + baseStyle: { + field: { + color: 'text.default', + fontSize: 'sm', + borderRadius: 'full', + paddingX: '6', + paddingY: '4', + _placeholder: { + color: 'text.default', + textTransform: 'uppercase', + fontWeight: '500', + }, + }, + }, + + variants: { + outline: definePartsStyle({ + field: { + borderWidth: '0.094rem', + borderColor: 'text.default', + }, + }), + }, +}); diff --git a/src/theme/semantic-tokens.ts b/src/theme/semantic-tokens.ts index 092acd38dd..10d83ea3de 100644 --- a/src/theme/semantic-tokens.ts +++ b/src/theme/semantic-tokens.ts @@ -15,12 +15,15 @@ export const semanticTokens: SemanticTokens = { colors: { text: { default: { - default: '#24272A', + default: '#0A0A0A', _dark: '#FFFFFF', }, + dark: { + default: '#0A0A0A', + }, alternative: { - default: '#535A61', - _dark: '#D6D9DC', + default: '#393D46', + _dark: '#C8CEDA', }, muted: { default: '#24272A1A', @@ -49,6 +52,14 @@ export const semanticTokens: SemanticTokens = { 'alternative-hover': { default: '#EDEFF1', _dark: '#191B1D' }, }, primary: { + default: { + default: '#FF5C16', + _dark: '#FFFFFF', + }, + alternative: { + default: '#0A0A0A', + _dark: '#BAF24A', + }, inverse: { default: '#FCFCFC', },