Skip to content

Commit

Permalink
Enhance the header UX (#60)
Browse files Browse the repository at this point in the history
* 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
catalinred authored Oct 11, 2024
1 parent 1eb0232 commit 0297fd7
Showing 30 changed files with 107 additions and 98 deletions.
3 changes: 2 additions & 1 deletion public/locales/ar/common.json
Original file line number Diff line number Diff line change
@@ -165,7 +165,8 @@
"subscribe": "اشترك الآن",
"submit-event": "إرسال الحدث على تقويم Luma",
"host-event": "استضافة الحدث على River",
"search": "بحث"
"search": "بحث",
"toggle": "تبديل"
},
"newsletter": {
"signup": "التسجيل في النشرة الإخبارية لسولانا",
5 changes: 3 additions & 2 deletions public/locales/de/common.json
Original file line number Diff line number Diff line change
@@ -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"
},
4 changes: 3 additions & 1 deletion public/locales/el/common.json
Original file line number Diff line number Diff line change
@@ -165,7 +165,9 @@
"subscribe": "Εγγραφείτε Τώρα",
"submit-event": "Υποβάλετε εκδήλωση στο ημερολόγιο Luma",
"host-event": "Φιλοξενήστε εκδήλωση στο River",
"search": "Αναζήτηση"
"search": "Αναζήτηση",
"toggle": "Μετάβαση"

},
"newsletter": {
"signup": "Εγγραφείτε στο Ενημερωτικό Δελτίο του Solana",
3 changes: 2 additions & 1 deletion public/locales/en/common.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion public/locales/es/common.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion public/locales/fi/common.json
Original file line number Diff line number Diff line change
@@ -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",
5 changes: 3 additions & 2 deletions public/locales/fr/common.json
Original file line number Diff line number Diff line change
@@ -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."
}
},
3 changes: 2 additions & 1 deletion public/locales/hi/common.json
Original file line number Diff line number Diff line change
@@ -165,7 +165,8 @@
"subscribe": "अभी ग्राहक बनें",
"submit-event": "लूमा कैलेंडर पर इवेंट सबमिट करें",
"host-event": "रिवर पर इवेंट होस्ट करें",
"search": "खोजें"
"search": "खोजें",
"toggle": "स्विच"
},
"newsletter": {
"signup": "सोलाना न्यूजलेटर पर साइन अप करें",
3 changes: 2 additions & 1 deletion public/locales/id/common.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion public/locales/it/common.json
Original file line number Diff line number Diff line change
@@ -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",
15 changes: 8 additions & 7 deletions public/locales/ja/common.json
Original file line number Diff line number Diff line change
@@ -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に移行し、「Peoples Network」をアメリカの多くの都市に提供しています。"
"description": "HeliumはSolanaに移行し、「People's Network」をアメリカの多くの都市に提供しています。"
},
"case-3": {
"title": "Dripチームは約3,000ドルで2,500万のアートワークを配布しました。",
@@ -1241,7 +1242,7 @@
"controlText": "超高速コンセンサス",
"title": "ポケットの中のWeb3",
"description1": "<solanaMobileLink>Solana Mobile</solanaMobileLink>を使用すると、ポケットの中の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": "接続する"
}
},
3 changes: 2 additions & 1 deletion public/locales/ko/common.json
Original file line number Diff line number Diff line change
@@ -165,7 +165,8 @@
"subscribe": "지금 구독하기",
"submit-event": "Luma 캘린더에 이벤트 제출",
"host-event": "River에서 이벤트 주최",
"search": "찾기"
"search": "찾기",
"toggle": "전환"
},
"newsletter": {
"signup": "Solana 뉴스레터에 가입하세요",
3 changes: 2 additions & 1 deletion public/locales/nl/common.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion public/locales/pl/common.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion public/locales/pt/common.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion public/locales/ru/common.json
Original file line number Diff line number Diff line change
@@ -165,7 +165,8 @@
"subscribe": "Подписаться сейчас",
"submit-event": "Отправить событие в календарь Luma",
"host-event": "Организовать событие на River",
"search": "Поиск"
"search": "Поиск",
"toggle": "Переключить"
},
"newsletter": {
"signup": "Подписаться на рассылку Solana",
3 changes: 2 additions & 1 deletion public/locales/tr/common.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion public/locales/uk/common.json
Original file line number Diff line number Diff line change
@@ -165,7 +165,8 @@
"subscribe": "Підписатися зараз",
"submit-event": "Надіслати подію в календар Luma",
"host-event": "Організувати подію на River",
"search": "Пошук"
"search": "Пошук",
"toggle": "Переключити"
},
"newsletter": {
"signup": "Підпишіться на розсилку Solana",
3 changes: 2 additions & 1 deletion public/locales/vi/common.json
Original file line number Diff line number Diff line change
@@ -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",
11 changes: 6 additions & 5 deletions public/locales/zh/common.json
Original file line number Diff line number Diff line change
@@ -142,7 +142,7 @@
},
{
"question": "为什么我要运行验证节点?",
"answer": "验证者可以通过帮助保护 Solana 网络来赚取 SOL。<economicslink>这里</economicslink>是经济概述,<stakinglink>这里</stakinglink>是质押奖励概述。验证者还通过增加去中心化来帮助提高网络的抗审查性。"
"answer": "验证者可以通过帮助保护 Solana 网络来赚取 SOL。<economicslink>这里</economicslink>是经济概述,<stakinglink>这里</stakinglink>是质���奖励概述。验证者还通过增加去中心化来帮助提高网络的抗审查性。"
}
]
}
@@ -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 支付?<helioLink>点击这里</helioLink>"
}
}
@@ -1228,7 +1229,7 @@
"climate": {
"controlText": "低碳足迹",
"title": "关注环境的技术",
"description1": "在 Solana 上,区块链交易使用的能量大约与 <emissionsLink> 一些在线搜索的能量相同 </emissionsLink>。 借助 <emissionsLink> 实时排放测量 </emissionsLink>,你可以确信你所构建的技术不仅具有性能,而且致力于提高能源效率。",
"description1": "在 Solana 上,区块链交易使用的能量大约与 <emissionsLink> 一些在线搜索的能量相同 </emissionsLink>。 借助 <emissionsLink> 实时排放测量 </emissionsLink>,你可以确信你所构建的技术不仅具���性能,而且致力于提高能源效率。",
"description2": "直接嵌入Solana节点的排放跟踪软件随时间提供全面和动态的测量。该数据集细节丰富,开放且免费使用,使验证者或任何在Solana上的开发者都可以评估他们对网络碳足迹的贡献,并探索缓解策略。"
},
"payment": {
8 changes: 8 additions & 0 deletions public/src/img/icons/Moon.inline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions public/src/img/icons/Sun.inline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 0 additions & 16 deletions public/src/img/icons/color-mode-dark.svg

This file was deleted.

16 changes: 0 additions & 16 deletions public/src/img/icons/color-mode-light.svg

This file was deleted.

1 change: 0 additions & 1 deletion public/src/img/logos-solana/logotype-dark.svg

This file was deleted.

1 change: 1 addition & 0 deletions public/src/img/logos-solana/logotype.inline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion public/src/img/logos-solana/logotype.svg

This file was deleted.

39 changes: 14 additions & 25 deletions src/components/Header.js
Original file line number Diff line number Diff line change
@@ -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 = "" }) => {
<header className={`position-sticky sticky-top ${className}`}>
<Navbar id="navbar" expand="lg" variant="">
<div className={`container-xl ${containerClassName}`}>
<Link to="/" className="d-flex">
<Image
alt="Solana"
src={theme === "dark" ? SolanaLogo : SolanaLogoDark}
<Link to="/" className="d-flex" aria-label="Solana">
<SolanaLogo
style={{ color: "var(--body-text)" }}
width={149}
height={22}
priority
/>
</Link>

@@ -93,10 +78,14 @@ const Header = ({ className = "", containerClassName = "" }) => {
/>

{isThemePage && (
<ThemeToggleButton
<button
className={styles.header__toggle}
onClick={toggleTheme}
aria-label="Toggle theme"
/>
aria-label={t("commands.toggle")}
>
{theme === "light" && <Moon />}
{theme === "dark" && <Sun />}
</button>
)}
</div>
</div>
19 changes: 19 additions & 0 deletions src/components/Header.module.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
11 changes: 4 additions & 7 deletions src/components/breakpoint/BreakpointHeader.jsx
Original file line number Diff line number Diff line change
@@ -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 }}
>
<div className="container-xl">
<Link to="/" className="d-flex">
<Image
alt="Solana"
src={SolanaLogo}
<Link to="/" className="d-flex" aria-label="Solana">
<SolanaLogo
style={{ color: "var(--body-text)" }}
width={149}
height={22}
priority
/>
</Link>

0 comments on commit 0297fd7

Please sign in to comment.