From d4b8657c251fb203955a674725e9e055fd0a040e Mon Sep 17 00:00:00 2001 From: Shannon Tenner Date: Wed, 20 Nov 2024 09:26:19 +0200 Subject: [PATCH] wip: ui --- public/locales/af/sidebar.json | 15 +++--- public/locales/cn/sidebar.json | 15 +++--- public/locales/de/sidebar.json | 15 +++--- public/locales/en/sidebar.json | 53 ++++++++++--------- public/locales/fr/sidebar.json | 15 +++--- public/locales/hi/sidebar.json | 15 +++--- public/locales/id/sidebar.json | 15 +++--- public/locales/ja/sidebar.json | 15 +++--- public/locales/ko/sidebar.json | 15 +++--- public/locales/pl/sidebar.json | 15 +++--- public/locales/ru/sidebar.json | 15 +++--- public/locales/tr/sidebar.json | 15 +++--- .../components/Wallet/Wallet.styles.ts | 22 ++++++-- .../main/SideBar/components/Wallet/Wallet.tsx | 6 ++- src/theme/palettes/colors.ts | 15 ++++++ 15 files changed, 154 insertions(+), 107 deletions(-) diff --git a/public/locales/af/sidebar.json b/public/locales/af/sidebar.json index a300717f7..d68f8b147 100644 --- a/public/locales/af/sidebar.json +++ b/public/locales/af/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Volg jou XTM oral deur jou Universe beursie met Tari Aurora te sinkroniseer.", "paper-wallet-tooltip-title": "Sinkroniseer met Foon", "recent-wins": "Onlangse oorwinnings", + "rewards": "Rewards", "setup-scheduler": "Stel skeduleerder op", - "show-history": "Wys geskiedenis", - "wallet-balance": "Beursie balans", "share": { + "button-text": "FLEX & NOOI", + "copied": "Skakel Gekopieer!", "history-item-button": "Flex & Nooi", + "reward": "my beloning", "title": "Ek het pas tari gemyn", - "winner-pill": "Wenner van blok", - "copied": "Skakel Gekopieer!", - "button-text": "FLEX & NOOI", - "reward": "my beloning" - } + "winner-pill": "Wenner van blok" + }, + "show-history": "Wys geskiedenis", + "wallet-balance": "Beursie balans" } \ No newline at end of file diff --git a/public/locales/cn/sidebar.json b/public/locales/cn/sidebar.json index fa2049ad8..e6298196a 100644 --- a/public/locales/cn/sidebar.json +++ b/public/locales/cn/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "通过将您的宇宙钱包同步到 Tari Aurora，随时随地跟踪您的 XTM。", "paper-wallet-tooltip-title": "与手机同步", "recent-wins": "最近的胜利", + "rewards": "Rewards", "setup-scheduler": "安装计划程序", - "show-history": "显示历史记录", - "wallet-balance": "钱包余额", "share": { + "button-text": "炫耀并邀请", + "copied": "链接已复制！", "history-item-button": "炫耀并邀请", + "reward": "我的奖励", "title": "我刚刚挖掘了Tari", - "winner-pill": "区块赢家", - "copied": "链接已复制！", - "button-text": "炫耀并邀请", - "reward": "我的奖励" - } + "winner-pill": "区块赢家" + }, + "show-history": "显示历史记录", + "wallet-balance": "钱包余额" } \ No newline at end of file diff --git a/public/locales/de/sidebar.json b/public/locales/de/sidebar.json index bda83aac7..dc7723c4a 100644 --- a/public/locales/de/sidebar.json +++ b/public/locales/de/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Verfolgen Sie Ihr XTM überall, indem Sie Ihr Universum-Wallet mit Tari Aurora synchronisieren.", "paper-wallet-tooltip-title": "Mit Telefon synchronisieren", "recent-wins": "Kürzliche Gewinne", + "rewards": "Rewards", "setup-scheduler": "Scheduler einrichten", - "show-history": "Verlauf anzeigen", - "wallet-balance": "Wallet-Balance", "share": { + "button-text": "FLEX & EINLADEN", + "copied": "Link kopiert!", "history-item-button": "Flex & Einladen", + "reward": "meine Belohnung", "title": "Ich habe gerade Tari gemined", - "winner-pill": "Gewinner des Blocks", - "copied": "Link kopiert!", - "button-text": "FLEX & EINLADEN", - "reward": "meine Belohnung" - } + "winner-pill": "Gewinner des Blocks" + }, + "show-history": "Verlauf anzeigen", + "wallet-balance": "Wallet-Balance" } \ No newline at end of file diff --git a/public/locales/en/sidebar.json b/public/locales/en/sidebar.json index f2add1b81..d6fac3160 100644 --- a/public/locales/en/sidebar.json +++ b/public/locales/en/sidebar.json @@ -1,27 +1,28 @@ { - "auto-miner": "Auto Miner", - "auto-miner-description": "Auto miner will turn on your miner when your machine is idle", - "block": "Block", - "hide-history": "Hide history", - "history-hide-button": "Hide History", - "history-show-button": "History", - "lost-connection": "Lost connection to the Tari Network. Reconnecting..", - "mining-schedules": "Mining Schedules", - "mining-schedules-description": "Schedule your mining activity", - "next-milestone": "Next Milestone", - "paper-wallet-button": "Sync with Phone", - "paper-wallet-tooltip-message": "Track your XTM balance anywhere by syncing Universe with Tari Aurora.", - "paper-wallet-tooltip-title": "Sync with Phone", - "recent-wins": "Recent wins", - "setup-scheduler": "Setup Scheduler", - "show-history": "Show history", - "wallet-balance": "Wallet Balance", - "share": { - "history-item-button": "Flex & Invite", - "title": "I just mined tari", - "winner-pill": "Winner of block", - "copied": "Link Copied!", - "button-text": "FLEX & INVITE", - "reward": "my reward" - } -} + "auto-miner": "Auto Miner", + "auto-miner-description": "Auto miner will turn on your miner when your machine is idle", + "block": "Block", + "hide-history": "Hide history", + "history-hide-button": "Hide History", + "history-show-button": "History", + "lost-connection": "Lost connection to the Tari Network. Reconnecting..", + "mining-schedules": "Mining Schedules", + "mining-schedules-description": "Schedule your mining activity", + "next-milestone": "Next Milestone", + "paper-wallet-button": "Sync with Phone", + "paper-wallet-tooltip-message": "Track your XTM balance anywhere by syncing Universe with Tari Aurora.", + "paper-wallet-tooltip-title": "Sync with Phone", + "recent-wins": "Recent wins", + "rewards": "Rewards", + "setup-scheduler": "Setup Scheduler", + "share": { + "button-text": "FLEX & INVITE", + "copied": "Link Copied!", + "history-item-button": "Flex & Invite", + "reward": "my reward", + "title": "I just mined tari", + "winner-pill": "Winner of block" + }, + "show-history": "Show history", + "wallet-balance": "Wallet Balance" +} \ No newline at end of file diff --git a/public/locales/fr/sidebar.json b/public/locales/fr/sidebar.json index e2171ffb5..5256dc792 100644 --- a/public/locales/fr/sidebar.json +++ b/public/locales/fr/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Suivez votre XTM partout en synchronisant votre portefeuille Universe avec Tari Aurora.", "paper-wallet-tooltip-title": "Synchroniser avec le téléphone", "recent-wins": "Gains récents", + "rewards": "Rewards", "setup-scheduler": "Configurer le planificateur", - "show-history": "Afficher l\"historique", - "wallet-balance": "Solde du portefeuille", "share": { + "button-text": "FLEX & INVITER", + "copied": "Lien copié !", "history-item-button": "Flex & Inviter", + "reward": "ma récompense", "title": "Je viens de miner du tari", - "winner-pill": "Gagnant du bloc", - "copied": "Lien copié !", - "button-text": "FLEX & INVITER", - "reward": "ma récompense" - } + "winner-pill": "Gagnant du bloc" + }, + "show-history": "Afficher l\"historique", + "wallet-balance": "Solde du portefeuille" } \ No newline at end of file diff --git a/public/locales/hi/sidebar.json b/public/locales/hi/sidebar.json index d658063e1..6ec2e7854 100644 --- a/public/locales/hi/sidebar.json +++ b/public/locales/hi/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "अपने यूनिवर्स वॉलेट को तारी ऑरोरा से सिंक करके कहीं भी अपने XTM को ट्रैक करें।", "paper-wallet-tooltip-title": "फोन के साथ सिंक करें", "recent-wins": "हाल की जीत", + "rewards": "Rewards", "setup-scheduler": "शेड्यूलर सेटअप करें", - "show-history": "इतिहास दिखाएं", - "wallet-balance": "वॉलेट शेष", "share": { + "button-text": "फ्लेक्स और आमंत्रित करें", + "copied": "लिंक कॉपी हो गया!", "history-item-button": "फ्लेक्स और आमंत्रित करें", + "reward": "मेरा इनाम", "title": "मैंने अभी तारी माइन किया", - "winner-pill": "ब्लॉक का विजेता", - "copied": "लिंक कॉपी हो गया!", - "button-text": "फ्लेक्स और आमंत्रित करें", - "reward": "मेरा इनाम" - } + "winner-pill": "ब्लॉक का विजेता" + }, + "show-history": "इतिहास दिखाएं", + "wallet-balance": "वॉलेट शेष" } \ No newline at end of file diff --git a/public/locales/id/sidebar.json b/public/locales/id/sidebar.json index c78ac2e85..8fc1193a2 100644 --- a/public/locales/id/sidebar.json +++ b/public/locales/id/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Lacak XTM Anda di mana saja dengan menyinkronkan dompet Universe Anda ke Tari Aurora.", "paper-wallet-tooltip-title": "Sinkronkan dengan Ponsel", "recent-wins": "Kemenangan terbaru", + "rewards": "Rewards", "setup-scheduler": "Atur Penjadwal", - "show-history": "Tampilkan riwayat", - "wallet-balance": "Saldo Dompet", "share": { + "button-text": "PAMER & UNDANG", + "copied": "Tautan Tersalin!", "history-item-button": "Pamer & Undang", + "reward": "hadiah saya", "title": "Saya baru saja menambang tari", - "winner-pill": "Pemenang blok", - "copied": "Tautan Tersalin!", - "button-text": "PAMER & UNDANG", - "reward": "hadiah saya" - } + "winner-pill": "Pemenang blok" + }, + "show-history": "Tampilkan riwayat", + "wallet-balance": "Saldo Dompet" } \ No newline at end of file diff --git a/public/locales/ja/sidebar.json b/public/locales/ja/sidebar.json index 35c7fb7e3..18a4853c2 100644 --- a/public/locales/ja/sidebar.json +++ b/public/locales/ja/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Tari AuroraにUniverseウォレットを同期して、どこでもXTMを追跡できます。", "paper-wallet-tooltip-title": "電話と同期", "recent-wins": "最近の勝利", + "rewards": "Rewards", "setup-scheduler": "スケジューラの設定", - "show-history": "履歴を表示", - "wallet-balance": "ウォレット残高", "share": { + "button-text": "フレックス＆招待", + "copied": "リンクをコピーしました！", "history-item-button": "フレックス＆招待", + "reward": "私の報酬", "title": "Tariをマイニングしました", - "winner-pill": "ブロックの勝者", - "copied": "リンクをコピーしました！", - "button-text": "フレックス＆招待", - "reward": "私の報酬" - } + "winner-pill": "ブロックの勝者" + }, + "show-history": "履歴を表示", + "wallet-balance": "ウォレット残高" } \ No newline at end of file diff --git a/public/locales/ko/sidebar.json b/public/locales/ko/sidebar.json index 036394f8c..8bc7e5cbb 100644 --- a/public/locales/ko/sidebar.json +++ b/public/locales/ko/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Universe 지갑을 Tari Aurora에 동기화하여 어디서든 XTM을 추적하세요.", "paper-wallet-tooltip-title": "휴대폰과 동기화", "recent-wins": "최근 승리", + "rewards": "Rewards", "setup-scheduler": "스케줄러 설정", - "show-history": "기록 보기", - "wallet-balance": "지갑 잔액", "share": { + "button-text": "자랑하고 초대하기", + "copied": "링크가 복사되었습니다!", "history-item-button": "자랑하고 초대하기", + "reward": "내 보상", "title": "방금 타리를 채굴했습니다", - "winner-pill": "블록 승자", - "copied": "링크가 복사되었습니다!", - "button-text": "자랑하고 초대하기", - "reward": "내 보상" - } + "winner-pill": "블록 승자" + }, + "show-history": "기록 보기", + "wallet-balance": "지갑 잔액" } \ No newline at end of file diff --git a/public/locales/pl/sidebar.json b/public/locales/pl/sidebar.json index 467978e13..0a18179a5 100644 --- a/public/locales/pl/sidebar.json +++ b/public/locales/pl/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Śledź swoje XTM wszędzie, synchronizując portfel Universe z Tari Aurora.", "paper-wallet-tooltip-title": "Synchronizuj z telefonem", "recent-wins": "Ostanie wygrane", + "rewards": "Rewards", "setup-scheduler": "Ustawienia harmonogramu", - "show-history": "Pokaż historię", - "wallet-balance": "Saldo portfela", "share": { + "button-text": "POCHWAL SIĘ I ZAPROŚ", + "copied": "Link skopiowany!", "history-item-button": "Pochwal się i zaproś", + "reward": "moja nagroda", "title": "Właśnie wykopałem tari", - "winner-pill": "Zwycięzca bloku", - "copied": "Link skopiowany!", - "button-text": "POCHWAL SIĘ I ZAPROŚ", - "reward": "moja nagroda" - } + "winner-pill": "Zwycięzca bloku" + }, + "show-history": "Pokaż historię", + "wallet-balance": "Saldo portfela" } \ No newline at end of file diff --git a/public/locales/ru/sidebar.json b/public/locales/ru/sidebar.json index 77f785da5..e1b8c57cd 100644 --- a/public/locales/ru/sidebar.json +++ b/public/locales/ru/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Отслеживайте свои XTM в любом месте, синхронизируя кошелек Universe с Tari Aurora.", "paper-wallet-tooltip-title": "Синхронизировать с телефоном", "recent-wins": "Последние выигрыши", + "rewards": "Rewards", "setup-scheduler": "Настройка планировщика", - "show-history": "Показать историю", - "wallet-balance": "Баланс кошелька", "share": { + "button-text": "ПОХВАСТАТЬСЯ И ПРИГЛАСИТЬ", + "copied": "Ссылка скопирована!", "history-item-button": "Похвастаться и пригласить", + "reward": "моя награда", "title": "Я только что намайнил Tari", - "winner-pill": "Победитель блока", - "copied": "Ссылка скопирована!", - "button-text": "ПОХВАСТАТЬСЯ И ПРИГЛАСИТЬ", - "reward": "моя награда" - } + "winner-pill": "Победитель блока" + }, + "show-history": "Показать историю", + "wallet-balance": "Баланс кошелька" } \ No newline at end of file diff --git a/public/locales/tr/sidebar.json b/public/locales/tr/sidebar.json index 162ce4e62..cd39bb90c 100644 --- a/public/locales/tr/sidebar.json +++ b/public/locales/tr/sidebar.json @@ -13,15 +13,16 @@ "paper-wallet-tooltip-message": "Universe cüzdanınızı Tari Aurora ile senkronize ederek XTM\"inizi her yerde takip edin.", "paper-wallet-tooltip-title": "Telefonla Senkronize Et", "recent-wins": "Son Kazançlar", + "rewards": "Rewards", "setup-scheduler": "Kurulum Planlayıcısı", - "show-history": "Geçmişi göster", - "wallet-balance": "Cüzdan Bakiyesi", "share": { + "button-text": "GÖSTER VE DAVET ET", + "copied": "Bağlantı Kopyalandı!", "history-item-button": "Göster ve Davet Et", + "reward": "ödülüm", "title": "Az önce tari madenciliği yaptım", - "winner-pill": "Blok Kazananı", - "copied": "Bağlantı Kopyalandı!", - "button-text": "GÖSTER VE DAVET ET", - "reward": "ödülüm" - } + "winner-pill": "Blok Kazananı" + }, + "show-history": "Geçmişi göster", + "wallet-balance": "Cüzdan Bakiyesi" } \ No newline at end of file diff --git a/src/containers/main/SideBar/components/Wallet/Wallet.styles.ts b/src/containers/main/SideBar/components/Wallet/Wallet.styles.ts index 8005a5bab..b4f70c277 100644 --- a/src/containers/main/SideBar/components/Wallet/Wallet.styles.ts +++ b/src/containers/main/SideBar/components/Wallet/Wallet.styles.ts @@ -112,7 +112,7 @@ export const CornerButton = styled('button')` background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(7px); - padding: 0 8px; + padding: 0 8px 0 3px; display: flex; align-items: center; @@ -121,13 +121,30 @@ export const CornerButton = styled('button')` cursor: pointer; transition: all 0.2s ease; pointer-events: all; + gap: 3px; &:hover { border: 1px solid rgba(156, 156, 156, 0.18); background: rgba(255, 255, 255, 0.3); } `; - +export const CornerButtonBadge = styled.div` + border-radius: 50%; + background-color: ${({ theme }) => theme.colors.brightRed[500]}; + height: 13px; + min-width: 13px; + display: flex; + justify-content: center; + align-items: flex-end; + span { + display: flex; + font-weight: 600; + font-size: 10px; + text-align: center; + line-height: 10px; + height: 11px; + } +`; export const SidebarCover = styled(m.div)` position: absolute; inset: 0; @@ -135,5 +152,4 @@ export const SidebarCover = styled(m.div)` background: rgba(0, 0, 0, 0.3); cursor: pointer; - z-index: 1; `; diff --git a/src/containers/main/SideBar/components/Wallet/Wallet.tsx b/src/containers/main/SideBar/components/Wallet/Wallet.tsx index 293a7319d..258a3eb59 100644 --- a/src/containers/main/SideBar/components/Wallet/Wallet.tsx +++ b/src/containers/main/SideBar/components/Wallet/Wallet.tsx @@ -4,6 +4,7 @@ import CharSpinner from '@app/components/CharSpinner/CharSpinner.tsx'; import { BalanceVisibilityButton, CornerButton, + CornerButtonBadge, ScrollMask, SidebarCover, WalletBalance, @@ -90,7 +91,10 @@ export default function Wallet() { )} {balance ? ( - {!showHistory ? t('show-history') : t('hide-history')} + + 2 + + {!showHistory ? t('rewards') : t('hide-history')} ) : null} diff --git a/src/theme/palettes/colors.ts b/src/theme/palettes/colors.ts index 1f2d7054f..7f9678289 100644 --- a/src/theme/palettes/colors.ts +++ b/src/theme/palettes/colors.ts @@ -205,6 +205,20 @@ const red = { 950: '#450F0A', }; +const brightRed = { + 50: '#FEF3F2', + 100: '#ffd3d3', + 200: '#ffa8a8', + 300: '#fe7c7c', + 400: '#fe5050', + 500: '#fe2727', + 600: '#e70101', + 700: '#ae0101', + 800: '#740101', + 900: '#450F0A', + 950: '#3a0000', +}; + const ramp = { 1: '#1CCF31', 2: '#50CC27', @@ -223,6 +237,7 @@ export const colors = { orange, green, red, + brightRed, teal, gothic, tariPurple,