🎨 Design improvements + fixed content page size + improve accessibility

src/components/layout/showCategories.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { tCategory } from "@/types/categories";
+  import type { Category } from "@/types/categories";
 
   import { cn } from "@/utils/cn";
   import { svgs } from "@/data/svgs";
@@ -10,7 +10,7 @@
   import { sidebarBadgeClasses } from "./sidebarBadgeClasses";
 
   // Get category counts:
-  const categories: tCategory[] = getCategories();
+  const categories: Category[] = getCategories();
   let categoryCounts: Record<string, number> = {};
   categories.forEach((category) => {
     categoryCounts[category] = svgs.filter((svg) =>

src/components/layout/sidebar.svelte

@@ -20,7 +20,7 @@
       <ShowSidebarLinks />
     </nav>
     <Separator orientation="horizontal" />
-    <nav class="flex flex-col space-y-0.5 overflow-y-auto">
+    <nav class="relative flex h-auto flex-col space-y-0.5 overflow-y-auto">
       <ShowCategories />
     </nav>
   </aside>

src/components/logos/svgl.svelte

@@ -5,70 +5,14 @@
 </script>
 
 <svg
+  name="SVGL Logo"
+  xmlns="http://www.w3.org/2000/svg"
   width={props.size}
   height={props.size}
-  name="SVGL Logo"
-  viewBox="0 0 512 512"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  class={props.className}
->
-  <rect
-    id="svgl__r4"
-    width="512"
-    height="512"
-    x="0"
-    y="0"
-    rx="128"
-    fill="#222"
-    stroke="#FFFFFF"
-    stroke-width="0"
-    stroke-opacity="100%"
-    paint-order="stroke"
-  /><rect
-    width="512"
-    height="512"
-    x="0"
-    y="0"
-    fill="url(#svgl__r6)"
-    rx="128"
-    style="mix-blend-mode: overlay;"
-  /><clipPath id="svgl__clip"><use xlink:href="#svgl__r4" /></clipPath><defs
-    ><linearGradient
-      id="svgl__r5"
-      gradientUnits="userSpaceOnUse"
-      gradientTransform="rotate(135)"
-      style="transform-origin: center center;"
-      ><stop stop-color="#222" /><stop
-        offset="1"
-        stop-color="#222222"
-      /></linearGradient
-    ><radialGradient
-      id="svgl__r6"
-      cx="0"
-      cy="0"
-      r="1"
-      gradientUnits="userSpaceOnUse"
-      gradientTransform="translate(256) rotate(90) scale(512)"
-      ><stop stop-color="white" /><stop
-        offset="1"
-        stop-color="white"
-        stop-opacity="0"
-      /></radialGradient
-    ></defs
-  ><svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="310"
-    height="310"
-    fill="#e8e8e8"
-    viewBox="0 0 256 256"
-    x="101"
-    y="101"
-    alignment-baseline="middle"
-    style="color: rgb(255, 255, 255);"
-    ><path
-      d="M168,32H88A56.06,56.06,0,0,0,32,88v80a56.06,56.06,0,0,0,56,56h48a8.07,8.07,0,0,0,2.53-.41c26.23-8.75,76.31-58.83,85.06-85.06A8.07,8.07,0,0,0,224,136V88A56.06,56.06,0,0,0,168,32ZM48,168V88A40,40,0,0,1,88,48h80a40,40,0,0,1,40,40v40H184a56.06,56.06,0,0,0-56,56v24H88A40,40,0,0,1,48,168Zm96,35.14V184a40,40,0,0,1,40-40h19.14C191,163.5,163.5,191,144,203.14Z"
-    /></svg
-  >
+  fill="currentColor"
+  viewBox="0 0 256 256"
+  ><path d="M216,136c-8,24-56,72-80,80V184a48,48,0,0,1,48-48Z" opacity="0.2"
+  ></path><path
+    d="M168,32H88A56.06,56.06,0,0,0,32,88v80a56.06,56.06,0,0,0,56,56h48a8.07,8.07,0,0,0,2.53-.41c26.23-8.75,76.31-58.83,85.06-85.06A8.07,8.07,0,0,0,224,136V88A56.06,56.06,0,0,0,168,32ZM48,168V88A40,40,0,0,1,88,48h80a40,40,0,0,1,40,40v40H184a56.06,56.06,0,0,0-56,56v24H88A40,40,0,0,1,48,168Zm96,35.14V184a40,40,0,0,1,40-40h19.14C191,163.5,163.5,191,144,203.14Z"
+  ></path>
 </svg>

src/components/svgs/addToFavorite.svelte

@@ -22,7 +22,7 @@
 <button
   class={cn(
     "cursor-pointer transition-colors hover:animate-pulse",
-    "text-neutral-500 hover:text-red-700 dark:text-neutral-400 dark:hover:text-red-400",
+    "text-neutral-500 hover:text-red-700 dark:text-neutral-400 dark:hover:text-red-600",
     isFavorite && "text-red-500",
   )}
   onclick={toggleFavorite}
@@ -36,6 +36,6 @@
   <HeartIcon
     size={16}
     strokeWidth={1.8}
-    class={cn(isFavorite && "fill-red-500")}
+    class={cn(isFavorite && "fill-red-500 dark:fill-red-600")}
   />
 </button>

src/components/svgs/copySvg.svelte

@@ -564,8 +564,8 @@
       class="mt-1 flex w-full items-center text-center text-[12px] text-neutral-600 dark:text-neutral-400"
     >
       <p>
-        Remember to request permission from the creators for the use of the SVG.
-        Modification is not allowed.
+        Please ensure you have permission from the creators before using the
+        SVG. Modifications are not permitted.
       </p>
     </div>
   </Popover.Content>

src/components/svgs/downloadSvg.svelte

@@ -306,11 +306,15 @@
           </div>
         {/if}
       </div>
-      <Dialog.Footer class="text-xs text-neutral-600 dark:text-neutral-400">
-        <p>
-          Remember to request permission from the creators for the use of the
-          SVG. Modification is not allowed.
-        </p>
+      <Dialog.Footer>
+        <div
+          class="mt-2 flex w-full items-center justify-center text-sm text-neutral-600 dark:text-neutral-400"
+        >
+          <p class="w-full text-center text-sm">
+            Please ensure you have permission from the creators before using the
+            SVG. Modifications are not permitted.
+          </p>
+        </div>
       </Dialog.Footer>
     </Dialog.Content>
   </Dialog.Root>