update gradient type

qaynam · Aug 24, 2023 · 42552ed · 42552ed
1 parent 6829adb
commit 42552ed
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 42 deletions.
diff --git a/src/application/models/appStore.ts b/src/application/models/appStore.ts
@@ -10,7 +10,8 @@ export type GradientType =
   | "cyan-to-indigo-vertical-gradient"
   | "rose-to-teal-horizontal-gradient"
   | "transparent-to-white-diagonal-gradient-bottom-right-with-orange-hint"
-  | "dark-gray-to-black-horizontal-gradient";
+  | "dark-gray-to-black-horizontal-gradient"
+  | `mesh-gradient-${number}`;
 export type ImageTypes = "image/png" | "image/jpeg" | "image/gif";
 
 export interface IAppStore {

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -18,7 +18,11 @@ export const gradients: Record<GradientType, string> = {
   "rose-to-teal-horizontal-gradient": "bg-gradient-to-r from-rose-100 to-teal-100",
   "transparent-to-white-diagonal-gradient-bottom-right-with-orange-hint":
     "bg-gradient-to-br from-transparent via-orange-100 to-white",
-  "dark-gray-to-black-horizontal-gradient": "bg-gradient-to-r from-gray-700 via-gray-900 to-black"
+  "dark-gray-to-black-horizontal-gradient": "bg-gradient-to-r from-gray-700 via-gray-900 to-black",
+  "mesh-gradient-1": "mesh-gradient-1",
+  "mesh-gradient-2": "mesh-gradient-2",
+  "mesh-gradient-3": "mesh-gradient-3",
+  "mesh-gradient-4": "mesh-gradient-4"
 };
 
 export const paddings = {

diff --git a/src/styles/app.css b/src/styles/app.css
@@ -1,3 +1,41 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer components {
+  .mesh-gradient-1 {
+    background: #02abd1;
+    background-image: radial-gradient(at 66% 95%, hsl(231, 88%, 57%) 0px, transparent 50%),
+      radial-gradient(at 99% 94%, hsl(64, 83%, 30%) 0px, transparent 50%),
+      radial-gradient(at 25% 61%, hsl(198, 70%, 67%) 0px, transparent 50%),
+      radial-gradient(at 100% 32%, hsl(285, 64%, 67%) 0px, transparent 50%),
+      radial-gradient(at 68% 22%, hsl(135, 97%, 85%) 0px, transparent 50%);
+  }
+
+  .mesh-gradient-2 {
+    background: #47acaf;
+    background-image: radial-gradient(at 95% 16%, hsl(195, 24%, 52%) 0px, transparent 50%),
+      radial-gradient(at 78% 68%, hsl(159, 62%, 65%) 0px, transparent 50%),
+      radial-gradient(at 33% 54%, hsl(247, 68%, 96%) 0px, transparent 50%),
+      radial-gradient(at 75% 6%, hsl(145, 26%, 54%) 0px, transparent 50%),
+      radial-gradient(at 59% 3%, hsl(135, 41%, 54%) 0px, transparent 50%);
+  }
+
+  .mesh-gradient-3 {
+    background: #21e1f7;
+    background-image: radial-gradient(at 19% 80%, hsl(119, 81%, 77%) 0px, transparent 50%),
+      radial-gradient(at 18% 49%, hsl(306, 42%, 81%) 0px, transparent 50%),
+      radial-gradient(at 34% 22%, hsl(71, 92%, 39%) 0px, transparent 50%),
+      radial-gradient(at 32% 7%, hsl(20, 82%, 66%) 0px, transparent 50%),
+      radial-gradient(at 89% 35%, hsl(115, 61%, 57%) 0px, transparent 50%);
+  }
+
+  .mesh-gradient-4 {
+    background: #947db5;
+    background-image: radial-gradient(at 89% 68%, hsl(207, 95%, 33%) 0px, transparent 50%),
+      radial-gradient(at 97% 67%, hsl(134, 99%, 50%) 0px, transparent 50%),
+      radial-gradient(at 73% 35%, hsl(222, 45%, 54%) 0px, transparent 50%),
+      radial-gradient(at 16% 41%, hsl(264, 69%, 52%) 0px, transparent 50%),
+      radial-gradient(at 40% 32%, hsl(242, 87%, 18%) 0px, transparent 50%);
+  }
+}
diff --git a/src/views/components/features/MainBlock.svelte b/src/views/components/features/MainBlock.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { onMount, tick } from "svelte";
+  import { afterUpdate, onMount, tick } from "svelte";
   import { twMerge } from "tailwind-merge";
   import { App } from "~/application/main";
   import type { AppService } from "~/application/services/AppService";
@@ -11,19 +11,12 @@
 
   let appService: AppService | undefined;
   const maxImageSize = 1024 * 1024 * 3; // 3MB
+  let blockRef: HTMLDivElement;
 
   const imageSelectedHandler = ({ file }: { file: File }) => {
     appService?.updateSelectedImage(file);
   };
 
-  const domChangeHandler = async (el: HTMLDivElement | null) => {
-    if (!el) {
-      return;
-    }
-    await tick();
-    appService?.updateMainBlockElement(el);
-  };
-
   $: currentGradient = gradients[$appStore.gradient];
   $: currentPadding = paddings[$appStore.padding];
   $: currentRoundness = roundness[$appStore.roundness];
@@ -39,6 +32,10 @@
   onMount(async () => {
     appService = App.getAppService();
   });
+
+  afterUpdate(() => {
+    appService?.updateMainBlockElement(blockRef);
+  });
 </script>
 
 <div class="w-full lg:w-9/12 flex lg:static sticky top-3 z-20">
@@ -47,36 +44,42 @@
       "w-full h-full": !selectImageUrl
     })}
   >
