Skip to content

Commit 3b762e4

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
ROUND 1: COMPREHENSIVE THEME, RESPONSIVE, AND FEATURE COMPLETENESS FIXES
Co-authored-by: 0xrinegade <[email protected]>
1 parent 5db93a8 commit 3b762e4

File tree

7 files changed

+135
-56
lines changed

7 files changed

+135
-56
lines changed

‎src/components/Footer/styles.tsx‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export const FooterComponent = styled(RowContainer)`
66
display: none;
77
@media (max-width: 600px) {
88
display: flex;
9-
background-color: #222429;
10-
border-top: 0.1rem solid #383b45;
11-
padding: 0 2rem;
9+
background-color: var(--bg-secondary);
10+
border-top: 1px solid var(--border-primary);
11+
padding: 0 var(--spacing-md);
1212
justify-content: space-between;
1313
}
1414
`;
@@ -20,11 +20,17 @@ export const StyledLink = styled(RouterLink)`
2020
flex-direction: column;
2121
text-align: center;
2222
text-decoration: none;
23-
color: #fbf2f2;
24-
font-family: Avenir Next Medium;
25-
font-size: 1.3rem;
23+
color: var(--text-primary);
24+
font-family: var(--font-primary);
25+
font-size: var(--font-size-sm);
26+
transition: color var(--animation-duration-fast) var(--animation-easing-default);
27+
28+
&:hover {
29+
color: var(--interactive-primary);
30+
}
31+
2632
span {
27-
margin-top: 1rem;
33+
margin-top: var(--spacing-xs);
2834
}
2935
`;
3036
export const StyledA = styled.a`
@@ -35,11 +41,17 @@ export const StyledA = styled.a`
3541
flex-direction: column;
3642
text-align: center;
3743
text-decoration: none;
38-
color: #fbf2f2;
39-
font-family: Avenir Next Medium;
40-
font-size: 1.3rem;
44+
color: var(--text-primary);
45+
font-family: var(--font-primary);
46+
font-size: var(--font-size-sm);
47+
transition: color var(--animation-duration-fast) var(--animation-easing-default);
48+
49+
&:hover {
50+
color: var(--interactive-primary);
51+
}
52+
4153
span {
42-
margin-top: 1rem;
54+
margin-top: var(--spacing-xs);
4355
}
4456
`;
4557

@@ -52,10 +64,17 @@ export const StyledButton = styled.div`
5264
height: 5rem;
5365
text-align: center;
5466
text-decoration: none;
55-
color: #fbf2f2;
56-
font-family: Avenir Next Medium;
57-
font-size: 1.3rem;
67+
color: var(--text-primary);
68+
font-family: var(--font-primary);
69+
font-size: var(--font-size-sm);
70+
cursor: pointer;
71+
transition: color var(--animation-duration-fast) var(--animation-easing-default);
72+
73+
&:hover {
74+
color: var(--interactive-primary);
75+
}
76+
5877
span {
59-
margin-top: 1rem;
78+
margin-top: var(--spacing-xs);
6079
}
6180
`;

‎src/components/HelpCenter/HelpCenter.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const SearchBox = styled.div`
4747
const SearchInput = styled.input`
4848
width: 100%;
4949
padding: 16px 20px 16px 56px;
50-
border: 2px solid var(--border-main);
50+
border: 2px solid var(--border-primary);
5151
border-radius: 12px;
5252
background: var(--bg-primary);
5353
color: var(--text-primary);
@@ -93,7 +93,7 @@ const CategoryList = styled.div`
9393
background: var(--bg-secondary);
9494
border-radius: 12px;
9595
padding: 24px;
96-
border: 1px solid var(--border-main);
96+
border: 1px solid var(--border-primary);
9797
`;
9898

9999
const CategoryTitle = styled.h3`
@@ -146,7 +146,7 @@ const SectionTitle = styled.h2`
146146

147147
const FAQItem = styled.div`
148148
background: var(--bg-secondary);
149-
border: 1px solid var(--border-main);
149+
border: 1px solid var(--border-primary);
150150
border-radius: 12px;
151151
margin-bottom: 16px;
152152
overflow: hidden;
@@ -178,7 +178,7 @@ const FAQAnswer = styled.div<{ expanded: boolean }>`
178178

179179
const CodeBlock = styled.pre`
180180
background: var(--bg-primary);
181-
border: 1px solid var(--border-main);
181+
border: 1px solid var(--border-primary);
182182
border-radius: 8px;
183183
padding: 16px;
184184
margin: 16px 0;

