feat: ✨ added theme toggle for light and dark mode (#49)

* feat: ✨ added theme toggle for light and dark mode * feat: ✨ updated theme toggle button
WasiqB · Oct 8, 2024 · d60b49a · d60b49a
1 parent 047f0aa
commit d60b49a
Show file tree

Hide file tree

Showing 19 changed files with 401 additions and 181 deletions.
diff --git a/app/(app)/globals.css b/app/(app)/globals.css
@@ -11,7 +11,7 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
@@ -49,8 +49,8 @@
     --color-5: 90 100% 63%;
   }
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+    --background: 220 13% 18%;
+    --foreground: 210 40% 98%;
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -3,6 +3,7 @@ import './globals.css';
 import { DetailedHTMLProps, HtmlHTMLAttributes } from 'react';
 import { Footer } from '@/components/home/footer';
 import { GoogleTagManager } from '@next/third-parties/google';
+import { ThemeProvider } from '@/components/utils/theme-provider';
 
 export const metadata: Metadata = {
   title: 'Ultra Reporter',
@@ -18,13 +19,20 @@ const RootLayout = ({
   HTMLHtmlElement
 > => {
   return (
-    <html lang='en'>
+    <html lang='en' suppressHydrationWarning>
       <head>
         <link rel='icon' href='/favicon.png' sizes='any' type='image/png' />
       </head>
       <body className={'antialiased'}>
-        {children}
-        <Footer />
+        <ThemeProvider
+          attribute='class'
+          defaultTheme='light'
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <Footer />
+        </ThemeProvider>
       </body>
       {process.env.VERCEL_ENV === 'production' && (
         <GoogleTagManager gtmId='G-CNW9F6PH7P' />

diff --git a/app/(app)/loading/page.tsx b/app/(app)/loading/page.tsx
@@ -58,7 +58,7 @@ Stack: ${err.stack}`);
   };
 
   return (
-    <div className='flex min-h-screen items-center justify-center bg-gray-100'>
+    <div className='flex min-h-screen items-center justify-center bg-background'>
       <Card className='w-[350px]'>
         <CardHeader>
           <CardTitle>Processing XML</CardTitle>
@@ -67,11 +67,11 @@ Stack: ${err.stack}`);
           <Progress value={progress} className='w-full' />
           {error ? (
             <div className='mt-4'>
-              <h3 className='mb-2 font-semibold text-red-600'>Error:</h3>
-              <p className='mb-4 text-sm text-gray-600'>{error}</p>
+              <h3 className='mb-2 font-semibold text-destructive'>Error:</h3>
+              <p className='mb-4 text-sm text-muted-foreground'>{error}</p>
             </div>
           ) : (
-            <p className='mt-4 text-gray-600'>
+            <p className='mt-4 text-muted-foreground'>
               Please wait while we process your XML file...
             </p>
           )}

diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
@@ -9,17 +9,19 @@ const LandingPage = (): JSX.Element => {
   return (
     <>
       <NavBar />
-      <main className='container mx-auto flex-grow px-4 py-16'>
+      <main className='container mx-auto flex-grow bg-background px-4 py-16 text-foreground'>
         <div className='flex flex-col items-center pt-16 text-center'>
           <h2 className='gradient-text text-3xl font-bold md:text-5xl'>
             Ultra Reporter
           </h2>
-          <h1 className='mb-16 mt-16 text-center text-4xl font-bold leading-tight md:text-6xl'>
-            <span className='text-gray-700'>Convert your Test results to</span>
+          <h1 className='mb-8 mt-16 text-center text-4xl font-bold leading-tight md:text-6xl'>
+            <span className='text-foreground'>
+              Convert your Test results to
+            </span>
             <br />
             <span className='gradient-text'>Beautiful Report</span>
             <br />
-            <span className='text-gray-700'>in one click</span>
+            <span className='text-foreground'>in one click</span>
           </h1>
           <FileUpload />
         </div>

diff --git a/app/(app)/results/page.tsx b/app/(app)/results/page.tsx
@@ -76,50 +76,80 @@ const ResultsPage = (): JSX.Element => {
   } = formattedData || {};
 
   return (
-    <div className='flex min-h-screen flex-col'>
+    <div className='flex min-h-screen flex-col bg-background text-foreground'>
       <NavBar
         suffix={`for ${isLoading ? '...' : date}`}
         cta='Generate new Report'
         showFeedback
       />
       <main className='flex-grow pt-16'>
         <section className='container mx-auto space-y-6 p-4'>
-          <div className='grid grid-cols-1 gap-6'>
-            <Card>
-              <CardHeader>
-                <CardTitle className='text-xl'>Test Statistics</CardTitle>
-                <CardDescription>
-                  Overall Test execution statistics
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className='grid grid-cols-2 gap-4 md:grid-cols-4'>
-                  {['Total Tests', 'Passed', 'Failed', 'Skipped'].map(
-                    (label, index) => (
-                      <Card
-                        key={label}
-                        className={cn(
-                          'rounded-lg p-4',
-                          `${['bg-blue-200', 'bg-green-200', 'bg-red-200', 'bg-yellow-200'][index]}`
-                        )}
-                      >
-                        <CardDescription>{label}</CardDescription>
-                        {isLoading ? (
-                          <Skeleton className='h-8 w-20' />
-                        ) : (
-                          <CardTitle
-                            className={`text-${['blue', 'green', 'red', 'yellow'][index]}-700`}
-                          >
-                            {[totalTests, passed, failed, skipped][index]}
-                          </CardTitle>
-                        )}
-                      </Card>
-                    )
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+          <Card className='bg-card text-card-foreground'>
+            <CardHeader>
+              <CardTitle className='text-xl'>Test Statistics</CardTitle>
+              <CardDescription>
+                Overall Test execution statistics
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+                {[
+                  { label: 'Total Tests', color: 'blue' },
+                  { label: 'Passed', color: 'green' },
+                  { label: 'Failed', color: 'red' },
+                  { label: 'Skipped', color: 'yellow' },
+                ].map((item, index) => (
+                  <Card
+                    key={item.label}
+                    className={cn('rounded-lg p-4', {
+                      'bg-blue-100 dark:bg-blue-900/20': item.color === 'blue',
+                      'bg-green-100 dark:bg-green-900/20':
+                        item.color === 'green',
+                      'bg-red-100 dark:bg-red-900/20': item.color === 'red',
+                      'bg-yellow-100 dark:bg-yellow-900/20':
+                        item.color === 'yellow',
+                    })}
+                  >
+                    {isLoading ? (
+                      <Skeleton className='h-16 w-full' />
+                    ) : (
+                      <>
+                        <CardTitle
+                          className={cn('mb-2 text-3xl font-bold', {
+                            'text-blue-600 dark:text-blue-300':
+                              item.color === 'blue',
+                            'text-green-600 dark:text-green-300':
+                              item.color === 'green',
+                            'text-red-600 dark:text-red-300':
+                              item.color === 'red',
+                            'text-yellow-600 dark:text-yellow-300':
+                              item.color === 'yellow',
+                          })}
+                        >
+                          {[totalTests, passed, failed, skipped][index]}
+                        </CardTitle>
+                        <CardDescription
+                          className={cn('font-medium', {
+                            'text-blue-800 dark:text-blue-200':
+                              item.color === 'blue',
+                            'text-green-800 dark:text-green-200':
+                              item.color === 'green',
+                            'text-red-800 dark:text-red-200':
+                              item.color === 'red',
+                            'text-yellow-800 dark:text-yellow-200':
+                              item.color === 'yellow',
+                          })}
+                        >
+                          {item.label}
+                        </CardDescription>
+                      </>
+                    )}
+                  </Card>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
           <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
             {isLoading ? (
               <>

diff --git a/components/data-table/attachment.tsx b/components/data-table/attachment.tsx
@@ -58,7 +58,7 @@ export function AttachmentDialog({
             </div>
           ) : (
             <div className='max-h-[60vh] overflow-y-auto'>
-              <p className='whitespace-pre-wrap text-lg text-gray-800'>
+              <p className='whitespace-pre-wrap text-lg text-foreground'>
                 {content}
               </p>
             </div>

diff --git a/components/data-table/columns.tsx b/components/data-table/columns.tsx
@@ -74,22 +74,29 @@ export const columns: ColumnDef<TestResultData>[] = [
     accessorKey: 'status',
     header: ({ column }) => <SortableHeader column={column} header='Status' />,
     cell: ({ row }) => {
-      const foundStatus = statuses.find(
-        (status) => status.value === row.getValue('status')
-      );
+      const status = row.getValue('status') as string;
+      const foundStatus = statuses.find((s) => s.value === status);
       if (!foundStatus) {
         return null;
       }
       return (
         <div className='flex items-center'>
-          {foundStatus && (
-            <Badge className={foundStatus.badge_style}>
-              <foundStatus.icon
-                className={cn('mr-2 h-4 w-4', foundStatus.label_style)}
-              />
-              {foundStatus.label}
-            </Badge>
-          )}
+          <Badge
+            variant='outline'
+            className={cn('px-2 py-1', {
+              'bg-green-500/20 text-green-700 dark:bg-green-500/30 dark:text-green-300':
+                status === 'pass',
+              'bg-red-500/20 text-red-700 dark:bg-red-500/30 dark:text-red-300':
+                status === 'fail',
+              'bg-yellow-500/20 text-yellow-700 dark:bg-yellow-500/30 dark:text-yellow-300':
+                status === 'skip',
+              'bg-gray-500/20 text-gray-700 dark:bg-gray-500/30 dark:text-gray-300':
+                status === 'ignored',
+            })}
+          >
+            <foundStatus.icon className={cn('mr-2 h-4 w-4')} />
+            {foundStatus.label}
+          </Badge>
         </div>
       );
     },
@@ -122,9 +129,9 @@ export const columns: ColumnDef<TestResultData>[] = [
         <TooltipWrapper text={value ? 'Configuration method' : 'Test method'}>
           <div className='flex max-w-10 justify-center'>
             {value ? (
-              <GearIcon className='h-4 w-4 text-orange-600' />
+              <GearIcon className='h-4 w-4 text-orange-600 dark:fill-orange-600' />
             ) : (
-              <TestTube className='h-4 w-4 text-blue-600' />
+              <TestTube className='h-4 w-4 text-blue-600 dark:fill-blue-600' />
             )}
           </div>
         </TooltipWrapper>
@@ -147,9 +154,9 @@ export const columns: ColumnDef<TestResultData>[] = [
           {value && value.length > 0 && (
             <TooltipWrapper text={value.sort().join(', ')}>
               {value.length > 1 ? (
-                <Tags className='h-6 w-6 text-blue-600' />
+                <Tags className='h-6 w-6 text-blue-600 dark:fill-blue-600' />
               ) : (
-                <Tag className='h-4 w-4 text-blue-600' />
+                <Tag className='h-4 w-4 text-blue-600 dark:fill-blue-600' />
               )}
             </TooltipWrapper>
           )}
@@ -179,7 +186,7 @@ export const columns: ColumnDef<TestResultData>[] = [
                   onClick={() => setIsOpen(true)}
                   className='w-15'
                 >
-                  <CircleAlert className='h-4 w-4 text-red-500' />
+                  <CircleAlert className='h-4 w-4 text-red-500 dark:fill-red-500' />
                 </Button>
               </DialogTrigger>
               <DialogContent className='flex flex-col sm:max-h-[90vh] sm:max-w-[90vw]'>

diff --git a/components/home/feature.tsx b/components/home/feature.tsx
@@ -2,6 +2,7 @@ import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import {
   BarChartIcon,
   CircleAlert,
+  Group,
   MousePointerClick,
   Table,
 } from 'lucide-react';
@@ -33,22 +34,27 @@ const features = [
     description: 'View your tests exceptions and Errors',
     icon: CircleAlert,
   },
+  {
+    title: 'View Groups',
+    description: 'View your tests groups in which they are categorized',
+    icon: Group,
+  },
 ];
 
 export const Features = (): JSX.Element => {
   return (
     <section className='mb-16 mt-16'>
-      <h2 className='mb-8 text-center text-3xl font-bold text-gray-800'>
+      <h2 className='mb-8 text-center text-3xl font-bold text-foreground'>
         Features
       </h2>
       <div className='grid grid-cols-1 gap-8 md:grid-cols-3'>
         {features.map((feature, index) => (
-          <div key={index} className='rounded-lg bg-white p-6 shadow-lg'>
-            <feature.icon className='mb-4 h-12 w-12 text-gray-600' />
-            <h3 className='mb-2 text-xl font-semibold text-gray-800'>
+          <div key={index} className='rounded-lg bg-card p-6 shadow-lg'>
+            <feature.icon className='mb-4 h-12 w-12 text-foreground' />
+            <h3 className='mb-2 text-xl font-semibold text-foreground'>
               {feature.title}
             </h3>
-            <p className='text-gray-600'>{feature.description}</p>
+            <p className='text-muted-foreground'>{feature.description}</p>
           </div>
         ))}
       </div>