feat(app): Added Gems and polish some UI Components

src/app/(home)/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 :root {
-  --bg-dark: #101010;
+  --bg-dark: #202020;
   --bg-light: #ffffff;
 
   --text-dark: #ffffff;

src/components/ColorPicker/index.tsx

@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { ColorPickerModal } from './modal';
 
 import { Color, Colors } from 'bibata/app';
+import { GemsSVG } from '@components/svgs';
 
 type Props = {
   name: string;
@@ -48,7 +49,7 @@ export const ColorPickerButton: React.FC<Props> = (props) => {
       disabled={selected && disabled}
       onClick={props.onClick}>
       <div
-        className={`w-full h-20 md:h-32 flex justify-center items-center ${
+        className={`w-full h-24 md:h-32 flex justify-center items-center ${
           selected ? 'rounded-lg sm:rounded-xl' : 'rounded-2xl sm:rounded-3xl'
         }`}
         style={
@@ -63,7 +64,7 @@ export const ColorPickerButton: React.FC<Props> = (props) => {
                 background: wheel
               }
         }>
-        <p>{'o-o'}</p>
+        <GemsSVG gems={name} />
       </div>
       <div className='mt-0 sm:mt-3 text-center text-xs sm:text-sm'>{name}</div>
     </button>

src/components/Cursors/card.tsx

@@ -157,7 +157,7 @@ Report Issue here: https://github.com/ful1e5/bibata/issues`
           backgroundColor: `color-mix(in srgb, #1e1e1e 95%, ${props.color.base})`
         }}
         className='w-full mb-4 overflow-hidden rounded-2xl sm:rounded-3xl border-white/[.1] border'>
-        <div title={name} className='relative w-full h-24 sm:h-40 mb-4'>
+        <div title={name} className='relative w-full h-24 sm:h-40'>
           {(loading || frames.length === 0) && (
             <div className='flex justify-center items-center w-full h-full animate-pulse bg-white/[.2]'>
               <ProcessingSVG />
@@ -194,7 +194,7 @@ Report Issue here: https://github.com/ful1e5/bibata/issues`
         </div>
 
         <div className='text-center text-[8px] sm:text-sm'>
-          <p className='mb-2'>{name}</p>
+          <p className='py-3'>{name}</p>
         </div>
       </div>
     </button>

src/components/Cursors/loading.tsx

@@ -16,9 +16,9 @@ export const CursorsLoading: React.FC<Props> = (_props) => {
             className='w-full mb-4 overflow-hidden rounded-2xl sm:rounded-3xl bg-white/[0.05] border-white/[.1] border'>
             <div
               className={
-                'w-full h-20 sm:h-40 animate-pulse bg-white/[.2]'
+                'w-full h-24 sm:h-40 animate-pulse bg-white/[.2]'
               }></div>
-            <div className='flex animate-pulse bg-white/[.1] h-8'></div>
+            <div className='flex animate-pulse bg-white/[.1] h-10' />
           </div>
         ))}
       </div>

src/components/NavBar/index.tsx

@@ -17,7 +17,7 @@ export const NavBar: React.FC<Props> = (_props) => {
   const { data: session, status } = useSession();
 
   return (
-    <header className='sticky py-px top-0 z-20 bg-[#030303] backdrop-filter backdrop-blur-md border-b border-white/[.1] firefox:bg-opacity-90'>
+    <header className='sticky py-px top-0 z-20 bg-[#030303] backdrop-filter backdrop-blur-2xl border-b border-white/[.1] firefox:bg-opacity-70'>
       <nav className='container mx-auto p-3 md:p-4 flex items-center justify-between'>
         <Link href='/'>
           <div className='overflow-hidden flex items-center justify-center gap-2'>

src/components/TypePicker.tsx

@@ -14,23 +14,23 @@ interface Props {
 export const TypePicker: React.FC<Props> = (props) => {
   return (
     <div className='flex items-center justify-center'>
-      <div className='w-5/6 sm:w-1/2 lg:w-2/5 bg-black/[0.2] overflow-hidden '>
+      <div className='w-full sm:w-1/2 lg:w-2/5 px-12 sm:px-0'>
         <div className={`grid grid-cols-2 gap-3`}>
           {props.list.map((t) => (
             <button
               key={t}
               title={`Bibata ${t}`}
               disabled={t === props.value}
               onClick={() => props.onClick(t)}
-              className={`py-2 inline-flex justify-center items-center gap font-bold border rounded-2xl shadow-md border-gray-500 ${
+              className={`py-2 flex justify-center items-center gap-1 font-bold border rounded-2xl shadow-md border-white/[.2] ${
                 t === props.value
                   ? 'bg-white fill-black text-black font-bold'
-                  : 'fill-gray-500 text-gray-500 hover:text-white hover:fill-white hover:border-white'
+                  : 'fill-white/[.4] text-white/[.4] hover:text-white hover:fill-white hover:border-white'
               }`}>
               <>
                 {t === 'Modern' && <ModernSVG />}
                 {t === 'Original' && <OriginalSVG />}
-                {t}
+                <p className='hidden sm:block'>{t}</p>
               </>
             </button>
           ))}