refactor(RSS-ECOMM-3_58): separate styles in mixins (#310)

* 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 * refactor: separate style buttons in mixin * fix: delete navigation from footer --------- Co-authored-by: Meg G <[email protected]> Co-authored-by: Margarita Golubeva <[email protected]> Co-authored-by: Yuliya Kursevich <[email protected]>
stardustmeg · May 25, 2024 · 0f5def2 · 0f5def2
1 parent 29e5589
commit 0f5def2
Show file tree

Hide file tree

Showing 15 changed files with 142 additions and 142 deletions.
diff --git a/src/app/styles/mixins.scss b/src/app/styles/mixins.scss
@@ -0,0 +1,33 @@
+@mixin green-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: center;
+  border-radius: var(--medium-br);
+  padding: calc(var(--small-offset) / 3) var(--small-offset);
+  width: max-content;
+  font: var(--regular-font);
+  letter-spacing: var(--one);
+  color: var(--white);
+  background-color: var(--steam-green-800);
+  transition:
+    color 0.2s,
+    background-color 0.2s,
+    transform 0.2s;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--steam-green-700);
+    }
+  }
+
+  /* stylelint-disable-next-line order/order */
+  &:active {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    background-color: var(--noble-gray-300);
+    pointer-events: none;
+  }
+}
diff --git a/src/entities/ProductCard/view/productCardView.module.scss b/src/entities/ProductCard/view/productCardView.module.scss
@@ -20,6 +20,11 @@
       transform: scale(0.98);
     }
   }
+
+  /* stylelint-disable-next-line order/order */
+  &:active {
+    transform: scale(0.95);
+  }
 }
 
 .productImageWrapper {
@@ -72,7 +77,9 @@
   width: var(--small-offset);
   height: var(--small-offset);
   background-color: var(--noble-gray-1000);
-  transition: outline 0.2s;
+  transition:
+    transform 0.2s,
+    outline 0.2s;
   backdrop-filter: blur(10px);
 
   svg {
@@ -81,6 +88,10 @@
     fill: var(--noble-gray-800);
     transition: fill 0.2s;
   }
+
+  &:active {
+    transform: scale(0.9);
+  }
 }
 
 .addToCartButton,

diff --git a/src/entities/ProductModalSlider/view/productModalSliderView.module.scss b/src/entities/ProductModalSlider/view/productModalSliderView.module.scss
@@ -23,25 +23,32 @@
 
 .modalCloseButton {
   position: absolute;
-  right: 3rem;
-  top: 2rem;
+  right: 1rem;
+  top: 0.3rem;
   z-index: 1;
   font: var(--extra-bold-font);
   font-weight: 400;
   color: var(--steam-green-800);
-  transition: color 0.2s;
+  transition:
+    color 0.2s,
+    transform 0.2s;
 
   @media (hover: hover) {
     &:hover {
       color: var(--steam-green-700);
     }
   }
+
+  /* stylelint-disable-next-line order/order */
+  &:active {
+    transform: scale(0.9);
+  }
 }
 
 .navigationWrapper {
   position: absolute;
-  left: -1.5rem;
-  right: -1.5rem;
+  left: -3.5rem;
+  right: -3.5rem;
   top: 50%;
   z-index: 1;
   display: flex;
@@ -62,14 +69,20 @@
   background-color: var(--noble-gray-1000);
   transition:
     color 0.2s,
-    border-color 0.2s;
+    border-color 0.2s,
+    transform 0.2s;
 
   @media (hover: hover) {
     &:hover {
       border-color: var(--steam-green-400);
       color: var(--steam-green-700);
     }
   }
+
+  /* stylelint-disable-next-line order/order */
+  &:active {
+    transform: scale(0.9);
+  }
 }
 
 .nextSlideButton {

diff --git a/src/features/PersonalInfoEdit/view/PersonalInfoEditView.ts b/src/features/PersonalInfoEdit/view/PersonalInfoEditView.ts
@@ -8,6 +8,7 @@ import { EMAIL_VALIDATE } from '@/shared/constants/forms/validationParams.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 
 import styles from './personalInfoEditView.module.scss';
+import './personalInfoEditView.scss';
 
 class PersonalInfoEditView {
   private cancelButton: ButtonModel;

diff --git a/src/features/PersonalInfoEdit/view/personalInfoEditView.scss b/src/features/PersonalInfoEdit/view/personalInfoEditView.scss
@@ -0,0 +1,26 @@
+.modalForm {
+  .personalDataWrapper {
+    grid-row: 1;
+    padding: 0;
+    width: 100%;
+
+    @media (max-width: 768px) {
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: repeat(2, auto);
+    }
+  }
+
+  .label:last-child {
+    grid-column: 2 span;
+    width: 100%;
+
+    @media (max-width: 768px) {
+      grid-column: 1;
+      grid-row: 4;
+    }
+  }
+
+  .input {
+    padding-right: 0;
+  }
+}
diff --git a/src/features/ProductFilters/view/productFiltersView.module.scss b/src/features/ProductFilters/view/productFiltersView.module.scss
@@ -1,3 +1,5 @@
+@import 'src/app/styles/mixins';
+
 .defaultFilters {
   outline: var(--two) solid var(--noble-white-200);
   border-radius: var(--medium-br);
@@ -190,25 +192,10 @@
 }
 
 .resetFiltersButton {
-  display: flex;
+  @include green-btn;
+
   margin: calc(var(--extra-small-offset) / 2) auto;
   border-radius: var(--medium-br);
   padding: calc(var(--small-offset) / 3) var(--small-offset);
   font: var(--regular-font);
-  letter-spacing: var(--one);
-  color: var(--white);
-  background-color: var(--steam-green-800);
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-
-  &:focus {
-    background-color: var(--steam-green-700);
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--steam-green-700);
-    }
-  }
 }
