client: fixed code, added storybook, fixed auth forms

Author: Meow-Double

client/src/app/styles/scss/vars.scss

@@ -23,7 +23,7 @@
   --z-index-modal: 10;
 
   /* Цвета */
-  --overlay: rgb(0 0 0 / 0.5);
+  --overlay: rgba(0 0 0 / 0.5);
   --red-light: #ff0000;
   --red-dark: #c50a0a;
   --color-error: #ff0000;

client/src/features/auth/ui/LoginForm/LoginForm.module.scss

@@ -3,8 +3,6 @@ import { memo } from 'react';
 import { useRegisterForm } from '@/features/auth/model/hooks/useRegisterForm.ts';
 import { Button, Checkbox, Form, Input, Typography } from '@/shared/ui';
 
-import styles from './RegisterForm.module.scss';
-
 interface RegisterFormProps {
   onSwap: () => void;
 }
@@ -17,7 +15,7 @@ export const RegisterForm = memo(({ onSwap }: RegisterFormProps) => {
   } = form;
 
   return (
-    <Form onSubmit={onSubmit} className={styles.form}>
+    <Form onSubmit={onSubmit}>
       <Typography tag='h2' variant='bold_24'>
         Registration
       </Typography>

client/src/features/auth/ui/RegisterForm/RegisterForm.module.scss

@@ -1,7 +1,5 @@
-import styles from './ErrorPage.module.scss';
-
 const ErrorPage = () => {
-  return <div className={styles.error}>404</div>;
+  return <div>404</div>;
 };
 
 export default ErrorPage;

client/src/features/auth/ui/RegisterForm/RegisterForm.tsx

@@ -12,27 +12,6 @@
     cursor: pointer;
     opacity: 0;
   }
-
-  input[type='checkbox']:checked + .checkmark {
-    border-color: var(--color-primary);
-    background-color: var(--color-primary);
-  }
-
-  input[type='checkbox']:checked + .checkmark:after {
-    display: block;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .checkmark {
-      background-color: var(--color-primary-light);
-    }
-
-    .text {
-      color: rgb(0 0 0 / 0.25);
-    }
-  }
 }
 
 .checkmark {
@@ -91,3 +70,25 @@
 .text {
   margin-left: 5px;
 }
+
+
+.wrapper .disabled {
+  cursor: not-allowed;
+
+  .checkmark {
+    background-color: var(--color-primary-light);
+  }
+
+  .text {
+    color: rgba(0 0 0 / 0.25);
+  }
+}
+
+input[type='checkbox']:checked + .checkmark {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+}
+
+input[type='checkbox']:checked + .checkmark:after {
+  display: block;
+}

client/src/features/journey/ui/Journey.module.scss

@@ -1,4 +1,4 @@
-.inputWrapper {
+.input_wrapper {
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -36,7 +36,7 @@
 
 .input:focus {
   border-color: #2563eb;
-  box-shadow: 0 0 0 2px rgb(37 99 235 / 0.2);
+  box-shadow: 0 0 0 2px rgba(37 99 235 / 0.2);
 }
 
 

client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.module.scss

@@ -16,7 +16,7 @@ export const Input = memo((props: InputProps) => {
   const id = useId();
 
   return (
-    <div className={clsx(styles.inputWrapper, className)}>
+    <div className={clsx(styles.input_wrapper, className)}>
       {label && (
         <label htmlFor={id} className={styles.label}>
           {label}