Migrate to SCSS modules

frontend/src/pages/auth/Auth.tsx

@@ -1,9 +1,10 @@
 import type React from "react";
+import styles from "./auth.module.scss";
 
 export function AuthContainer({ children }: { children?: React.ReactNode }) {
     return (
-        <div className="auth-container">
-            <div className="auth-card fade-in">
+        <div className={styles.authContainer}>
+            <div className={styles.authCard}>
                 {children}
             </div>
         </div>
@@ -28,7 +29,7 @@ export function AuthHeader({ title, icon, subtitle }: AuthHeaderProps) {
     const iconName = typeof icon == "string" ? icon : icon.name;
 
     return (
-        <div className="auth-header">
+        <div className={styles.authHeader}>
             <h2>
                 <span className={`material-symbols ${iconType} large`}>{iconName}</span>
                 {title}

frontend/src/pages/auth/LoginPage.tsx

@@ -10,7 +10,7 @@ import { useAppState } from "@/pages/chat/state";
 import { initialize, isSupported, startElectronReceiver, subscribe } from "@/core/push-notifications/push-notifications";
 import { isElectron } from "@/core/electron/electron";
 import { useNavigate } from "react-router-dom";
-import "./auth.scss";
+import styles from "./auth.module.scss";
 import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
 import { MaterialButton, MaterialTextField } from "@/utils/material";
 
@@ -31,7 +31,7 @@ export default function LoginPage() {
     return (
         <AuthContainer>
             <AuthHeader icon="login" title="Добро пожаловать!" subtitle="Войдите в свой аккаунт" />
-            <div className="auth-body">
+            <div className={styles.authBody}>
                 <AlertsContainer alerts={alerts} />
 
                 <form
@@ -117,7 +117,6 @@ export default function LoginPage() {
                     
                     <MaterialTextField
                         label="@Имя пользователя"
-                        id="login-username"
                         name="username"
                         variant="outlined"
                         icon="person--filled"
@@ -127,7 +126,6 @@ export default function LoginPage() {
 
                     <MaterialTextField
                         label="Пароль"
-                        id="login-password"
                         name="password"
                         variant="outlined"
                         type="password"

frontend/src/pages/auth/RegisterPage.tsx

@@ -9,7 +9,7 @@ import { useAppState } from "@/pages/chat/state";
 import { MaterialButton, MaterialTextField } from "@/utils/material";
 import { ensureKeysOnLogin, deriveAuthSecret } from "@/core/api/authApi";
 import { useNavigate } from "react-router-dom";
-import "./auth.scss";
+import styles from "./auth.module.scss";
 import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
 
 export default function RegisterPage() {
@@ -31,7 +31,7 @@ export default function RegisterPage() {
     return (
         <AuthContainer>
             <AuthHeader icon="person_add" title="Регистрация" subtitle="Создайте новый аккаунт" />
-            <div className="auth-body">
+            <div className={styles.authBody}>
                 <AlertsContainer alerts={alerts} />
 
                 <form onSubmit={async (e) => {
@@ -113,7 +113,6 @@ export default function RegisterPage() {
                 }}>
                     <MaterialTextField
                         label="Отображаемое имя"
-                        id="register-display-name"
                         name="display_name"
                         variant="outlined"
                         icon="badge--filled"
@@ -124,7 +123,6 @@ export default function RegisterPage() {
                         ref={displayNameElement} />
                     <MaterialTextField
                         label="@Имя пользователя"
-                        id="register-username"
                         name="username"
                         variant="outlined"
                         icon="person--filled"
@@ -135,7 +133,6 @@ export default function RegisterPage() {
                         ref={usernameElement} />
                     <MaterialTextField
                         label="Пароль"
-                        id="register-password"
                         name="password"
                         variant="outlined"
                         type="password"
@@ -146,7 +143,6 @@ export default function RegisterPage() {
                         ref={passwordElement} />
                     <MaterialTextField
                         label="Подтвердите пароль"
-                        id="register-confirm-password"
                         name="confirm_password"
                         variant="outlined"
                         type="password"

frontend/src/pages/auth/auth.module.scss

@@ -1,7 +1,7 @@
 @use "../../css/colors" as *;
 @use "../../css/material" as *;
 
-.auth-container {
+.authContainer {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -9,7 +9,7 @@
     padding: 2rem;
     background-color: $color-dark-surface;
 
-    .auth-card {
+    .authCard {
         background-color: $color-dark-surface-container;
         color: $color-dark-on-surface;
         border-radius: 12px;
@@ -17,9 +17,10 @@
         width: 100%;
         max-width: 450px;
         overflow: hidden;
+        animation: authCardAnimation 0.3s ease-in-out;
     }
 
-    .auth-header {
+    .authHeader {
         margin: 0;
         padding: 16px;
         padding-bottom: 0;
@@ -37,7 +38,7 @@
         }
     }
 
-    .auth-body {
+    .authBody {
         padding: 25px;
         padding-bottom: 16px;
 
@@ -47,4 +48,5 @@
             gap: 10px;
         }
     }
-}
+}
+