Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-16 09:41:35 +10:00
Code Issues Packages Projects Releases Wiki Activity

adding dark mode to feat/refresh

Browse Source
This commit is contained in:
Doug Andrade
2023-06-11 01:50:19 -04:00
committed by Mythie
parent cc182649c2
commit 40115d33b4
21 changed files with 217 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/web/src/components/forms/edit-document.tsx
View File

@ -6,6 +6,7 @@ import dynamic from 'next/dynamic';
import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from 'lucide-react';
import { useTheme } from 'next-themes';
import { useForm } from 'react-hook-form';
import { Document, User } from '@documenso/prisma/client';
@ -20,10 +21,10 @@ import { TEditDocumentFormSchema, ZEditDocumentFormSchema } from './edit-documen
const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
ssr: false,
loading: () => (
<div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
<Loader className="h-12 w-12 animate-spin text-slate-500" />
<div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
<Loader className="text-muted-foreground h-12 w-12 animate-spin" />
<p className="mt-4 text-slate-500">Loading document...</p>
<p className="text-muted-foreground mt-4">Loading document...</p>
</div>
),
});
@ -59,6 +60,8 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
resolver: zodResolver(ZEditDocumentFormSchema),
});
const { theme } = useTheme();
const canGoBack = step > 0;
const canGoNext = isValid && step < MAX_STEP;
@ -67,14 +70,18 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
return (
<div className={cn('grid w-full grid-cols-12 gap-x-8', className)}>
<Card className="col-span-7 rounded-xl before:rounded-xl" gradient>
<Card
className="col-span-7 rounded-xl before:rounded-xl"
gradient
lightMode={theme === 'light'}
>
<CardContent className="p-2">
<PDFViewer document={documentUrl} />
</CardContent>
</Card>
<div className="relative col-span-5">
<div className="sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6">
<div className="dark:bg-background border-border sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6">
{step === 0 && (
<AddSignersFormPartial
className="-mx-2 flex-1 overflow-y-hidden px-2"
@ -91,17 +98,18 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
watch={watch}
errors={errors}
isSubmitting={isSubmitting}
theme={theme || 'dark'}
/>
)}
<div className="mt-4 flex-shrink-0">
<p className="text-sm text-black/30">
<p className="text-muted-foreground text-sm">
Add Signers ({step + 1}/{MAX_STEP + 1})
</p>
<div className="relative mt-4 h-[2px] rounded-md bg-slate-300">
<div className="bg-muted relative mt-4 h-[2px] rounded-md">
<div
className="bg-primary absolute inset-y-0 left-0"
className="bg-documenso absolute inset-y-0 left-0"
style={{
width: `${(100 / (MAX_STEP + 1)) * (step + 1)}%`,
}}
@ -110,7 +118,7 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
<div className="mt-4 flex gap-x-4">
<Button
className="flex-1 bg-black/5 hover:bg-black/10"
className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
size="lg"
variant="secondary"
disabled={!canGoBack}
@ -119,7 +127,12 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
Go Back
</Button>
<Button className="flex-1" size="lg" disabled={!canGoNext} onClick={onGoNextClick}>
<Button
className="bg-documenso flex-1"
size="lg"
disabled={!canGoNext}
onClick={onGoNextClick}
>
Continue
</Button>
</div>