Skip to content

Commit bafdc3d

Browse files
godzidcryptogodzidcrypto
authored
feat: BONK redesign polish 2 (#14)
* feat: add updated colors to address accessibility/contrast issues * feat: remove borders from header and app content, ensure roundedness of market selector and stats * feat: add conditional max-width for AppContainer based for trade page * fix: adjust gradient background and reposition element in GlobalBackground component * fix: ensure header maintains max width of 1600px regardless of app container max width * feat: more improvements to input colors (checkbox, amount input, receipt) * feat: update header nav link text colors, hover and active states of account menu and icon * chore: set max width to 2000 px for trade page * chore: update background color of unselected tabs in trade form * chore: reduce max width for trade page * feat: ensure market dropdown selector is in line with max width of app container, add roundedness * fix: lint errors
1 parent 0f91540 commit bafdc3d

File tree

16 files changed

+128
-54
lines changed

16 files changed

+128
-54
lines changed

‎src/App.tsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,9 @@ const Content = () => {
128128

129129
const { dialogAreaRef } = useDialogArea() ?? {};
130130

131+
// Check if we're on the trade page
132+
const isTradePage = matchPath(`${AppRoute.Trade}/*`, location.pathname) !== null;
133+
131134
if (isSimpleUi) {
132135
const matchMarkets = matchPath(AppRoute.Markets, location.pathname);
133136
const backgroundColor =
@@ -191,7 +194,7 @@ const Content = () => {
191194
return (
192195
<>
193196
<GlobalStyle />
194-
<$AppContainer>
197+
<$AppContainer isTradePage={isTradePage}>
195198
<$Content
196199
isShowingHeader={isShowingHeader}
197200
isShowingFooter={isShowingFooter}
@@ -354,9 +357,16 @@ function shouldForwardProp(propName: string, target: WebTarget): boolean {
354357
return true;
355358
}
356359

357-
const $AppContainer = styled.div`
360+
const $AppContainer = styled.div<{ isTradePage?: boolean }>`
358361
width: 100%;
359-
max-width: 1600px;
362+
${({ isTradePage }) =>
363+
isTradePage
364+
? css`
365+
max-width: 1800px;
366+
`
367+
: css`
368+
max-width: 1600px;
369+
`}
360370
margin-left: auto;
361371
margin-right: auto;
362372
`;
@@ -417,15 +427,21 @@ const $Content = styled.div<{
417427
--stickyArea0-background: transparent;
418428
--stickyArea-background: transparent;
419429
--stickyArea0-topHeight: var(--page-currentHeaderHeight);
420-
--stickyArea0-topGap: var(--border-width);
421-
--stickyArea0-bottomGap: var(--border-width);
430+
--stickyArea0-topGap: 0;
431+
--stickyArea0-bottomGap: 0;
422432
--stickyArea0-bottomHeight: var(--page-currentFooterHeight);
423433
424434
background: transparent;
425435
426436
${layoutMixins.withOuterAndInnerBorders}
427437
display: grid;
428438
439+
/* Remove borders from all grid children to prevent sticky borders */
440+
> * {
441+
--border-color: transparent;
442+
box-shadow: none;
443+
}
444+
429445
${({ showRestrictionWarning, isShowingHeader }) => css`
430446
grid-template:
431447
${isShowingHeader ? css`'Header' calc(var(--page-currentHeaderHeight) + 4rem)` : ''}

‎src/components/Checkbox.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
4444
</div>
4545
);
4646
const $Root = styled(Root)`
47-
--checkbox-backgroundColor: var(--color-layer-0);
48-
--checkbox-borderColor: var(--color-accent-faded);
47+
--checkbox-backgroundColor: var(--color-layer-2);
48+
--checkbox-borderColor: var(--color-layer-7);
4949
5050
min-width: 1.25rem;
5151
height: 1.25rem;
@@ -56,11 +56,13 @@ const $Root = styled(Root)`
5656
5757
&[data-state='checked'] {
5858
--checkbox-backgroundColor: var(--color-accent);
59+
--checkbox-borderColor: var(--color-accent);
5960
}
6061
6162
&[data-disabled] {
6263
cursor: not-allowed;
6364
--checkbox-backgroundColor: var(--color-layer-1);
65+
--checkbox-borderColor: var(--color-border-faded);
6466
}
6567
`;
6668
const $Label = styled.label<{ disabled?: boolean }>`

‎src/components/DropdownMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ const $DropdownIcon = styled.span`
132132
font-size: 0.375em;
133133
transition: transform 0.3s var(--ease-out-expo);
134134
align-items: center;
135+
color: var(--trigger-textColor, var(--color-text-2));
135136
136137
${$Trigger}[data-state='open'] & {
137138
transform: scaleY(-1);

‎src/components/GlobalBackground.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ const GlobalBackground: React.FC = () => {
1818
const g = parseInt(hex.slice(2, 4), 16);
1919
const b = parseInt(hex.slice(4, 6), 16);
2020

21-
const gradient = `linear-gradient(to bottom, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 0.5), rgba(${r}, ${g}, ${b}, 0))`;
21+
const gradient = `linear-gradient(to bottom, rgba(${r}, ${g}, ${b}, 0.5), rgba(${r}, ${g}, ${b}, 0))`;
2222

2323
return (
2424
<div
2525
className="pointer-events-none fixed left-0 right-0 z-0 h-[42rem] max-h-[60vh] w-full"
2626
style={{
27-
top: '5rem',
27+
top: '0',
2828
background: gradient,
2929
}}
3030
/>

‎src/components/NavigationMenu.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,7 @@ const $Group = styled.section`
396396
397397
${layoutMixins.column}
398398
399-
color: var(--color-text-0);
399+
color: var(--color-text-2);
400400
`;
401401

402402
const $GroupHeader = styled.header`
@@ -489,6 +489,7 @@ const $NavItem = styled(NavItem)<NavItemStyleProps>`
489489
490490
--item-checked-textColor: var(--navigationMenu-item-checked-textColor);
491491
--item-highlighted-textColor: var(--navigationMenu-item-highlighted-textColor);
492+
color: var(--color-text-2);
492493
${layoutMixins.scrollSnapItem}
493494
494495
min-height: var(--navigationMenu-item-height);
@@ -544,6 +545,7 @@ const $NavItem = styled(NavItem)<NavItemStyleProps>`
544545
const $Icon = styled(Icon)`
545546
font-size: 0.375em;
546547
transition: rotate 0.3s var(--ease-out-expo);
548+
color: var(--color-text-2);
547549
548550
${$List}[data-orientation="menu"] & {
549551
rotate: -0.25turn;

‎src/constants/styles/base.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ export enum ColorToken {
1414
LightGray9 = '#DBDBDB',
1515
LightGray10 = '#D5DADF',
1616
LightGray11 = '#D1D9E0',
17+
LightGray12 = '#C8D0D8',
18+
LightGray13 = '#BFC7CF',
1719

1820
MediumGray0 = '#CACACE',
1921
MediumGray1 = '#C2CBD3',
@@ -38,6 +40,15 @@ export enum ColorToken {
3840
BONKPurple = '#1D0623',
3941
BONKPurple1 = '#17001C',
4042
BONKPurple2 = '#836EF9',
43+
BONKPurple3 = '#22082A',
44+
BONKPurple4 = '#270D31',
45+
BONKPurple5 = '#2C1238',
46+
BONKPurple6 = '#31173F',
47+
BONKPurple7 = '#3A1F4A',
48+
BONKPurple8 = '#4A2A5A',
49+
BONKPurple9 = '#5A3A6A',
50+
BONKPurple10 = '#2A0F35',
51+
BONKPurple11 = '#351440',
4152

4253
GrayBlue0 = '#464659',
4354
GrayBlue1 = '#38384D',

‎src/layout/Header/HeaderDesktop.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,11 +217,19 @@ const $Header = styled.header`
217217
height: var(--page-currentHeaderHeight);
218218
margin-top: 2rem;
219219
margin-bottom: 2rem;
220-
margin-left: 1rem;
221-
margin-right: 1rem;
220+
width: 100%;
221+
max-width: 1600px;
222+
margin-left: auto;
223+
margin-right: auto;
224+
padding-left: 1rem;
225+
padding-right: 1rem;
222226
223227
grid-area: Header;
224228
229+
/* Override border from withOuterAndInnerBorders */
230+
--border-color: transparent;
231+
box-shadow: none;
232+
225233
display: grid;
226234
align-items: stretch;
227235
grid-auto-flow: column;

‎src/pages/trade/MarketSelectorAndStats.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,24 @@ const $Container = styled.div`
6464
justify-content: start;
6565
align-items: stretch;
6666
background-color: var(--color-layer-1) !important; // TODO: figure out why this is needed
67-
border-radius: 0.75rem;
68-
overflow: hidden; // quick/easy way to maintain the border radius
67+
68+
/* Completely override box-shadow border from withOuterAndInnerBorders */
69+
--border-color: transparent !important;
70+
box-shadow: none !important;
71+
72+
/* Apply rounded border using border property which respects border-radius */
73+
border: var(--default-border-width, 1px) solid var(--color-border) !important;
74+
border-radius: 0.75rem !important;
75+
overflow: hidden; // Clip content and borders to rounded corners
76+
77+
/* Use isolation to create a new stacking context */
78+
isolation: isolate;
79+
position: relative;
80+
81+
/* Remove borders from all children to prevent hard edges */
82+
> * {
83+
--border-color: transparent !important;
84+
box-shadow: none !important;
85+
border: none !important;
86+
}
6987
`;

‎src/pages/trade/Trade.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,9 @@ const TradePage = () => {
9595
isHorizontalPanelOpen={isHorizontalPanelOpen}
9696
horizontalPanelHeightPx={horizontalPanelHeight}
9797
>
98-
<header tw="[grid-area:Top]">
98+
<$TopHeader>
9999
<MarketSelectorAndStats />
100-
</header>
100+
</$TopHeader>
101101

102102
<$GridSection gridArea="Side" tw="grid-rows-[auto_minmax(0,1fr)]">
103103
<AccountInfo />
@@ -222,6 +222,18 @@ const $GridSection = styled.section<{ gridArea: string }>`
222222
gap: 0.5rem;
223223
`;
224224

225+
const $TopHeader = styled.header`
226+
grid-area: Top;
227+
228+
/* Remove box-shadow border from withOuterAndInnerBorders */
229+
--border-color: transparent !important;
230+
box-shadow: none !important;
231+
232+
/* Ensure rounded corners */
233+
border-radius: 0.75rem;
234+
overflow: hidden;
235+
`;
236+
225237
const $CoverUpTradingView = styled.div`
226238
width: 100%;
227239
height: 100%;

‎src/styles/headerMixins.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,27 @@ import { css } from 'styled-components';
33
export const headerMixins = {
44
dropdownTrigger: css`
55
--trigger-backgroundColor: transparent;
6-
--trigger-textColor: var(--color-text-0);
6+
--trigger-textColor: var(--color-text-2);
77
88
--trigger-hover-backgroundColor: var(--color-layer-3);
99
--trigger-hover-textColor: var(--color-text-2);
1010
11-
--trigger-open-backgroundColor: var(--color-layer-1);
11+
--trigger-open-backgroundColor: transparent;
1212
--trigger-open-textColor: var(--color-text-2);
1313
1414
&:hover:not(:disabled) {
15-
--trigger-backgroundColor: var(--trigger-hover-backgroundColor);
1615
--trigger-textColor: var(--trigger-hover-textColor);
1716
}
1817
`,
1918

2019
button: css`
2120
--button-backgroundColor: transparent;
22-
--button-textColor: var(--color-text-0);
21+
--button-textColor: var(--color-text-2);
2322
2423
--button-hover-backgroundColor: var(--color-layer-4);
2524
--button-hover-textColor: var(--color-text-2);
2625
2726
&:hover:not(:disabled) {
28-
background-color: var(--button-hover-backgroundColor);
2927
color: var(--button-hover-textColor);
3028
}
3129
`,

0 commit comments

Comments
 (0)