Skip to content

Commit 101c49d

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Fix navbar theming and remove social links - implement proper theme color integration
Co-authored-by: 0xrinegade <[email protected]>
1 parent cd6eb4a commit 101c49d

File tree

20 files changed

+545
-88
lines changed

20 files changed

+545
-88
lines changed

‎e2e/navbar.spec.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.describe('Navbar Tests', () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto('/');
6+
// Wait for the page to load
7+
await page.waitForLoadState('networkidle');
8+
});
9+
10+
test('navbar should not contain social links', async ({ page }) => {
11+
// Check that social links are not present
12+
const socialLinks = page.locator('a[href*="twitter.com"], a[href*="telegram.com"], a[href*="discord.gg"]');
13+
await expect(socialLinks).toHaveCount(0);
14+
});
15+
16+
test('navbar should have working theme toggle', async ({ page }) => {
17+
// Look for theme toggle button
18+
const themeToggle = page.locator('button, [role="button"]').filter({ hasText: /theme|dark|light/i }).first();
19+
if (await themeToggle.count() > 0) {
20+
await themeToggle.click();
21+
// Wait a bit for theme change
22+
await page.waitForTimeout(500);
23+
}
24+
});
25+
26+
test('navbar should have search functionality', async ({ page }) => {
27+
// Look for search button or input
28+
const searchButton = page.locator('button:has-text("Search"), [placeholder*="search" i]').first();
29+
if (await searchButton.count() > 0) {
30+
await searchButton.click();
31+
// Wait for search interface to appear
32+
await page.waitForTimeout(500);
33+
}
34+
});
35+
36+
test('navbar should have working navigation links', async ({ page }) => {
37+
// Check that wallet link exists and works
38+
const walletLink = page.locator('a:has-text("Wallet"), [href="/wallet"]').first();
39+
if (await walletLink.count() > 0) {
40+
// Just verify it exists, don't actually navigate to avoid wallet connection issues
41+
expect(await walletLink.isVisible()).toBeTruthy();
42+
}
43+
44+
// Check that help link exists
45+
const helpLink = page.locator('a:has-text("Help"), [href="/help"]').first();
46+
if (await helpLink.count() > 0) {
47+
expect(await helpLink.isVisible()).toBeTruthy();
48+
}
49+
});
50+
51+
test('navbar should use theme colors', async ({ page }) => {
52+
// Check that the navbar has proper styling with CSS custom properties
53+
await page.waitForSelector('header, nav, [class*="header"], [class*="navbar"]', { timeout: 10000 });
54+
55+
// Get computed styles to verify theme colors are being applied
56+
const headerElement = page.locator('header, nav, [class*="header"], [class*="navbar"]').first();
57+
if (await headerElement.count() > 0) {
58+
const styles = await headerElement.evaluate((el) => {
59+
const computed = window.getComputedStyle(el);
60+
return {
61+
backgroundColor: computed.backgroundColor,
62+
borderColor: computed.borderColor,
63+
color: computed.color
64+
};
65+
});
66+
67+
// Verify that styles are set (not 'rgba(0, 0, 0, 0)' or empty)
68+
expect(styles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
69+
}
70+
});
71+
72+
test('navbar should be responsive', async ({ page }) => {
73+
// Test mobile viewport
74+
await page.setViewportSize({ width: 375, height: 667 });
75+
await page.waitForTimeout(500);
76+
77+
// Check that navbar adapts to mobile
78+
const navbar = page.locator('header, nav, [class*="header"], [class*="navbar"]').first();
79+
if (await navbar.count() > 0) {
80+
expect(await navbar.isVisible()).toBeTruthy();
81+
}
82+
83+
// Test desktop viewport
84+
await page.setViewportSize({ width: 1200, height: 800 });
85+
await page.waitForTimeout(500);
86+
87+
if (await navbar.count() > 0) {
88+
expect(await navbar.isVisible()).toBeTruthy();
89+
}
90+
});
91+
});

