refactor(auth, layouts): enhance UI components for improved aesthetics and usability

- Updated SignIn and Profile components with new background styles and layout adjustments for a more modern look.
- Refined button styles in GoogleSigninButton and SigninWithPassword for better user interaction feedback.
- Enhanced InputGroup and Select components with improved styling and error handling for a more consistent user experience.
- Adjusted Sidebar and Header components for better responsiveness and visual appeal.
- Implemented spotlight effect in UserInfo dropdown for a more engaging user interface.

src/components/FormElements/select.tsx

@@ -81,7 +81,7 @@ export function Select<T extends FieldValues>({
     <div className={cn("space-y-3", className)}>
       <label
         htmlFor={id}
-        className="block text-body-sm font-medium capitalize text-dark dark:text-white"
+        className="block text-body-sm font-semibold capitalize text-dark dark:text-white"
       >
         {label}
         {required && <span className="ml-1 select-none text-error">*</span>}
@@ -108,9 +108,10 @@ export function Select<T extends FieldValues>({
           }}
           onBlur={onBlur}
           className={cn(
-            "w-full appearance-none rounded-lg border border-stroke bg-transparent px-5.5 py-3 outline-none transition focus:border-primary active:border-primary dark:border-dark-3 dark:bg-dark-2 dark:focus:border-primary [&>option]:text-dark-5 dark:[&>option]:text-dark-6",
+            "w-full appearance-none rounded-xl border border-stroke/70 bg-white/90 px-5.5 py-3 shadow-[0_1px_2px_rgba(16,24,40,0.04),0_8px_20px_rgba(16,24,40,0.04)] outline-none backdrop-blur-[1px] transition-all duration-200 focus:border-primary/70 focus:bg-white focus:shadow-[0_0_0_2px_rgba(59,130,246,0.14),0_10px_24px_rgba(59,130,246,0.08)] active:border-primary/70 dark:border-dark-3/80 dark:bg-dark-2/85 dark:focus:border-primary/80 dark:focus:shadow-[0_0_0_2px_rgba(59,130,246,0.2),0_10px_24px_rgba(15,23,42,0.45)] [&>option]:text-dark-5 dark:[&>option]:text-dark-6",
             isOptionSelected && "text-dark dark:text-white",
-            error && "border-red focus:border-red dark:border-red",
+            error &&
+              "border-red/80 focus:border-red focus:shadow-[0_0_0_2px_rgba(239,68,68,0.16),0_10px_24px_rgba(239,68,68,0.1)] dark:border-red/80 dark:focus:shadow-[0_0_0_2px_rgba(239,68,68,0.24),0_10px_24px_rgba(127,29,29,0.45)]",
             prefixIcon && "pl-11.5",
             clearable && value && "pr-20",
           )}
@@ -132,7 +133,7 @@ export function Select<T extends FieldValues>({
           <button
             type="button"
             onClick={handleClear}
-            className="absolute right-10 top-1/2 -translate-y-1/2 text-dark-5 hover:text-dark dark:text-dark-6 dark:hover:text-white"
+            className="absolute right-10 top-1/2 -translate-y-1/2 text-dark-5 transition hover:scale-110 hover:text-dark dark:text-dark-6 dark:hover:text-white"
           >
             <svg
               width="16"
@@ -156,7 +157,9 @@ export function Select<T extends FieldValues>({
       </div>
 
       {error && (
-        <p className="text-red mt-1.5 text-sm">{error.message as string}</p>
+        <p className="text-red mt-1.5 text-sm font-medium">
+          {error.message as string}
+        </p>
       )}
     </div>
   );