Skip to content
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

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

Merged
merged 2 commits into from
Oct 8, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84605cd
feat: :sparkles: added theme toggle for light and dark mode
WasiqB Oct 8, 2024
f38458c
feat: :sparkles: updated theme toggle button
WasiqB Oct 8, 2024
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
6 changes: 3 additions & 3 deletions app/(app)/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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%;
Expand Down
14 changes: 11 additions & 3 deletions app/(app)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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' />
Expand Down
8 changes: 4 additions & 4 deletions app/(app)/loading/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
)}
Expand Down
10 changes: 6 additions & 4 deletions app/(app)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
104 changes: 67 additions & 37 deletions app/(app)/results/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
<>
Expand Down
2 changes: 1 addition & 1 deletion components/data-table/attachment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
39 changes: 23 additions & 16 deletions components/data-table/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
},
Expand Down Expand Up @@ -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>
Expand All @@ -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>
)}
Expand Down Expand Up @@ -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]'>
Expand Down
16 changes: 11 additions & 5 deletions components/home/feature.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
import {
BarChartIcon,
CircleAlert,
Group,
MousePointerClick,
Table,
} from 'lucide-react';
Expand Down Expand Up @@ -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>
Expand Down
Loading