Improve auth pages

frontend/src/css/_auth.scss

@@ -1,4 +1,5 @@
 @use "common/colors" as *;
+@use "common/material" as *;
 
 .auth-container {
     display: flex;
@@ -6,30 +7,27 @@
     align-items: center;
     min-height: 100vh;
     padding: 2rem;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background-color: $color-dark-surface;
 
     .auth-card {
-        background: white;
+        background-color: $color-dark-surface-container;
+        color: $color-dark-on-surface;
         border-radius: 12px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         width: 100%;
         max-width: 450px;
         overflow: hidden;
-        transition: all 0.3s ease;
-
-        &:hover {
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-        }
     }
       
     .auth-header {
-        background: linear-gradient(135deg, $primary, $primary-dark);
-        color: white;
-        padding: 1.5rem;
+        margin: 0;
+        padding: 16px;
+        padding-bottom: 0;
         text-align: center;
 
         h2 {
             font-size: 1.8rem;
+            margin: 0;
             margin-bottom: 0.5rem;
             align-items: center;
             display: flex;
@@ -40,6 +38,13 @@
     }
       
     .auth-body {
-        padding: 2rem;
+        padding: 25px;
+        padding-bottom: 16px;
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
     }
 }

frontend/src/css/common/_components.scss

@@ -1,62 +1,4 @@
-@use "colors" as *;
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 15px;
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-
-    label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-        color: $dark;
-    }
-}
-
-.form-control {
-    width: 100%;
-    padding: 0.8rem 1rem;
-    border: 1px solid $gray;
-    border-radius: 6px;
-    font-size: 1rem;
-    transition: all 0.3s ease;
-
-    &:focus {
-        outline: none;
-        border-color: $primary;
-        box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
-    }
-}
-
-.btn {
-    display: inline-block;
-    background: linear-gradient(135deg, $primary, $primary-dark);
-    color: white;
-    border: none;
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-align: center;
-    text-decoration: none;
-
-    &:hover {
-        background: linear-gradient(135deg, $primary-dark, $primary);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-}
-
-.btn-block {
-    display: block;
-    width: 100%;
-}
+@use "material" as *;
 
 .text-center {
     text-align: center;
@@ -83,7 +25,7 @@
 }
 
 .link {
-    color: $primary; 
+    color: $color-dark-primary; 
     font-weight: 600;
 }
 

frontend/src/material.ts

@@ -8,6 +8,7 @@ import 'mdui/components/button-icon';
 import 'mdui/components/fab';
 import 'mdui/components/dialog';
 import 'mdui/components/button';
+import 'mdui/components/text-field';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';