From 0297fd76386b8ef11807f8a9e7554666542e4233 Mon Sep 17 00:00:00 2001 From: Catalin Rosu Date: Fri, 11 Oct 2024 16:14:32 +0300 Subject: [PATCH] Enhance the header UX (#60) * Improve logo display * aria-label for A11Y purposes * Use inline SVG too * Localize the "toggle" string * Enhance the toggle button * Revert some string translations here --- public/locales/ar/common.json | 3 +- public/locales/de/common.json | 5 ++- public/locales/el/common.json | 4 +- public/locales/en/common.json | 3 +- public/locales/es/common.json | 3 +- public/locales/fi/common.json | 3 +- public/locales/fr/common.json | 5 ++- public/locales/hi/common.json | 3 +- public/locales/id/common.json | 3 +- public/locales/it/common.json | 3 +- public/locales/ja/common.json | 15 +++---- public/locales/ko/common.json | 3 +- public/locales/nl/common.json | 3 +- public/locales/pl/common.json | 3 +- public/locales/pt/common.json | 3 +- public/locales/ru/common.json | 3 +- public/locales/tr/common.json | 3 +- public/locales/uk/common.json | 3 +- public/locales/vi/common.json | 3 +- public/locales/zh/common.json | 11 +++--- public/src/img/icons/Moon.inline.svg | 8 ++++ public/src/img/icons/Sun.inline.svg | 8 ++++ public/src/img/icons/color-mode-dark.svg | 16 -------- public/src/img/icons/color-mode-light.svg | 16 -------- public/src/img/logos-solana/logotype-dark.svg | 1 - .../src/img/logos-solana/logotype.inline.svg | 1 + public/src/img/logos-solana/logotype.svg | 1 - src/components/Header.js | 39 +++++++------------ src/components/Header.module.scss | 19 +++++++++ .../breakpoint/BreakpointHeader.jsx | 11 ++---- 30 files changed, 107 insertions(+), 98 deletions(-) create mode 100644 public/src/img/icons/Moon.inline.svg create mode 100644 public/src/img/icons/Sun.inline.svg delete mode 100644 public/src/img/icons/color-mode-dark.svg delete mode 100644 public/src/img/icons/color-mode-light.svg delete mode 100644 public/src/img/logos-solana/logotype-dark.svg create mode 100644 public/src/img/logos-solana/logotype.inline.svg delete mode 100644 public/src/img/logos-solana/logotype.svg create mode 100644 src/components/Header.module.scss diff --git a/public/locales/ar/common.json b/public/locales/ar/common.json index 375742ec4..b9ca5df29 100644 --- a/public/locales/ar/common.json +++ b/public/locales/ar/common.json @@ -165,7 +165,8 @@ "subscribe": "اشترك الآن", "submit-event": "إرسال الحدث على تقويم Luma", "host-event": "استضافة الحدث على River", - "search": "بحث" + "search": "بحث", + "toggle": "تبديل" }, "newsletter": { "signup": "التسجيل في النشرة الإخبارية لسولانا", diff --git a/public/locales/de/common.json b/public/locales/de/common.json index adbde6181..cb0aad19d 100644 --- a/public/locales/de/common.json +++ b/public/locales/de/common.json @@ -165,7 +165,8 @@ "subscribe": "Jetzt abonnieren", "submit-event": "Ereignis im Luma-Kalender einreichen", "host-event": "Ereignis auf River veranstalten", - "search": "Suchen" + "search": "Suchen", + "toggle": "Umschalten" }, "newsletter": { "signup": "Abonnieren Sie den Solana-Newsletter", @@ -427,7 +428,7 @@ }, "anchor-docs": { "title": "Anchor-Dokumentation", - "description": "Erstellen Sie schnell sichere Solana-Programme in Rust mit dem Anchor-Framework." + "description": "Erstelle schnell sichere Solana-Programme in Rust mit dem Anchor-Framework." }, "view-all": "Alle anzeigen" }, diff --git a/public/locales/el/common.json b/public/locales/el/common.json index 1223a99a0..ceed6afba 100644 --- a/public/locales/el/common.json +++ b/public/locales/el/common.json @@ -165,7 +165,9 @@ "subscribe": "Εγγραφείτε Τώρα", "submit-event": "Υποβάλετε εκδήλωση στο ημερολόγιο Luma", "host-event": "Φιλοξενήστε εκδήλωση στο River", - "search": "Αναζήτηση" + "search": "Αναζήτηση", + "toggle": "Μετάβαση" + }, "newsletter": { "signup": "Εγγραφείτε στο Ενημερωτικό Δελτίο του Solana", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 0ac9821e7..544f431a0 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -165,7 +165,8 @@ "subscribe": "Subscribe Now", "submit-event": "Submit event on Luma calendar", "host-event": "Host event on River", - "search": "Search" + "search": "Search", + "toggle": "Toggle" }, "newsletter": { "signup": "Sign up to the Solana Newsletter", diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 1b9756e86..9ada94303 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -165,7 +165,8 @@ "subscribe": "Suscríbete ahora", "submit-event": "Enviar evento en el calendario de Luma", "host-event": "Organizar evento en River", - "search": "Buscar" + "search": "Buscar", + "toggle": "Alternar" }, "newsletter": { "signup": "Regístrate en el Boletín de Solana", diff --git a/public/locales/fi/common.json b/public/locales/fi/common.json index 949ed1c19..b3f4fce01 100644 --- a/public/locales/fi/common.json +++ b/public/locales/fi/common.json @@ -165,7 +165,8 @@ "subscribe": "Tilaa Nyt", "submit-event": "Lähetä tapahtuma Luma-kalenteriin", "host-event": "Isännöi tapahtumaa Riverissä", - "search": "Haku" + "search": "Haku", + "toggle": "Vaihda" }, "newsletter": { "signup": "Tilaa Solanan uutiskirje", diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json index 1b7a1f2b5..45b09f1d3 100644 --- a/public/locales/fr/common.json +++ b/public/locales/fr/common.json @@ -165,7 +165,8 @@ "subscribe": "S'abonner maintenant", "submit-event": "Soumettre un événement sur le calendrier Luma", "host-event": "Organiser un événement sur River", - "search": "Rechercher" + "search": "Rechercher", + "toggle": "Basculer" }, "newsletter": { "signup": "S'abonner à la newsletter Solana", @@ -1163,7 +1164,7 @@ }, "judging": { "title": "Jugement", - "description-1": "Les gagnants des projets seront sélectionnés en fonction de leurs plans d'affaires viables et de l'innovation produit qu'ils présentent – la perspicacité commerciale, la réflexion centrée sur l'utilisateur, la direction créative, l'utilisation innovante de la technologie Solana et l'application dans le monde réel joueront tous un rôle dans l'identification des soumissions gagnantes.", + "description-1": "Les gagnants des projets seront sélectionnés en fonction de leurs plans d'affaires viables et de l'innovation produit qu'ils présentent – la perspicacité commerciale, la réflexion centrée sur l'utilisateur, la direction créative, leur histoire, leur utilisation innovante de la technologie Solana et leur application dans le monde réel joueront tous un rôle dans l'identification des soumissions gagnantes.", "description-2": "Les juges réduiront les candidatures à dix finalistes. À partir de là, en partenariat avec leur mentor, les finalistes présenteront leur pitch en personne. Parmi les dix finalistes, un total de cinq projets NFT seront reconnus comme gagnants." } }, diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index cb435a3ac..fdaef3759 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -165,7 +165,8 @@ "subscribe": "अभी ग्राहक बनें", "submit-event": "लूमा कैलेंडर पर इवेंट सबमिट करें", "host-event": "रिवर पर इवेंट होस्ट करें", - "search": "खोजें" + "search": "खोजें", + "toggle": "स्विच" }, "newsletter": { "signup": "सोलाना न्यूजलेटर पर साइन अप करें", diff --git a/public/locales/id/common.json b/public/locales/id/common.json index 5b7cb952b..0669c242d 100644 --- a/public/locales/id/common.json +++ b/public/locales/id/common.json @@ -165,7 +165,8 @@ "subscribe": "Berlangganan Sekarang", "submit-event": "Kirim acara di kalender Luma", "host-event": "Selenggarakan acara di River", - "search": "Cari" + "search": "Cari", + "toggle": "Tampilkan" }, "newsletter": { "signup": "Mendaftar untuk Berita Solana", diff --git a/public/locales/it/common.json b/public/locales/it/common.json index 362099d4c..49d0aec98 100644 --- a/public/locales/it/common.json +++ b/public/locales/it/common.json @@ -165,7 +165,8 @@ "subscribe": "Iscriviti Ora", "submit-event": "Invia evento sul calendario Luma", "host-event": "Ospita evento su River", - "search": "Cerca" + "search": "Cerca", + "toggle": "Attiva" }, "newsletter": { "signup": "Iscriviti alla Newsletter di Solana", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 64bc3f9ba..395f4a24a 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -165,7 +165,8 @@ "subscribe": "今すぐ登録", "submit-event": "Lumaカレンダーにイベントを送信", "host-event": "Riverでイベントを主催", - "search": "検索" + "search": "検索", + "toggle": "切り替え" }, "newsletter": { "signup": "Solanaニュースレターに登録", @@ -258,7 +259,7 @@ "error": { "title": "エラー！", "voting-ended": "投票期間が終了し、もう投票できません。", - "unknown": "エラーが発生しました。後でもう一度お試しください。" + "unknown": "エラーが発生しました。後でもう一��お試しください。" } } }, @@ -308,7 +309,7 @@ }, "clearspace": { "title": "クリアスペース", - "description": "ロゴマークが周囲のアートワーク、画像、またはページの端によって混雑しないようにするために、一定のスペースが必要です。以下は、ロゴマークとワードマークの最小スペースです。" + "description": "ロゴマークが周囲のアートワーク、画像、またはページの端によって混雑しないようにするために、一定のスペースが必要です。以下は、ロマークとワードマークの最小スペースです。" }, "colors": { "title": "色", @@ -1143,7 +1144,7 @@ "heading": "Solana NFT ショーダウン", "lead": "次世代のNFTブランドを育成", "description-1": "壮大な対決の準備をしてください！Solana Foundationは、すべてのクリエイターにこのユニークなNFTピッチコンペティションでビジネスアイデアを実現するよう呼びかけています。業界の専門家やNFTコミュニティリーダーと協力する機会を得るための貴重なチャンスです。ファッション、エンターテインメント、ゲーム、クリエイティブエージェンシーなどの分野で実世界の製品を作成することを目指す新しいSolana NFTブランドを求めています。", - "description-2": "NFTブランドは、賢明な起業家がビジネスプランを開始し、持続可能なコミュニティを構築するための素晴らしい方法です。あなたが情熱を持っているクリエイティブなコンセプトとビジネスピッチを持っていますか？柔軟性とスケールを提供するさまざまな新しいSolanaツールにアクセスし、活用するこのチャンスを活かしてください。プロジェクトの受賞者は、実行可能なビジネスプランと彼らが示す製品の革新性に基づいて選ばれます。審査員は、あなたのビジョンを現実にするために必要な知識を提供するためにガイダンスを提供します。", + "description-2": "NFTブランドは、賢明な起業家がビジネスプランを開始し、持続可能なコミュニティを構築するための素晴らしい方法です。あなたが情熱を持っているクリエイティブなコンセプトとビジネスピッチを持っていますか？柔軟性とスケールを提供するさまざまな新しいSolanaツールにアクセスし、活用することができます。プロジェクトの受賞者は、実行可能なビジネスプランと彼らが示す製品の革新性に基づいて選ばれます。審査員は、あなたのビジョンを現実にするために必要な知識を提供するためにガイダンスを提供します。", "description-3": "これは、取締役会にふさわしいピッチを作成する時です。以下にメールアドレスを入力して、最新情報とタイミングを把握してください。提出期間は6月初旬に開始されます。ピッチの準備を始めて、頑張ってください！", "description-4": "完全なピッチガイドラインについては、以下のFAQをご覧ください。" }, @@ -1196,7 +1197,7 @@ }, "case-2": { "title": "Helium Mobileはコミュニティ主導の5Gサービスを提供します。", - "description": "HeliumはSolanaに移行し、「People’s Network」をアメリカの多くの都市に提供しています。" + "description": "HeliumはSolanaに移行し、「People's Network」をアメリカの多くの都市に提供しています。" }, "case-3": { "title": "Dripチームは約3,000ドルで2,500万のアートワークを配布しました。", @@ -1241,7 +1242,7 @@ "controlText": "超高速コンセンサス", "title": "ポケットの中のWeb3", "description1": "Solana Mobileを使用すると、ポケットの中のWeb3がついに実現します。世界クラスの暗号電話、モバイルdAppストア、モバイルスタックを組み合わせ、高速で安全なブロックチェーン技術に支えられた無限の可能性が広がります。", - "description2": "Solana MobileのSaga電話は、Web3の新しいモバイル時代を切り開いています。プレミアムなハードウェアだけでなく、独自のdAppストアを備えており、お気に入りのDeFiプロトコル、NFTマーケットプレイス、Web3アプリに外出先でアクセスできます。さらに、電話のセキュアなシードボールトを使用すると、お気に入りのウォレットで安全に取引し、プライベートキーを保護し、指紋を使用してトランザクションに署名できます。" + "description2": "Solana MobileのSaga電話は、Web3の新しいモバイル時代を切り開いています。プレミアムなハードウェアだけでなく、独自のdAppストアを備えており、お気に入���のDeFiプロトコル、NFTマーケットプレイス、Web3アプリに外出先でアクセスできます。さらに、電話のセキュアなシードボールトを使用すると、お気に入りのウォレットで安全に取引し、プライベートキーを保護し、指紋を使用してトランザクションに署名できます。" }, "solanaMobile": { "controlText": "モバイル対応" @@ -1262,7 +1263,7 @@ }, "community": { "title": "コミュニティとつながる", - "description": "Telegram、Reddit、Discord、Meetupsなど、グローバルな開発者、トークンホルダー、バリデーター、サポーターのコミュニティに接続するためのプラットフォームを見つけてください。", + "description": "Telegram、Reddit、Discord、Meetupsなど、グローバルな開発者、トークンホルダー、バリデーター、サポーターのコミュニティに接するためのプラットフォームを見つけてください。", "cta": "接続する" } }, diff --git a/public/locales/ko/common.json b/public/locales/ko/common.json index 58cf35d5d..4abd80305 100644 --- a/public/locales/ko/common.json +++ b/public/locales/ko/common.json @@ -165,7 +165,8 @@ "subscribe": "지금 구독하기", "submit-event": "Luma 캘린더에 이벤트 제출", "host-event": "River에서 이벤트 주최", - "search": "찾기" + "search": "찾기", + "toggle": "전환" }, "newsletter": { "signup": "Solana 뉴스레터에 가입하세요", diff --git a/public/locales/nl/common.json b/public/locales/nl/common.json index 503ea622e..aedd95ce1 100644 --- a/public/locales/nl/common.json +++ b/public/locales/nl/common.json @@ -165,7 +165,8 @@ "subscribe": "Abonneer Nu", "submit-event": "Dien evenement in op Luma kalender", "host-event": "Host evenement op River", - "search": "Zoeken" + "search": "Zoeken", + "toggle": "Schakel" }, "newsletter": { "signup": "Meld u aan voor de Solana nieuwsbrief", diff --git a/public/locales/pl/common.json b/public/locales/pl/common.json index 48b04be0e..1065d0a15 100644 --- a/public/locales/pl/common.json +++ b/public/locales/pl/common.json @@ -165,7 +165,8 @@ "subscribe": "Zasubskrybuj", "submit-event": "Zgłoś wydarzenie w kalendarzu Luma", "host-event": "Zorganizuj wydarzenie na River", - "search": "Szukaj" + "search": "Szukaj", + "toggle": "Przełącz" }, "newsletter": { "signup": "Zapisz się do Biuletynu Solana", diff --git a/public/locales/pt/common.json b/public/locales/pt/common.json index 47b4aab55..fb24c6abd 100644 --- a/public/locales/pt/common.json +++ b/public/locales/pt/common.json @@ -165,7 +165,8 @@ "subscribe": "Inscreva-se Agora", "submit-event": "Enviar evento no calendário Luma", "host-event": "Hospedar evento no River", - "search": "Procurar" + "search": "Procurar", + "toggle": "Alternar" }, "newsletter": { "signup": "Inscreva-se na Newsletter Solana", diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json index 77f6a726d..3b6d0b8de 100644 --- a/public/locales/ru/common.json +++ b/public/locales/ru/common.json @@ -165,7 +165,8 @@ "subscribe": "Подписаться сейчас", "submit-event": "Отправить событие в календарь Luma", "host-event": "Организовать событие на River", - "search": "Поиск" + "search": "Поиск", + "toggle": "Переключить" }, "newsletter": { "signup": "Подписаться на рассылку Solana", diff --git a/public/locales/tr/common.json b/public/locales/tr/common.json index c37ffc24e..dbe1609c5 100644 --- a/public/locales/tr/common.json +++ b/public/locales/tr/common.json @@ -165,7 +165,8 @@ "subscribe": "Şimdi Abone Olun", "submit-event": "Luma takvimine etkinlik gönder", "host-event": "River'da etkinlik düzenle", - "search": "Arama" + "search": "Arama", + "toggle": "Değiştir" }, "newsletter": { "signup": "Solana Haber Bültenine kaydolun", diff --git a/public/locales/uk/common.json b/public/locales/uk/common.json index e9506213c..efaf210ba 100644 --- a/public/locales/uk/common.json +++ b/public/locales/uk/common.json @@ -165,7 +165,8 @@ "subscribe": "Підписатися зараз", "submit-event": "Надіслати подію в календар Luma", "host-event": "Організувати подію на River", - "search": "Пошук" + "search": "Пошук", + "toggle": "Переключити" }, "newsletter": { "signup": "Підпишіться на розсилку Solana", diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json index 8ac1b1262..559a9a6f4 100644 --- a/public/locales/vi/common.json +++ b/public/locales/vi/common.json @@ -165,7 +165,8 @@ "subscribe": "Theo dõi ngay", "submit-event": "Gửi sự kiện trên lịch Luma", "host-event": "Tổ chức sự kiện trên River", - "search": "Tìm kiếm" + "search": "Tìm kiếm", + "toggle": "Chuyển đổi" }, "newsletter": { "signup": "Đăng ký nhận bản tin Solana", diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json index 6a33ad7a1..f9206215a 100644 --- a/public/locales/zh/common.json +++ b/public/locales/zh/common.json @@ -142,7 +142,7 @@ }, { "question": "为什么我要运行验证节点？", - "answer": "验证者可以通过帮助保护 Solana 网络来赚取 SOL。这里是经济概述，这里是质押奖励概述。验证者还通过增加去中心化来帮助提高网络的抗审查性。" + "answer": "验证者可以通过帮助保护 Solana 网络来赚取 SOL。这里是经济概述，这里是质���奖励概述。验证者还通过增加去中心化来帮助提高网络的抗审查性。" } ] } @@ -165,7 +165,8 @@ "subscribe": "立即订阅", "submit-event": "在 Luma 日历上提交活动", "host-event": "在 River 上举办活动", - "search": "搜索" + "search": "搜索", + "toggle": "切换" }, "newsletter": { "signup": "注册以及接收 Solana 新闻通讯", @@ -239,7 +240,7 @@ }, "overview": { "title": "概览", - "description": "Solana 黑客松不是传统黑客松。它是全球性的线上活动，最有前景的创业者和建设者将在这里启动他们的加密项目，从世上顶尖投资者手中获得种子轮资助。你有没有所需的能力和素质？", + "description": "Solana ���客松不是传统黑客松。它是全球性的线上活动，最有前景的创业者和建设者将在这里启动他们的加密项目，从世上顶尖投资者手中获得种子轮资助。你有没有所需的能力和素质？", "cta": "获取通知" }, "voting": { @@ -1006,7 +1007,7 @@ }, "travel": { "title": "前往 Breakpoint", - "description": "前往 Breakpoint，签证、航班、酒店和交通。", + "description": "前往 Breakpoint，签证、航班、酒和交通。", "usdc": "想用 USDC 支付？点击这里" } } @@ -1228,7 +1229,7 @@ "climate": { "controlText": "低碳足迹", "title": "关注环境的技术", - "description1": "在 Solana 上，区块链交易使用的能量大约与 一些在线搜索的能量相同 。 借助 实时排放测量 ，你可以确信你所构建的技术不仅具有性能，而且致力于提高能源效率。", + "description1": "在 Solana 上，区块链交易使用的能量大约与 一些在线搜索的能量相同 。 借助 实时排放测量 ，你可以确信你所构建的技术不仅具���性能，而且致力于提高能源效率。", "description2": "直接嵌入Solana节点的排放跟踪软件随时间提供全面和动态的测量。该数据集细节丰富，开放且免费使用，使验证者或任何在Solana上的开发者都可以评估他们对网络碳足迹的贡献，并探索缓解策略。" }, "payment": { diff --git a/public/src/img/icons/Moon.inline.svg b/public/src/img/icons/Moon.inline.svg new file mode 100644 index 000000000..ff1db4126 --- /dev/null +++ b/public/src/img/icons/Moon.inline.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/src/img/icons/Sun.inline.svg b/public/src/img/icons/Sun.inline.svg new file mode 100644 index 000000000..4b3b2f8d8 --- /dev/null +++ b/public/src/img/icons/Sun.inline.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/src/img/icons/color-mode-dark.svg b/public/src/img/icons/color-mode-dark.svg deleted file mode 100644 index 8be180973..000000000 --- a/public/src/img/icons/color-mode-dark.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/public/src/img/icons/color-mode-light.svg b/public/src/img/icons/color-mode-light.svg deleted file mode 100644 index 61e0865f6..000000000 --- a/public/src/img/icons/color-mode-light.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/public/src/img/logos-solana/logotype-dark.svg b/public/src/img/logos-solana/logotype-dark.svg deleted file mode 100644 index 78a40f754..000000000 --- a/public/src/img/logos-solana/logotype-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/src/img/logos-solana/logotype.inline.svg b/public/src/img/logos-solana/logotype.inline.svg new file mode 100644 index 000000000..903a52711 --- /dev/null +++ b/public/src/img/logos-solana/logotype.inline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/src/img/logos-solana/logotype.svg b/public/src/img/logos-solana/logotype.svg deleted file mode 100644 index 987932a4f..000000000 --- a/public/src/img/logos-solana/logotype.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js index 207fe836f..8256fd8fe 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,34 +1,21 @@ import Navbar from "react-bootstrap/Navbar"; -import Image from "next/image"; import { useRouter } from "next/router"; import { Link } from "../utils/Link"; import { useEffect, useState } from "react"; -import SolanaLogo from "../../public/src/img/logos-solana/logotype.svg"; -import SolanaLogoDark from "../../public/src/img/logos-solana/logotype-dark.svg"; -import colorModeLight from "../../public/src/img/icons/color-mode-light.svg"; -import colorModeDark from "../../public/src/img/icons/color-mode-dark.svg"; +import SolanaLogo from "../../public/src/img/logos-solana/logotype.inline.svg"; +import Moon from "../../public/src/img/icons/Moon.inline.svg"; +import Sun from "../../public/src/img/icons/Sun.inline.svg"; import HeaderList from "./header/HeaderList"; import { DocSearch } from "@docsearch/react"; import { useTheme } from "@/themecontext"; -import styled from "styled-components"; import { useTranslation } from "react-i18next"; import DevelopersNav from "./developers/DevelopersNav/DevelopersNav"; +import styles from "./Header.module.scss"; const Header = ({ className = "", containerClassName = "" }) => { const router = useRouter(); const { theme, toggleTheme, isThemePage } = useTheme(); const { t } = useTranslation(); - const ThemeToggleButton = styled.button` - background-image: url(${({ theme }) => - theme === "light" ? colorModeLight.src : colorModeDark.src}); - background-color: transparent; - border: none; - cursor: pointer; - width: 60px; - height: 24px; - background-size: contain; - margin-left: 20px; - `; const [searchText, setSearchText] = useState("Search"); @@ -51,13 +38,11 @@ const Header = ({ className = "", containerClassName = "" }) => {
- - Solana + @@ -93,10 +78,14 @@ const Header = ({ className = "", containerClassName = "" }) => { /> {isThemePage && ( - + aria-label={t("commands.toggle")} + > + {theme === "light" && } + {theme === "dark" && } + )}
diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss new file mode 100644 index 000000000..dc90efae7 --- /dev/null +++ b/src/components/Header.module.scss @@ -0,0 +1,19 @@ +.header { + &__toggle { + display: flex; + border: none; + margin-left: 15px; + transition: + transform 0.3s ease, + rotate 0.3s ease; + + &:hover { + transform: scale(1.1); + rotate: 15deg; + + svg { + fill: var(--body-text); + } + } + } +} diff --git a/src/components/breakpoint/BreakpointHeader.jsx b/src/components/breakpoint/BreakpointHeader.jsx index 50d20df3e..3d265dc65 100644 --- a/src/components/breakpoint/BreakpointHeader.jsx +++ b/src/components/breakpoint/BreakpointHeader.jsx @@ -1,8 +1,7 @@ import Navbar from "react-bootstrap/Navbar"; -import Image from "next/image"; import Link from "../shared/Link"; import { useTranslation } from "next-i18next"; -import SolanaLogo from "../../../public/src/img/logos-solana/logotype.svg"; +import SolanaLogo from "../../../public/src/img/logos-solana/logotype.inline.svg"; const Header = () => { const { t } = useTranslation(); @@ -20,13 +19,11 @@ const Header = () => { style={{ zIndex: 1020 }} >
- - Solana +