fix: minor styling adjustments

Author: confuser

components/DateTimePicker.js

@@ -21,7 +21,8 @@ const DateTimePicker = forwardRef(({ className = '', inputClassName = '', error
   {
     'rounded-r-3xl': icon && iconPosition === 'left',
     'rounded-l-3xl': icon && iconPosition === 'right',
-    'rounded-3xl': !icon
+    'rounded-3xl': !icon,
+    'px-4': !icon
   }
   )
 

components/Input.js

@@ -54,17 +54,17 @@ const Input = forwardRef((props, ref) => {
     text-gray-400
     duration-300
     transform
-    -translate-y-3
+    -translate-y-[calc(100%+0.35rem)]
     scale-75
-    top-1/4
+    top-1/2
     z-10
     origin-[0]
     start-2.5
     peer-focus:text-gray-500
     peer-placeholder-shown:scale-100
-    peer-placeholder-shown:translate-y-0
+    peer-placeholder-shown:-translate-y-1/2
     peer-focus:scale-75
-    peer-focus:-translate-y-3
+    peer-focus:-translate-y-[calc(100%+0.35rem)]
     rtl:peer-focus:translate-x-1/4
     rtl:peer-focus:left-auto
     ${labelClassName}
@@ -110,7 +110,7 @@ const Input = forwardRef((props, ref) => {
           {...rest}
         />
         {type === 'password' &&
-          <span className='absolute right-5 top-4 text-gray-400 text-lg cursor-pointer' onClick={toggleShowInput}>
+          <span className='absolute right-5 top-1/2 -translate-y-1/2 text-gray-400 text-lg cursor-pointer' onClick={toggleShowInput}>
             {showInput ? <FaEye /> : <FaEyeSlash />}
           </span>}
         {label &&

components/Nav.js

@@ -22,7 +22,7 @@ export default function Nav ({ leftItems, mobileItems, rightItems, unreadNotific
           key={item.name}
           href={item.href}
           passHref
-          className={`text-lg text-white ${router.asPath === item.href ? 'font-bold' : 'hover:text-primary-100'}`}
+          className={`text-lg text-gray-200 transition-colors duration-200 ${router.asPath === item.href ? 'font-bold text-accent-500' : 'hover:text-accent-400'}`}
         >
 
           {item.name}
@@ -47,11 +47,11 @@ export default function Nav ({ leftItems, mobileItems, rightItems, unreadNotific
   }, [])
 
   return (
-    <div className='relative bg-primary-500'>
+    <header className='relative bg-primary-500'>
       <PageContainer>
-        <div className='flex justify-between items-center my-6 pb-6 md:justify-start md:space-x-10'>
+        <nav className='flex justify-between items-center py-5 md:justify-start md:space-x-10'>
           <div className='flex justify-start lg:w-0 lg:flex-1'>
-            <Link href='/' passHref>
+            <Link href='/' passHref className='transition-opacity hover:opacity-80'>
               <span className='sr-only'>Home</span>
               <Image src={(process.env.BASE_PATH || '') + '/images/banmanager-icon.png'} alt='Logo' width='40' height='40' priority />
             </Link>
@@ -60,11 +60,15 @@ export default function Nav ({ leftItems, mobileItems, rightItems, unreadNotific
             {renderMenu(leftItems)}
           </div>
           <div className='md:hidden'>
-            <button type='button' className='rounded-md w-10 h-10 p-2 relative inline-flex items-center justify-center text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500 text-2xl' onClick={() => setDrawerOpen(true)}>
-              <span className='sr-only'>Open menu</span>
-              <FaBars />
+            <button
+              type='button'
+              className='rounded-xl w-11 h-11 p-2.5 relative inline-flex items-center justify-center text-gray-200 bg-primary-700 border border-primary-800 hover:bg-primary-600 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/50'
+              onClick={() => setDrawerOpen(true)}
+              aria-label='Open menu'
+            >
+              <FaBars className='w-5 h-5' />
               {unreadNotificationCount > 0 && (
-                <span className='absolute bg-red-500 text-red-100 px-2 py-1 text-xs font-bold rounded-full -top-1 -right-1'>
+                <span className='absolute bg-error text-white px-1.5 py-0.5 text-xs font-bold rounded-full -top-1 -right-1 min-w-[18px] text-center'>
                   {unreadNotificationCount > 9 ? '9+' : unreadNotificationCount}
                 </span>
               )}
@@ -73,40 +77,38 @@ export default function Nav ({ leftItems, mobileItems, rightItems, unreadNotific
           <div className='hidden md:flex items-center justify-end md:flex-1 lg:w-0'>
             {renderMenu(rightItems)}
           </div>
-        </div>
+        </nav>
       </PageContainer>
       <NavigationOverlay drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}>
-        <NavigationOverlay.Body className='!px-2 flex flex-col sm:flex-row sm:justify-around'>
-          <nav>
+        <NavigationOverlay.Body className='!px-4 flex flex-col sm:flex-row sm:justify-around'>
+          <nav className='space-y-2'>
             {renderMenu(rightItems)}
             {mobileItems?.map(({ href, name, icon, label, splitBorder }) => (
               <Fragment key={`${href}${name}`}>
                 <Link
                   href={href}
                   passHref
-                  className='hover:text-accent-200 hover:bg-gray-600 flex transition-colors text-gray-100 text-xl p-2 my-4 rounded-lg'
+                  className='flex items-center transition-colors text-gray-200 hover:text-accent-400 hover:bg-primary-700 text-lg p-3 rounded-xl'
                 >
 
                   {icon}
-                  <span className='mx-4 text-lg font-normal'>
+                  <span className='mx-4 font-normal'>
                     {name}
                   </span>
                   {!!label &&
                     <span className='flex-grow text-right'>
-                      <button type='button' className='w-6 h-6 text-xs rounded-full text-white bg-accent-500'>
-                        <span className='p-1'>
-                          {label}
-                        </span>
-                      </button>
+                      <span className='inline-flex items-center justify-center w-6 h-6 text-xs rounded-full text-white bg-accent-500 font-medium'>
+                        {label}
+                      </span>
                     </span>}
 
                 </Link>
-                {splitBorder && <span className='text-5xl pb-4 mb-4 border-b border-accent-200 leading-none' />}
+                {splitBorder && <span className='block pb-4 mb-4 border-b border-primary-800' />}
               </Fragment>
             ))}
           </nav>
         </NavigationOverlay.Body>
       </NavigationOverlay>
-    </div>
+    </header>
   )
 }

components/TextArea.js

@@ -39,18 +39,17 @@ const TextArea = forwardRef((props, ref) => {
     text-gray-400
     duration-300
     transform
-    -translate-y-3
-    translate-x-1.5
+    -translate-y-5
     scale-75
-    top-2
+    top-5
     left-4
     z-10
     origin-[0]
-    start-2.5
     peer-focus:text-gray-500
     peer-placeholder-shown:scale-100
     peer-placeholder-shown:translate-y-0
     peer-focus:scale-75
+    peer-focus:-translate-y-5
     rtl:peer-focus:translate-x-1/4
     rtl:peer-focus:left-auto
     ${labelClassName}

styles/react-select.css

@@ -1,5 +1,5 @@
 .react_select .react_select__control {
-  @apply relative w-full bg-primary-900 text-gray-400 shadow-lg rounded-3xl pl-3 pr-3 py-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-accent-500 focus:border-accent-500 border-0
+  @apply relative w-full bg-primary-900 text-gray-400 shadow-lg rounded-3xl pl-4 pr-4 py-2.5 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-accent-500 focus:border-accent-500 border-0
 }
 
 .react_select .react_select__control--is-disabled {