From ce214f188febf2452fc482e8e9cf3acd0ae10b8c Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 18:45:21 +0300 Subject: [PATCH 1/9] refactor: replace div with form --- .../PasswordEdit/model/PasswordEditModel.ts | 91 ++++++++++++------- .../PasswordEdit/view/PasswordEditView.ts | 41 +++++---- .../view/passwordEditView.module.scss | 4 +- src/shared/img/svg/arrowUp.svg | 2 +- 4 files changed, 82 insertions(+), 56 deletions(-) diff --git a/src/features/PasswordEdit/model/PasswordEditModel.ts b/src/features/PasswordEdit/model/PasswordEditModel.ts index e976fc01..0446de62 100644 --- a/src/features/PasswordEdit/model/PasswordEditModel.ts +++ b/src/features/PasswordEdit/model/PasswordEditModel.ts @@ -1,3 +1,5 @@ +import type InputFieldModel from '@/entities/InputField/model/InputFieldModel.ts'; + import getCustomerModel from '@/shared/API/customer/model/CustomerModel.ts'; import LoaderModel from '@/shared/Loader/model/LoaderModel.ts'; import modal from '@/shared/Modal/model/ModalModel.ts'; @@ -17,10 +19,41 @@ class PasswordEditModel { } private init(): void { + this.view.getInputFields().forEach((inputField) => this.setInputFieldHandlers(inputField)); + this.setPreventDefaultToForm(); this.setSwitchOldPasswordVisibilityHandler(); this.setSwitchNewPasswordVisibilityHandler(); + this.setSubmitFormHandler(); this.setCancelButtonHandler(); - this.setSaveChangesButtonHandler(); + } + + private async saveNewPassword(): Promise { + const loader = new LoaderModel(LOADER_SIZE.SMALL).getHTML(); + this.view.getSubmitButton().getHTML().append(loader); + try { + await getCustomerModel() + .getCurrentUser() + .then(async (user) => { + if (user) { + try { + await getCustomerModel().editPassword( + user, + this.view.getOldPasswordField().getView().getValue(), + this.view.getNewPasswordField().getView().getValue(), + ); + serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_CHANGED, MESSAGE_STATUS.SUCCESS); + modal.hide(); + } catch { + serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_NOT_CHANGED, MESSAGE_STATUS.ERROR); + } + } + }); + } catch (error) { + showErrorMessage(error); + } finally { + loader.remove(); + } + return true; } private setCancelButtonHandler(): boolean { @@ -33,37 +66,20 @@ class PasswordEditModel { return true; } - private setSaveChangesButtonHandler(): boolean { - this.view - .getSaveChangesButton() - .getHTML() - .addEventListener('click', async () => { - const loader = new LoaderModel(LOADER_SIZE.SMALL).getHTML(); - this.view.getSaveChangesButton().getHTML().append(loader); - try { - await getCustomerModel() - .getCurrentUser() - .then(async (user) => { - if (user) { - try { - await getCustomerModel().editPassword( - user, - this.view.getOldPasswordField().getView().getValue(), - this.view.getNewPasswordField().getView().getValue(), - ); - serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_CHANGED, MESSAGE_STATUS.SUCCESS); - modal.hide(); - } catch { - serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.PASSWORD_NOT_CHANGED, MESSAGE_STATUS.ERROR); - } - } - }); - } catch (error) { - showErrorMessage(error); - } finally { - loader.remove(); - } - }); + private setInputFieldHandlers(inputField: InputFieldModel): boolean { + const inputHTML = inputField.getView().getInput().getHTML(); + inputHTML.addEventListener('input', () => this.switchSubmitFormButtonAccess()); + return true; + } + + private setPreventDefaultToForm(): boolean { + this.view.getHTML().addEventListener('submit', (event) => event.preventDefault()); + return true; + } + + private setSubmitFormHandler(): boolean { + const submitButton = this.view.getSubmitButton().getHTML(); + submitButton.addEventListener('click', this.saveNewPassword.bind(this)); return true; } @@ -87,7 +103,16 @@ class PasswordEditModel { return true; } - public getHTML(): HTMLDivElement { + private switchSubmitFormButtonAccess(): boolean { + if (this.view.getInputFields().every((inputField) => inputField.getIsValid())) { + this.view.getSubmitButton().setEnabled(); + } else { + this.view.getSubmitButton().setDisabled(); + } + return true; + } + + public getHTML(): HTMLFormElement { return this.view.getHTML(); } diff --git a/src/features/PasswordEdit/view/PasswordEditView.ts b/src/features/PasswordEdit/view/PasswordEditView.ts index 9f4fef42..84268183 100644 --- a/src/features/PasswordEdit/view/PasswordEditView.ts +++ b/src/features/PasswordEdit/view/PasswordEditView.ts @@ -21,16 +21,16 @@ class PasswordEditView { private oldPasswordField: InputFieldModel; - private saveChangesButton: ButtonModel; - private showNewPasswordElement: HTMLDivElement; private showOldPasswordElement: HTMLDivElement; - private view: HTMLDivElement; + private submitButton: ButtonModel; + + private view: HTMLFormElement; constructor() { - this.saveChangesButton = this.createSaveChangesButton(); + this.submitButton = this.createSubmitButton(); this.cancelButton = this.createCancelButton(); this.showOldPasswordElement = this.createShowOldPasswordElement(); this.showNewPasswordElement = this.createShowNewPasswordElement(); @@ -47,10 +47,10 @@ class PasswordEditView { return this.cancelButton; } - private createHTML(): HTMLDivElement { + private createHTML(): HTMLFormElement { this.view = createBaseElement({ cssClasses: [styles.wrapper], - tag: 'div', + tag: 'form', }); this.inputFields.forEach((inputField) => { @@ -65,7 +65,7 @@ class PasswordEditView { } }); - this.view.append(this.cancelButton.getHTML(), this.saveChangesButton.getHTML()); + this.view.append(this.submitButton.getHTML(), this.cancelButton.getHTML()); return this.view; } @@ -89,14 +89,6 @@ class PasswordEditView { return this.oldPasswordField; } - private createSaveChangesButton(): ButtonModel { - this.saveChangesButton = new ButtonModel({ - classes: [styles.saveChangesButton], - text: BUTTON_TEXT[getStore().getState().currentLanguage].SAVE_CHANGES, - }); - return this.saveChangesButton; - } - private createShowNewPasswordElement(): HTMLDivElement { this.showNewPasswordElement = createBaseElement({ cssClasses: [styles.showPasswordElement], @@ -115,11 +107,20 @@ class PasswordEditView { return this.showOldPasswordElement; } + private createSubmitButton(): ButtonModel { + this.submitButton = new ButtonModel({ + classes: [styles.submitButton], + text: BUTTON_TEXT[getStore().getState().currentLanguage].SAVE_CHANGES, + }); + this.submitButton.setDisabled(); + return this.submitButton; + } + public getCancelButton(): ButtonModel { return this.cancelButton; } - public getHTML(): HTMLDivElement { + public getHTML(): HTMLFormElement { return this.view; } @@ -135,10 +136,6 @@ class PasswordEditView { return this.oldPasswordField; } - public getSaveChangesButton(): ButtonModel { - return this.saveChangesButton; - } - public getShowNewPasswordElement(): HTMLDivElement { return this.showNewPasswordElement; } @@ -147,6 +144,10 @@ class PasswordEditView { return this.showOldPasswordElement; } + public getSubmitButton(): ButtonModel { + return this.submitButton; + } + public switchPasswordElementSVG(type: string, el: HTMLDivElement): SVGSVGElement { const element = el; const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg'); diff --git a/src/features/PasswordEdit/view/passwordEditView.module.scss b/src/features/PasswordEdit/view/passwordEditView.module.scss index 98b65c81..90b26ecd 100644 --- a/src/features/PasswordEdit/view/passwordEditView.module.scss +++ b/src/features/PasswordEdit/view/passwordEditView.module.scss @@ -12,12 +12,12 @@ gap: var(--extra-small-offset); } -.saveChangesButton, +.submitButton, .cancelButton { @include green-btn; } -.saveChangesButton { +.submitButton { grid-row: 3; } diff --git a/src/shared/img/svg/arrowUp.svg b/src/shared/img/svg/arrowUp.svg index e05d694e..122cd44b 100644 --- a/src/shared/img/svg/arrowUp.svg +++ b/src/shared/img/svg/arrowUp.svg @@ -1,3 +1,3 @@ - + From 17864fdb4eeebc451ee4c2f6017fdaf9bfd09797 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 21:24:40 +0300 Subject: [PATCH 2/9] feat: add mixin for repeated links --- src/app/styles/mixins.scss | 64 +++++++++++++++++-- .../view/navigationView.module.scss | 51 ++------------- .../view/breadcrumbsView.module.scss | 40 ++---------- .../LoginPage/view/loginPageView.module.scss | 35 +++------- .../view/registrationPageView.module.scss | 35 +++------- .../view/userProfilePageView.module.scss | 50 ++------------- .../view/scrollToTopView.module.scss | 2 +- 7 files changed, 91 insertions(+), 186 deletions(-) diff --git a/src/app/styles/mixins.scss b/src/app/styles/mixins.scss index b92ae30f..be64c27c 100644 --- a/src/app/styles/mixins.scss +++ b/src/app/styles/mixins.scss @@ -3,6 +3,60 @@ $transform-scale: 0.9; $transform-scale-active: 0.9; $filter-opacity: 0.5; $filter-brightness: 1.3; +$basic-font: var(--regular-font); +$one: var(--one); +$two: var(--two); +$active-color: var(--steam-green-800); + +@mixin link($padding: 0 calc(var(--extra-small-offset) / 2), $color: var(--noble-gray-800)) { + position: relative; + display: flex; + align-items: center; + padding: $padding; + height: 100%; + font: $basic-font; + letter-spacing: $one; + text-transform: uppercase; + color: $color; + transition: color $transition-duration; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: calc($one * -1); + width: 100%; + height: $two; + background-color: currentcolor; + opacity: 0; + transform: scaleX(0); + transform-origin: center; + transition: + transform $transition-duration, + opacity $transition-duration; + } + + @media (hover: hover) { + &:hover { + color: $active-color; + + &::after { + opacity: 1; + transform: scaleX(1); + } + } + } +} + +@mixin active { + color: $active-color; + opacity: 1; + + &::after { + opacity: 1; + transform: scaleX(1); + } +} @mixin green-btn { display: flex; @@ -12,10 +66,10 @@ $filter-brightness: 1.3; 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); + font: $basic-font; + letter-spacing: $one; color: var(--button-white); - background-color: var(--steam-green-800); + background-color: $active-color; transition: filter $transition-duration, color $transition-duration, @@ -56,8 +110,8 @@ $filter-brightness: 1.3; $btn-padding: calc(var(--tiny-offset) * 1.5), $btn-bg: var(--noble-white-100), $btn-hover-bg: var(--white-tr), - $btn-fill: var(--steam-green-800), - $btn-stroke: var(--steam-green-800) + $btn-fill: $active-color, + $btn-stroke: $active-color ) { display: flex; align-items: center; diff --git a/src/entities/Navigation/view/navigationView.module.scss b/src/entities/Navigation/view/navigationView.module.scss index 4d9b8b65..e16ac383 100644 --- a/src/entities/Navigation/view/navigationView.module.scss +++ b/src/entities/Navigation/view/navigationView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .navigation { display: flex; align-items: center; @@ -14,52 +16,13 @@ } } -.link { - position: relative; - display: flex; - align-items: center; - padding: 0 calc(var(--extra-small-offset) / 2); - height: 100%; - font: var(--regular-font); - letter-spacing: 1px; - text-transform: uppercase; - color: var(--noble-gray-1100); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: calc(var(--one) * -1); - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } +$color: var(--noble-gray-1100); +$padding: 0 calc(var(--extra-small-offset) / 2); - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } - } +.link { + @include link($padding, $color); } .active { - color: var(--steam-green-800); - opacity: 1; - - &::after { - opacity: 1; - transform: scaleX(1); - } + @include active; } diff --git a/src/features/Breadcrumbs/view/breadcrumbsView.module.scss b/src/features/Breadcrumbs/view/breadcrumbsView.module.scss index af4de312..89200a9a 100644 --- a/src/features/Breadcrumbs/view/breadcrumbsView.module.scss +++ b/src/features/Breadcrumbs/view/breadcrumbsView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .breadcrumbs { display: flex; align-items: center; @@ -10,44 +12,10 @@ } .link { - position: relative; - display: flex; - align-items: center; + @include link; + padding: var(--tiny-offset) calc(var(--tiny-offset) / 2); - height: 100%; - font: var(--regular-font); font-weight: 100; - letter-spacing: var(--one); - text-transform: uppercase; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: calc(var(--one) * -1); - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } - - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } - } } .active { diff --git a/src/pages/LoginPage/view/loginPageView.module.scss b/src/pages/LoginPage/view/loginPageView.module.scss index 60b7f54e..9584150c 100644 --- a/src/pages/LoginPage/view/loginPageView.module.scss +++ b/src/pages/LoginPage/view/loginPageView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .loginPage { position: relative; display: block; @@ -58,35 +60,14 @@ } .registerLink { - position: relative; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: -4px; - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } + @include link; - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); + padding: 0; + font: var(--medium-font); + text-transform: none; - &::after { - opacity: 1; - transform: scaleX(1); - } - } + &::after { + bottom: calc(var(--one) * -4); } } diff --git a/src/pages/RegistrationPage/view/registrationPageView.module.scss b/src/pages/RegistrationPage/view/registrationPageView.module.scss index 40e08977..2dceaca9 100644 --- a/src/pages/RegistrationPage/view/registrationPageView.module.scss +++ b/src/pages/RegistrationPage/view/registrationPageView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .registrationPage { position: relative; display: block; @@ -63,35 +65,14 @@ } .loginLink { - position: relative; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: -4px; - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } + @include link; - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); + padding: 0; + font: var(--medium-font); + text-transform: none; - &::after { - opacity: 1; - transform: scaleX(1); - } - } + &::after { + bottom: calc(var(--one) * -4); } } diff --git a/src/pages/UserProfilePage/view/userProfilePageView.module.scss b/src/pages/UserProfilePage/view/userProfilePageView.module.scss index 4e1346de..906ac94b 100644 --- a/src/pages/UserProfilePage/view/userProfilePageView.module.scss +++ b/src/pages/UserProfilePage/view/userProfilePageView.module.scss @@ -71,56 +71,14 @@ } .link { - position: relative; - display: flex; - align-items: center; - align-self: center; - width: 100%; - height: 4rem; - font: var(--regular-font); - letter-spacing: var(--one); - text-align: center; - text-transform: uppercase; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: 1rem; - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s, - background-color 0.2s; - } + @include link; - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } - } + align-self: center; + height: calc(var(--large-offset) * 0.8); } .active { - color: var(--steam-green-800); - opacity: 1; - - &::after { - opacity: 1; - transform: scaleX(1); - } + @include active; } @keyframes show { diff --git a/src/shared/ScrollToTop/view/scrollToTopView.module.scss b/src/shared/ScrollToTop/view/scrollToTopView.module.scss index 81f27f1d..8504c231 100644 --- a/src/shared/ScrollToTop/view/scrollToTopView.module.scss +++ b/src/shared/ScrollToTop/view/scrollToTopView.module.scss @@ -25,7 +25,7 @@ $btn-vars: ( z-index: 1; width: calc(map-get($btn-vars, offset) * 1.5); height: calc(map-get($btn-vars, offset) * 1.5); - fill: map-get($btn-vars, fill); + fill: none; stroke: map-get($btn-vars, stroke); transition: transform 0.2s, From ecb1dced01846745415984ead495d7504efce411 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 21:34:01 +0300 Subject: [PATCH 3/9] refactor: update footer links --- .../Footer/view/footerView.module.scss | 31 ++++--------------- 1 file changed, 6 insertions(+), 25 deletions(-) diff --git a/src/widgets/Footer/view/footerView.module.scss b/src/widgets/Footer/view/footerView.module.scss index ea8cba33..bfec38c1 100644 --- a/src/widgets/Footer/view/footerView.module.scss +++ b/src/widgets/Footer/view/footerView.module.scss @@ -286,34 +286,15 @@ } .link { - position: relative; - transition: color 0.2s; + @include link; + + padding: 0; + width: max-content; + height: var(--extra-small-offset); + text-transform: none; &::after { - content: ''; - position: absolute; - left: 0; bottom: calc(var(--two) * -3); - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } - - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } } } From 49f4e1eb30847243ae2271df35c4ce59f0b812c1 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 21:52:14 +0300 Subject: [PATCH 4/9] fix: footer paddings --- src/shared/ScrollToTop/view/scrollToTopView.module.scss | 2 +- src/widgets/Footer/view/footerView.module.scss | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/shared/ScrollToTop/view/scrollToTopView.module.scss b/src/shared/ScrollToTop/view/scrollToTopView.module.scss index 8504c231..edf67c22 100644 --- a/src/shared/ScrollToTop/view/scrollToTopView.module.scss +++ b/src/shared/ScrollToTop/view/scrollToTopView.module.scss @@ -5,7 +5,7 @@ $btn-vars: ( padding: var(--tiny-offset), bg: var(--steam-green-900), hover-bg: var(--steam-green-1000), - fill: var(--steam-green-800), + fill: none, stroke: var(--steam-green-800), offset: var(--small-offset), ); diff --git a/src/widgets/Footer/view/footerView.module.scss b/src/widgets/Footer/view/footerView.module.scss index bfec38c1..8469b27f 100644 --- a/src/widgets/Footer/view/footerView.module.scss +++ b/src/widgets/Footer/view/footerView.module.scss @@ -27,6 +27,14 @@ background-color: var(--white-tr); } +.navigateWrap { + padding-left: var(--small-offset); +} + +.goalsSubWrap { + padding-left: calc(var(--small-offset) - var(--tiny-offset)); +} + .socialPayWrap { display: flex; flex-direction: column; @@ -207,6 +215,7 @@ align-items: center; justify-content: space-between; padding: var(--extra-small-offset); + padding-left: var(--small-offset); width: 100%; background-color: var(--steam-green-1000); gap: 10%; From 75710e53f0c7905c6911f91c70067f24b4ecced6 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 22:45:55 +0300 Subject: [PATCH 5/9] fix: add semantics to contact information --- src/widgets/Footer/view/FooterView.ts | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/widgets/Footer/view/FooterView.ts b/src/widgets/Footer/view/FooterView.ts index 40d47cf3..aa1d2542 100644 --- a/src/widgets/Footer/view/FooterView.ts +++ b/src/widgets/Footer/view/FooterView.ts @@ -32,7 +32,9 @@ type Goal = { type Contact = { alt: string; description: string; + href?: string; src: string; + tag: keyof HTMLElementTagNameMap; }; type Img = { @@ -98,16 +100,21 @@ const CONTACTS: Contact[] = [ alt: 'location greenshop', description: '70 West Buckingham Ave. Farmingdale, NY 11735', src: '/img/png/location.png', + tag: 'address', }, { alt: 'email greenshop', description: 'contact@greenshop.com', + href: 'mailto:contact@greenshop.com', src: '/img/png/message.png', + tag: 'a', }, { alt: 'phone greenshop', description: '+88 01911 717 490', + href: 'tel:+8801911717490', src: '/img/png/calling.png', + tag: 'a', }, ]; @@ -250,11 +257,19 @@ class FooterView { return wrap; } - private createContactItemHTML(contact: Contact): HTMLDivElement { + private createContactItemHTML(contact: Contact): HTMLElement { + const attributes: { [key: string]: string } = {}; + + if (contact.href) { + attributes.href = contact.href; + } + const wrap = createBaseElement({ + attributes, cssClasses: [styles.contactItem], - tag: 'div', + tag: contact.tag, }); + const icon = createBaseElement({ attributes: { alt: contact.alt, @@ -263,11 +278,13 @@ class FooterView { cssClasses: [styles.contactIcon], tag: 'img', }); + const title = createBaseElement({ cssClasses: [styles.contactText], innerContent: contact.description, - tag: 'p', + tag: 'span', }); + wrap.append(icon, title); return wrap; } From f42aab837b112ecd8df64b8504e87b5f97358fd8 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 22:53:29 +0300 Subject: [PATCH 6/9] fix: add transition to blog articles shadow --- src/pages/Blog/Post/view/post.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/Blog/Post/view/post.module.scss b/src/pages/Blog/Post/view/post.module.scss index d5a5652c..26437cd1 100644 --- a/src/pages/Blog/Post/view/post.module.scss +++ b/src/pages/Blog/Post/view/post.module.scss @@ -1,5 +1,9 @@ .cardItem { background-color: var(--white); + transition: + box-shadow 0.2s, + color 0.2s, + transform 0.2s; &:hover { box-shadow: var(--mellow-shadow-500); From befca2d37c23a039f9bfe82be7f1a0bd8578275b Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 23:28:59 +0300 Subject: [PATCH 7/9] refactor: replace to catalog link with mixin --- .../CartPage/view/cartPageView.module.scss | 39 +++++-------------- 1 file changed, 9 insertions(+), 30 deletions(-) diff --git a/src/pages/CartPage/view/cartPageView.module.scss b/src/pages/CartPage/view/cartPageView.module.scss index b8b61994..3f51d986 100644 --- a/src/pages/CartPage/view/cartPageView.module.scss +++ b/src/pages/CartPage/view/cartPageView.module.scss @@ -160,40 +160,19 @@ color: var(--noble-gray-200); } +$padding: var(--tiny-offset) 0; +$color: var(--steam-green-800); + .continue { - position: relative; + @include link($padding, $color); + align-self: center; - padding: var(--tiny-offset) 0; - font: var(--regular-font); - color: var(--steam-green-800); - transition: color 0.2s; - cursor: pointer; + width: max-content; + height: max-content; + text-transform: none; &::after { - content: ''; - position: absolute; - left: 0; - bottom: 0.3rem; - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } - - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } + bottom: var(--five); } } From 3b51d8b47702ba6fb07ca6e8975400292f725f8f Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 23:32:29 +0300 Subject: [PATCH 8/9] refactor: discard redundant user check --- src/widgets/Header/model/HeaderModel.ts | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/src/widgets/Header/model/HeaderModel.ts b/src/widgets/Header/model/HeaderModel.ts index ca76a5b2..86e3684d 100644 --- a/src/widgets/Header/model/HeaderModel.ts +++ b/src/widgets/Header/model/HeaderModel.ts @@ -33,15 +33,6 @@ class HeaderModel { this.init(); } - private checkAuthUser(): boolean { - const { isUserLoggedIn } = getStore().getState(); - if (!isUserLoggedIn) { - RouterModel.getInstance().navigateTo(PAGE_ID.LOGIN_PAGE); - return false; - } - return true; - } - private checkCurrentUser(): void { const { isUserLoggedIn } = getStore().getState(); const logoutButton = this.view.getLogoutButton(); @@ -64,7 +55,6 @@ class HeaderModel { this.setCartLinkHandler(); this.observeCartChange(); this.setCartCount().catch(showErrorMessage); - this.setProfileLinkHandler(); this.setChangeLanguageCheckboxHandler(); } @@ -143,17 +133,6 @@ class HeaderModel { }); } - private setProfileLinkHandler(): void { - const logo = this.view.getToProfileLink().getHTML(); - logo.addEventListener('click', (event) => { - event.preventDefault(); - // TBD remove unnecessary check (we don't show this logo when user is not logged in) ?? - if (this.checkAuthUser()) { - RouterModel.getInstance().navigateTo(PAGE_ID.USER_PROFILE_PAGE); - } - }); - } - public getHTML(): HTMLElement { return this.view.getHTML(); } From c6ae92dc8fcb2a7413af14ad307fb2858623be7e Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 23:52:59 +0300 Subject: [PATCH 9/9] chore: update CI/CD for sprint 5 --- .github/labeler.yml | 3 +++ .github/pull_request_template.md | 4 ++-- .github/workflows/ci.yml | 1 + .validate-branch-namerc.cjs | 1 + 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/labeler.yml b/.github/labeler.yml index 26585235..1f864ee7 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -48,3 +48,6 @@ sprint3: sprint4: - head-branch: 'ECOMM-4' + +sprint5: + - head-branch: 'ECOMM-5' diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index df4c3fbe..ba4b9165 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -3,10 +3,10 @@ 📍 conforms with the following format: - [ ] prefix (following the [convention](https://www.conventionalcommits.org/en/v1.0.0-beta.2/): `feat`, `fix`, `hotfix`, `chore`, `refactor`, `revert`, `docs`, `style`, `test`) -- [ ] sprint and issue number (e.g. `RSS-ECOMM-4_01`, where `4` - is the sprint number and `01` - is the issue number) +- [ ] sprint and issue number (e.g. `RSS-ECOMM-5_01`, where `5` - is the sprint number and `01` - is the issue number) - [ ] short description -👀 Example: `feat(RSS-ECOMM-4_01): description` +👀 Example: `feat(RSS-ECOMM-5_01): description` ## PR Description 🧙‍♂️ diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 560f20e6..83fa1194 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,6 +7,7 @@ on: - sprint-2 - sprint-3 - sprint-4 + - sprint-5 jobs: format: diff --git a/.validate-branch-namerc.cjs b/.validate-branch-namerc.cjs index 39e9fe8b..ffc17199 100644 --- a/.validate-branch-namerc.cjs +++ b/.validate-branch-namerc.cjs @@ -9,3 +9,4 @@ module.exports = { // "fix(RSS-ECOMM-2_15)/addCorrectProduct" // where 2 is the sprint number and 15 is the issue number // "chore(RSS-ECOMM-3_01)/addNewProduct" // where 3 is the sprint number and 01 is the issue number // "refactor(RSS-ECOMM-4_01)/addNewProduct" // where 4 is the sprint number and 01 is the issue number +// "revert(RSS-ECOMM-5_01)/addNewProduct" // where 5 is the sprint number and 01 is the issue number