‎src/components/Navbar/NavigationFrame.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -250,10 +250,10 @@ function Footer() {
250250
<FooterComponent>
251251
<span
252252
style={{
253-
fontSize: '1.3rem',
254-
color: '#fbf2f2',
253+
fontSize: 'var(--font-size-sm)',
254+
color: 'var(--text-secondary)',
255255
textTransform: 'none',
256-
fontFamily: 'Avenir Next medium',
256+
fontFamily: 'var(--font-primary)',
257257
}}
258258
>
259259
{location.pathname.includes('restore')
@@ -271,9 +271,9 @@ function Footer() {
271271
href="https://github.com/Cryptocurrencies-AI/spl-token-wallet"
272272
style={{
273273
border: '0',
274-
fontSize: '1.3rem',
274+
fontSize: 'var(--font-size-sm)',
275275
height: '50%',
276-
color: '#fbf2f2',
276+
color: 'var(--text-secondary)',
277277
textTransform: 'none',
278278
}}
279279
>
@@ -291,9 +291,9 @@ function Footer() {
291291
href="https://t.me/CryptocurrenciesAi"
292292
style={{
293293
border: '0',
294-
fontSize: '1.3rem',
294+
fontSize: 'var(--font-size-sm)',
295295
height: '50%',
296-
color: '#fbf2f2',
296+
color: 'var(--text-secondary)',
297297
textTransform: 'none',
298298
}}
299299
>
@@ -308,9 +308,9 @@ function Footer() {
308308
href="https://github.com/Cryptocurrencies-AI/spl-token-wallet"
309309
style={{
310310
border: '0',
311-
fontSize: '1.3rem',
311+
fontSize: 'var(--font-size-sm)',
312312
height: '50%',
313-
color: '#fbf2f2',
313+
color: 'var(--text-secondary)',
314314
textTransform: 'none',
315315
}}
316316
>

‎src/context/ThemeContext.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,22 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
9595
root.style.setProperty('--radius-xl', effects.radius.xl);
9696
root.style.setProperty('--radius-full', effects.radius.full);
9797

98+
// Spacing
99+
root.style.setProperty('--spacing-xs', effects.spacing.xs);
100+
root.style.setProperty('--spacing-sm', effects.spacing.sm);
101+
root.style.setProperty('--spacing-md', effects.spacing.md);
102+
root.style.setProperty('--spacing-lg', effects.spacing.lg);
103+
root.style.setProperty('--spacing-xl', effects.spacing.xl);
104+
root.style.setProperty('--spacing-xxl', effects.spacing.xxl);
105+
106+
// Animation variables
107+
root.style.setProperty('--animation-duration-fast', effects.animation.duration.fast);
108+
root.style.setProperty('--animation-duration-normal', effects.animation.duration.normal);
109+
root.style.setProperty('--animation-duration-slow', effects.animation.duration.slow);
110+
root.style.setProperty('--animation-easing-default', effects.animation.easing.default);
111+
root.style.setProperty('--animation-easing-bounce', effects.animation.easing.bounce);
112+
root.style.setProperty('--animation-easing-smooth', effects.animation.easing.smooth);
113+
98114
// Typography
99115
root.style.setProperty('--font-primary', typography.fontFamily.primary);
100116
root.style.setProperty('--font-mono', typography.fontFamily.mono);

‎src/pages/Wallet/index.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,19 @@ const Switcher = styled.button<{ isTabActive?: boolean }>`
4343
outline: none;
4444
display: block;
4545
width: 20%;
46-
color: ${(props) => (props.isTabActive ? ' #f5f5fb' : '#96999C')};
46+
color: ${(props) => (props.isTabActive ? 'var(--text-primary)' : 'var(--text-secondary)')};
4747
background: none;
48-
font-family: 'Avenir Next Demi';
48+
font-family: var(--font-primary);
4949
height: 4rem;
5050
cursor: pointer;
5151
border: none;
5252
border-bottom: ${(props) =>
53-
props.isTabActive ? '0.2rem solid #f5f5fb' : '0.2rem solid #96999C'};
53+
props.isTabActive ? '2px solid var(--interactive-primary)' : '2px solid var(--border-primary)'};
54+
transition: all var(--animation-duration-fast) var(--animation-easing-default);
55+
56+
&:hover {
57+
color: var(--interactive-primary);
58+
}
5459
}
5560
`;
5661

‎src/pages/commonStyles.tsx‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,13 @@ export const GridContainer = styled(({ wallet, theme, ...rest }: GridContainerPr
6767
position: relative;
6868
padding: 0rem 3rem;
6969
margin: 0rem;
70-
border-bottom: 1px solid var(--border-main);
70+
border-bottom: 1px solid var(--border-primary);
7171
background: var(--bg-primary);
7272
7373
@media (max-width: 850px) {
7474
display: flex;
7575
height: 10rem;
76-
background: #222429;
76+
background: var(--bg-secondary);
7777
}
7878
`;
7979

@@ -93,15 +93,15 @@ export const ColorText = styled.div<ColorTextProps>`
9393
width: ${(props) => props.width || '100%'};
9494
height: ${(props) => props.height || '4.5rem'};
9595
margin: ${(props) => props.margin || '0'};
96-
font-size: 1.2rem;
97-
font-family: Avenir Next Medium;
96+
font-size: var(--font-size-md);
97+
font-family: var(--font-primary);
9898
display: flex;
99-
color: #fff;
99+
color: var(--text-inverse);
100100
justify-content: center;
101101
flex-direction: column;
102102
align-items: center;
103-
background: ${(props) => props.background || '#383b45'};
104-
border-radius: ${(props) => props.radius || '1.5rem'};
103+
background: ${(props) => props.background || 'var(--bg-secondary)'};
104+
border-radius: ${(props) => props.radius || 'var(--radius-lg)'};
105105
display: flex;
106106
justify-content: ${(props) => props.justify || 'space-evenly'};
107107
flex-direction: ${(props) => props.direction || 'row'};
@@ -110,7 +110,7 @@ export const ColorText = styled.div<ColorTextProps>`
110110
@media (max-width: 540px) {
111111
padding: ${(props) => (props.needBackground ? '0 2rem 0 2rem' : 'auto')};
112112
background: ${(props) => (props.needBackground ? 'transparent' : 'auto')};
113-
font-size: 1.5rem;
113+
font-size: var(--font-size-lg);
114114
}
115115
`;
116116

@@ -130,25 +130,31 @@ export const Textarea = styled(({ ...props }: TextareaProps) => (
130130
))<TextareaProps>`
131131
width: ${(props) => props.width || '100%'};
132132
height: ${(props) => props.height || '5rem'};
133-
font-family: Avenir Next;
134-
border: 0.1rem solid #3a475c;
135-
font-size: 1.1rem;
133+
font-family: var(--font-primary);
134+
border: 1px solid var(--border-primary);
135+
font-size: var(--font-size-sm);
136136
letter-spacing: 0.01rem;
137-
color: #f8faff;
138-
border-radius: 1.5rem;
139-
background: #222429;
137+
color: var(--text-primary);
138+
border-radius: var(--radius-lg);
139+
background: var(--bg-secondary);
140140
outline: none;
141141
padding: ${(props) => props.padding || '1rem 7rem 1rem 2rem'};
142142
position: relative;
143143
line-height: 3rem;
144144
overflow: hidden;
145+
transition: border-color var(--animation-duration-fast) var(--animation-easing-default);
146+
147+
&:focus {
148+
border-color: var(--border-focus);
149+
}
145150
146151
&::placeholder {
147-
font-size: 1.4rem;
152+
font-size: var(--font-size-md);
153+
color: var(--text-tertiary);
148154
}
149155
150156
@media (max-width: 540px) {
151-
font-size: 1.4rem;
157+
font-size: var(--font-size-md);
152158
line-height: 3rem;
153159
height: 6rem;
154160
}
@@ -158,11 +164,18 @@ export const ContainerForIcon = styled.div`
158164
cursor: pointer;
159165
width: 4rem;
160166
height: 3.5rem;
161-
border-radius: 1.5rem;
162-
border: 0.2rem solid #3a475c;
167+
border-radius: var(--radius-lg);
168+
border: 2px solid var(--border-primary);
163169
display: flex;
164170
justify-content: center;
165171
align-items: center;
172+
background: var(--bg-glass);
173+
transition: all var(--animation-duration-fast) var(--animation-easing-default);
174+
175+
&:hover {
176+
border-color: var(--border-focus);
177+
background: var(--bg-secondary);
178+
}
166179
167180
@media (max-width: 540px) {
168181
height: 4.5rem;
@@ -194,19 +207,27 @@ export const Card = styled.div<CardProps>`
194207
width: ${(props) => props.width || '50rem'};
195208
height: ${(props) => props.height || '40rem'};
196209
padding: ${(props) => props.padding || '0'};
197-
background: #222429;
198-
border: 0.1rem solid #3a475c;
199-
box-shadow: 0px 0px 16px rgba(125, 125, 131, 0.1);
200-
border-radius: 2rem;
210+
background: var(--bg-glass);
211+
border: 1px solid var(--border-glass);
212+
box-shadow: var(--shadow-glass);
213+
border-radius: var(--radius-xl);
214+
backdrop-filter: var(--glass-backdrop);
201215
display: flex;
202216
justify-content: ${(props) => props.justify || 'center'};
203217
flex-direction: column;
204218
align-items: center;
205-
transition: 0.3s all ease-out;
219+
transition: all var(--animation-duration-normal) var(--animation-easing-default);
220+
221+
&:hover {
222+
transform: translateY(-4px);
223+
box-shadow: var(--shadow-xl);
224+
border-color: var(--border-focus);
225+
}
226+
206227
@media (max-width: 540px) {
207-
background: #17181a;
228+
background: var(--bg-secondary);
208229
border: none;
209-
box-shadow: none;
230+
box-shadow: var(--shadow-sm);
210231
height: ${(props) => props.minHeight || '40rem'};
211232
width: ${(props) => props.minWidth || '100%'};
212233
}

‎src/themes/index.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,16 @@ export interface ThemeEffects {
7070
full: string;
7171
};
7272

73+
// Spacing system
74+
spacing: {
75+
xs: string;
76+
sm: string;
77+
md: string;
78+
lg: string;
79+
xl: string;
80+
xxl: string;
81+
};
82+
7383
// Animations
7484
animation: {
7585
duration: {
@@ -129,6 +139,14 @@ const baseGlassEffects: ThemeEffects = {
129139
xl: '24px',
130140
full: '9999px',
131141
},
142+
spacing: {
143+
xs: '4px',
144+
sm: '8px',
145+
md: '16px',
146+
lg: '24px',
147+
xl: '32px',
148+
xxl: '48px',
149+
},
132150
animation: {
133151
duration: {
134152
fast: '150ms',

0 commit comments

Comments
 (0)