Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 08:42:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: styling updates

Browse Source
This commit is contained in:
Mythie
2023-09-27 14:58:10 +10:00
parent a164fd1256
commit 704306fd21
3 changed files with 48 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx
View File

@ -73,7 +73,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
<ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} /> <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
)} )}
<h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl"> <h2 className="relative z-10 text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
You have signed You have signed
<span className="mt-2 block">{document.title}</span> <span className="mt-2 block">{document.title}</span>
</h2> </h2>
@ -84,17 +84,17 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
signingCelebrationImage={signingCelebration} signingCelebrationImage={signingCelebration}
/> />
<div className="mt-8 w-full"> <div className="relative mt-8 w-full">
<div className={cn('flex flex-col items-center', className)}> <div className={cn('flex flex-col items-center', className)}>
<div className="grid w-full max-w-sm grid-cols-2 gap-4"> <div className="grid w-full max-w-sm grid-cols-2 gap-4">
{/* TODO: Hook this up */} {/* TODO: Hook this up */}
<Button variant="outline" className="flex-1" disabled> <Button variant="outline" className="flex-1 bg-transparent backdrop-blur-sm" disabled>
<Share className="mr-2 h-5 w-5" /> <Share className="mr-2 h-5 w-5" />
Share Share
</Button> </Button>
<DocumentDownloadButton <DocumentDownloadButton
className="flex-1" className="flex-1 bg-transparent backdrop-blur-sm"
fileName={document.title} fileName={document.title}
documentData={document.documentData} documentData={document.documentData}
disabled={document.status !== DocumentStatus.COMPLETED} disabled={document.status !== DocumentStatus.COMPLETED}

11
apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
View File

@ -51,11 +51,11 @@ export default async function CompletedSigningPage({
recipient.email; recipient.email;
return ( return (
<div className="flex flex-col items-center pt-24"> <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
{/* Card with recipient */} {/* Card with recipient */}
<SigningCard3D name={recipientName} signingCelebrationImage={signingCelebration} /> <SigningCard3D name={recipientName} signingCelebrationImage={signingCelebration} />
<div className="mt-6"> <div className="relative mt-6 flex w-full flex-col items-center">
{match(document.status) {match(document.status)
.with(DocumentStatus.COMPLETED, () => ( .with(DocumentStatus.COMPLETED, () => (
<div className="text-documenso-700 flex items-center text-center"> <div className="text-documenso-700 flex items-center text-center">
@ -69,7 +69,6 @@ export default async function CompletedSigningPage({
<span className="text-sm">Waiting for others to sign</span> <span className="text-sm">Waiting for others to sign</span>
</div> </div>
))} ))}
</div>
<h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl"> <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
You have signed "{document.title}" You have signed "{document.title}"
@ -100,10 +99,14 @@ export default async function CompletedSigningPage({
<p className="text-muted-foreground/60 mt-36 text-sm"> <p className="text-muted-foreground/60 mt-36 text-sm">
Want to send slick signing links like this one?{' '} Want to send slick signing links like this one?{' '}
<Link href="https://documenso.com" className="text-documenso-700 hover:text-documenso-600"> <Link
href="https://documenso.com"
className="text-documenso-700 hover:text-documenso-600"
>
Check out Documenso. Check out Documenso.
</Link> </Link>
</p> </p>
</div> </div>
</div>
); );
} }

10
packages/ui/components/signing-card.tsx
View File

@ -148,7 +148,7 @@ const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
return ( return (
<Card <Card
className={cn( className={cn(
'group mx-auto flex aspect-[21/9] w-full items-center justify-center', 'group z-10 mx-auto flex aspect-[21/9] w-full items-center justify-center',
className, className,
)} )}
degrees={-145} degrees={-145}
@ -180,14 +180,14 @@ type SigningCardImageProps = {
const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => { const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => {
return ( return (
<motion.div <motion.div
className="pointer-events-none absolute -inset-32 -z-10 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80" className="pointer-events-none absolute -inset-32 -z-50 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
initial={{ initial={{
opacity: 0, opacity: 0,
scale: 0.8, scale: 0.6,
}} }}
animate={{ animate={{
scale: 1, scale: 1,
opacity: 0.5, opacity: 0.6,
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
@ -197,7 +197,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
<Image <Image
src={signingCelebrationImage} src={signingCelebrationImage}
alt="background pattern" alt="background pattern"
className="w-full dark:invert dark:sepia" className="w-full dark:brightness-150 dark:contrast-[70%] dark:invert dark:sepia"
style={{ style={{
mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)', mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)', WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',