Skip to content

Commit 5227db5

Browse files
BTheCoderrBTheCoderr
committed
Update Rights page design to match site consistency
- Updated RightsPage to use design system components (PageLayout, Section, Card, CardContent, Button) - Applied SmartProBono brand colors: primary blue (#1565C0) and secondary teal (#14B8A6) - Enhanced card hover effects with brand color borders and improved shadows - Updated chat interface with consistent styling and brand colors - Improved typography and spacing using design tokens - Added proper color coordination for chips and interactive elements - Enhanced form styling with brand color focus states - Made the page consistent with Services page and overall site design
1 parent b86c810 commit 5227db5

1 file changed

Lines changed: 200 additions & 117 deletions

File tree

‎frontend/src/pages/RightsPage.js‎

Lines changed: 200 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import React, { useState } from 'react';
22
import {
33
TextField,
4-
Button,
54
Paper,
65
Box,
76
Typography,
87
CircularProgress,
98
Alert,
109
Grid,
11-
Card,
12-
CardContent,
1310
Chip,
1411
Divider
1512
} from '@mui/material';
16-
import PageLayout from '../components/PageLayout';
13+
import { PageLayout, Section, Button, Card, CardContent, designTokens } from '../design-system';
1714
import GavelIcon from '@mui/icons-material/Gavel';
1815
import SecurityIcon from '@mui/icons-material/Security';
1916
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter';
@@ -31,39 +28,45 @@ function RightsPage() {
3128
const rightCategories = [
3229
{
3330
title: 'Civil Rights',
34-
icon: <GavelIcon sx={{ fontSize: 40, color: '#1976d2' }} />,
31+
icon: <GavelIcon sx={{ fontSize: 40, color: '#1565C0' }} />,
3532
description: 'Fundamental rights and freedoms protected by law',
36-
examples: ['Freedom of speech', 'Equal protection', 'Due process']
33+
examples: ['Freedom of speech', 'Equal protection', 'Due process'],
34+
color: '#1565C0'
3735
},
3836
{
3937
title: 'Consumer Rights',
40-
icon: <SecurityIcon sx={{ fontSize: 40, color: '#2e7d32' }} />,
38+
icon: <SecurityIcon sx={{ fontSize: 40, color: '#14B8A6' }} />,
4139
description: 'Rights related to purchases and services',
42-
examples: ['Product safety', 'Fair pricing', 'Warranty claims']
40+
examples: ['Product safety', 'Fair pricing', 'Warranty claims'],
41+
color: '#14B8A6'
4342
},
4443
{
4544
title: 'Employment Rights',
46-
icon: <BusinessCenterIcon sx={{ fontSize: 40, color: '#ed6c02' }} />,
45+
icon: <BusinessCenterIcon sx={{ fontSize: 40, color: '#1565C0' }} />,
4746
description: 'Workplace protections and employee rights',
48-
examples: ['Fair wages', 'Safe workplace', 'Non-discrimination']
47+
examples: ['Fair wages', 'Safe workplace', 'Non-discrimination'],
48+
color: '#1565C0'
4949
},
5050
{
5151
title: 'Housing Rights',
52-
icon: <HomeIcon sx={{ fontSize: 40, color: '#9c27b0' }} />,
52+
icon: <HomeIcon sx={{ fontSize: 40, color: '#14B8A6' }} />,
5353
description: 'Tenant and property owner protections',
54-
examples: ['Fair housing', 'Tenant rights', 'Property rights']
54+
examples: ['Fair housing', 'Tenant rights', 'Property rights'],
55+
color: '#14B8A6'
5556
},
5657
{
5758
title: 'Healthcare Rights',
58-
icon: <HealthAndSafetyIcon sx={{ fontSize: 40, color: '#d32f2f' }} />,
59+
icon: <HealthAndSafetyIcon sx={{ fontSize: 40, color: '#1565C0' }} />,
5960
description: 'Medical and healthcare related rights',
60-
examples: ['Patient privacy', 'Treatment access', 'Insurance coverage']
61+
examples: ['Patient privacy', 'Treatment access', 'Insurance coverage'],
62+
color: '#1565C0'
6163
},
6264
{
6365
title: 'Constitutional Rights',
64-
icon: <AccountBalanceIcon sx={{ fontSize: 40, color: '#0288d1' }} />,
66+
icon: <AccountBalanceIcon sx={{ fontSize: 40, color: '#14B8A6' }} />,
6567
description: 'Rights guaranteed by the Constitution',
66-
examples: ['Voting rights', 'Privacy rights', 'Religious freedom']
68+
examples: ['Voting rights', 'Privacy rights', 'Religious freedom'],
69+
color: '#14B8A6'
6770
}
6871
];
6972

@@ -96,115 +99,195 @@ function RightsPage() {
9699
title="Know Your Rights"
97100
description="Learn about your legal rights and protections in various aspects of life"
98101
>
99-
{/* Categories Grid */}
100-
<Grid container spacing={4} sx={{ mb: 6 }}>
101-
{rightCategories.map((category, index) => (
102-
<Grid item xs={12} sm={6} md={4} key={index}>
103-
<Card
104-
sx={{
105-
height: '100%',
106-
transition: 'transform 0.2s',
107-
'&:hover': {
108-
transform: 'translateY(-4px)',
109-
boxShadow: 4
110-
}
111-
}}
112-
>
113-
<CardContent sx={{ p: 3 }}>
114-
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
115-
{category.icon}
116-
<Typography variant="h6" sx={{ ml: 1 }}>
117-
{category.title}
102+
<Section>
103+
{/* Categories Grid */}
104+
<Grid container spacing={4} sx={{ mb: 6 }}>
105+
{rightCategories.map((category, index) => (
106+
<Grid item xs={12} sm={6} md={4} key={index}>
107+
<Card
108+
sx={{
109+
height: '100%',
110+
transition: 'all 0.3s ease',
111+
border: `2px solid transparent`,
112+
'&:hover': {
113+
transform: 'translateY(-8px)',
114+
boxShadow: '0 12px 24px rgba(21, 101, 192, 0.15)',
115+
border: `2px solid ${category.color}`,
116+
}
117+
}}
118+
>
119+
<CardContent sx={{ p: designTokens.spacing[4] }}>
120+
<Box sx={{ display: 'flex', alignItems: 'center', mb: designTokens.spacing[3] }}>
121+
{category.icon}
122+
<Typography
123+
variant="h6"
124+
sx={{
125+
ml: designTokens.spacing[2],
126+
fontWeight: designTokens.typography.fontWeight.semibold,
127+
color: designTokens.colors.neutral[800]
128+
}}
129+
>
130+
{category.title}
131+
</Typography>
132+
</Box>
133+
<Typography
134+
color="text.secondary"
135+
paragraph
136+
sx={{
137+
mb: designTokens.spacing[3],
138+
lineHeight: 1.6
139+
}}
140+
>
141+
{category.description}
118142
</Typography>
119-
</Box>
120-
<Typography color="text.secondary" paragraph>
121-
{category.description}
122-
</Typography>
123-
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
124-
{category.examples.map((example, i) => (
125-
<Chip
126-
key={i}
127-
label={example}
128-
size="small"
129-
variant="outlined"
130-
/>
131-
))}
132-
</Box>
133-
</CardContent>
134-
</Card>
135-
</Grid>
136-
))}
137-
</Grid>
143+
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
144+
{category.examples.map((example, i) => (
145+
<Chip
146+
key={i}
147+
label={example}
148+
size="small"
149+
variant="outlined"
150+
sx={{
151+
borderColor: category.color,
152+
color: category.color,
153+
'&:hover': {
154+
backgroundColor: `${category.color}15`,
155+
borderColor: category.color,
156+
}
157+
}}
158+
/>
159+
))}
160+
</Box>
161+
</CardContent>
162+
</Card>
163+
</Grid>
164+
))}
165+
</Grid>
166+
</Section>
138167

139-
{/* Chat Interface */}
140-
<Paper
141-
elevation={2}
142-
sx={{
143-
p: 3,
144-
bgcolor: 'rgba(255, 255, 255, 0.9)',
145-
backdropFilter: 'blur(8px)'
146-
}}
147-
>
148-
<Typography variant="h5" gutterBottom>
149-
Ask About Your Rights
150-
</Typography>
151-
152-
<Box sx={{ mb: 3, maxHeight: '50vh', overflow: 'auto' }}>
153-
{messages.map((msg, index) => (
154-
<Paper
155-
key={index}
168+
<Section>
169+
{/* Chat Interface */}
170+
<Card
171+
elevation={2}
172+
sx={{
173+
p: designTokens.spacing[4],
174+
bgcolor: 'rgba(255, 255, 255, 0.95)',
175+
backdropFilter: 'blur(8px)',
176+
border: '1px solid rgba(21, 101, 192, 0.1)'
177+
}}
178+
>
179+
<Typography
180+
variant="h5"
181+
gutterBottom
182+
sx={{
183+
fontWeight: designTokens.typography.fontWeight.bold,
184+
color: designTokens.colors.neutral[800],
185+
mb: designTokens.spacing[4]
186+
}}
187+
>
188+
Ask About Your Rights
189+
</Typography>
190+
191+
<Box sx={{ mb: designTokens.spacing[4], maxHeight: '50vh', overflow: 'auto' }}>
192+
{messages.map((msg, index) => (
193+
<Paper
194+
key={index}
195+
sx={{
196+
p: designTokens.spacing[3],
197+
mb: designTokens.spacing[2],
198+
bgcolor: msg.type === 'user' ? 'rgba(21, 101, 192, 0.08)' : '#fff',
199+
border: msg.type === 'user' ? '1px solid rgba(21, 101, 192, 0.2)' : '1px solid rgba(0, 0, 0, 0.1)',
200+
maxWidth: '80%',
201+
ml: msg.type === 'user' ? 'auto' : 0,
202+
borderRadius: designTokens.borderRadius.lg
203+
}}
204+
>
205+
<Typography sx={{ lineHeight: 1.6 }}>{msg.text}</Typography>
206+
{msg.timing && (
207+
<Typography
208+
variant="caption"
209+
color="text.secondary"
210+
sx={{ display: 'block', mt: 1 }}
211+
>
212+
Response time: {msg.timing.model_time}
213+
</Typography>
214+
)}
215+
</Paper>
216+
))}
217+
</Box>
218+
219+
{error && (
220+
<Alert
221+
severity="error"
156222
sx={{
157-
p: 2,
158-
mb: 2,
159-
bgcolor: msg.type === 'user' ? '#e3f2fd' : '#fff',
160-
maxWidth: '80%',
161-
ml: msg.type === 'user' ? 'auto' : 0
223+
mb: designTokens.spacing[3],
224+
borderRadius: designTokens.borderRadius.md
162225
}}
163226
>
164-
<Typography>{msg.text}</Typography>
165-
{msg.timing && (
166-
<Typography variant="caption" color="text.secondary">
167-
Response time: {msg.timing.model_time}
168-
</Typography>
169-
)}
170-
</Paper>
171-
))}
172-
</Box>
227+
{error}
228+
</Alert>
229+
)}
173230

174-
{error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
231+
<Divider sx={{ my: designTokens.spacing[4] }} />
175232

176-
<Divider sx={{ my: 3 }} />
177-
178-
<form onSubmit={handleSubmit}>
179-
<TextField
180-
fullWidth
181-
multiline
182-
rows={3}
183-
value={prompt}
184-
onChange={(e) => setPrompt(e.target.value)}
185-
placeholder="Ask about your legal rights..."
186-
sx={{
187-
mb: 2,
188-
'& .MuiOutlinedInput-root': {
189-
backgroundColor: 'white'
190-
}
191-
}}
192-
/>
193-
<Button
194-
fullWidth
195-
variant="contained"
196-
type="submit"
197-
disabled={loading || !prompt.trim()}
198-
sx={{ py: 1.5 }}
199-
>
200-
{loading ? <CircularProgress size={24} /> : "Ask Question"}
201-
</Button>
202-
</form>
203-
</Paper>
233+
<form onSubmit={handleSubmit}>
234+
<TextField
235+
fullWidth
236+
multiline
237+
rows={3}
238+
value={prompt}
239+
onChange={(e) => setPrompt(e.target.value)}
240+
placeholder="Ask about your legal rights..."
241+
sx={{
242+
mb: designTokens.spacing[3],
243+
'& .MuiOutlinedInput-root': {
244+
backgroundColor: 'white',
245+
borderRadius: designTokens.borderRadius.md,
246+
'&:hover .MuiOutlinedInput-notchedOutline': {
247+
borderColor: '#1565C0',
248+
},
249+
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
250+
borderColor: '#1565C0',
251+
borderWidth: 2,
252+
}
253+
}
254+
}}
255+
/>
256+
<Button
257+
fullWidth
258+
variant="contained"
259+
type="submit"
260+
disabled={loading || !prompt.trim()}
261+
sx={{
262+
py: designTokens.spacing[2],
263+
backgroundColor: '#1565C0',
264+
'&:hover': {
265+
backgroundColor: '#0D47A1',
266+
},
267+
'&:disabled': {
268+
backgroundColor: 'rgba(21, 101, 192, 0.3)',
269+
},
270+
borderRadius: designTokens.borderRadius.md,
271+
fontWeight: designTokens.typography.fontWeight.semibold
272+
}}
273+
>
274+
{loading ? <CircularProgress size={24} color="inherit" /> : "Ask Question"}
275+
</Button>
276+
</form>
277+
</Card>
204278

205-
<Alert severity="info" sx={{ mt: 4 }}>
206-
This information is for general guidance only. For specific legal advice, please consult with a qualified legal professional.
207-
</Alert>
279+
<Alert
280+
severity="info"
281+
sx={{
282+
mt: designTokens.spacing[4],
283+
borderRadius: designTokens.borderRadius.md,
284+
border: '1px solid rgba(21, 101, 192, 0.2)',
285+
backgroundColor: 'rgba(21, 101, 192, 0.05)'
286+
}}
287+
>
288+
This information is for general guidance only. For specific legal advice, please consult with a qualified legal professional.
289+
</Alert>
290+
</Section>
208291
</PageLayout>
209292
);
210293
}

0 commit comments

Comments
 (0)