-    <Card
-      onMounted={domChangeHandler}
-      class={twMerge(
-        clsx(
-          "bg-transparent transition-all ease-in-out duration-300 overflow-hidden flex",
-          currentGradient,
-          currentPadding,
-          currentRoundness,
-          {
-            "lg:min-h-[800px] min-h-[400px] w-full h-full": !selectImageUrl
-          }
-        )
-      )}
+    <div
+      class={clsx("bg-white  transition-all ease-in-out duration-300", currentRoundness, {
+        "w-full h-full": !selectImageUrl
+      })}
+      bind:this={blockRef}
     >
-      <div class="flex items-center justify-center m-auto">
-        {#if selectImageUrl}
-          <img
-            src={selectImageUrl}
-            class={twMerge(
-              "mx-auto overflow-hidden object-cover transition-all duration-150 ease-linear",
-              currentRoundness,
-              currentDropShadow
-            )}
-            style={imageStyle}
-            alt=""
-          />
-        {:else}
-          <ImagePicker onImageSelected={imageSelectedHandler} {maxImageSize} />
-        {/if}
-      </div>
-    </Card>
+      <Card
+        class={twMerge(
+          clsx(
+            "bg-transparent transition-all ease-in-out duration-300 overflow-hidden flex",
+            currentGradient,
+            currentPadding,
+            currentRoundness,
+            {
+              "lg:min-h-[800px] min-h-[400px] w-full h-full": !selectImageUrl
+            }
+          )
+        )}
+      >
+        <div class="flex items-center justify-center m-auto">
+          {#if selectImageUrl}
+            <img
+              src={selectImageUrl}
+              class={twMerge(
+                "mx-auto overflow-hidden object-cover transition-all duration-150 ease-linear",
+                currentRoundness,
+                currentDropShadow
+              )}
+              style={imageStyle}
+              alt=""
+            />
+          {:else}
+            <ImagePicker onImageSelected={imageSelectedHandler} {maxImageSize} />
+          {/if}
+        </div>
+      </Card>
+    </div>
   </div>
 </div>