Change input style

src/app/main/account/page.tsx

@@ -66,7 +66,7 @@ function AccountLoggedOut () {
             value={username}
             onChange={e => setUsername(e.target.value)}
             required
-            className='input-field my-1'
+            className='input-field btntheme1'
           />
           <input
             id='password'
@@ -76,7 +76,7 @@ function AccountLoggedOut () {
             value={password}
             onChange={e => setPassword(e.target.value)}
             required
-            className='input-field my-1'
+            className='input-field btntheme1'
           />
           <button type='submit' className='button btntheme1'>
             Login
@@ -180,7 +180,7 @@ function AccountChangeUsername ({
             value={newUsername}
             onChange={e => setNewUsername(e.target.value)}
             required
-            className='input-field my-1'
+            className='input-field btntheme1'
           />
           <button type='submit' className='button btntheme1'>
             Change Username
@@ -264,7 +264,7 @@ function AccountChangePassword ({
             value={newPassword}
             onChange={e => setNewPassword(e.target.value)}
             required
-            className='input-field my-1'
+            className='input-field btntheme1'
           />
           <input
             id='retype-new-password'
@@ -275,7 +275,7 @@ function AccountChangePassword ({
             value={retypeNewPassword}
             onChange={e => setRetypeNewPassword(e.target.value)}
             required
-            className='input-field my-1'
+            className='input-field btntheme1'
           />
           <button type='submit' className='button btntheme1'>
             Change Password

src/styles/globals.css

@@ -60,7 +60,8 @@ body {
   --col9: rgb(156, 144, 168);
 }
 
-.button {
+.button,
+.input-field {
   @apply rounded-md cursor-pointer text-[16px] py-1 px-2 transition-colors border;
 }
 
@@ -80,6 +81,18 @@ body {
   @apply bg-(--col4) border-(--col6) hover:bg-(--col6) hover:border-(--col8) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col7) disabled:hover:text-gray-100 disabled:hover:bg-(--col4) disabled:hover:border-(--col8);
 }
 
+.input-field.btntheme1 {
+  @apply focus:bg-(--col4) focus:border-(--col6);
+}
+
+.input-field.btntheme2 {
+  @apply focus:bg-(--col5) focus:border-(--col7);
+}
+
+.input-field.btntheme3 {
+  @apply focus:bg-(--col6) focus:border-(--col8);
+}
+
 ::-webkit-scrollbar {
   @apply w-2;
 }
@@ -138,10 +151,6 @@ body {
   @apply outline-none;
 }
 
-.input-field {
-  @apply border-2 border-(--col4) rounded-md bg-(--col2) py-1 px-2 focus:bg-(--col3) focus:border-(--col6) transition-colors w-full;
-}
-
 .entry-info-item {
   @apply flex flex-row items-center gap-1 border text-gray-300 py-1 px-2 rounded-md w-fit text-[16px] transition-colors cursor-pointer;
 }