Merge pull request #230 from Pyr33x/main

⚡ Updates for new verison

src/components/navbar.svelte

@@ -54,7 +54,7 @@
   <div class="flex items-center justify-between mx-auto">
     <div class="flex items-center space-x-2">
       <a href="/" aria-label="Go to the SVGL v4.1 home page">
-        <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
+        <div class="flex items-center space-x-2 opacity-80 hover:opacity-100 transition-opacity">
           <svelte:component this={Logo} />
           <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
           <p class="text-neutral-400 hidden md:block font-mono">v4.1</p>
@@ -71,7 +71,7 @@
             target={link.external ? '_blank' : ''}
             aria-label={link.label ?? link.name}
             class={cn(
-              'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-2 md:pl-3 group',
+              'flex items-center opacity-80 hover:opacity-100 transition-opacity text-[15px] pl-2 md:pl-3 group',
               currentPath === link.url &&
                 'underline underline-offset-8 decoration-dotted decoration-neutral-500'
             )}
@@ -102,7 +102,7 @@
         <a
           href="https://twitter.com/pheralb_"
           target="_blank"
-          class="flex items-center space-x-1 hover:opacity-80 transition-opacity"
+          class="flex items-center space-x-1 opacity-80 hover:opacity-100 transition-opacity"
           title="Twitter"
         >
           <XIcon iconSize={16} />
@@ -111,7 +111,7 @@
           <a
             href={social.url}
             target="_blank"
-            class="flex items-center space-x-1 hover:opacity-80 transition-opacity"
+            class="flex items-center space-x-1 opacity-80 hover:opacity-100 transition-opacity"
             title={social.name}
           >
             <svelte:component this={social.icon} size={20} strokeWidth={1.5} name={social.name} />

src/components/notFound.svelte

@@ -6,7 +6,7 @@
 
 <div class="mt-6 flex w-full flex-col items-center justify-center text-gray-600 dark:text-gray-400">
   <PackageOpen size={40} class="mb-4" />
-  <p class="text-xl mb-1 font-medium">SVG not found</p>
+  <p class="text-xl mb-1 font-medium">Couldn't find the Icon</p>
   <p class="text-md mb-4 font-mono">"{notFoundTerm}"</p>
   <div class="flex items-center space-x-1">
     <a
@@ -22,7 +22,7 @@
       target="_blank"
       class={buttonStyles}
     >
-      <span>Request SVG</span>
+      <span>Request Icon</span>
       <ArrowUpRight size={16} />
     </a>
   </div>

src/components/theme.svelte

@@ -51,7 +51,7 @@
   </script>
 </svelte:head>
 
-<button on:click={toggle} aria-label="Toggle dark mode" class="hover:opacity-80">
+<button on:click={toggle} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
   <!-- moon icon -->
   {#if dark}
     <SunIcon size={20} strokeWidth={1.5} />

src/data/svgs.ts

@@ -63,7 +63,7 @@ export const svgs: iSVG[] = [
     url: 'https://nuxtjs.org/'
   },
   {
-    title: 'Nextjs',
+    title: 'Next.js',
     category: 'Framework',
     route: '/library/nextjs.svg',
     url: 'https://nextjs.org/'
@@ -1023,6 +1023,12 @@ export const svgs: iSVG[] = [
     route: '/library/builder.svg',
     url: 'https://builder.io/'
   },
+  {
+    title: 'Babel',
+    category: 'Compiler',
+    route: '/library/babel.svg',
+    url: 'https://babeljs.io/'
+  },
   {
     title: 'Surrealdb',
     category: 'Database',
@@ -1995,7 +2001,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'MonkeyType',
-    category: 'Typing',
+    category: 'Software',
     route: '/library/monkeytype.svg',
     url: 'https://monkeytype.com/'
   },

src/types/categories.ts

@@ -15,7 +15,6 @@ export type tCategory =
   | 'Language'
   | 'Education'
   | 'Design'
-  | 'Typing'
   | 'Community'
   | 'Marketplace'
   | 'Fintech';

src/ui/styles.ts

@@ -5,4 +5,4 @@ export const inputStyles =
   'w-full border-b border-neutral-300 bg-white p-3 px-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700';
 
 export const badgeStyles =
-  'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 text-xs font-mono hover:underline';
+  'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 text-xs font-mono hover:underline hover:bg-neutral-200 dark:hover:bg-neutral-700/50 transition-colors duration-100';