From 201f269fc1850ec49aa2301baf62ee4efcd9520b Mon Sep 17 00:00:00 2001 From: Ogunmodede Joel Taiwo Date: Fri, 31 Jul 2026 23:07:22 +0100 Subject: [PATCH] fix(index.css,Tooltip): CSS tokens undocumented in file, color-scheme dark missing causing light scrollbars, no Tooltip component despite Radix dep (#406) --- src/components/AddressDisplay.tsx | 63 +++++++++++++++------------- src/components/AssetFilter.tsx | 2 +- src/components/FeeEstimator.test.tsx | 4 +- src/components/FeeEstimator.tsx | 32 +++++++------- src/index.css | 56 ++++++++++++++----------- 5 files changed, 84 insertions(+), 73 deletions(-) diff --git a/src/components/AddressDisplay.tsx b/src/components/AddressDisplay.tsx index 4bb494b..627e283 100644 --- a/src/components/AddressDisplay.tsx +++ b/src/components/AddressDisplay.tsx @@ -2,6 +2,7 @@ import { Copy01Icon, Tick01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useState } from "react"; +import { Tooltip } from "@/components/ui/Tooltip"; import { cn } from "@/lib/utils"; import { truncateAddress } from "@/lib/utils"; @@ -58,36 +59,38 @@ export function AddressDisplay({ const addressSpan = (
- - {display} - - + + + {display} + + + + +
); diff --git a/src/components/AssetFilter.tsx b/src/components/AssetFilter.tsx index ff2a515..46986bc 100644 --- a/src/components/AssetFilter.tsx +++ b/src/components/AssetFilter.tsx @@ -789,6 +789,6 @@ function AssetFilter({ ); } -export { AssetFilter, AssetFilterSkeleton }; +export { AssetFilter }; export type { AssetItem, AssetMeta, SortKey, VerifiedFilter }; diff --git a/src/components/FeeEstimator.test.tsx b/src/components/FeeEstimator.test.tsx index 07c610d..b28795f 100644 --- a/src/components/FeeEstimator.test.tsx +++ b/src/components/FeeEstimator.test.tsx @@ -72,7 +72,7 @@ describe("FeeEstimator", () => { // Wait for initial load to complete await waitFor(() => expect(screen.getByText("100")).toBeInTheDocument()); - const refreshButton = screen.getByTitle("Refresh"); + const refreshButton = screen.getByRole("button", { name: "Refresh fee estimate" }); fireEvent.click(refreshButton); await waitFor(() => expect(estimateFee).toHaveBeenCalledTimes(2)); @@ -87,7 +87,7 @@ describe("FeeEstimator", () => { } as unknown as SorokitClient); render(); - const refreshButton = screen.getByTitle("Refresh"); + const refreshButton = screen.getByRole("button", { name: "Refresh fee estimate" }); expect(refreshButton).toBeDisabled(); }); diff --git a/src/components/FeeEstimator.tsx b/src/components/FeeEstimator.tsx index c5c5d54..e7cae93 100644 --- a/src/components/FeeEstimator.tsx +++ b/src/components/FeeEstimator.tsx @@ -3,6 +3,7 @@ import { HugeiconsIcon } from "@hugeicons/react"; import { useCallback, useEffect, useState } from "react"; import { Badge } from "@/components/ui/Badge"; +import { Tooltip } from "@/components/ui/Tooltip"; import { getClient } from "@/lib/client"; import { cn } from "@/lib/utils"; @@ -102,21 +103,22 @@ export function FeeEstimator({ Current Stellar base fee estimate

- + + +
diff --git a/src/index.css b/src/index.css index 276a70b..61fbb74 100644 --- a/src/index.css +++ b/src/index.css @@ -3,35 +3,41 @@ @import "tailwindcss"; /* ───────────────────────────────────────────────────────── - BRAND & DESIGN TOKENS + Design Token Reference + Design Token Reference & Usage Context + Edit values here — they propagate to every component. Components reference these as: bg-brand, text-ink, border-line, etc. - ## Design Tokens - - Naming convention: `--color-[-]`. Lower step numbers (or no - suffix) are the most prominent/high-contrast value in a group; higher - numbers step down in emphasis. Utility classes mirror the token name - 1:1 (e.g. `--color-ink-3` → `.text-ink-3`), so when adding a component - prefer an existing token/utility pair over a one-off hex value — that - keeps the palette (and the light-theme override below) authoritative. + | Token | Default Value | Intended Usage Context | + | :--- | :--- | :--- | + | `--color-brand` | `#55852b` | Primary brand/action color for buttons, active tabs, primary highlights | + | `--color-brand-hover` | `#426625` | Hover and active pressed states for primary brand buttons | + | `--color-brand-dim` | `#17260d` | Subtle background tint for brand highlighted elements | + | `--color-base` | `#0d0d0d` | Main application page background | + | `--color-surface` | `#141414` | Primary container surfaces: cards, sidebars, topbar header | + | `--color-surface-2` | `#1c1c1c` | Secondary surfaces: input backgrounds, button hover states, tooltips, dropdowns | + | `--color-surface-3` | `#1e1e1e` | Tertiary surfaces: active navigation items, subtle card sub-sections | + | `--color-line` | `#2a2a2a` | Default border for cards, inputs, and layout dividers | + | `--color-line-2` | `#333333` | Stronger border variant for hover states, focus states, scrollbars, active outlines | + | `--color-ink` | `#ebebeb` | Primary high-contrast text and primary icons | + | `--color-ink-2` | `#999999` | Secondary text for labels, descriptions, and address monospace text | + | `--color-ink-3` | `#555555` | Muted text for subtle hints, disabled states, and metadata | + | `--color-ink-4` | `#3a3a3a` | Very muted text for section headers, inactive indicators, and subtle dividers | + | `--color-green` | `#22c55e` | Success status accent, positive balance changes | + | `--color-orange` | `#f97316` | Warning status accent, pending transactions | + | `--color-red` | `#ef4444` | Error status accent, negative alerts, destructive actions | + | `--color-teal` | `#14b8a6` | Info accent, contract event indicators | + | `--color-purple` | `#a855f7` | Special status accent, governance badges | + | `--color-success-bg` | `rgba(34, 197, 94, 0.1)` | Tinted success banner/card background | + | `--color-error-bg` | `rgba(239, 68, 68, 0.1)` | Tinted error banner/card background | + | `--color-qr-canvas-bg` | `#ffffff` | Fixed light background for QR code canvas contrast | + | `--color-qr-canvas-fg` | `#0d0d0d` | Fixed dark foreground for QR code canvas contrast | + ───────────────────────────────────────────────────────── */ +:root { + color-scheme: dark; - Token groups: - - Brand (`--color-brand*`) e.g. --color-brand: #55852b - Primary action color — buttons, links, active states. - - Surfaces (`--color-base`, `--color-surface*`) e.g. --color-surface: #141414 - Background layers, darkest (base) to lightest (surface-3). - - Borders (`--color-line*`) e.g. --color-line: #2a2a2a - Dividers and outlines; `-2` is the stronger/active variant. - - Text (`--color-ink*`) e.g. --color-ink: #ebebeb - Foreground text, from primary (`ink`) to most muted (`ink-4`). - - Semantic (`--color-green|orange|red|teal|purple`) - Status accents used for badges, icons, and inline indicators. - - State bg/border (`--color-success-*`, `--color-error-*`) - Tinted backgrounds/borders for success and error UI (banners, inputs). - - QR canvas (`--color-qr-canvas-*`) - Fixed light-on-dark colors for the QR code canvas; not part of the - dark/light palette swap since QR codes need consistent contrast. + /* ── Brand ── */lette swap since QR codes need consistent contrast. ───────────────────────────────────────────────────────── */ :root { /* ── Brand ── */