feat: update latest prod state with [sprint-3] (#308)

* docs(RSS-ECOMM-2_37): Update pipeline scripts and CD for a new sprint (#199)

* docs: update the PR template

* chore: add a job to generate PR titles

* chore: remove unnecessary paths from configs

* chore: remove unused package

* chore: remove a job from CI

* refactor(RSS-ECOMM-3_27): remove redundancies (#202)

* refactor: remove redundant tag constant

* refactor: replace redundant event names

* feat(RSS-ECOMM-3_03): add filters (#201)

* feat: add size product count request

* feat: add filter, edit sort, edit get product request

* feat: add search options

* refactor(RSS-ECOMM-2_53): registration form (#204)

* refactor: separate validators into separate functions

* refactor: separate address logic into Address component

* refactor: change getIsValid method

* fix: replace type for authCustomer method

* refactor: separate disabling into ButtonView

* fix: pattern for validate

* feat: types for Address component

* feat: create messageTemplate

* refactor: create every inputField separately

* refactor: create every inputField separately

* fix: header styles

* fix(RSS-ECOMM-2_54): visualisation forms (#206)

* fix: layout registration form

* fix: layout login form

* fix: layout address

* fix: layout countryChoice

* fix: layout login and registration pages

* refactor: remove the mandatory field symbol from field signatures in forms

* feat: add formatted text function

* fix: remove formatting from fields that should not be formatted

* feat: formatting of address fields

* refactor(RSS-ECOMM-2_55): router component (#207)

* refactor: rewrite Router component

* fix: navigation links

* fix: choosing country

* refactor: country lang choice based on input

* refactor: visual layout of pages

* fix: update store

* refactor: remove redundant code

* fix: styles

* feat: add init method for App component

* Apply suggestions from code review

Co-authored-by: Meg G. <[email protected]>

---------

Co-authored-by: Meg G. <[email protected]>

* feat(RSS-ECOMM-2_99): edit api client (#209)

feat: add save token, add auth and anonym client

* feat(RSS-ECOMM-3_29): pages lazy loading (#210)

* feat: implement lazy loading for pages

* fix: add a catch block

* feat(RSS-ECOMM-3_30): implement language switch (#212)

* feat: implement switching language on registration checkboxes

* feat: switch titles language

* feat: implement label text switching

* test: observe current language

* feat: add language choice to user messages

* fix: showPasswordElement position

* refactor: update text content in Russian

* feat: add a logo for language switch

* fix(RSS-ECOMM-3_31): rerouting to main (#213)

fix: rerouting to main

* feat(RSS-ECOMM-3_25): create pages components (#214)

* feat: add base page components

* docs: update PR template

* fix: link styles

* fix: button naming

* Apply suggestions from code review

Co-authored-by: Max <[email protected]>

---------

Co-authored-by: Max <[email protected]>

* feat(RSS-ECOMM-3_19): implement routing for all pages (#215)

feat: implement routing for all pages

* feat(RSS-ECOMM-3_21): implement navigation (#217)

* feat: implement navigation to catalog and cart pages

* fix: footer styles

* fix: header styles

* feat: implement navigation to other pages

* feat: check auth user to profile page

* feat: check auth user with init app

* feat: visually profile button

* feat(RSS-ECOMM-3_34): add catalog component (#218)

feat: add catalog component

* feat(RSS-ECOMM-3_33):  implement burger menu (#221)

feat: implement burger menu

* feat(RSS-ECOMM-3_01): implement product list (#223)

* refactor: api types

* feat: implement product list

* feat(RSS-ECOMM-3_36): implement theme app (#225)

* feat: implement app theme change

* feat: save current app theme in store

* fix: update store actions

* feat(RSS-ECOMM-3_02): display price and discount (#226)

* fix: api types for product

* feat: display price and discount on product card

* fix: rename SizeType

* feat(RSS-ECOMM-3_99): add blog page (#228)

* feat: add blog page

* feat: add blog page, posts, widget

* refactor: delete comment and magic numbers

* fix: mock data

* feat(RSS-ECOMM-3_03): implement filtering product list (#227)

* feat: expand loder options

* fix: styles product card

* feat: implement saving Set into LS Co-authored-by: Meg G. <[email protected]>

* feat: get and draw product items

* feat: create ProductFilters component

* feat: implement price filter

* feat: implement size filter

* feat: filters reset button

* fix: burger styles

* fix: lost title

* feat(RSS-ECOMM-3_98): add all data in one request (#229)

* feat: add all data in one request

* feat: add refresh token, fix auth, refactor client

* fix(RSS-ECOMM-3_40): handle popstate event (#231)

fix: handle popstate event

* feat(RSS-ECOMM-3_37): implement switching user locale (#233)

* feat: add a user notification on switching language

* feat: implement switching locale

* feat(RSS-ECOMM-3_97): add filter Object, make filer with OR concatenation (#230)

* feat: add filter Object, make filer with OR concatenation

* refactor: delete comment

* feat: add categoryCount and SizeCount to Products response

* feat(RSS-ECOMM-3_03): implement meta filters (#235)

* fix: router

* feat: implement meta filters

* Apply suggestions from code review

Co-authored-by: Meg G. <[email protected]>

---------

Co-authored-by: Meg G. <[email protected]>

* test(RSS-ECOMM-3_24): cover main codebase (#236)

test(RSS-ECOMM-3_24): cover main codebase

* refactor(RSS-ECOMM-3_41): logic input components (#237)

* feat: create method to add data attributes for input

* refactor: remove unused data for creating input fields

* refactor: delete unused options for address component

* feat(RSS-ECOMM-3_14): display user info (#234)

* feat: add user info menu

* refactor: replace recurring code with a util function

* feat: add common utils

* feat: display user info

* refactor: remove the language switch

* chore: complete merge

* refactor: remove sending request until user is logged in on refresh

* refactor: move language choice from buttons constants

* feat: add modal

* fix: remove unused var

* fix: modal styles

* feat: create separate entities for user info and user addresses

* refactor: remove redundant code

* refactor: add comments

* feat(RSS-ECOMM-3_04): implement product sorts (#238)

* chore: integrate plop to create component folder

* chore: add templates folder

* docs: update readme

* chore: update configs

* chore: update configs

* feat: implement products sorting

* Apply suggestions from code review

Co-authored-by: Meg G. <[email protected]>

* fix: after merge

---------

Co-authored-by: Meg G. <[email protected]>

* feat(RSS-ECOMM-3_96): add cart and shop list (#239)

* feat: add cart, refactor root, delete product from store

* feat: add and delete cart item

* feat: add anonymId to store, merge anonym cart after login user

* feat: create create for new customer, getCart

* feat: add shoppingList

* feat: create shopping list after registration

* feat: getCategories function

* feat(RSS-ECOMM-3_95): add price range (#240)

feat: add price range

* feat(RSS-ECOMM-3_42): transfer styles to clamp (#242)

* refactor: transfer to clamp

* refactor: remove background with unused pictures

* refactor: remove commented out code

* chore(RSS-ECOMM-3_43): modernise the creation of a component via plopfile (#243)

chore: modernise the creation of a component via plopfile

* chore(RSS-ECOMM-3_44): update display select list in terminal (#244)

chore: update display select list in terminal

* fix(RSS-ECOMM-3_45): styles (#245)

* fix: sorting wrapper style

* fix: error and burger z-indices

* chore(RSS-ECOMM-3_45): update readme (#246)

* docs: update readme

* chore: update vite configs to minify build code

* fix: typo

* feat(RSS-ECOMM-3_05): implement product search (#247)

* feat: create product search component

* feat: implement product search

* feat(RSS-ECOMM-3_94): update user addresses; save token to store (#248)

* feat: move save token from cook to store

* feat: add shipping billing address to user

* feat(RSS-ECOMM-3_46): implement custom scroll (#249)

feat: implement custom scroll

* fix(RSS-ECOMM-3_47): display products with selected filters (#250)

fix: display products with selected filters

* feat(RSS-ECOMM-3_94): add id filter for products (#251)

feat: add id filter for products

* feat(RSS-ECOMM-3_48): implement buttons to product card (#252)

* feat: implement buttons to product card

* feat: getters

* feat(RSS-ECOMM-3_48): translate filters, sorting and search (#254)

feat: translate filters, sorting and search

* feat(RSS-ECOMM-3_49): add product to cart and wishlist (#255)

feat: add product to cart and wishlist

* fix(RSS-ECOMM-3_50): incoming product card parameters (#256)

* fix: incoming product card parameters

* fix: catalog styles

* feat(RSS-ECOMM-3_93): add getCurrentUser (#257)

feat: add getCurrentUser

* fix(RSS-ECOMM-3_51): router component (#258)

* fix: routing to detailed product page

* fix: redirect to default page

* feat(RSS-ECOMM-3_92): add parent to category (#260)

* refactor(RSS-ECOMM-3_52): router component (#261)

* refactor: get rid of asynchronous methods in the router

* refactor: add / at the end of each route

* feat: add search queries to url

* fix: router test

* fix: update netlify

* fix: update netlify

* fix: update netlify

* fix: update netlify

* fix: router

* fix: router

* feat(RSS-ECOMM-3_91): update auth client after password change (#263)

feat: update auth client after password change

* feat(RSS-ECOMM-3_91): add slug for category and product (#262)

feat: add slug for category and product

* feat(RSS-ECOMM-3_15): update user info (#253)

* refactor: separate PersonalInfoComponent

* refactor: separate credentials into a single component

* refactor: remove user from store

* feat: add a request before showing personal info

* feat: implement changing password

* fix: switch language for anonymous user

* refactor: create one instance of modal content

* fix: navigation styles

* fix: redirect to main on logo

* feat(RSS-ECOMM-3_08): implement breadcrumb navigation (#289)

* feat: implement event mediator component

* feat: implement search params in url

* refactor: remove user from state

* feat: implement breadcrumbs

* Update src/shared/constants/sorting.ts

Co-authored-by: Meg G. <[email protected]>

* fix: prettier

---------

Co-authored-by: Meg G. <[email protected]>

* feat(RSS-ECOMM-3_09): display product details on product page (#294)

feat: display product details on product page

* feat(RSS_ECOMM-3_90): add key request (#295)

feat: add key request

* feat(RSS-ECOMM-3_89): add adapt Product (#296)

feat: add adapt Product

* feat(RSS-ECOMM-3_10): implement slider on product page (#297)

feat: implement slider on product page

* fix(RSS-ECOMM-3_53): routing on product page (#298)

* fix: routing on product page

* fix: search params

* feat(RSS-ECOMM-3_13): implement product modal slider (#299)

feat: implement product modal slider

* feat(RSS-ECOMM-3_90) cart (#300)

* feat: add cart page

* feat: badge for cart

* feat: add actions for cart products

* feat: merge cart after registration

* feat(RSS-ECOMM-3_16): implement personal info edit (#301)

* feat: close modal on click on background

* feat: implement personal info edit

* feat: implement changing component styles

* refactor(RSS-ECOMM-3_54): router component (#303)

* refactor: make Router singleton

* refactor: remove redundant router field

* feat: separate product price in component

* refactor: styles

* Apply suggestions from code review

Co-authored-by: Meg G. <[email protected]>

* fix: prettier

---------

Co-authored-by: Meg G. <[email protected]>

* feat(RSS-ECOMM-4_08): implement cart button to product page (#304)

* feat: add modal window closing on click outside the window

* feat: add a modal window with product details

* feat: add loader in product modal slider

* feat: implement cart button to product page

* Apply suggestions from code review

Co-authored-by: Meg G. <[email protected]>

---------

Co-authored-by: Meg G. <[email protected]>

* fix(RSS-ECOMM-3_55): deploy (#305)

fix: deploy

* feat(RSS-ECOMM-3_56): add progress bar to server message (#307)

feat: add progress bar to server message

* feat(RSS-ECOMM-3_88): change footer (#302)

feat: change footer

* feat(RSS-ECOMM-3_18): manage addresses (#306)

* fix: styles

* fix: blog logo

* refactor: separate user info into different widgets

* refactor: update user addresses structure

* feat: implement deleting addresses

---------

Co-authored-by: Yuliya Kursevich <[email protected]>
Co-authored-by: Max <[email protected]>

.validate-branch-namerc.cjs

@@ -1,6 +1,5 @@
 module.exports = {
-  pattern:
-    /^sprint-3|^(feat|fix|hotfix|chore|refactor|revert|docs|style|test|)\(RSS-ECOMM-\d{1}_\d{2}\)\/[a-z]+[a-zA-Z0-9]*$/,
+  pattern: /^(feat|fix|hotfix|chore|refactor|revert|docs|style|test|)\(RSS-ECOMM-\d_\d{2}\)\/[a-z]+[a-zA-Z0-9]*$/,
   errorMsg: 'Please use correct branch name',
 };
 

package.json

@@ -74,6 +74,7 @@
     "plop": "^4.0.1",
     "postcode-validator": "^3.8.20",
     "sharp": "^0.33.3",
+    "swiper": "^11.1.3",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-image-optimizer": "^1.1.7",
     "vite-plugin-svg-spriter": "^1.0.0",

src/app/App/model/AppModel.ts

@@ -12,8 +12,6 @@ import AppView from '../view/AppView.ts';
 class AppModel {
   private appView: AppView = new AppView();
 
-  private router: RouterModel | null = null;
-
   constructor() {
     this.initialize().catch(() => {
       throw new Error('AppModel initialization error');
@@ -40,19 +38,19 @@ class AppModel {
       },
       [PAGE_ID.DEFAULT_PAGE]: async (): Promise<Page> => {
         const { default: MainPageModel } = await import('@/pages/MainPage/model/MainPageModel.ts');
-        return new MainPageModel(this.appView.getHTML(), this.router);
+        return new MainPageModel(this.appView.getHTML());
       },
       [PAGE_ID.LOGIN_PAGE]: async (): Promise<Page> => {
         const { default: LoginPageModel } = await import('@/pages/LoginPage/model/LoginPageModel.ts');
-        return new LoginPageModel(this.appView.getHTML(), this.router);
+        return new LoginPageModel(this.appView.getHTML());
       },
       [PAGE_ID.MAIN_PAGE]: async (): Promise<Page> => {
         const { default: MainPageModel } = await import('@/pages/MainPage/model/MainPageModel.ts');
-        return new MainPageModel(this.appView.getHTML(), this.router);
+        return new MainPageModel(this.appView.getHTML());
       },
       [PAGE_ID.NOT_FOUND_PAGE]: async (): Promise<Page> => {
         const { default: NotFoundPageModel } = await import('@/pages/NotFoundPage/model/NotFoundPageModel.ts');
-        return new NotFoundPageModel(this.appView.getHTML(), this.router);
+        return new NotFoundPageModel(this.appView.getHTML());
       },
       [PAGE_ID.PRODUCT_PAGE]: async (params: PageParams): Promise<Page> => {
         const { default: ProductPageModel } = await import('@/pages/ProductPage/model/ProductPageModel.ts');
@@ -62,11 +60,11 @@ class AppModel {
         const { default: RegistrationPageModel } = await import(
           '@/pages/RegistrationPage/model/RegistrationPageModel.ts'
         );
-        return new RegistrationPageModel(this.appView.getHTML(), this.router);
+        return new RegistrationPageModel(this.appView.getHTML());
       },
       [PAGE_ID.USER_PROFILE_PAGE]: async (): Promise<Page> => {
         const { default: UserProfilePageModel } = await import('@/pages/UserProfilePage/model/UserProfilePageModel.ts');
-        return new UserProfilePageModel(this.appView.getHTML(), this.router);
+        return new UserProfilePageModel(this.appView.getHTML());
       },
     };
 
@@ -76,15 +74,14 @@ class AppModel {
     return Promise.resolve(routes);
   }
 
-  private async initialize(): Promise<void> {
+  private async initialize(): Promise<RouterModel> {
     const routes = await this.createRoutes();
-    this.router = new RouterModel(routes);
+    const router = new RouterModel(routes);
     document.body.append(this.appView.getHTML());
-    this.appView
-      .getHTML()
-      .insertAdjacentElement('beforebegin', new HeaderModel(this.router, this.appView.getHTML()).getHTML());
-    this.appView.getHTML().insertAdjacentElement('afterend', new FooterModel(this.router).getHTML());
+    this.appView.getHTML().insertAdjacentElement('beforebegin', new HeaderModel(this.appView.getHTML()).getHTML());
+    this.appView.getHTML().insertAdjacentElement('afterend', new FooterModel().getHTML());
     this.appView.getHTML().insertAdjacentElement('afterend', modal.getHTML());
+    return router;
   }
 
   public start(): boolean {

src/app/Router/model/RouterModel.ts

@@ -12,9 +12,15 @@ const PATH_SEGMENTS_TO_KEEP = import.meta.env.VITE_APP_PATH_SEGMENTS_TO_KEEP;
 const SEARCH_SEGMENT = import.meta.env.VITE_APP_SEARCH_SEGMENT;
 
 class RouterModel {
+  private static router: RouterModel;
+
   private routes: PagesType = new Map();
 
   constructor(routes: PagesType) {
+    if (!RouterModel.router) {
+      RouterModel.router = this;
+    }
+
     this.routes = routes;
     document.addEventListener('DOMContentLoaded', () => {
       const currentPath = window.location.pathname.slice(NEXT_SEGMENT).split(DEFAULT_SEGMENT) || PAGE_ID.DEFAULT_PAGE;
@@ -40,6 +46,10 @@ class RouterModel {
     });
   }
 
+  public static getInstance(): RouterModel {
+    return RouterModel.router;
+  }
+
   private async checkPageAndParams(
     currentPage: string,
     path: string,

src/app/styles/common.scss

@@ -43,3 +43,7 @@ body {
 img {
   max-width: 100%;
 }
+
+.stop-scroll {
+  overflow-y: hidden;
+}

src/app/styles/slider.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable-next-line selector-class-pattern */
+.swiper-slide-thumb-active {
+  opacity: 0.5;
+}

src/app/styles/variables.scss

@@ -21,6 +21,7 @@
   --small-br: calc(var(--large-br) / 4); // 5px
 
   // shadows
+  --mellow-shadow-050: 0 0 20px rgb(0 0 0 / 6%);
   --mellow-shadow-100: rgb(0 0 0 / 19%) 0 10px 20px, rgb(0 0 0 / 23%) 0 6px 6px;
   --mellow-shadow-200: rgb(255 255 255 / 10%) 0 1px 1px 0 inset, rgb(50 50 93 / 25%) 0 50px 100px -20px,
     rgb(0 0 0 / 30%) 0 30px 60px -30px;
@@ -31,11 +32,13 @@
   --mellow-shadow-600: 0 1px 5px #353535;
 
   // fonts
+  --small-font: 400 0.625rem 'Cerapro', sans-serif; // 10px
   --regular-font: 400 0.8125rem 'Cerapro', sans-serif; // 13px
   --extra-regular-font: 400 1.5rem 'Cerapro', sans-serif; // 24px
   --medium-font: 500 1.25rem 'Cerapro', sans-serif; // 20px
   --extra-medium-font: 500 1.875rem 'Cerapro', sans-serif; // 30px
   --bold-font: 700 1rem 'Cerapro', sans-serif; // 16px
+  --medium-bold-font: 700 1.125rem 'Cerapro', sans-serif; // 18px
   --extra-bold-font: 700 2.1875rem 'Cerapro', sans-serif; // 35px
   --black-font: 900 2.1875rem 'Cerapro', sans-serif; // 35px
   --extra-black-font: 900 2.5rem 'Cerapro', sans-serif; // 40px
@@ -60,17 +63,20 @@
     --noble-gray-1000: #1a1a1ab5;
     --red-power-600: #d0302f;
     --steam-green-300: #46a35880;
+    --steam-green-350: #46a35937;
     --steam-green-400: #c8f4b4;
     --steam-green-500: #b6f09c;
     --steam-green-700: #70d27a;
     --steam-green-800: #46a358;
+    --steam-green-900: #46a3581a;
     --steam-green-gr-800: #8c998f2b;
   }
 
   body.dark {
     // colors
     --black: #fff;
     --white: #1a1a1a;
+    --white-tr: #1a1a1ab0;
     --noble-white-100: #2b2b2b;
     --noble-white-200: #4a4a4a;
     --noble-gray-200: #f6f6f6;
@@ -83,6 +89,7 @@
     --noble-gray-1000: #1a1a1ab5;
     --red-power-600: #d0302f;
     --steam-green-300: #46a35880;
+    --steam-green-350: #46a35937;
     --steam-green-400: #c8f4b4;
     --steam-green-500: #b6f09c;
     --steam-green-700: #70d27a;

src/entities/Address/view/addressView.module.scss

@@ -11,15 +11,15 @@
     grid-column: 2 span;
     width: max-content;
     font: var(--medium-font);
-    letter-spacing: 1px;
+    letter-spacing: var(--one);
     text-align: center;
     color: var(--noble-gray-500);
 
     &::after {
       content: '';
       position: absolute;
       left: 50%;
-      bottom: -10px;
+      bottom: calc(var(--tiny-offset) * -1);
       border-radius: var(--medium-br);
       width: 100%;
       height: var(--two);
@@ -110,7 +110,7 @@
 
 .checkboxText {
   font: var(--regular-font);
-  letter-spacing: 1px;
+  letter-spacing: var(--one);
   text-align: end;
   color: var(--noble-gray-800);
   transition: color 0.2s;
@@ -121,7 +121,7 @@
   display: flex;
   flex-direction: column;
   font: var(--regular-font);
-  letter-spacing: 1px;
+  letter-spacing: var(--one);
   color: var(--noble-gray-800);
   gap: calc(var(--extra-small-offset) / 2);
 }
@@ -131,7 +131,7 @@
   border-radius: var(--small-br);
   padding: calc(var(--extra-small-offset) / 2) var(--extra-small-offset);
   font: var(--regular-font);
-  letter-spacing: 1px;
+  letter-spacing: var(--one);
   color: var(--noble-gray-800);
   transition: border 0.2s;
   cursor: text;

src/entities/Credentials/view/credentialsView.module.scss

@@ -13,15 +13,15 @@
     grid-row: 1;
     width: max-content;
     font: var(--medium-font);
-    letter-spacing: 1px;
+    letter-spacing: var(--one);
     text-align: center;
     color: var(--noble-gray-500);
 
     &::after {
       content: '';
       position: absolute;
       left: 50%;
-      bottom: -10px;
+      bottom: calc(var(--tiny-offset) * -1);
       border-radius: var(--medium-br);
       width: 100%;
       height: var(--two);
@@ -45,7 +45,7 @@
   display: flex;
   flex-direction: column;
   font: var(--regular-font);
-  letter-spacing: 1px;
+  letter-spacing: var(--one);
   color: var(--noble-gray-800);
   gap: calc(var(--extra-small-offset) / 2);
 }
@@ -56,7 +56,7 @@
   padding: calc(var(--extra-small-offset) / 2) var(--extra-small-offset);
   padding-right: calc(var(--small-offset) * 1.5);
   font: var(--regular-font);
-  letter-spacing: 1px;
+  letter-spacing: var(--one);
   color: var(--noble-gray-800);
   transition: border 0.2s;
   cursor: text;

src/entities/InputField/view/InputFieldView.ts

@@ -55,7 +55,7 @@ class InputFieldView {
 
     this.label = createBaseElement({
       attributes: {
-        for: htmlFor || '',
+        for: htmlFor ?? '',
       },
       tag: 'label',
     });

src/entities/InputField/view/inputFieldView.module.scss

@@ -1,6 +1,6 @@
 .error {
   font: var(--regular-font);
-  letter-spacing: 1px;
+  letter-spacing: var(--one);
   text-align: center;
   color: var(--red-power-600);
 }

src/entities/Navigation/model/NavigationModel.ts

@@ -1,18 +1,14 @@
-import type RouterModel from '@/app/Router/model/RouterModel';
-
+import RouterModel from '@/app/Router/model/RouterModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentPage, selectIsUserLoggedIn } from '@/shared/Store/observer.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 
 import NavigationView from '../view/NavigationView.ts';
 
 class NavigationModel {
-  private router: RouterModel | null = null;
-
   private view = new NavigationView();
 
-  constructor(router: RouterModel | null) {
-    this.router = router;
+  constructor() {
     this.init();
   }
 
@@ -45,7 +41,7 @@ class NavigationModel {
     navigationLinks.forEach((link, route) => {
       link.getHTML().addEventListener('click', (event) => {
         event.preventDefault();
-        this.router?.navigateTo(route);
+        RouterModel.getInstance().navigateTo(route);
       });
     });
 

src/entities/Navigation/view/navigationView.module.scss

@@ -24,7 +24,7 @@
     content: '';
     position: absolute;
     left: 0;
-    bottom: -1px;
+    bottom: calc(var(--one) * -1);
     width: 100%;
     height: var(--two);
     background-color: currentcolor;

src/entities/PersonalInfo/model/PersonalInfoModel.ts

@@ -7,12 +7,6 @@ import PersonalInfoView from '../view/PersonalInfoView.ts';
 class PersonalInfoModel {
   private view = new PersonalInfoView();
 
-  constructor() {
-    this.init();
-  }
-
-  private init(): void {}
-
   public getFormPersonalInfo(): PersonalInfo {
     const userData: PersonalInfo = {
       birthDate: this.view.getDateOfBirthField().getView().getValue(),

src/entities/PersonalInfo/view/PersonalInfoView.ts

@@ -7,7 +7,7 @@ import * as FORM_VALIDATION from '@/shared/constants/forms/validationParams.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';
 
-import styles from './personalInfoView.module.scss';
+import './personalInfoView.scss';
 
 class PersonalInfoView {
   private dateOfBirthField: InputFieldModel;
@@ -47,11 +47,11 @@ class PersonalInfoView {
 
   private createPersonalDataWrapper(): HTMLDivElement {
     this.personalDataWrapper = createBaseElement({
-      cssClasses: [styles.personalDataWrapper],
+      cssClasses: ['personalDataWrapper'],
       tag: 'div',
     });
     const titleElement = createBaseElement({
-      cssClasses: [styles.title],
+      cssClasses: ['title'],
       innerContent: FORM_CONSTANT.TITLE_TEXT[getStore().getState().currentLanguage].PERSONAL,
       tag: 'h3',
     });
@@ -61,8 +61,8 @@ class PersonalInfoView {
       const inputFieldElement = inputField.getView().getHTML();
       const inputHTML = inputField.getView().getInput().getHTML();
       if (inputFieldElement instanceof HTMLLabelElement) {
-        inputFieldElement.classList.add(styles.label);
-        inputHTML.classList.add(styles.input);
+        inputFieldElement.classList.add('label');
+        inputHTML.classList.add('input');
         this.personalDataWrapper.append(inputFieldElement);
       } else if (inputFieldElement instanceof InputModel) {
         this.personalDataWrapper.append(inputFieldElement.getHTML());