style: apply eslint --fix and prettier formatting

Author: Medalcode

package.json

@@ -35,8 +35,11 @@
   }
   ,
   "lint-staged": {
-    "src/**/*.{js,css}": [
+    "src/**/*.js": [
       "npm run lint:fix",
+      "git add"
+    ],
+    "src/**/*.{js,css}": [
       "npm run format",
       "git add"
     ]

src/css/animations.css

@@ -35,19 +35,28 @@
 }
 
 @keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateX(0);
   }
-  10%, 30%, 50%, 70%, 90% {
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
     transform: translateX(-5px);
   }
-  20%, 40%, 60%, 80% {
+  20%,
+  40%,
+  60%,
+  80% {
     transform: translateX(5px);
   }
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {

src/css/base.css

@@ -34,7 +34,12 @@ body {
 }
 
 /* Headings */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);

src/css/components.css

@@ -84,7 +84,7 @@ form label {
 }
 
 .tooltip-content::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 100%;
   left: 50%;
@@ -152,12 +152,12 @@ form input.input-invalid {
 }
 
 .input-valid + .validation-icon::before {
-  content: '✓';
+  content: "✓";
   color: var(--color-success);
 }
 
 .input-invalid + .validation-icon::before {
-  content: '✕';
+  content: "✕";
   color: var(--color-error);
 }
 
@@ -195,11 +195,7 @@ form input::placeholder {
 form button {
   width: 100%;
   padding: 14px 24px;
-  background: linear-gradient(
-    135deg,
-    var(--color-primary) 0%,
-    var(--color-primary-dark) 100%
-  );
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
   color: var(--color-text-light);
   border: none;
   border-radius: var(--border-radius-md);
@@ -214,7 +210,7 @@ form button {
 }
 
 form button::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
   left: 50%;
@@ -223,7 +219,9 @@ form button::before {
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
+  transition:
+    width 0.6s,
+    height 0.6s;
 }
 
 form button:hover::before {
@@ -474,12 +472,12 @@ form button:focus {
   .actions-buttons {
     flex-direction: column;
   }
-  
+
   .action-btn {
     width: 100%;
     min-width: auto;
   }
-  
+
   .toast {
     right: 10px;
     left: 10px;
@@ -536,7 +534,7 @@ form button:focus {
     padding: 8px 12px;
     font-size: var(--font-size-xs);
   }
-  
+
   .theme-toggle-text {
     display: none;
   }
@@ -729,7 +727,9 @@ form button:focus {
   z-index: 150;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
 }
 
 .history-overlay.active {
@@ -744,7 +744,7 @@ form button:focus {
     padding: 8px 12px;
     font-size: var(--font-size-xs);
   }
-  
+
   .history-panel {
     width: 100%;
     right: -100%;

src/css/dashboard.css

@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   border-right: 1px solid #334155;
-  box-shadow: 4px 0 24px rgba(0,0,0,0.2);
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
   z-index: 10;
 }
 
@@ -80,7 +80,7 @@
 }
 
 .nav-item:hover {
-  background-color: rgba(255,255,255,0.05);
+  background-color: rgba(255, 255, 255, 0.05);
   color: #fff;
 }
 

src/css/layout.css

@@ -3,8 +3,9 @@
 body {
   background-color: var(--color-bg-body);
   color: var(--color-text-main);
-  background-image: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 20%),
-                    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 20%);
+  background-image:
+    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 20%),
+    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 20%);
   background-attachment: fixed;
 }
 
@@ -48,37 +49,52 @@ body {
   background-color: var(--color-bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
 }
 
 .card-hover:hover {
   transform: translateY(-4px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
   border-color: var(--color-primary);
 }
 
 /* === Typography & Headers === */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: var(--color-text-main);
   font-weight: 700;
   letter-spacing: -0.025em;
 }
 
-.text-secondary, .text-muted, .form-text {
+.text-secondary,
+.text-muted,
+.form-text {
   color: var(--color-text-muted) !important;
 }
 
 /* === Inputs & Forms === */
-.form-control, .form-select {
+.form-control,
+.form-select {
   background-color: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border-color);
   color: var(--color-text-main);
   border-radius: var(--radius-md);
   padding: 0.75rem 1rem;
 }
 
-.form-control:focus, .form-select:focus {
+.form-control:focus,
+.form-select:focus {
   background-color: rgba(255, 255, 255, 0.05);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
@@ -111,8 +127,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Scrollbar */