Skip to content

Commit 93505ab

Browse files
hemanandrclaude
hemanandr
and
claude
committed
improve: enhance sidebar typography and spacing for better UX
- Updated navigation item typography with medium font weight and letter spacing - Increased padding and spacing throughout sidebar for better visual hierarchy - Enhanced brand section with larger logo and increased padding - Improved status section typography and layout consistency - Made About page more compact with reduced spacing between sections - Applied consistent border radius and modern styling to navigation items 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent c30fe20 commit 93505ab

File tree

2 files changed

+55
-31
lines changed

2 files changed

+55
-31
lines changed

‎thingconnect.pulse.client/src/components/layout/Navigation.tsx‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,22 +36,28 @@ export function Navigation({ onItemClick }: NavigationProps) {
3636
return (
3737
<Box h='100%' display='flex' flexDirection='column' data-testid='navigation'>
3838
<Box
39-
p={4}
39+
p={6}
4040
borderBottom='1px'
4141
borderColor='gray.200'
4242
_dark={{ borderColor: 'gray.700' }}
4343
data-testid='brand-section'
4444
>
45-
<Image data-testid='thingconnect-icon' src={thingConnectIcon} alt='ThingConnect' w={40} />
45+
<Image
46+
data-testid='thingconnect-icon'
47+
src={thingConnectIcon}
48+
alt='ThingConnect'
49+
w={44}
50+
h='auto'
51+
/>
4652
</Box>
47-
<VStack gap={1} p={2} flex='1' align='stretch' data-testid='navigation-items'>
53+
<VStack gap={2} p={4} flex='1' align='stretch' data-testid='navigation-items'>
4854
{navigationItems.map(item => {
4955
const isActive = !item.external && isActiveRoute(item.path);
5056
const ItemContent = (
5157
<HStack
52-
px={2}
53-
py={1}
54-
borderRadius='md'
58+
px={3}
59+
py={2.5}
60+
borderRadius='lg'
5561
color={isActive ? 'blue.600' : 'gray.600'}
5662
bg={isActive ? 'whiteAlpha.950' : 'transparent'}
5763
border={isActive ? '1px solid' : undefined}
@@ -71,7 +77,12 @@ export function Navigation({ onItemClick }: NavigationProps) {
7177
}}
7278
>
7379
<Icon as={item.icon} boxSize={4} />
74-
<Text fontSize='sm' fontWeight={'semibold'}>
80+
<Text
81+
fontSize='sm'
82+
fontWeight='medium'
83+
letterSpacing='0.025em'
84+
lineHeight='1.2'
85+
>
7586
{item.label}
7687
</Text>
7788
</HStack>
@@ -90,9 +101,9 @@ export function Navigation({ onItemClick }: NavigationProps) {
90101
);
91102
})}
92103
</VStack>
93-
<Box p={3} borderTop='1px' borderColor='gray.200' _dark={{ borderColor: 'gray.700' }}>
94-
<VStack align='stretch' gap={3}>
95-
<VStack align='stretch' gap={2}>
104+
<Box p={4} borderTop='1px' borderColor='gray.200' _dark={{ borderColor: 'gray.700' }}>
105+
<VStack align='stretch' gap={4}>
106+
<VStack align='stretch' gap={3}>
96107
<HStack gap={2} display={{ base: 'none', md: 'flex' }} data-testid='connection-status'>
97108
<Wifi size={16} aria-label='Connection status' />
98109
<Badge colorPalette='green' variant='solid' size='sm'>
@@ -101,6 +112,8 @@ export function Navigation({ onItemClick }: NavigationProps) {
101112
<Text
102113
data-testid='last-refresh-time'
103114
fontSize='xs'
115+
fontWeight='medium'
116+
letterSpacing='0.025em'
104117
color='gray.500'
105118
_dark={{ color: 'gray.400' }}
106119
display={{ base: 'none', md: 'block' }}
@@ -116,7 +129,13 @@ export function Navigation({ onItemClick }: NavigationProps) {
116129
aria-label='System status'
117130
data-testid='system-status'
118131
/>
119-
<Text fontSize='xs' color='gray.600' _dark={{ color: 'gray.400' }}>
132+
<Text
133+
fontSize='xs'
134+
fontWeight='medium'
135+
letterSpacing='0.025em'
136+
color='gray.600'
137+
_dark={{ color: 'gray.400' }}
138+
>
120139
System Online
121140
</Text>
122141
</HStack>
@@ -133,7 +152,12 @@ export function Navigation({ onItemClick }: NavigationProps) {
133152
px='0'
134153
>
135154
<LogOut size={16} />
136-
<Text fontSize='sm' fontWeight='semibold'>
155+
<Text
156+
fontSize='sm'
157+
fontWeight='medium'
158+
letterSpacing='0.025em'
159+
lineHeight='1.2'
160+
>
137161
Logout
138162
</Text>
139163
</Button>

‎thingconnect.pulse.client/src/pages/About.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@ export default function About() {
5656
}}
5757
>
5858
{/* Hero Section */}
59-
<Box bg='gray.50' _dark={{ bg: 'gray.900' }} py={16}>
59+
<Box bg='gray.50' _dark={{ bg: 'gray.900' }} py={8}>
6060
<Container maxW='5xl'>
61-
<VStack gap={6} textAlign='center'>
61+
<VStack gap={4} textAlign='center'>
6262
<Heading size='3xl' color='gray.800' _dark={{ color: 'white' }}>
6363
The Heart of Manufacturing Connection
6464
</Heading>
@@ -78,7 +78,7 @@ export default function About() {
7878
</HStack>
7979
</HStack>
8080
<Box
81-
p={6}
81+
p={4}
8282
borderRadius='lg'
8383
bg='gray.50'
8484
_dark={{ bg: 'gray.800', borderColor: 'gray.700' }}
@@ -102,9 +102,9 @@ export default function About() {
102102
</Box>
103103

104104
{/* Mission Section */}
105-
<Box py={20} _dark={{ bg: 'gray.800' }}>
105+
<Box py={12} _dark={{ bg: 'gray.800' }}>
106106
<Container maxW='5xl'>
107-
<VStack gap={6} textAlign='center'>
107+
<VStack gap={4} textAlign='center'>
108108
<Heading size='2xl' color='gray.800' _dark={{ color: 'white' }}>
109109
Our Mission
110110
</Heading>
@@ -117,13 +117,13 @@ export default function About() {
117117
</Box>
118118

119119
{/* Features Section */}
120-
<Box bg='blue.50' _dark={{ bg: 'blue.900' }} py={20}>
120+
<Box bg='blue.50' _dark={{ bg: 'blue.900' }} py={12}>
121121
<Container maxW='6xl'>
122-
<VStack gap={12}>
122+
<VStack gap={8}>
123123
<Heading size='2xl' textAlign='center' color='gray.800' _dark={{ color: 'white' }}>
124124
Key Features
125125
</Heading>
126-
<Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={8}>
126+
<Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={6}>
127127
{[
128128
{
129129
icon: <Zap size={20} color='#3182ce' />,
@@ -149,7 +149,7 @@ export default function About() {
149149
<GridItem key={i}>
150150
<VStack
151151
align='start'
152-
p={6}
152+
p={4}
153153
borderRadius='lg'
154154
border='1px solid'
155155
borderColor='gray.200'
@@ -177,9 +177,9 @@ export default function About() {
177177
</Box>
178178

179179
{/* Technology Stack */}
180-
<Box bg='gray.50' _dark={{ bg: 'gray.800' }} py={20}>
180+
<Box bg='gray.50' _dark={{ bg: 'gray.800' }} py={12}>
181181
<Container maxW='5xl'>
182-
<VStack gap={6} textAlign='center'>
182+
<VStack gap={4} textAlign='center'>
183183
<Heading size='2xl' color='gray.800' _dark={{ color: 'white' }}>
184184
Built with Modern Tech
185185
</Heading>
@@ -210,13 +210,13 @@ export default function About() {
210210
</Box>
211211

212212
{/* Community Section */}
213-
<Box py={20}>
213+
<Box py={12}>
214214
<Container maxW='6xl'>
215-
<VStack gap={12} textAlign='center'>
215+
<VStack gap={8} textAlign='center'>
216216
<Heading size='2xl' color='gray.800' _dark={{ color: 'white' }}>
217217
Join Our Community
218218
</Heading>
219-
<Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={8}>
219+
<Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={6}>
220220
{[
221221
{
222222
icon: MessageCircle,
@@ -250,7 +250,7 @@ export default function About() {
250250
<Link key={i} href={c.link} target='_blank' _hover={{ textDecoration: 'none' }}>
251251
<VStack
252252
align='start'
253-
p={6}
253+
p={4}
254254
border='1px solid'
255255
borderColor='gray.200'
256256
_dark={{ borderColor: 'gray.700', bg: 'gray.800' }}
@@ -287,9 +287,9 @@ export default function About() {
287287
</Box>
288288

289289
{/* Footer Section */}
290-
<Box bg='gray.50' _dark={{ bg: 'gray.800' }} py={16}>
290+
<Box bg='gray.50' _dark={{ bg: 'gray.800' }} py={10}>
291291
<Container maxW='4xl'>
292-
<VStack gap={4} textAlign='center'>
292+
<VStack gap={3} textAlign='center'>
293293
<HStack justify='center' gap={2}>
294294
<Heart size={18} color='red' />
295295
<Text fontWeight='medium' fontSize='sm'>
@@ -319,14 +319,14 @@ export default function About() {
319319

320320
{/* License Footer */}
321321
<Box
322-
py={10}
322+
py={6}
323323
bg='green.50'
324324
_dark={{ bg: 'green.900', color: 'green.200', borderColor: 'green.700' }}
325325
borderTop='1px solid'
326326
borderColor='green.200'
327327
textAlign='center'
328328
>
329-
<VStack gap={2}>
329+
<VStack gap={1}>
330330
<Heading size='md' color='green.700' _dark={{ color: 'green.300' }}>
331331
Free for Manufacturing
332332
</Heading>

0 commit comments

Comments
 (0)