fix: Chakra UI v3 theme consistency and responsive layout in auth pages (#147)

gokulvij · claude · web-flow · commit 3442e32d3785 · 2025-09-29T21:45:06.000+05:30
Co-authored-by: Claude &lt;noreply@anthropic.com&gt;
diff --git a/thingconnect.pulse.client/src/components/layout/AuthLayout.tsx b/thingconnect.pulse.client/src/components/layout/AuthLayout.tsx
@@ -10,7 +10,7 @@ interface AuthLayoutProps {
 export function AuthLayout({ children, showBenefits = true }: AuthLayoutProps) {
   if (!showBenefits) {
     return (
-      <Box h='100vh' bg='white' w='full' fontFamily="'Open Sans', sans-serif" overflow='hidden'>
+      <Box h='100vh' bg='bg' w='full' fontFamily="'Open Sans', sans-serif" overflow='hidden'>
         <Box
           p={{ base: 8, lg: 16 }}
           display='flex'
@@ -26,15 +26,15 @@ export function AuthLayout({ children, showBenefits = true }: AuthLayoutProps) {
   }
 
   return (
-    <Box h='100vh' bg='white' w='full' fontFamily="'Open Sans', sans-serif" overflow='hidden'>
+    <Box h='100vh' bg='bg' w='full' fontFamily="'Open Sans', sans-serif" overflow='hidden'>
       <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} h='100vh'>
         <BenefitsSection />
         <Box
           p={{ base: 8, lg: 16 }}
           display='flex'
           flexDirection='column'
           justifyContent='center'
-          bg='white'
+          bg='bg'
           overflow='auto'
         >
           {children}
diff --git a/thingconnect.pulse.client/src/components/layout/BenefitsSection.tsx b/thingconnect.pulse.client/src/components/layout/BenefitsSection.tsx
@@ -32,74 +32,82 @@ const benefits = [
 export function BenefitsSection() {
   return (
     <Box
-      p={{ base: 8, lg: 16 }}
+      p={{ base: 3, sm: 4, md: 6, lg: 8 }}
       display='flex'
       flexDirection='column'
       justifyContent='center'
-      bg='gray.50'
+      bg='bg.subtle'
+      h='100dvh'
     >
-      <VStack align='start' gap={8} maxW='lg' mx='auto'>
-        <Box>
-          <Box mb={6}>
+      <VStack align='start' gap={{ base: 2, sm: 3, md: 4 }} maxW={{ base: 'full', sm: 'md', lg: 'lg' }} mx='auto' w='full'>
+        <Box w='full'>
+          <Box mb={{ base: 2, md: 3 }}>
             <Image src={thingConnectLogo} alt='ThingConnect' h='50px' />
           </Box>
-          <Heading size='2xl' color='gray.800' lineHeight='1.2' mb={4} fontWeight='bold'>
+          <Heading
+            size={{ base: 'lg', sm: 'xl', md: '2xl' }}
+            color='fg'
+            lineHeight='1.1'
+            mb={{ base: 2, md: 3 }}
+            fontWeight='bold'
+          >
             Network Availability Monitoring for Manufacturing Sites
           </Heading>
-          <Text color='gray.600' fontSize='lg' fontWeight='medium'>
+          <Text color='fg.muted' fontSize={{ base: 'sm', md: 'md' }} fontWeight='medium'>
             Monitor your critical infrastructure with real-time network availability tracking and
             automated alerting.
           </Text>
         </Box>
 
-        <VStack align='start' gap={4} w='full'>
+        <VStack align='start' gap={{ base: 2, md: 4 }} w='full'>
           {benefits.map(benefit => (
-            <HStack key={benefit.title} align='start' gap={3}>
+            <HStack key={benefit.title} align='start' gap={{ base: 2, md: 3 }} w='full'>
               <Box
                 bg='#076bb3'
                 borderRadius='full'
-                p={1}
-                mt={1}
-                w={6}
-                h={6}
+                p={0.5}
+                mt={0.5}
+                w={{ base: 4, md: 5 }}
+                h={{ base: 4, md: 5 }}
                 display='flex'
                 alignItems='center'
                 justifyContent='center'
+                flexShrink={0}
               >
-                <Icon color='white' size='sm'>
+                <Icon color='white' size='xs'>
                   <Check />
                 </Icon>
               </Box>
-              <Box>
-                <Text fontWeight='bold' color='gray.800' fontSize='md'>
+              <Box flex='1' minW={0}>
+                <Text fontWeight='bold' color='fg' fontSize={{ base: 'xs', md: 'sm' }}>
                   {benefit.title}
                 </Text>
-                <Text color='gray.600' fontSize='sm' fontWeight='medium'>
+                <Text color='fg.muted' fontSize={{ base: '2xs', md: 'xs' }} fontWeight='medium' lineHeight='1.3'>
                   {benefit.description}
                 </Text>
               </Box>
             </HStack>
           ))}
         </VStack>
 
-        <Box pt={6}>
-          <Text fontSize='sm' color='gray.600' mb={4} fontWeight='semibold'>
+        <Box pt={{ base: 2, md: 3 }} w='full'>
+          <Text fontSize={{ base: '2xs', md: 'xs' }} color='fg.muted' mb={{ base: 1, md: 2 }} fontWeight='semibold'>
             Trusted for manufacturing excellence
           </Text>
-          <VStack align='start' gap={2}>
-            <Text fontSize='sm' color='gray.600' fontWeight='medium'>
+          <VStack align='start' gap={{ base: 0.5, md: 1 }}>
+            <Text fontSize={{ base: '2xs', md: 'xs' }} color='fg.muted' fontWeight='medium'>
               • ICMP, TCP & HTTP endpoint monitoring
             </Text>
-            <Text fontSize='sm' color='gray.600' fontWeight='medium'>
+            <Text fontSize={{ base: '2xs', md: 'xs' }} color='fg.muted' fontWeight='medium'>
               • 15-minute and daily data rollups
             </Text>
-            <Text fontSize='sm' color='gray.600' fontWeight='medium'>
+            <Text fontSize={{ base: '2xs', md: 'xs' }} color='fg.muted' fontWeight='medium'>
               • 60-day data retention for trend analysis
             </Text>
           </VStack>
         </Box>
 
-        <Box pt={2}>
+        {/* <Box pt={2}>
           <Text fontSize='sm' color='gray.600' fontWeight='medium'>
             Questions about deployment?{' '}
             <Text
@@ -112,7 +120,7 @@ export function BenefitsSection() {
               Contact Support
             </Text>
           </Text>
-        </Box>
+        </Box> */}
       </VStack>
     </Box>
   );
diff --git a/thingconnect.pulse.client/src/features/auth/components/LoginPage.tsx b/thingconnect.pulse.client/src/features/auth/components/LoginPage.tsx
@@ -61,10 +61,10 @@ export default function LoginPage() {
     <AuthLayout>
       <VStack maxW='sm' mx='auto' w='full' gap={6} align='stretch' maxH='100%' overflow='auto'>
         <VStack gap={2} textAlign='start' w='full'>
-          <Heading size='xl' color='gray.800' fontWeight='bold'>
+          <Heading size='xl' color='fg' fontWeight='bold'>
             Welcome Back
           </Heading>
-          <Text color='gray.600' fontSize='sm' fontWeight='medium'>
+          <Text color='fg.muted' fontSize='sm' fontWeight='medium'>
             Access your network monitoring dashboard
           </Text>
         </VStack>
@@ -109,9 +109,9 @@ export default function LoginPage() {
                 Sign In
               </LoadingButton>
 
-              <Text textAlign='center' w='full' color='gray.600' fontSize='sm'>
+              {/* <Text textAlign='center' w='full' color='fg.muted' fontSize='sm'>
                 Need an account? Contact your system administrator.
-              </Text>
+              </Text> */}
             </VStack>
           </VStack>
         </form>
diff --git a/thingconnect.pulse.client/src/features/auth/components/OnboardingPage.tsx b/thingconnect.pulse.client/src/features/auth/components/OnboardingPage.tsx
@@ -136,10 +136,10 @@ export default function OnboardingPage() {
   const renderStep1 = () => (
     <VStack gap={6}>
       <Box textAlign='center'>
-        <Heading size='lg' mb={2} color='gray.800' fontWeight='bold'>
+        <Heading size='lg' mb={2} color='fg' fontWeight='bold'>
           Administrator Account
         </Heading>
-        <Text color='gray.600' fontSize='lg' fontWeight='medium'>
+        <Text color='fg.muted' fontSize='lg' fontWeight='medium'>
           Create your administrator account to get started
         </Text>
       </Box>
@@ -163,23 +163,23 @@ export default function OnboardingPage() {
       </Stack>
 
       {/* Telemetry Consent Section */}
-      <VStack gap={4} w="full" align="start" p={4} bg="gray.50" rounded="md">
+      <VStack gap={4} w="full" align="start" p={4} bg="bg.subtle" rounded="md">
         <Box>
-          <Text fontSize="md" fontWeight="medium" color="gray.800" mb={1}>
+          <Text fontSize="md" fontWeight="medium" color="fg" mb={1}>
             Help improve ThingConnect Pulse? (Optional)
           </Text>
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="fg.muted">
             Enable anonymous diagnostics to help us fix crashes faster and improve features.
           </Text>
         </Box>
 
         <Stack gap={3} w="full">
           <Flex justify="space-between" align="center">
             <VStack align="start" gap={0} flex="1">
-              <Text fontSize="sm" fontWeight="medium" color="gray.800">
+              <Text fontSize="sm" fontWeight="medium" color="fg">
                 Send sanitized error diagnostics
               </Text>
-              <Text fontSize="xs" color="gray.600">
+              <Text fontSize="xs" color="fg.muted">
                 Exception types, stack traces (no sensitive data)
               </Text>
             </VStack>
@@ -194,10 +194,10 @@ export default function OnboardingPage() {
 
           <Flex justify="space-between" align="center">
             <VStack align="start" gap={0} flex="1">
-              <Text fontSize="sm" fontWeight="medium" color="gray.800">
+              <Text fontSize="sm" fontWeight="medium" color="fg">
                 Send anonymous usage analytics
               </Text>
-              <Text fontSize="xs" color="gray.600">
+              <Text fontSize="xs" color="fg.muted">
                 Feature usage counts (no personal information)
               </Text>
             </VStack>
@@ -226,10 +226,10 @@ export default function OnboardingPage() {
   const renderStep2 = () => (
     <VStack gap={6}>
       <Box textAlign='center'>
-        <Heading size='lg' mb={2} color='gray.800' fontWeight='bold'>
+        <Heading size='lg' mb={2} color='fg' fontWeight='bold'>
           Secure Your Account
         </Heading>
-        <Text color='gray.600' fontSize='lg' fontWeight='medium'>
+        <Text color='fg.muted' fontSize='lg' fontWeight='medium'>
           Choose a strong password for your administrator account
         </Text>
       </Box>
@@ -291,10 +291,10 @@ export default function OnboardingPage() {
         {/* Progress Bar */}
         <Box w='full'>
           <Flex justify='space-between' align='center' mb={2}>
-            <Text fontSize='sm' color='gray.600' fontWeight='medium'>
+            <Text fontSize='sm' color='fg.muted' fontWeight='medium'>
               Step {currentStep} of 2
             </Text>
-            <Text fontSize='sm' color='gray.600' fontWeight='medium'>
+            <Text fontSize='sm' color='fg.muted' fontWeight='medium'>
               {Math.round((currentStep / 2) * 100)}%
             </Text>
           </Flex>
