wip: Update styles

PotLock · Jun 12, 2024 · 2416719 · 2416719
1 parent 94dbee7
commit 2416719
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/src/common/ui/components/dialog.tsx b/src/common/ui/components/dialog.tsx
@@ -47,8 +47,8 @@ const DialogContent = forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg sm:rounded-lg",
-        "translate-x-[-50%] translate-y-[-50%] gap-4 bg-background shadow-lg",
+        "sm:min-w-auto fixed left-[50%] top-[50%] z-50 grid h-full w-full min-w-full items-start sm:h-auto sm:max-w-xl sm:rounded-lg",
+        "translate-x-[-50%] translate-y-[-50%] bg-background shadow-lg",
         "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -63,7 +63,7 @@ const DialogContent = forwardRef<
       <DialogPrimitive.Close
         onClick={onCloseClick}
         className={cn(
-          "absolute right-6 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity",
+          "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity",
           "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring",
           "focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent",
           "data-[state=open]:text-muted-foreground",
@@ -140,7 +140,8 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 p-4 pt-8 text-center sm:text-left",
+      "flex h-[max-content] w-full flex-col gap-4 bg-red-500 p-4 pt-16 sm:rounded-t-lg",
+      "text-left text-white",
       className,
     )}
     {...props}
@@ -166,10 +167,7 @@ const DialogFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn("mt-auto flex justify-between gap-4 p-4", className)}
     {...props}
   />
 );
@@ -182,7 +180,7 @@ const DialogTitle = forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "prose text-lg font-semibold leading-none tracking-tight",
+      "prose font-600 text-xl font-semibold leading-none tracking-tight",
       className,
     )}
     {...props}
@@ -196,7 +194,7 @@ const DialogDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("p-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

diff --git a/src/modules/donation/components/DonationToAccount.tsx b/src/modules/donation/components/DonationToAccount.tsx
@@ -118,17 +118,15 @@ export const DonationToAccount: React.FC<DonationToAccountProps> = ({
 
       {account !== undefined && (
         <>
-          <DialogHeader className="flex w-full justify-between gap-4 rounded-t-lg bg-red-500 p-6 pt-14 text-white">
-            <DialogTitle className="font-600 text-xl">
+          <DialogHeader>
+            <DialogTitle>
               {`Donation to ${account.near_social_profile_data?.name}`}
             </DialogTitle>
           </DialogHeader>
 
-          <DialogDescription className="space-y-4 p-6">
-            {currentScreen}
-          </DialogDescription>
+          <DialogDescription>{currentScreen}</DialogDescription>
 
-          <DialogFooter className="flex justify-between gap-4 p-4">
+          <DialogFooter>
             <Button
               type="button"
               variant="brand-outline"