From f03d9db2f4f8f835fe6b3c265d314679d258b2d1 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 15 Mar 2023 13:54:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Design=20improvements.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte | 32 ++++++++++++++++++++++----------
 src/routes/+page.svelte   | 24 +++++++++++++-----------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6866431..5e887b1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,38 +9,39 @@
     .filter((category, index, array) => array.indexOf(category) === index);
 
   // Icons:
+  import Heart from 'phosphor-svelte/lib/Heart';
   import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
 
   // Toaster:
   import { Toaster } from 'svelte-french-toast';
 </script>
 
-<main class="bg-dark font-sans text-mini text-white min-h-screen">
-  <nav class="fixed top-0 left-0 z-50 h-full pb-10 overflow-x-hidden overflow-y-auto w-60">
-    <div class="px-6 py-6 items-center">
-      <div class="border-b border-neutral-700/40 pb-3 mb-3">
+<main class="min-h-screen bg-dark font-sans text-mini text-white">
+  <nav class="fixed top-0 left-0 z-50 h-full w-60 overflow-y-auto overflow-x-hidden pb-10">
+    <div class="items-center px-6 py-6">
+      <div class="mb-3 border-b border-neutral-700/40 pb-3">
         <a href="/">
           <div class="flex items-center space-x-2">
             <h3 class="text-xl font-medium">svgl</h3>
             <p class="text-neutral-500">v3.0.0</p>
           </div>
         </a>
-        <p class="mt-2 text-neutral-400 font-medium">✨ Optimized SVGs logos</p>
+        <p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs logos</p>
       </div>
-      <div class="pb-3 mb-3 border-b border-neutral-700/40 flex flex-col space-y-1">
+      <div class="mb-3 flex flex-col space-y-1 border-b border-neutral-700/40 pb-3">
         {#each categories as category}
           <a
             href={`/category/${category.toLowerCase()}`}
-            class="flex w-full items-center p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all"
+            class="flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
             >{category}</a
           >
         {/each}
       </div>
-      <div class="flex flex-col space-y-1">
+      <div class="flex flex-col space-y-1 border-b border-neutral-700/40 pb-3">
         <a
           href="https://github.com/pheralb/svgl#-getting-started"
           target="_blank"
-          class="flex w-full items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all"
+          class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
         >
           <span>Submit logo</span>
           <ArrowUpRight size={16} />
@@ -48,12 +49,23 @@
         <a
           href="https://github.com/pheralb/svgl#-getting-started"
           target="_blank"
-          class="flex w-full items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all"
+          class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
         >
           <span>Repository</span>
           <ArrowUpRight size={16} />
         </a>
       </div>
+      <a
+        href="https://twitter.com/pheralb_"
+        target="_blank"
+        class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
+      >
+        <Heart color="#991b1b" size={18} />
+        <div class="flex items-center space-x-1">
+          <p class="text-muted text-sm">Created by pheralb</p>
+          <ArrowUpRight size={12} />
+        </div>
+      </a>
     </div>
   </nav>
   <div class="ml-60 py-6">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 29d9b6f..0ede8e5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -54,7 +54,9 @@
   let filteredSvgs: iSVG[] = [];
 
   if (search.length === 0) {
-    filteredSvgs = allSvgs;
+    filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
+      return b.id - a.id;
+    });
   }
 
   const searchSvgs = () => {
@@ -71,17 +73,17 @@
     bind:value={search}
     on:input={searchSvgs}
     placeholder="Search..."
-    class="w-full p-3 rounded-md bg-neutral-700/10 border border-neutral-800 placeholder-neutral-500"
+    class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
   />
-  <div class="grid grid-cols-6 gap-4 mt-4">
+  <div class="mt-4 grid grid-cols-6 gap-4">
     {#each filteredSvgs as svg}
       <div
-        class="p-4 flex flex-col items-center justify-center bg-neutral-700/10 border border-neutral-800 rounded-md"
+        class="flex flex-col items-center justify-center rounded-md border border-neutral-800 bg-neutral-700/10 p-4"
       >
-        <img src={svg.route} alt={svg.title} class="h-10 mb-4 mt-2" />
-        <div class="flex flex-col items-center justify-center mb-3">
-          <p class="font-medium truncate text-[15px]">{svg.title}</p>
-          <span class="text-neutral-500 lowercase text-sm">{svg.category}</span>
+        <img src={svg.route} alt={svg.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">{svg.title}</p>
+          <span class="text-sm lowercase text-neutral-500">{svg.category}</span>
         </div>
         <div class="flex items-center space-x-1">
           <button
@@ -89,7 +91,7 @@
             on:click={() => {
               copyToClipboard(svg.route);
             }}
-            class="flex items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all"
+            class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
           >
             <Copy size={17} />
           </button>
@@ -98,7 +100,7 @@
             on:click={() => {
               downloadSvg(svg.route);
             }}
-            class="flex items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all"
+            class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
           >
             <DownloadSimple size={17} />
           </button>
@@ -106,7 +108,7 @@
             href={svg.url}
             title="Website"
             target="_blank"
-            class="flex items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all"
+            class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
           >
             <ArrowUpRight size={17} />
           </a>