diff --git a/src/shared/Modal/view/modalView.module.scss b/src/shared/Modal/view/modalView.module.scss
@@ -43,7 +43,6 @@
   top: 50%;
   border: var(--two) solid var(--noble-black-500);
   border-radius: var(--border-radius);
-  padding: var(--small-offset);
   font: var(--small-font);
   letter-spacing: var(--one);
   color: var(--steam-green-500);

diff --git a/src/shared/constants/messages.ts b/src/shared/constants/messages.ts
@@ -27,6 +27,7 @@ export const SERVER_MESSAGE = {
     PERSONAL_INFO_CHANGED: 'Personal information has been changed successfully',
     SUCCESSFUL_ADD_PRODUCT_TO_CART: 'Product has been added successfully to your cart',
     SUCCESSFUL_ADD_PRODUCT_TO_WISHLIST: 'Product has been added successfully to your wishlist',
+    SUCCESSFUL_COPY_TO_CLIPBOARD: 'SKU has been copied to clipboard',
     SUCCESSFUL_DELETE_PRODUCT_FROM_CART: 'Product has been deleted successfully from your cart',
     SUCCESSFUL_DELETE_PRODUCT_FROM_WISHLIST: 'Product has been deleted successfully from your wishlist',
     SUCCESSFUL_LOGIN: 'Welcome to our store. Enjoy shopping!',
@@ -47,6 +48,7 @@ export const SERVER_MESSAGE = {
     PERSONAL_INFO_CHANGED: 'Персональные данные были успешно изменены',
     SUCCESSFUL_ADD_PRODUCT_TO_CART: 'Товар был успешно добавлен в корзину',
     SUCCESSFUL_ADD_PRODUCT_TO_WISHLIST: 'Товар был успешно добавлен в избранное',
+    SUCCESSFUL_COPY_TO_CLIPBOARD: 'SKU успешно скопирован в буфер обмена',
     SUCCESSFUL_DELETE_PRODUCT_FROM_CART: 'Товар был успешно удален из корзины',
     SUCCESSFUL_DELETE_PRODUCT_FROM_WISHLIST: 'Товар был успешно удален из избранного',
     SUCCESSFUL_LOGIN: 'Добро пожаловать в наш магазин. Приятных покупок!',
@@ -69,6 +71,7 @@ export const SERVER_MESSAGE_KEYS = {
   PERSONAL_INFO_CHANGED: 'PERSONAL_INFO_CHANGED',
   SUCCESSFUL_ADD_PRODUCT_TO_CART: 'SUCCESSFUL_ADD_PRODUCT_TO_CART',
   SUCCESSFUL_ADD_PRODUCT_TO_WISHLIST: 'SUCCESSFUL_ADD_PRODUCT_TO_WISHLIST',
+  SUCCESSFUL_COPY_TO_CLIPBOARD: 'SUCCESSFUL_COPY_TO_CLIPBOARD',
   SUCCESSFUL_DELETE_PRODUCT_FROM_CART: 'SUCCESSFUL_DELETE_PRODUCT_FROM_CART',
   SUCCESSFUL_DELETE_PRODUCT_FROM_WISHLIST: 'SUCCESSFUL_DELETE_PRODUCT_FROM_WISHLIST',
   SUCCESSFUL_LOGIN: 'SUCCESSFUL_LOGIN',

diff --git a/src/widgets/Footer/model/FooterModel.ts b/src/widgets/Footer/model/FooterModel.ts
@@ -3,14 +3,6 @@ import FooterView from '../view/FooterView.ts';
 class FooterModel {
   private view = new FooterView();
 
-  constructor() {
-    this.init();
-  }
-
-  private init(): boolean {
-    return true;
-  }
-
   public getHTML(): HTMLElement {
     return this.view.getHTML();
   }

diff --git a/src/widgets/Header/view/headerView.module.scss b/src/widgets/Header/view/headerView.module.scss
@@ -1,3 +1,5 @@
+@import 'src/app/styles/mixins';
+
 .header {
   position: sticky;
   left: 0;
@@ -62,31 +64,9 @@
 }
 
 .logoutButton {
-  order: 4;
-  border-radius: var(--medium-br);
-  padding: calc(var(--small-offset) / 3) var(--small-offset);
-  font: var(--regular-font);
-  letter-spacing: var(--one);
-  color: var(--white);
-  background-color: var(--steam-green-800);
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-
-  &:focus {
-    background-color: var(--steam-green-700);
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--steam-green-700);
-    }
-  }
+  @include green-btn;
 
-  &:disabled {
-    background-color: var(--noble-gray-300);
-    pointer-events: none;
-  }
+  order: 4;
 }
 
 .cartLink,

diff --git a/src/widgets/LoginForm/view/loginForm.module.scss b/src/widgets/LoginForm/view/loginForm.module.scss
@@ -1,35 +1,13 @@
+@import 'src/app/styles/mixins';
+
 .submitFormButton {
-  display: flex;
+  @include green-btn;
+
   place-self: center center;
-  align-items: center;
-  justify-content: center;
   grid-column: 2 span;
   grid-row: 2;
-  border-radius: var(--small-br);
   padding: calc(var(--extra-small-offset) / 2) var(--small-offset);
-  width: max-content;
   font: var(--bold-font);
-  letter-spacing: var(--one);
-  color: var(--white);
-  background-color: var(--steam-green-800);
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-
-  &:focus {
-    background-color: var(--steam-green-700);
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--steam-green-700);
-    }
-  }
-
-  &:disabled {
-    background-color: var(--noble-gray-300);
-    pointer-events: none;
-  }
 }
 
 .loginForm {

diff --git a/src/widgets/ProductInfo/view/ProductInfoView.ts b/src/widgets/ProductInfo/view/ProductInfoView.ts
@@ -236,7 +236,7 @@ class ProductInfoView {
 
     const currentSKU = new InputModel({
       autocomplete: AUTOCOMPLETE_OPTION.ON,
-      id: 'currentSKU',
+      id: '',
       placeholder: '',
       type: INPUT_TYPE.TEXT,
       value: this.params.key,
@@ -248,9 +248,15 @@ class ProductInfoView {
     svg.append(createSVGUse(SVG_DETAILS.COPY));
 
     svg.addEventListener('click', () => {
-      currentSKU.getHTML().select();
-      document.execCommand('copy');
-      serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.COPY_TO_CLIPBOARD, MESSAGE_STATUS.SUCCESS);
+      window.navigator.clipboard
+        .writeText(currentSKU.getValue())
+        .then(() =>
+          serverMessageModel.showServerMessage(
+            SERVER_MESSAGE_KEYS.SUCCESSFUL_COPY_TO_CLIPBOARD,
+            MESSAGE_STATUS.SUCCESS,
+          ),
+        )
+        .catch(() => serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.BAD_REQUEST, MESSAGE_STATUS.ERROR));
     });
 
     this.SKUSpan.append(currentSKU.getHTML(), svg);