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/InputGroup/text-area.tsx

@@ -49,13 +49,13 @@ export function TextAreaGroup<T extends FieldValues>({
     <div className={cn(className)}>
       <label
         htmlFor={id}
-        className="mb-3 block text-body-sm font-medium text-dark dark:text-white"
+        className="mb-3 block text-body-sm font-semibold text-dark dark:text-white"
       >
         {label}
         {required && <span className="ml-1 select-none text-error">*</span>}
       </label>
 
-      <div className="relative mt-3 [&_svg]:pointer-events-none [&_svg]:absolute [&_svg]:left-5.5 [&_svg]:top-5.5">
+      <div className="relative mt-3 [&_svg]:pointer-events-none [&_svg]:absolute [&_svg]:left-5.5 [&_svg]:top-5.5 [&_svg]:text-dark-5 dark:[&_svg]:text-white/75">
         <textarea
           id={id}
           name={name}
@@ -69,8 +69,9 @@ export function TextAreaGroup<T extends FieldValues>({
           }}
           onBlur={onBlur}
           className={cn(
-            "w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5.5 py-3 text-dark outline-none transition focus:border-primary disabled:cursor-default disabled:bg-gray-2 data-[active=true]:border-primary dark:border-dark-3 dark:bg-dark-2 dark:text-white dark:focus:border-primary dark:disabled:bg-dark dark:data-[active=true]:border-primary",
-            error && "border-red focus:border-red dark:border-red",
+            "w-full rounded-xl border border-stroke/70 bg-white/90 px-5.5 py-3 text-dark 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)] disabled:cursor-default disabled:bg-gray-2/70 data-[active=true]:border-primary/70 dark:border-dark-3/80 dark:bg-dark-2/85 dark:text-white 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)] dark:disabled:bg-dark dark:data-[active=true]:border-primary/80",
+            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)]",
             icon && "py-5 pl-13 pr-5",
           )}
           required={required}
@@ -82,7 +83,9 @@ export function TextAreaGroup<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>
   );