From 07bd4d73e099971e4957c1a49e28fc61d2c1504a Mon Sep 17 00:00:00 2001
From: eliang-stripe <99840257+eliang-stripe@users.noreply.github.com>
Date: Tue, 18 Jun 2024 14:22:12 -0500
Subject: [PATCH] Adjust position of dashboard preview (#165)

* adjust position of dashboard preview, fix component border cut off bug

* prettier

---------

Signed-off-by: eliang-stripe <99840257+eliang-stripe@users.noreply.github.com>
---
 app/components/Screen.tsx                        | 4 ++--
 app/components/testdata/CreatePaymentsButton.tsx | 2 +-
 app/globals.css                                  | 2 +-
 components/ui/badge.tsx                          | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/Screen.tsx b/app/components/Screen.tsx
index 4402989e..c186fd21 100644
--- a/app/components/Screen.tsx
+++ b/app/components/Screen.tsx
@@ -32,12 +32,12 @@ export default function Screen({
         {/* Furever site container */}
         <div
           className={`origin-left overflow-hidden transition duration-500 ease-in-out md:h-screen
-            ${open ? 'shadow-xl md:translate-x-[325px] md:scale-[0.6] md:rounded-xl md:border md:border-[1.5px] lg:scale-[0.66] xl:scale-[0.73]' : 'h-full min-h-screen w-full flex-col sm:flex-row'}
+            ${open ? 'shadow-xl md:translate-x-[calc(140px+22%)] md:scale-[0.6] md:rounded-xl md:border md:border-[1.5px] lg:translate-x-[calc(125px+19%)] lg:scale-[0.66] xl:translate-x-[calc(130px+15%)] xl:scale-[0.73]' : 'h-full min-h-screen w-full flex-col sm:flex-row'}
             ${theme == 'light' ? 'bg-paw-pattern bg-[size:426px]' : 'bg-screen-background'}`}
         >
           <Nav />
           <div className="mt-[74px] flex h-full grow justify-center overflow-scroll overscroll-contain p-3 pb-20 sm:ml-52 sm:mt-0 sm:mt-0 sm:p-8 lg:ml-64">
-            <div className="flex grow flex-col gap-y-4 after:pb-8 md:gap-y-5">
+            <div className="mx-auto flex max-w-[1200px] grow flex-col gap-y-4 after:pb-8 md:gap-y-5">
               <OnboardingDialog />
               {children}
             </div>
diff --git a/app/components/testdata/CreatePaymentsButton.tsx b/app/components/testdata/CreatePaymentsButton.tsx
index f248e9f2..fe28dc7a 100644
--- a/app/components/testdata/CreatePaymentsButton.tsx
+++ b/app/components/testdata/CreatePaymentsButton.tsx
@@ -183,7 +183,7 @@ export default function CreatePaymentsButton({classes}: {classes?: string}) {
                 <FormItem>
                   <FormLabel>Number of payments</FormLabel>
                   <FormControl>
-                    <Input {...field} type="number" />
+                    <Input {...field} type="number" min="1" step={1} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/app/globals.css b/app/globals.css
index 4e404590..207e82d8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -47,7 +47,7 @@
     --background: 220 18.37% 9.61%;
     --foreground: 220 16.67% 14.12%;
 
-    --screen-background: #14171d;
+    --screen-background: #1b1e25;
     --screen-foreground: #1e222a;
 
     --dialog-content: 220, 18.37%, 9.61%;
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index db80e673..c47338d7 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -9,8 +9,8 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: 'bg-gray-200 border-gray-300 text-primary-foreground',
-        blue: 'bg-sky-100 border-sky-200 text-sky-700',
-        red: 'bg-red-100 border-red-200 text-red-700',
+        blue: 'bg-sky-100 border-sky-200 text-sky-700 dark:bg-sky-900 dark:border-sky-700 dark:text-sky-300',
+        red: 'bg-rose-100 border-rose-200 text-rose-700 dark:bg-rose-900 dark:border-rose-700 dark:text-rose-300',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive: