From 551192053d6f10c1e62534eb0c4504e64ab07ec2 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 14 Nov 2023 10:42:03 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Design=20improvements.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cardSpotlight.svelte | 55 ++++++++++++++++++++
 src/components/svgCard.svelte       | 79 +++++++++++++++--------------
 src/routes/+layout.svelte           | 19 ++++---
 3 files changed, 108 insertions(+), 45 deletions(-)
 create mode 100644 src/components/cardSpotlight.svelte

diff --git a/src/components/cardSpotlight.svelte b/src/components/cardSpotlight.svelte
new file mode 100644
index 0000000..9680b2f
--- /dev/null
+++ b/src/components/cardSpotlight.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  let div: HTMLDivElement;
+  let focused = false;
+  let position = { x: 0, y: 0 };
+  let opacity = 0;
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!div || focused) return;
+
+    const rect = div.getBoundingClientRect();
+
+    position = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  };
+
+  const handleFocus = () => {
+    focused = true;
+    opacity = 1;
+  };
+
+  const handleBlur = () => {
+    focused = false;
+    opacity = 0;
+  };
+
+  const handleMouseEnter = () => {
+    opacity = 1;
+  };
+
+  const handleMouseLeave = () => {
+    opacity = 0;
+  };
+</script>
+
+<div
+  aria-hidden="true"
+  bind:this={div}
+  on:mousemove={handleMouseMove}
+  on:focus={handleFocus}
+  on:blur={handleBlur}
+  on:mouseenter={handleMouseEnter}
+  on:mouseleave={handleMouseLeave}
+  class="relative flex items-center justify-center overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800/20"
+>
+  <div
+    class="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
+    style={`
+			opacity: ${opacity};
+			background: radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(97, 97, 97, 0.1), transparent 40%);
+		`}
+  />
+  <slot />
+</div>
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index af81644..b60837c 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -9,6 +9,7 @@
   import Copy from 'phosphor-svelte/lib/Copy';
   import Link from 'phosphor-svelte/lib/Link';
   import Star from 'phosphor-svelte/lib/Star';
+  import CardSpotlight from './cardSpotlight.svelte';
 
   // Props:
   export let svgInfo: iSVG;
@@ -38,43 +39,43 @@
   };
 </script>
 
-<div
-  class="flex flex-col items-center justify-center rounded-md border border-neutral-300 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-700/10"
->
-  <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
-  <div class="mb-3 flex flex-col items-center justify-center">
-    <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
-    <a
-      href={`/directory/${svgInfo.category.toLowerCase()}`}
-      class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
-    >
+<CardSpotlight>
+  <div class="flex flex-col items-center justify-center rounded-md p-4">
+    <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
+    <div class="mb-3 flex flex-col items-center justify-center">
+      <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
+      <a
+        href={`/directory/${svgInfo.category.toLowerCase()}`}
+        class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
+      >
+    </div>
+    <div class="flex items-center space-x-1">
+      <button
+        title="Copy to clipboard"
+        on:click={() => {
+          copyToClipboard(svgInfo.route);
+        }}
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        <Copy size={17} />
+      </button>
+      <button
+        title="Download"
+        on:click={() => {
+          downloadSvg(svgInfo.route);
+        }}
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        <DownloadSimple size={17} />
+      </button>
+      <a
+        href={svgInfo.url}
+        title="Website"
+        target="_blank"
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        <Link size={17} />
+      </a>
+    </div>
   </div>
-  <div class="flex items-center space-x-1">
-    <button
-      title="Copy to clipboard"
-      on:click={() => {
-        copyToClipboard(svgInfo.route);
-      }}
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-    >
-      <Copy size={17} />
-    </button>
-    <button
-      title="Download"
-      on:click={() => {
-        downloadSvg(svgInfo.route);
-      }}
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-    >
-      <DownloadSimple size={17} />
-    </button>
-    <a
-      href={svgInfo.url}
-      title="Website"
-      target="_blank"
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-    >
-      <Link size={17} />
-    </a>
-  </div>
-</div>
+</CardSpotlight>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 60c7fd8..4af0318 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -16,6 +16,8 @@
   import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
   import ArrowLeft from 'phosphor-svelte/lib/ArrowLeft';
   import Star from 'phosphor-svelte/lib/Star';
+  import GithubLogo from 'phosphor-svelte/lib/GithubLogo';
+  import Box from 'phosphor-svelte/lib/Cube';
 
   // Toaster:
   import { Toaster } from 'svelte-sonner';
@@ -50,18 +52,21 @@
       >
         <a
           href="/"
-          class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
-              ${data.pathname === `/` ? 'bg-neutral-200 dark:bg-neutral-700/30' : ''}`}
+          class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 ${
+            data.pathname === `/`
+              ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
+              : ''
+          }`}
           data-sveltekit-preload-data>All</a
         >
         <!-- Order alfabetically: -->
         {#each categories.sort() as category}
           <a
             href={`/directory/${category.toLowerCase()}`}
-            class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
+            class={`flex w-full items-center rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
               ${
                 data.pathname === `/directory/${category.toLowerCase()}`
-                  ? 'bg-neutral-200 dark:bg-neutral-700/30'
+                  ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
                   : ''
               }`}
             data-sveltekit-preload-data>{category}</a
@@ -76,8 +81,9 @@
           target="_blank"
           class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
         >
+          <div><Box size={18} /></div>
           <span>Submit logo</span>
-          <div><ArrowUpRight size={16} /></div>
+          <div><ArrowUpRight size={12} /></div>
         </a>
         <a
           href="https://github.com/pheralb/svgl"
@@ -85,6 +91,7 @@
           class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
         >
           <div class="flex items-center space-x-2">
+            <div><GithubLogo size={18} /></div>
             <span class="flex items-center justify-center">Repository</span>
             {#if data.stars}
               <div class="flex items-center space-x-1 text-neutral-600 dark:text-neutral-400">
@@ -94,7 +101,7 @@
                 <span>{data.stars}</span>
               </div>
             {/if}
-            <div><ArrowUpRight size={16} /></div>
+            <div><ArrowUpRight size={12} /></div>
           </div>
         </a>
       </div>