‎playwright.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default defineConfig({
2323
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
2424
use: {
2525
/* Base URL to use in actions like `await page.goto('/')`. */
26-
baseURL: process.env.PLAYWRIGHT_BASE_URL || 'https://svmseek.com',
26+
baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',
2727

2828
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
2929
trace: 'on-first-retry',
@@ -108,7 +108,7 @@ export default defineConfig({
108108

109109
/* Run your local dev server before starting the tests - only for local development */
110110
webServer: process.env.PLAYWRIGHT_BASE_URL ? undefined : {
111-
command: 'yarn start',
111+
command: 'serve -s build -l 3000',
112112
url: 'http://localhost:3000',
113113
reuseExistingServer: !process.env.CI,
114114
timeout: parseInt(process.env.PLAYWRIGHT_SERVER_TIMEOUT || '240') * 1000, // Default 240 seconds, configurable

‎playwright.simple.config.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
/**
4+
* Simplified playwright config for basic testing
5+
*/
6+
export default defineConfig({
7+
testDir: './e2e',
8+
fullyParallel: true,
9+
forbidOnly: !!process.env.CI,
10+
retries: process.env.CI ? 2 : 0,
11+
workers: process.env.CI ? 1 : undefined,
12+
reporter: [['list']],
13+
14+
use: {
15+
baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',
16+
trace: 'on-first-retry',
17+
screenshot: 'only-on-failure',
18+
actionTimeout: 10000,
19+
navigationTimeout: 30000,
20+
ignoreHTTPSErrors: true,
21+
},
22+
23+
projects: [
24+
{
25+
name: 'chromium',
26+
use: { ...devices['Desktop Chrome'] },
27+
},
28+
],
29+
30+
/* Run local server for testing */
31+
webServer: process.env.PLAYWRIGHT_BASE_URL ? undefined : {
32+
command: 'serve -s build -l 3000',
33+
url: 'http://localhost:3000',
34+
reuseExistingServer: true,
35+
timeout: 120 * 1000, // 2 minutes
36+
},
37+
});

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 35 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { useTheme } from '@mui/material';
21
import React, { useState, useEffect } from 'react';
2+
import { useTheme as useMuiTheme } from '@mui/material/styles';
33
import styled from 'styled-components';
44
import { Search } from '@mui/icons-material';
55
import SVMSeekLogo from '../../images/SVMSeek.svg';
66
import StakeBtn from '../../images/stakeBtn.png';
7-
import { Row, RowContainer } from '../../pages/commonStyles';
7+
import { RowContainer } from '../../pages/commonStyles';
88
import { Button } from '../Button';
99
import { FeedbackPopup } from '../UsersFeedBackPopup/UsersFeedbackPopup';
1010
import { SearchBar } from '../SearchBar';
11-
import DiscordIcon from './DiscordIcon';
1211
import ThemeToggle from '../ThemeToggle';
12+
import { useTheme } from '../../context/ThemeContext';
1313

1414
import { DropDown } from './Dropdown';
1515
import {
@@ -25,43 +25,25 @@ import {
2525
VaultNavLink,
2626
WalletContainer,
2727
} from './styles';
28-
import TelegramIcon from './TelegramIcon';
29-
import TwitterIcon from './TwitterIcon';
3028

31-
const Socials = styled(Row)`
32-
& a:hover {
33-
svg {
34-
g {
35-
path {
36-
fill: var(--interactive-primary);
37-
}
38-
}
39-
}
40-
}
41-
`;
42-
43-
const StyledLink = styled.a`
44-
height: 100%;
45-
`;
46-
47-
const SearchButton = styled.button`
29+
const SearchButton = styled.button<{ theme?: any }>`
4830
display: flex;
4931
align-items: center;
5032
gap: 8px;
5133
padding: 8px 12px;
52-
background: var(--bg-secondary);
53-
border: 1px solid var(--border-main);
54-
border-radius: 8px;
55-
color: var(--text-secondary);
34+
background: ${props => props.theme?.colors?.background?.secondary || 'var(--bg-secondary)'};
35+
border: 1px solid ${props => props.theme?.colors?.border?.primary || 'var(--border-primary)'};
36+
border-radius: ${props => props.theme?.effects?.radius?.md || '8px'};
37+
color: ${props => props.theme?.colors?.text?.secondary || 'var(--text-secondary)'};
5638
cursor: pointer;
5739
transition: all 0.2s;
5840
font-size: 14px;
5941
margin-right: 16px;
6042
6143
&:hover {
62-
background: var(--bg-primary);
63-
border-color: var(--interactive-primary);
64-
color: var(--text-primary);
44+
background: ${props => props.theme?.colors?.background?.primary || 'var(--bg-primary)'};
45+
border-color: ${props => props.theme?.colors?.interactive?.primary || 'var(--interactive-primary)'};
46+
color: ${props => props.theme?.colors?.text?.primary || 'var(--text-primary)'};
6547
}
6648
6749
@media (max-width: 768px) {
@@ -84,9 +66,9 @@ const ShortcutKeys = styled.div`
8466
}
8567
`;
8668

87-
const Key = styled.span`
88-
background: var(--bg-primary);
89-
border: 1px solid var(--border-main);
69+
const Key = styled.span<{ theme?: any }>`
70+
background: ${props => props.theme?.colors?.background?.primary || 'var(--bg-primary)'};
71+
border: 1px solid ${props => props.theme?.colors?.border?.primary || 'var(--border-primary)'};
9072
border-radius: 4px;
9173
padding: 2px 4px;
9274
font-family: monospace;
@@ -97,21 +79,21 @@ interface ExternalLinkProps {
9779
show?: string;
9880
}
9981

100-
const ExternalLink = styled.a<ExternalLinkProps>`
82+
const ExternalLink = styled.a<ExternalLinkProps & { theme?: any }>`
10183
text-decoration: none;
10284
font-size: 0.7em;
10385
padding: 8px 12px;
10486
margin: 0px 4px;
10587
text-align: center;
106-
border-radius: 8px;
107-
color: var(--text-secondary);
108-
background: var(--bg-primary);
88+
border-radius: ${props => props.theme?.effects?.radius?.md || '8px'};
89+
color: ${props => props.theme?.colors?.text?.secondary || 'var(--text-secondary)'};
90+
background: ${props => props.theme?.colors?.background?.primary || 'var(--bg-primary)'};
10991
transition: all ease-in 0.2s;
11092
cursor: pointer;
11193
11294
&:hover {
113-
background: var(--bg-secondary);
114-
color: var(--text-primary);
95+
background: ${props => props.theme?.colors?.background?.secondary || 'var(--bg-secondary)'};
96+
color: ${props => props.theme?.colors?.text?.primary || 'var(--text-primary)'};
11597
}
11698
11799
@media (max-width: 768px) {
@@ -122,7 +104,8 @@ const ExternalLink = styled.a<ExternalLinkProps>`
122104
export const Navbar = () => {
123105
const [feedbackPopupOpen, setFeedbackPopupOpen] = useState(false);
124106
const [searchOpen, setSearchOpen] = useState(false);
125-
const theme = useTheme();
107+
const { currentTheme } = useTheme();
108+
const muiTheme = useMuiTheme();
126109

127110
// Global keyboard shortcut for search
128111
useEffect(() => {
@@ -188,20 +171,23 @@ export const Navbar = () => {
188171
<MainLinksWrap>
189172
<MainLinksBlock>
190173
<ExternalLink
174+
theme={currentTheme}
191175
href="https://svmseek.com/chart/spot/SVMAI_USDC"
192176
target="_blank"
193177
rel="noopener noreferrer"
194178
>
195179
Trade
196180
</ExternalLink>
197181
<ExternalLink
182+
theme={currentTheme}
198183
href="https://svmseek.com/swap"
199184
target="_blank"
200185
rel="noopener noreferrer"
201186
>
202187
Swap
203188
</ExternalLink>
204189
<ExternalLink
190+
theme={currentTheme}
205191
href="https://svmseek.com/pools"
206192
target="_blank"
207193
rel="noopener noreferrer"
@@ -210,13 +196,15 @@ export const Navbar = () => {
210196
Pools
211197
</ExternalLink>
212198
<ExternalLink
199+
theme={currentTheme}
213200
href="https://svmseek.com/rebalance"
214201
target="_blank"
215202
rel="noopener noreferrer"
216203
>
217204
Rebalance
218205
</ExternalLink>
219206
<ExternalLink
207+
theme={currentTheme}
220208
href="https://svmseek.com/dashboard"
221209
target="_blank"
222210
rel="noopener noreferrer"
@@ -249,6 +237,7 @@ export const Navbar = () => {
249237
</NavLink>
250238

251239
<ExternalLink
240+
theme={currentTheme}
252241
href="https://docs.svmseek.com/dex/how-to-get-started-on-aldrin-dex"
253242
target="_blank"
254243
rel="noopener noreferrer"
@@ -260,6 +249,7 @@ export const Navbar = () => {
260249
<DropDown hide="lg" text="···">
261250
{feedbackLinks}
262251
<ExternalLink
252+
theme={currentTheme}
263253
href="https://svmseek.com/pools"
264254
target="_blank"
265255
rel="noopener noreferrer"
@@ -268,6 +258,7 @@ export const Navbar = () => {
268258
Liquidity Pools
269259
</ExternalLink>
270260
<ExternalLink
261+
theme={currentTheme}
271262
href="https://docs.svmseek.com/dex/how-to-get-started-on-aldrin-dex"
272263
target="_blank"
273264
rel="noopener noreferrer"
@@ -280,52 +271,26 @@ export const Navbar = () => {
280271
</MainLinksWrap>
281272
<WalletContainer>
282273
<RowContainer padding="0">
283-
<SearchButton onClick={() => setSearchOpen(true)}>
274+
<SearchButton theme={currentTheme} onClick={() => setSearchOpen(true)}>
284275
<Search fontSize="small" />
285276
<span>Search</span>
286277
<ShortcutKeys>
287-
<Key>⌘</Key>
288-
<Key>K</Key>
278+
<Key theme={currentTheme}>⌘</Key>
279+
<Key theme={currentTheme}>K</Key>
289280
</ShortcutKeys>
290281
</SearchButton>
291282

292-
<div >
283+
<div>
293284
<ThemeToggle />
294285
</div>
295-
<Socials justify={'space-around'} height="100%" width={'auto'}>
296-
<StyledLink
297-
298-
target="_blank"
299-
rel="noopener noreferrer"
300-
href="https://twitter.com/svmseek"
301-
>
302-
<TwitterIcon />
303-
</StyledLink>
304-
<StyledLink
305-
306-
target="_blank"
307-
rel="noopener noreferrer"
308-
href="https://t.me/svmseek"
309-
>
310-
<TelegramIcon />
311-
</StyledLink>
312-
<StyledLink
313-
target="_blank"
314-
rel="noopener noreferrer"
315-
href="https://discord.gg/4VZyNxT2WU"
316-
317-
>
318-
<DiscordIcon />
319-
</StyledLink>
320-
</Socials>
321286
</RowContainer>
322287
</WalletContainer>
323288
</HeaderWrap>
324289

325290
<SearchBar open={searchOpen} onClose={() => setSearchOpen(false)} />
326291

327292
<FeedbackPopup
328-
theme={theme}
293+
theme={muiTheme}
329294
open={feedbackPopupOpen}
330295
onClose={() => {
331296
setFeedbackPopupOpen(false);

0 commit comments

Comments
 (0)