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>
stripe · Jun 18, 2024 · 07bd4d7 · 07bd4d7
1 parent e6ec9e7
commit 07bd4d7
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: