Skip to content

refactor(pages): replace hardcoded colors with theme tokens #263

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
anderdc merged 4 commits into from
Apr 15, 2026
Merged

refactor(pages): replace hardcoded colors with theme tokens #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
707f536
refactor: replace hardcoded page colors with theme tokens
volcano303 Apr 14, 2026
6a9f271
fix: update
volcano303 Apr 15, 2026
39558e2
Merge branch 'test' into refactor/theme-page-color-token
volcano303 Apr 15, 2026
3b866e7
chore: remove api hardening from page theme pr
volcano303 Apr 15, 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
38 changes: 21 additions & 17 deletions src/pages/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Box, Stack, Typography } from '@mui/material';
import { Box, Stack, Typography, alpha } from '@mui/material';
import { Page } from '../components/layout';
import { SEO } from '../components';
import { useMonthlyRewards } from '../hooks/useMonthlyRewards';
Expand Down Expand Up @@ -30,19 +30,22 @@ const HomePage: React.FC = () => {
justifyContent="center"
gap={{ xs: 2, sm: 3 }}
>
<img
<Box
component="img"
src="/gt-logo.svg"
alt="Gittensor"
style={{
sx={(theme) => ({
height: window.innerWidth < 600 ? '96px' : '128px',
width: 'auto',
filter:
'grayscale(100%) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8))',
}}
filter: `grayscale(100%) invert(1) drop-shadow(0 0 12px ${alpha(
theme.palette.text.primary,
0.8,
)})`,
})}
/>
<Typography
variant="h1"
color="#ffffff"
color="text.primary"
fontWeight="bold"
sx={{
fontFamily: '"JetBrains Mono", monospace',
Expand All @@ -67,28 +70,29 @@ const HomePage: React.FC = () => {
{/* Monthly Rewards Banner */}
{monthlyRewards && (
<Box
sx={{
sx={(theme) => ({
mt: { xs: 4, sm: 5 },
px: { xs: 3, sm: 5, md: 7 },
py: { xs: 2.5, sm: 3.5 },
borderRadius: 2,
background: 'rgba(0, 0, 0, 0.4)',
border: '1px solid rgba(255, 255, 255, 0.15)',
background: alpha(theme.palette.background.default, 0.4),
border: '1px solid',
borderColor: theme.palette.border.light,
backdropFilter: 'blur(10px)',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
boxShadow: `0 8px 32px ${alpha(theme.palette.background.default, 0.3)}`,
transition: 'all 0.3s ease-in-out',
'&:hover': {
border: '1px solid rgba(255, 255, 255, 0.25)',
boxShadow: '0 12px 48px rgba(0, 0, 0, 0.4)',
borderColor: theme.palette.border.medium,
boxShadow: `0 12px 48px ${alpha(theme.palette.background.default, 0.4)}`,
transform: 'translateY(-2px)',
},
}}
})}
>
<Stack alignItems="center" gap={{ xs: 1, sm: 1.5 }}>
<Typography
variant="body2"
color="rgba(255, 255, 255, 0.5)"
sx={{
color: (theme) => theme.palette.text.secondary,
fontSize: { xs: '0.7rem', sm: '0.75rem' },
textTransform: 'uppercase',
letterSpacing: '0.15em',
Expand All @@ -99,9 +103,9 @@ const HomePage: React.FC = () => {
</Typography>
<Typography
variant="h2"
color="#ffffff"
fontWeight="600"
sx={{
color: (theme) => theme.palette.text.primary,
fontFamily: '"JetBrains Mono", monospace',
fontSize: { xs: '2rem', sm: '2.75rem', md: '3.5rem' },
letterSpacing: '-0.02em',
Expand All @@ -115,8 +119,8 @@ const HomePage: React.FC = () => {
</Typography>
<Typography
variant="body2"
color="rgba(255, 255, 255, 0.4)"
sx={{
color: (theme) => theme.palette.text.tertiary,
fontSize: { xs: '0.75rem', sm: '0.85rem' },
textAlign: 'center',
maxWidth: '400px',
Expand Down
15 changes: 10 additions & 5 deletions src/pages/IssueDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,17 @@ const IssueDetailsPage: React.FC = () => {
<IssueHeaderCard issue={issue} />

{/* Tabs */}
<Box sx={{ borderBottom: 1, borderColor: 'rgba(255,255,255,0.1)' }}>
<Box
sx={(theme) => ({
borderBottom: 1,
borderColor: theme.palette.border.light,
})}
>
<Tabs
value={tabValue}
onChange={handleTabChange}
aria-label="issue details tabs"
sx={{
sx={(theme) => ({
'& .MuiTab-root': {
color: STATUS_COLORS.open,
fontFamily:
Expand All @@ -108,16 +113,16 @@ const IssueDetailsPage: React.FC = () => {
minHeight: '48px',
fontSize: '14px',
'&.Mui-selected': {
color: 'text.primary',
color: theme.palette.text.primary,
fontWeight: 600,
},
},
'& .MuiTabs-indicator': {
backgroundColor: 'primary.main',
backgroundColor: theme.palette.primary.main,
height: '3px',
borderRadius: '3px 3px 0 0',
},
}}
})}
>
<Tab
label="Issue"
Expand Down
17 changes: 9 additions & 8 deletions src/pages/IssuesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,30 +59,31 @@ const IssuesPage: React.FC = () => {

{/* Tabs Navigation */}
<Box
sx={{
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
}}
sx={(theme) => ({
borderBottom: '1px solid',
borderColor: theme.palette.border.light,
})}
>
<Tabs
value={tabIndex}
onChange={handleTabChange}
sx={{
sx={(theme) => ({
'& .MuiTab-root': {
fontFamily: '"JetBrains Mono", monospace',
fontSize: '0.85rem',
fontWeight: 600,
textTransform: 'none',
color: 'rgba(255, 255, 255, 0.5)',
color: theme.palette.text.secondary,
minHeight: 48,
'&.Mui-selected': {
color: '#ffffff',
color: theme.palette.text.primary,
},
},
'& .MuiTabs-indicator': {
backgroundColor: '#ffffff',
backgroundColor: theme.palette.text.primary,
height: 2,
},
}}
})}
>
<Tab label="Available Issues" />
<Tab label="Pending Issues" />
Expand Down
33 changes: 18 additions & 15 deletions src/pages/OnboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,31 +61,32 @@ const OnboardPage: React.FC = () => {
}}
>
<Box
sx={{
sx={(theme) => ({
maxWidth: 1200,
width: '100%',
mb: 4,
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
}}
borderBottom: '1px solid',
borderColor: theme.palette.border.light,
})}
>
<Tabs
value={activeTab}
onChange={handleTabChange}
variant="scrollable"
scrollButtons="auto"
allowScrollButtonsMobile
sx={{
sx={(theme) => ({
px: 2,
'& .MuiTab-root': {
textTransform: 'none',
fontWeight: 500,
fontSize: '1rem',
color: 'rgba(255, 255, 255, 0.6)',
color: theme.palette.text.secondary,
'&.Mui-selected': {
color: 'primary.main',
color: theme.palette.primary.main,
},
},
}}
})}
>
<Tab label="About" />
<Tab label="Getting Started" />
Expand All @@ -109,13 +110,14 @@ const OnboardPage: React.FC = () => {
}}
>
<Card
sx={{
sx={(theme) => ({
borderRadius: 3,
border: '1px solid rgba(255, 255, 255, 0.1)',
backgroundColor: 'transparent',
border: '1px solid',
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.surface.transparent,
maxWidth: 1200,
width: '100%',
}}
})}
elevation={0}
>
<CardContent>
Expand All @@ -134,13 +136,14 @@ const OnboardPage: React.FC = () => {
}}
>
<Card
sx={{
sx={(theme) => ({
borderRadius: 3,
border: '1px solid rgba(255, 255, 255, 0.1)',
backgroundColor: 'transparent',
border: '1px solid',
borderColor: theme.palette.border.light,
backgroundColor: theme.palette.surface.transparent,
maxWidth: 1200,
width: '100%',
}}
})}
elevation={0}
>
<CardContent>
Expand Down
15 changes: 10 additions & 5 deletions src/pages/PRDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,17 @@ const PRDetailsPage: React.FC = () => {
/>

{/* Tabs */}
<Box sx={{ borderBottom: 1, borderColor: 'rgba(255,255,255,0.1)' }}>
<Box
sx={(theme) => ({
borderBottom: 1,
borderColor: theme.palette.border.light,
})}
>
<Tabs
value={tabValue}
onChange={handleTabChange}
aria-label="pr details tabs"
sx={{
sx={(theme) => ({
'& .MuiTab-root': {
color: STATUS_COLORS.open,
fontFamily:
Expand All @@ -122,16 +127,16 @@ const PRDetailsPage: React.FC = () => {
minHeight: '48px',
fontSize: '14px',
'&.Mui-selected': {
color: '#fff',
color: theme.palette.text.primary,
fontWeight: 600,
},
},
'& .MuiTabs-indicator': {
backgroundColor: 'primary.main',
backgroundColor: theme.palette.primary.main,
height: '3px',
borderRadius: '3px 3px 0 0',
},
}}
})}
>
<Tab
label="Overview"
Expand Down
Loading
Loading