Skip to content

Update colors #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
luu-alex merged 3 commits into from
Mar 19, 2026
Merged

Update colors #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b26da97
fix(hooks): source nvm in lingui-extract to use correct node version
luu-alex Mar 19, 2026
e892e5d
feat: update the white color
luu-alex Mar 19, 2026
21f8859
fix: revert lefthook
luu-alex Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/trade/tradebox/trade-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,7 @@ export function TradePanel() {
size="lg"
onClick={buttonContent.action}
disabled={buttonContent.disabled}
className={cn("w-full")}
className={cn("w-full", !isConnected && "text-primary-text")}
Copy link

@gemini-code-assist gemini-code-assist bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

This change correctly addresses the text color issue for the button when not connected. However, when connected, the button text will still be unreadable in dark mode because the default text-white from the button's style has very low contrast against the new light-colored primary background (#D5F7FB).

To ensure the button text is always readable regardless of the connection state, you can apply the text-primary-text class unconditionally. This will fix the issue for all button states in both light and dark themes.

Suggested change
className={cn("w-full", !isConnected && "text-primary-text")}
className={cn("w-full", "text-primary-text")}

aria-label={buttonContent.text}
>
{(isSubmitting || isRegistering) && <SpinnerGapIcon className="size-3 animate-spin" />}
Expand Down
19 changes: 11 additions & 8 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,11 @@
--border-50: #F6F7F8;

/* Primary */
--primary-default: #2563EB;
--primary-hover: #1D4ED8;
--primary-active: #1E40AF;
--primary-muted: #92B1F5;
--primary-default: #005562;
--primary-hover: #006B7A;
--primary-active: #004A56;
--primary-muted: #E8FBFD;
--primary-text: #D5F7FB;

/* Market Up */
--market-up-600: #3C7D3E;
Expand Down Expand Up @@ -178,10 +179,11 @@
--border-50: #222833;

/* Primary */
--primary-default: #4F7DFF;
--primary-hover: #3B6CF6;
--primary-active: #2F5CE0;
--primary-muted: #385194;
--primary-default: #D5F7FB;
--primary-hover: #B8EFF5;
--primary-active: #9AE7F0;
--primary-muted: #1A3D40;
--primary-text: #131619;

/* Market Up */
--market-up-600: #4CAF6A;
Expand Down Expand Up @@ -267,6 +269,7 @@
--color-primary-hover: var(--primary-hover);
--color-primary-active: var(--primary-active);
--color-primary-muted: var(--primary-muted);
--color-primary-text: var(--primary-text);

/* Market */
--color-market-up-600: var(--market-up-600);
Expand Down
Loading