From c5b89145694fa7944b6cf53078b61eabe964c412 Mon Sep 17 00:00:00 2001
From: Oliver Pan <2216991777@qq.com>
Date: Tue, 24 Oct 2023 00:26:46 -0500
Subject: [PATCH] fix: updated UI

---
 .../plugin/download-base-palette.plugin.tsx   | 25 +++++++++++--------
 .../toolbar/plugin/shareable-link.plugin.tsx  | 10 ++++++--
 .../components/ui/primary-toolbar-menu.tsx    |  2 +-
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/toolbar/plugin/download-base-palette.plugin.tsx b/apps/web/components/toolbar/plugin/download-base-palette.plugin.tsx
index 3ed4157..ce8d338 100644
--- a/apps/web/components/toolbar/plugin/download-base-palette.plugin.tsx
+++ b/apps/web/components/toolbar/plugin/download-base-palette.plugin.tsx
@@ -9,6 +9,7 @@ import { Skeleton } from "ui/components/ui/skeleton";
 import { useToast } from "ui/components/ui/use-toast";
 import { cn } from "ui/lib/utils";
 import { Label } from "ui/components/ui/label";
+import { motion } from "framer-motion";
 
 type GenerateImageOptions = {
   desktopSize?: boolean;
@@ -19,14 +20,13 @@ function DownloadBasePalettePlugin({ setOpen }) {
   const [imageData, setImageData] = useState(null);
   const [desktopSize, setDesktopSize] = useState(undefined);
   const [isDesktopSize, setIsDesktopSize] = useState(false);
-  const paletteAspectRatio = useRef(1);
   const { toast } = useToast();
   const handleGenerateImage = (options: GenerateImageOptions) => {
     if (typeof desktopSize === "undefined") return;
     setisLoaded(false);
     // find #base-color-palette and capture it as an image (we'll show the preview)
-    const paletteBody = document?.getElementById("base-color-palette");
-    if (paletteBody) {
+    const paletteWrap = document?.getElementById("base-color-palette");
+    if (paletteWrap) {
       // !FIX LINE HEIGHT
       const style = document.createElement("style");
       document.head.appendChild(style);
@@ -35,10 +35,7 @@ function DownloadBasePalettePlugin({ setOpen }) {
       );
       options.desktopSize &&
         style.sheet?.insertRule("body { min-width: 1920px }");
-      const paletteBodyWidth = paletteBody.clientWidth;
-      const paletteBodyHeight = paletteBody.clientHeight;
-      paletteAspectRatio.current = paletteBodyWidth / paletteBodyHeight;
-      html2canvas(paletteBody, {
+      html2canvas(paletteWrap, {
         useCORS: true,
         allowTaint: true,
         backgroundColor: null,
@@ -91,13 +88,19 @@ function DownloadBasePalettePlugin({ setOpen }) {
           className={cn(
             "mb-4 overflow-hidden rounded-md",
             "w-[16rem] rounded-md sm:w-[22rem]",
+            !isDesktopSize &&
+              "aspect-[0.121/1] sm:aspect-[0.339/1] md:aspect-[0.653/1] lg:aspect-[1.82/1]",
+            isDesktopSize && "aspect-[1.82/1]",
           )}
-          style={{
-            aspectRatio: paletteAspectRatio.current,
-          }}
+          // style={{
+          //   aspectRatio: paletteAspectRatio.current,
+          // }}
         >
           {isLoaded ? (
-            <img
+            <motion.img
+              initial={{ opacity: 0, scale: 0.97, filter: "blur(6px)" }}
+              animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+              exit={{ opacity: 0, scale: 0.97, filter: "blur(6px)" }}
               src={imageData}
               className={cn(
                 "absolute inset-0 h-full w-full rounded border object-cover transition-opacity",
diff --git a/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx b/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx
index 3af20b0..8c23a90 100644
--- a/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx
+++ b/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx
@@ -8,6 +8,7 @@ import { Skeleton } from "@ui/components/ui/skeleton";
 import { cn } from "ui/lib/utils";
 import Image from "next/image";
 import { useToast } from "ui/components/ui/use-toast";
+import { motion } from "framer-motion";
 
 function ShareableLinkPlugin({ colors, setOpen }) {
   const { toast } = useToast();
@@ -23,7 +24,12 @@ function ShareableLinkPlugin({ colors, setOpen }) {
   };
   return (
     <Fragment>
-      <div className="relative">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.97, filter: "blur(6px)" }}
+        animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+        exit={{ opacity: 0, scale: 0.97, filter: "blur(6px)" }}
+        className="relative"
+      >
         <div
           className={cn(
             "mb-4 overflow-hidden rounded-md",
@@ -47,7 +53,7 @@ function ShareableLinkPlugin({ colors, setOpen }) {
             height={151}
           />
         </div>
-      </div>
+      </motion.div>
       <div className="flex space-x-2">
         <Input
           className="h-8"
diff --git a/apps/web/components/ui/primary-toolbar-menu.tsx b/apps/web/components/ui/primary-toolbar-menu.tsx
index 5c58117..6091dac 100644
--- a/apps/web/components/ui/primary-toolbar-menu.tsx
+++ b/apps/web/components/ui/primary-toolbar-menu.tsx
@@ -19,7 +19,7 @@ export type PrimaryToolbarMenu = {
 const primaryToolbarMenu: PrimaryToolbarMenu = {
   [ToolbarMenus.UPLOAD_IMAGE]: {
     title: "Upload Image",
-    description: "Coming Soon... Generate a color palette from an image",
+    description: "Generate a color palette from an image",
     icon: ImagePlus,
   },
   [ToolbarMenus.DOWNLOAD]: {