From 3673b3674e177f1774871008163d2ed77d5b2ac8 Mon Sep 17 00:00:00 2001
From: "Carina.Akaia.io" <cvo.akaia@gmail.com>
Date: Thu, 13 Jun 2024 00:13:10 +0400
Subject: [PATCH] Update styles

---
 .vscode/extensions.json             |  3 +-
 src/common/ui/components/button.tsx | 68 ++++++++++++++++++--------
 src/common/ui/components/dialog.tsx | 76 +++++++++++++++++++++++++++--
 3 files changed, 124 insertions(+), 23 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 09402639..eceb9a91 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,6 +3,7 @@
     "antfu.unocss",
     "aaron-bond.better-comments",
     "streetsidesoftware.code-spell-checker",
-    "gruntfuggly.todo-tree"
+    "gruntfuggly.todo-tree",
+    "naumovs.color-highlight"
   ]
 }
\ No newline at end of file
diff --git a/src/common/ui/components/button.tsx b/src/common/ui/components/button.tsx
index bfd3c14f..fda45b76 100644
--- a/src/common/ui/components/button.tsx
+++ b/src/common/ui/components/button.tsx
@@ -5,43 +5,72 @@ import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "../utils";
 
-// TODO: add hover effects correctly & disabled styling
+// TODO: add correct hover effects
 const buttonVariants = cva(
-  "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md border-none focus:shadow-button-focus",
+  cn(
+    "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium",
+    "no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md",
+    "border-none focus:shadow-button-focus",
+  ),
+
   {
     variants: {
       variant: {
         // Brand
-        "brand-filled":
-          "bg-[var(--primary-600)] translate-y-[-1.5px] text-white shadow-button-primary hover:translate-y-0 hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(246,118,122,0.5)_inset,0px_0px_0px_2px_rgba(246,118,122,0.5)_inset]",
-        "brand-tonal":
-          "translate-y-[-1.5px] bg-[var(--peach-50)] shadow-button-tonal hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_#fff_inset,0px_0px_0px_2px_rgba(255,255,255,0.8)_inset] hover:translate-y-0",
-        "brand-plain":
+        "brand-filled": cn(
+          "bg-[var(--primary-600)] translate-y-[-1.5px] text-white shadow-button-primary hover:translate-y-0",
+          "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(246,118,122,0.5)_inset,0px_0px_0px_2px_rgba(246,118,122,0.5)_inset]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "brand-tonal": cn(
+          "translate-y-[-1.5px] bg-[var(--peach-50)] shadow-button-tonal hover:translate-y-0",
+          "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_#fff_inset,0px_0px_0px_2px_rgba(255,255,255,0.8)_inset]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "brand-plain": cn(
           "text-[color:var(--primary-600)] p-0 hover:text-[color:var(--Primary-400)]",
-        "brand-outline":
-          "bg-[rgba(255,255,255,0.01)] text-[color:var(--primary-600)] shadow-[0px_0px_0px_1px_rgba(243,78,95,0.78)_inset,0px_-1px_0px_0px_rgba(73,8,19,0.5)_inset,0px_1px_2px_-0.5px_rgba(73,8,19,0.2)] hover:bg-[#fef3f2]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "brand-outline": cn(
+          "bg-[rgba(255,255,255,0.01)] text-[color:var(--primary-600)] hover:bg-[#fef3f2]",
+          "shadow-[0px_0px_0px_1px_rgba(243,78,95,0.78)_inset,0px_-1px_0px_0px_rgba(73,8,19,0.5)_inset,0px_1px_2px_-0.5px_rgba(73,8,19,0.2)]",
+          "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
+        ),
+
         // Standard
-        "standard-filled":
-          "text-[white] bg-[var(--neutral-800)] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(166,166,166,0.4)_inset,0px_0px_0px_2px_rgba(166,166,166,0.4)_inset,0px_1px_2px_0px_rgba(15,15,15,0.15),0px_1px_3px_-1px_rgba(5,5,5,0.08)]",
-        "standard-outline":
-          "bg-white bg shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)] hover:bg-[var(--neutral-50)",
-        "standard-plain": "p-0 hover:text-[color:var(--neutral-500)]",
-        // Disabled
-        "filled-disabled":
-          "text-[#a6a6a6] shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] bg-[var(--neutral-100)]",
-        "plain-disabled":
-          "bg-white  text-[#c7c7c7] shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
+        "standard-filled": cn(
+          "text-[white] bg-[var(--neutral-800)]",
+          "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(166,166,166,0.4)_inset,0px_0px_0px_2px_rgba(166,166,166,0.4)_inset,0px_1px_2px_0px_rgba(15,15,15,0.15),0px_1px_3px_-1px_rgba(5,5,5,0.08)]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "standard-outline": cn(
+          "bg-white hover:bg-[var(--neutral-50)",
+          "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
+          "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
+        ),
+
+        "standard-plain": cn(
+          "p-0 hover:text-[color:var(--neutral-500)]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
       },
+
       size: {
         default: "px-4 py-[9px]",
         icon: "h-10 w-10",
       },
+
       font: {
         default: "font-medium",
         bold: "font-bold",
         semibold: "font-semibold",
       },
     },
+
     defaultVariants: {
       font: "default",
       variant: "brand-filled",
@@ -68,6 +97,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
+
 Button.displayName = "Button";
 
 export { Button, buttonVariants };
diff --git a/src/common/ui/components/dialog.tsx b/src/common/ui/components/dialog.tsx
index 4012759f..2dcacc47 100644
--- a/src/common/ui/components/dialog.tsx
+++ b/src/common/ui/components/dialog.tsx
@@ -22,7 +22,7 @@ const DialogOverlay = forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80",
+      "fixed inset-0 z-50 bg-white/30 backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       " data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
@@ -77,8 +77,65 @@ const DialogContent = forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
+const DialogHeaderPattern: React.FC<{ className?: string }> = (props) => (
+  <svg
+    width="118"
+    height="152"
+    viewBox="0 0 118 152"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      width="20"
+      height="161.118"
+      rx="10"
+      transform="matrix(-0.707107 0.707107 0.707107 0.707107 -39.752 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+
+    <rect
+      width="20"
+      height="245.972"
+      rx="10"
+      transform="matrix(-0.707107 0.707107 0.707107 0.707107 -71.752 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+
+    <rect
+      width="20"
+      height="164.654"
+      rx="10"
+      transform="matrix(-0.707107 0.707107 0.707107 0.707107 -103.752 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+
+    <rect
+      width="20"
+      height="177.702"
+      rx="10"
+      transform="matrix(-0.707107 0.707107 0.707107 0.707107 -7.75195 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+
+    <rect
+      width="20"
+      height="78.4889"
+      rx="10"
+      transform="matrix(-0.707107 0.707107 0.707107 0.707107 24.248 -37)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+  </svg>
+);
+
 const DialogHeader = ({
   className,
+  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
@@ -87,7 +144,20 @@ const DialogHeader = ({
       className,
     )}
     {...props}
-  />
+  >
+    <div
+      un-position="absolute left-0 top-0"
+      un-w="full"
+      un-flex="~"
+      un-justify="between"
+      un-gap="4"
+    >
+      <DialogHeaderPattern />
+      <DialogHeaderPattern className="rotate-180" />
+    </div>
+
+    {children}
+  </div>
 );
 DialogHeader.displayName = "DialogHeader";
 
@@ -112,7 +182,7 @@ const DialogTitle = forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "prose text-lg font-semibold leading-none tracking-tight",
       className,
     )}
     {...props}