improvements and fixes: enhance authentication validation, update nav…

…igation styles, and refine error message component

src/components/authentication/hooks/useAuthentication.ts

@@ -32,7 +32,9 @@ export const useAuth = (isLogin: boolean) => {
       if (!formData.email || !emailRegex.test(formData.email)) {
         errors.push({ field: 'email', message: 'Invalid email address' });
       }
-      if (formData.password !== formData.confirmPassword) {
+      if (!formData.confirmPassword) {
+        errors.push({ field: 'confirmPassword', message: 'Confirm Password is required' });
+      } else if (formData.password !== formData.confirmPassword) {
         errors.push({
           field: 'confirmPassword',
           message: 'Passwords do not match',
@@ -42,10 +44,10 @@ export const useAuth = (isLogin: boolean) => {
 
     if (!formData.password) {
       errors.push({ field: 'password', message: 'Password is required' });
-    } else if (formData.password.length < 6) {
+    } else if (formData.password.length < 4 || !/[!@#$%^&*]/.test(formData.password)) {
       errors.push({
         field: 'password',
-        message: 'Password must be at least 6 characters and one special character',
+        message: 'Password must be at least 4 characters and one special character',
       });
     }
 

src/components/shared/navigation-bar/components/NavLinksComponent.tsx

@@ -15,7 +15,7 @@ const NavLinksComponent: React.FC<NavLinksComponentProps> = ({ jsonData, fileNam
           key={link.url}
           href={link.url}
           onClick={link.onClick}
-          className='group relative px-3 py-2 text-sm font-medium text-textPrimary transition-all duration-300 ease-in-out xl:text-base'
+          className='group relative text-xs xl:text-sm px-3 py-2 font-medium text-textPrimary transition-all duration-300 ease-in-out '
         >
           {link.text}
           <span className='absolute bottom-0 left-1/2 h-0.5 w-0 bg-primary transition-all duration-300 ease-in-out group-hover:w-full group-hover:left-0' />

src/components/shared/navigation-bar/components/NavLogo.tsx

@@ -1,12 +1,12 @@
 const NavLogo = () => (
   <div className='flex items-center gap-2 sm:gap-3'>
-    <div className='flex h-8 w-8 items-center justify-center rounded-xl bg-textSecondary shadow-lg transition-all duration-300 hover:scale-110 hover:bg-primary hover:rotate-3 sm:h-10 sm:w-10'>
+    <div className='flex h-10 w-10 items-center justify-center rounded-xl bg-textSecondary shadow-lg transition-all duration-300 hover:scale-110 hover:bg-primary hover:rotate-3 sm:h-12 sm:w-12'>
       <span className='text-lg font-bold text-surface transition-all duration-300 hover:scale-110 sm:text-xl'>
         L
       </span>
     </div>
     <div className='flex flex-col'>
-      <span className='text-lg font-bold text-textSecondary transition-all duration-300 hover:-translate-y-[2px] hover:text-textPrimary sm:text-xl'>
+      <span className='text-lg font-bold text-textSecondary transition-all duration-300 hover:-translate-y-[2px] hover:text-textPrimary sm:text-2xl'>
         <em>LabGraph</em>
         <span className='text-[6px] text-textSecondary md:text-[8px] align-top animate-pulse'>
           ®

src/components/shared/utils/components/error-message/index.tsx

@@ -1,7 +1,7 @@
 import ErrorMessageProps from './types/errorMessageProps';
 
 const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
-  return <div className='bg-danger mb-2 rounded p-3 text-sm text-textPrimary'>{message}</div>;
+  return <div className='bg-danger mb-2 rounded p-3 text-xs text-errorText'>{message}</div>;
 };
 
 export default ErrorMessage;

src/styles/globals.css

@@ -14,6 +14,7 @@
     --color-secondary-hover: #0366d6; /* Darker hover state */
     --color-accent: #ff5722; /* updated accent, now distinct from secondary */
     --color-danger: #d32f2f; /* Slightly deeper red */
+    --color-error-text: #fafafa;
     --color-background: #fafafa; /* Lighter background */
     --color-surface: #ffffff;
     --color-muted: #f1f1f1;
@@ -64,6 +65,7 @@
     --color-secondary-hover: #6e9cf5; /* Darker hover state */
     --color-accent: #ff7043; /* updated dark accent to contrast secondary */
     --color-danger: #d32f2f;
+    --color-error-text: #fafafa;
     --color-background: #242529; /* Darker background */
     --color-surface: #2f3136; /* Elevated surface contrast */
     --color-muted: #40444b;

tailwind.config.ts

@@ -33,6 +33,7 @@ const config: Config = {
       secondaryHover: 'var(--color-secondary-hover)',
       accent: 'var(--color-accent)',
       danger: 'var(--color-danger)',
+      errorText: 'var(--color-error-text)',
       background: 'var(--color-background)',
       surface: 'var(--color-surface)',
       muted: 'var(--color-muted)',
@@ -82,6 +83,7 @@ const config: Config = {
         secondaryHover: 'var(--color-secondary-hover)',
         accent: 'var(--color-accent)',
         danger: 'var(--color-danger)',
+        errorText: 'var(--color-error-text)',
         background: 'var(--color-background)',
         surface: 'var(--color-surface)',
         textPrimary: 'var(--color-text-primary)',