diff --git a/src/app/App/model/AppModel.ts b/src/app/App/model/AppModel.ts index aed626f4..24a0814e 100644 --- a/src/app/App/model/AppModel.ts +++ b/src/app/App/model/AppModel.ts @@ -68,6 +68,12 @@ class AppModel { ); return new RegistrationPageModel(this.appView.getHTML()); }, + [PAGE_ID.USER_ADDRESSES_PAGE]: async (): Promise<Page> => { + const { default: UserAddressesPageModel } = await import( + '@/pages/UserAddressesPage/model/UserAddressesPageModel.ts' + ); + return new UserAddressesPageModel(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()); diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss index d031888f..8b5ae10d 100644 --- a/src/app/styles/variables.scss +++ b/src/app/styles/variables.scss @@ -34,7 +34,8 @@ // 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 + --basic-regular-font: 400 1.125rem 'Cerapro', sans-serif; // 18px + --extra-regular-font: 500 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 diff --git a/src/entities/UserAddress/model/UserAddressModel.ts b/src/entities/UserAddress/model/UserAddressModel.ts index e9ac9cd7..9bd80bb7 100644 --- a/src/entities/UserAddress/model/UserAddressModel.ts +++ b/src/entities/UserAddress/model/UserAddressModel.ts @@ -19,21 +19,13 @@ import { showErrorMessage, showSuccessMessage } from '@/shared/utils/userMessage import UserAddressView from '../view/UserAddressView.ts'; class UserAddressModel { - private callback: (isDisabled: boolean) => void; - private currentAddress: Address; private labels: Map<HTMLDivElement, { inactive?: boolean; type: AddressTypeType }>; private view: UserAddressView; - constructor( - address: Address, - activeTypes: AddressTypeType[], - callback: (isDisabled: boolean) => void, - inactiveTypes?: AddressTypeType[], - ) { - this.callback = callback; + constructor(address: Address, activeTypes: AddressTypeType[], inactiveTypes?: AddressTypeType[]) { this.currentAddress = address; this.view = new UserAddressView(address, activeTypes, inactiveTypes); this.labels = this.view.getLabels(); @@ -87,7 +79,6 @@ class UserAddressModel { private async labelClickHandler(activeType: AddressTypeType, inactive?: boolean): Promise<void> { const loader = new LoaderModel(LOADER_SIZE.MEDIUM); loader.setAbsolutePosition(); - this.callback(true); this.view.toggleState(true); this.getHTML().append(loader.getHTML()); try { diff --git a/src/entities/UserAddress/view/userAddressView.module.scss b/src/entities/UserAddress/view/userAddressView.module.scss index e2dc0918..60548319 100644 --- a/src/entities/UserAddress/view/userAddressView.module.scss +++ b/src/entities/UserAddress/view/userAddressView.module.scss @@ -5,9 +5,9 @@ display: grid; align-items: center; border-radius: var(--medium-br); - padding: var(--extra-small-offset); + padding: var(--small-offset); background: var(--white-tr); - gap: var(--tiny-offset); + gap: var(--extra-small-offset) var(--tiny-offset); } .labelsWrapper { @@ -114,7 +114,7 @@ .streetNameSpan, .postalCodeSpan, .countrySpan { - font: var(--regular-font); + font: var(--basic-regular-font); letter-spacing: var(--one); word-break: break-all; color: var(--steam-green-400); diff --git a/src/features/WishlistButton/view/WishlistButtonView.ts b/src/features/WishlistButton/view/WishlistButtonView.ts index 084151e7..d711321c 100644 --- a/src/features/WishlistButton/view/WishlistButtonView.ts +++ b/src/features/WishlistButton/view/WishlistButtonView.ts @@ -17,7 +17,7 @@ class WishlistButtonView { }); const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg'); - svg.append(createSVGUse(SVG_DETAILS.FILL_HEART)); + svg.append(createSVGUse(SVG_DETAILS.HEART)); this.switchToWishListButton.getHTML().append(svg); return this.switchToWishListButton; diff --git a/src/pages/UserAddressesPage/model/UserAddressesPageModel.ts b/src/pages/UserAddressesPage/model/UserAddressesPageModel.ts new file mode 100644 index 00000000..4e0be40d --- /dev/null +++ b/src/pages/UserAddressesPage/model/UserAddressesPageModel.ts @@ -0,0 +1,54 @@ +import type { Page } from '@/shared/types/page.ts'; + +import RouterModel from '@/app/Router/model/RouterModel.ts'; +import getCustomerModel from '@/shared/API/customer/model/CustomerModel.ts'; +import getStore from '@/shared/Store/Store.ts'; +import { setCurrentPage } from '@/shared/Store/actions.ts'; +import { SERVER_MESSAGE_KEYS } from '@/shared/constants/messages.ts'; +import { PAGE_ID } from '@/shared/constants/pages.ts'; +import createBaseElement from '@/shared/utils/createBaseElement.ts'; +import { showErrorMessage } from '@/shared/utils/userMessage.ts'; +import UserAddressesModel from '@/widgets/UserAddresses/model/UserAddressesModel.ts'; + +import UserAddressesPageView from '../view/UserAddressesPageView.ts'; + +class UserAddressesPageModel implements Page { + private addresses: UserAddressesModel | null = null; + + private view: UserAddressesPageView | null = null; + + constructor(parent: HTMLDivElement) { + const { isUserLoggedIn } = getStore().getState(); + if (!isUserLoggedIn) { + RouterModel.getInstance().navigateTo(PAGE_ID.LOGIN_PAGE); + showErrorMessage(SERVER_MESSAGE_KEYS.NEED_LOGIN); + } else { + this.view = new UserAddressesPageView(parent); + this.init().catch(showErrorMessage); + } + } + + private async init(): Promise<void> { + try { + const user = await getCustomerModel().getCurrentUser(); + if (user) { + this.addresses = new UserAddressesModel(user); + this.view?.getHTML().append(this.addresses.getHTML()); + getStore().dispatch(setCurrentPage(PAGE_ID.USER_ADDRESSES_PAGE)); + } + } catch (error) { + showErrorMessage(SERVER_MESSAGE_KEYS.NEED_LOGIN); + } + } + + public getHTML(): HTMLDivElement { + if (this.view) { + return this.view.getHTML(); + } + return createBaseElement({ + tag: 'div', + }); + } +} + +export default UserAddressesPageModel; diff --git a/src/pages/UserAddressesPage/view/UserAddressesPageView.ts b/src/pages/UserAddressesPage/view/UserAddressesPageView.ts new file mode 100644 index 00000000..dd5f03b5 --- /dev/null +++ b/src/pages/UserAddressesPage/view/UserAddressesPageView.ts @@ -0,0 +1,33 @@ +import clearOutElement from '@/shared/utils/clearOutElement.ts'; +import createBaseElement from '@/shared/utils/createBaseElement.ts'; + +import styles from './userAddressesPageView.module.scss'; + +class UserAddressesPageView { + private page: HTMLDivElement; + + private parent: HTMLDivElement; + + constructor(parent: HTMLDivElement) { + this.parent = parent; + clearOutElement(this.parent); + this.page = this.createHTML(); + window.scrollTo(0, 0); + } + + private createHTML(): HTMLDivElement { + this.page = createBaseElement({ + cssClasses: [styles.userAddressesPage], + tag: 'div', + }); + + this.parent.append(this.page); + + return this.page; + } + + public getHTML(): HTMLDivElement { + return this.page; + } +} +export default UserAddressesPageView; diff --git a/src/pages/UserAddressesPage/view/userAddressesPageView.module.scss b/src/pages/UserAddressesPage/view/userAddressesPageView.module.scss new file mode 100644 index 00000000..595a1dfc --- /dev/null +++ b/src/pages/UserAddressesPage/view/userAddressesPageView.module.scss @@ -0,0 +1,26 @@ +@import 'src/app/styles/mixins'; + +.userAddressesPage { + position: relative; + display: block; + margin: 0 auto; + width: 65%; + animation: show 0.2s ease-out forwards; + + @media (max-width: 768px) { + margin: 0; + padding: var(--extra-small-offset); + width: 100%; + } +} + +@keyframes show { + 0% { + opacity: 0; + } + + 100% { + display: block; + opacity: 1; + } +} diff --git a/src/pages/UserProfilePage/model/UserProfilePageModel.ts b/src/pages/UserProfilePage/model/UserProfilePageModel.ts index 3e5d68b6..2e1dac6b 100644 --- a/src/pages/UserProfilePage/model/UserProfilePageModel.ts +++ b/src/pages/UserProfilePage/model/UserProfilePageModel.ts @@ -3,19 +3,16 @@ import type { Page } from '@/shared/types/page.ts'; import RouterModel from '@/app/Router/model/RouterModel.ts'; import getCustomerModel from '@/shared/API/customer/model/CustomerModel.ts'; import getStore from '@/shared/Store/Store.ts'; -import { setAuthToken, setCurrentPage, switchIsUserLoggedIn } from '@/shared/Store/actions.ts'; +import { setCurrentPage } from '@/shared/Store/actions.ts'; import { SERVER_MESSAGE_KEYS } from '@/shared/constants/messages.ts'; import { PAGE_ID } from '@/shared/constants/pages.ts'; import createBaseElement from '@/shared/utils/createBaseElement.ts'; import { showErrorMessage } from '@/shared/utils/userMessage.ts'; -import UserAddressesModel from '@/widgets/UserAddresses/model/UserAddressesModel.ts'; import UserInfoModel from '@/widgets/UserInfo/model/UserInfoModel.ts'; import UserProfilePageView from '../view/UserProfilePageView.ts'; class UserProfilePageModel implements Page { - private addresses: UserAddressesModel | null = null; - private userInfo: UserInfoModel | null = null; private view: UserProfilePageView | null = null; @@ -31,22 +28,12 @@ class UserProfilePageModel implements Page { } } - private addressesLinkHandler(): void { - this.userInfo?.hide(); - this.addresses?.show(); - } - private async init(): Promise<void> { - this.setAddressesLinkHandler(); - this.setPersonalInfoLinkHandler(); try { const user = await getCustomerModel().getCurrentUser(); - if (user) { this.userInfo = new UserInfoModel(user); - this.addresses = new UserAddressesModel(user); - this.view?.getUserProfileWrapper().append(this.userInfo.getHTML(), this.addresses.getHTML()); - this.setAccountLogoutButtonHandler(); + this.view?.getUserProfileWrapper().append(this.userInfo.getHTML()); getStore().dispatch(setCurrentPage(PAGE_ID.USER_PROFILE_PAGE)); } } catch (error) { @@ -54,34 +41,6 @@ class UserProfilePageModel implements Page { } } - private logoutHandler(): void { - localStorage.clear(); - getStore().dispatch(setAuthToken(null)); - getStore().dispatch(switchIsUserLoggedIn(false)); - getCustomerModel().logout().catch(showErrorMessage); - RouterModel.getInstance().navigateTo(PAGE_ID.LOGIN_PAGE); - } - - private personalInfoLinkHandler(): void { - this.addresses?.hide(); - this.userInfo?.show(); - } - - private setAccountLogoutButtonHandler(): void { - const logoutButton = this.view?.getAccountLogoutButton(); - logoutButton?.getHTML().addEventListener('click', () => this.logoutHandler()); - } - - private setAddressesLinkHandler(): void { - const addressesLink = this.view?.getAddressesLink(); - addressesLink?.getHTML().addEventListener('click', () => this.addressesLinkHandler()); - } - - private setPersonalInfoLinkHandler(): void { - const personalInfoLink = this.view?.getPersonalInfoLink(); - personalInfoLink?.getHTML().addEventListener('click', () => this.personalInfoLinkHandler()); - } - public getHTML(): HTMLDivElement { if (this.view) { return this.view.getHTML(); diff --git a/src/pages/UserProfilePage/view/UserProfilePageView.ts b/src/pages/UserProfilePage/view/UserProfilePageView.ts index 7ba64366..12567eae 100644 --- a/src/pages/UserProfilePage/view/UserProfilePageView.ts +++ b/src/pages/UserProfilePage/view/UserProfilePageView.ts @@ -1,87 +1,23 @@ -import ButtonModel from '@/shared/Button/model/ButtonModel.ts'; -import LinkModel from '@/shared/Link/model/LinkModel.ts'; -import { BUTTON_TEXT, BUTTON_TEXT_KEYS } from '@/shared/constants/buttons.ts'; -import { USER_PROFILE_MENU_LINK } from '@/shared/constants/links.ts'; -import { USER_INFO_MENU_LINK, USER_INFO_MENU_LINK_KEYS } from '@/shared/constants/pages.ts'; import clearOutElement from '@/shared/utils/clearOutElement.ts'; import createBaseElement from '@/shared/utils/createBaseElement.ts'; -import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts'; -import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts'; import styles from './userProfilePageView.module.scss'; class UserProfilePageView { - private accountLogoutButton: ButtonModel; - - private accountMenu: HTMLUListElement; - - private addressesLink: LinkModel; - - private links: LinkModel[] = []; - - private ordersLink: LinkModel; - private page: HTMLDivElement; private parent: HTMLDivElement; - private personalInfoLink: LinkModel; - - private supportLink: LinkModel; - private userProfileWrapper: HTMLDivElement; constructor(parent: HTMLDivElement) { this.parent = parent; clearOutElement(this.parent); - - this.accountLogoutButton = this.createLogoutButton(); - this.personalInfoLink = this.createPersonalInfoLink(); - this.addressesLink = this.createAddressesLink(); - this.ordersLink = this.createOrdersLink(); - this.supportLink = this.createSupportLink(); - this.accountMenu = this.createAccountMenu(); - - this.setLinksHandlers(); this.userProfileWrapper = this.createUserProfileWrapper(); this.page = this.createHTML(); window.scrollTo(0, 0); } - private createAccountMenu(): HTMLUListElement { - this.accountMenu = createBaseElement({ - cssClasses: [styles.accountMenu], - tag: 'ul', - }); - - this.links.forEach((link) => { - const li = createBaseElement({ - cssClasses: [styles.accountMenuItem], - tag: 'li', - }); - li.append(link.getHTML()); - - this.accountMenu.append(li); - }); - this.accountMenu.append(this.accountLogoutButton.getHTML()); - return this.accountMenu; - } - - private createAddressesLink(): LinkModel { - this.addressesLink = new LinkModel({ - attrs: { - href: USER_PROFILE_MENU_LINK.ADDRESSES, - }, - classes: [styles.link], - text: USER_INFO_MENU_LINK[getCurrentLanguage()].ADDRESSES, - }); - this.links.push(this.addressesLink); - - observeCurrentLanguage(this.addressesLink.getHTML(), USER_INFO_MENU_LINK, USER_INFO_MENU_LINK_KEYS.ADDRESSES); - - return this.addressesLink; - } - private createHTML(): HTMLDivElement { this.page = createBaseElement({ cssClasses: [styles.userProfilePage], @@ -94,126 +30,19 @@ class UserProfilePageView { return this.page; } - private createLogoutButton(): ButtonModel { - this.accountLogoutButton = new ButtonModel({ - classes: [styles.logoutButton], - text: BUTTON_TEXT[getCurrentLanguage()].LOG_OUT, - }); - - observeCurrentLanguage(this.accountLogoutButton.getHTML(), BUTTON_TEXT, BUTTON_TEXT_KEYS.LOG_OUT); - - return this.accountLogoutButton; - } - - private createOrdersLink(): LinkModel { - this.ordersLink = new LinkModel({ - attrs: { - href: USER_PROFILE_MENU_LINK.ORDERS, - }, - classes: [styles.link], - text: USER_INFO_MENU_LINK[getCurrentLanguage()].ORDERS, - }); - this.links.push(this.ordersLink); - - observeCurrentLanguage(this.ordersLink.getHTML(), USER_INFO_MENU_LINK, USER_INFO_MENU_LINK_KEYS.ORDERS); - - return this.ordersLink; - } - - private createPersonalInfoLink(): LinkModel { - this.personalInfoLink = new LinkModel({ - attrs: { - href: USER_PROFILE_MENU_LINK.PERSONAL_INFO, - }, - classes: [styles.link], - text: USER_INFO_MENU_LINK[getCurrentLanguage()].PERSONAL_INFO, - }); - this.links.push(this.personalInfoLink); - - observeCurrentLanguage( - this.personalInfoLink.getHTML(), - USER_INFO_MENU_LINK, - USER_INFO_MENU_LINK_KEYS.PERSONAL_INFO, - ); - - this.personalInfoLink.getHTML().classList.add(styles.active); - this.personalInfoLink.setDisabled(); - return this.personalInfoLink; - } - - private createSupportLink(): LinkModel { - this.supportLink = new LinkModel({ - attrs: { - href: USER_PROFILE_MENU_LINK.SUPPORT, - }, - classes: [styles.link], - text: USER_INFO_MENU_LINK[getCurrentLanguage()].SUPPORT, - }); - this.links.push(this.supportLink); - - observeCurrentLanguage(this.supportLink.getHTML(), USER_INFO_MENU_LINK, USER_INFO_MENU_LINK_KEYS.SUPPORT); - - return this.supportLink; - } - private createUserProfileWrapper(): HTMLDivElement { this.userProfileWrapper = createBaseElement({ cssClasses: [styles.userProfileWrapper], tag: 'div', }); - this.userProfileWrapper.append(this.accountMenu); return this.userProfileWrapper; } - private setLinksHandlers(): boolean { - this.links.forEach((link) => { - link.getHTML().addEventListener('click', (event) => { - event.preventDefault(); - // TBD replace route with route - const route = link.getHTML().attributes.getNamedItem('href')?.value; - if (route) { - this.switchActiveLink(route); - } - }); - }); - return true; - } - - private switchActiveLink(route: string): void { - this.links.forEach((link) => { - link.getHTML().classList.remove(styles.active); - link.setEnabled(); - }); - - const currentLink = this.links.find((link) => link.getHTML().attributes.getNamedItem('href')?.value === route); - - if (currentLink) { - currentLink.getHTML().classList.add(styles.active); - currentLink.setDisabled(); - } - } - - public getAccountLogoutButton(): ButtonModel { - return this.accountLogoutButton; - } - - public getAddressesLink(): LinkModel { - return this.addressesLink; - } - public getHTML(): HTMLDivElement { return this.page; } - public getLinks(): LinkModel[] { - return this.links; - } - - public getPersonalInfoLink(): LinkModel { - return this.personalInfoLink; - } - public getUserProfileWrapper(): HTMLDivElement { return this.userProfileWrapper; } diff --git a/src/pages/UserProfilePage/view/userProfilePageView.module.scss b/src/pages/UserProfilePage/view/userProfilePageView.module.scss index 906ac94b..bd327694 100644 --- a/src/pages/UserProfilePage/view/userProfilePageView.module.scss +++ b/src/pages/UserProfilePage/view/userProfilePageView.module.scss @@ -16,71 +16,6 @@ } } -.addressesWrapper { - position: relative; - display: grid; - align-items: center; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(6, auto); - margin: 0 var(--small-offset); - padding: var(--small-offset); - min-width: 40%; - max-width: fit-content; - box-shadow: var(--mellow-shadow-100); - font: var(--extra-regular-font); - letter-spacing: var(--one); - color: var(--noble-gray-900); - background-color: var(--noble-gray-tr-800); - gap: var(--small-offset); -} - -.address { - grid-column: 2 span; - max-width: 100%; - word-break: break-all; -} - -.accountMenu { - display: flex; - flex-flow: column wrap; - justify-content: center; - padding: var(--small-offset); - width: 25%; - height: fit-content; - background-color: var(--white); - - @media (max-width: 768px) { - margin-bottom: var(--small-offset); - width: 100%; - } -} - -.accountMenuItem { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: fit-content; -} - -.logoutButton { - @include green-btn; - - margin: var(--small-offset) auto; - padding: calc(var(--small-offset) / 3) var(--small-offset); -} - -.link { - @include link; - - align-self: center; - height: calc(var(--large-offset) * 0.8); -} - -.active { - @include active; -} - @keyframes show { 0% { opacity: 0; diff --git a/src/shared/constants/pages.ts b/src/shared/constants/pages.ts index 7299ecfc..95a7a083 100644 --- a/src/shared/constants/pages.ts +++ b/src/shared/constants/pages.ts @@ -106,6 +106,7 @@ export const PAGE_ID = { NOT_FOUND_PAGE: '404', PRODUCT_PAGE: 'product', REGISTRATION_PAGE: 'register', + USER_ADDRESSES_PAGE: 'addresses', USER_PROFILE_PAGE: 'profile', WISHLIST_PAGE: 'wishlist', } as const; diff --git a/src/shared/constants/svg.ts b/src/shared/constants/svg.ts index 34229b39..d27879ee 100644 --- a/src/shared/constants/svg.ts +++ b/src/shared/constants/svg.ts @@ -1,7 +1,6 @@ const SVG_DETAILS = { ARROW_UP: 'arrowUp', BILL: 'bill', - BIN: 'bin', CART: 'cart', CLOSE: 'close', CLOSE_EYE: 'closeEye', @@ -10,9 +9,9 @@ const SVG_DETAILS = { DELETE: 'delete', DELIVERY: 'delivery', EDIT: 'edit', - FILL_HEART: 'heartFill', GO_DETAILS: 'arrow', - HEART_OUTLINE: 'heartOutline', + HEART: 'heart', + HOUSE: 'house', KEY: 'key', LEAVES: 'leaves', LIGHT: 'light', @@ -21,12 +20,11 @@ const SVG_DETAILS = { OPEN_EYE: 'openEye', PROFILE: 'userCircle', SVG_URL: 'http://www.w3.org/2000/svg', + SWITCH_LANGUAGE: { en: 'en', ru: 'ru', }, - TRUCK: 'truck', - WALLET: 'wallet', } as const; export default SVG_DETAILS; diff --git a/src/shared/img/svg/bin.svg b/src/shared/img/svg/bin.svg deleted file mode 100644 index 709bfa15..00000000 --- a/src/shared/img/svg/bin.svg +++ /dev/null @@ -1,7 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> -<path d="M21.0002 6.72998C20.9802 6.72998 20.9502 6.72998 20.9202 6.72998C15.6302 6.19998 10.3502 5.99998 5.12016 6.52998L3.08016 6.72998C2.66016 6.76998 2.29016 6.46998 2.25016 6.04998C2.21016 5.62998 2.51016 5.26998 2.92016 5.22998L4.96016 5.02998C10.2802 4.48998 15.6702 4.69998 21.0702 5.22998C21.4802 5.26998 21.7802 5.63998 21.7402 6.04998C21.7102 6.43998 21.3802 6.72998 21.0002 6.72998Z"/> -<path d="M8.49977 5.72C8.45977 5.72 8.41977 5.72 8.36977 5.71C7.96977 5.64 7.68977 5.25 7.75977 4.85L7.97977 3.54C8.13977 2.58 8.35977 1.25 10.6898 1.25H13.3098C15.6498 1.25 15.8698 2.63 16.0198 3.55L16.2398 4.85C16.3098 5.26 16.0298 5.65 15.6298 5.71C15.2198 5.78 14.8298 5.5 14.7698 5.1L14.5498 3.8C14.4098 2.93 14.3798 2.76 13.3198 2.76H10.6998C9.63977 2.76 9.61977 2.9 9.46977 3.79L9.23977 5.09C9.17977 5.46 8.85977 5.72 8.49977 5.72Z"/> -<path d="M15.2099 22.7501H8.7899C5.2999 22.7501 5.1599 20.8201 5.0499 19.2601L4.3999 9.19007C4.3699 8.78007 4.6899 8.42008 5.0999 8.39008C5.5199 8.37008 5.8699 8.68008 5.8999 9.09008L6.5499 19.1601C6.6599 20.6801 6.6999 21.2501 8.7899 21.2501H15.2099C17.3099 21.2501 17.3499 20.6801 17.4499 19.1601L18.0999 9.09008C18.1299 8.68008 18.4899 8.37008 18.8999 8.39008C19.3099 8.42008 19.6299 8.77007 19.5999 9.19007L18.9499 19.2601C18.8399 20.8201 18.6999 22.7501 15.2099 22.7501Z"/> -<path d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"/> -<path d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"/> -</svg> diff --git a/src/shared/img/svg/drop.svg b/src/shared/img/svg/drop.svg deleted file mode 100644 index 42d5a616..00000000 --- a/src/shared/img/svg/drop.svg +++ /dev/null @@ -1,10 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g clip-path="url(#clip0_732_476)"> -<path d="M12.6306 0.223782L12 0.999896L11.3694 0.223782L12 -0.288574L12.6306 0.223782ZM12 2.31769C11.8351 2.46387 11.643 2.63721 11.4299 2.8348C10.6984 3.5129 9.72588 4.47055 8.75636 5.59155C7.78416 6.71566 6.83295 7.9835 6.12903 9.28135C5.42025 10.5882 5 11.8564 5 12.9999C5 17.9865 8.59037 20.9999 12 20.9999C15.4096 20.9999 19 17.9865 19 12.9999C19 11.8564 18.5797 10.5882 17.871 9.28135C17.1671 7.9835 16.2158 6.71566 15.2436 5.59155C14.2741 4.47055 13.3016 3.5129 12.5701 2.8348C12.357 2.63721 12.1649 2.46387 12 2.31769ZM11.3694 0.223782C11.3696 0.223605 11.3694 0.223782 12 0.999896C12.6306 0.223782 12.6304 0.223605 12.6306 0.223782L12.6333 0.225997L12.6389 0.230586L12.6587 0.246803C12.6756 0.260714 12.6998 0.28079 12.731 0.306803C12.7932 0.358822 12.8831 0.434618 12.9965 0.532352C13.2233 0.727755 13.5449 1.01125 13.9299 1.36812C14.6984 2.08064 15.7259 3.09175 16.7564 4.28324C17.7842 5.47164 18.8329 6.86004 19.629 8.32782C20.4203 9.78663 21 11.3934 21 12.9999C21 19.0133 16.5904 22.9999 12 22.9999C7.40963 22.9999 3 19.0133 3 12.9999C3 11.3934 3.57975 9.78663 4.37097 8.32782C5.16705 6.86004 6.21584 5.47164 7.24364 4.28324C8.27412 3.09175 9.30157 2.08064 10.0701 1.36812C10.4551 1.01125 10.7767 0.727755 11.0035 0.532352C11.1169 0.434618 11.2068 0.358822 11.269 0.306803C11.3002 0.28079 11.3244 0.260714 11.3413 0.246803L11.3611 0.230586L11.3667 0.225997L11.3694 0.223782Z" fill="black"/> -</g> -<defs> -<clipPath id="clip0_732_476"> -<rect width="24" height="24" fill="white"/> -</clipPath> -</defs> -</svg> diff --git a/src/shared/img/svg/flower.svg b/src/shared/img/svg/flower.svg deleted file mode 100644 index 38f5c53a..00000000 --- a/src/shared/img/svg/flower.svg +++ /dev/null @@ -1,5 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M12.0002 13.5C9.17155 13.5 7.0325 11.3287 7.0325 8.5L7 3.5L9.50025 5.5L12.0002 2.5L14.5002 5.5L17.0002 3.5V8.5C17.0002 11.3287 14.829 13.5 12.0002 13.5Z" stroke="#333333" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> -<path d="M11.7429 21.6569C12.5239 20.8759 11.5742 18.6598 9.62156 16.7072C7.66891 14.7546 5.45286 13.8048 4.6718 14.5858C3.89076 15.3669 4.84049 17.583 6.79311 19.5356C8.74576 21.4882 10.9618 22.438 11.7429 21.6569Z" stroke="#333333" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> -<path d="M12.414 21.485C13.195 22.2661 15.4111 21.3163 17.3637 19.3637C19.3163 17.4111 20.2661 15.195 19.485 14.414C18.704 13.6329 16.4879 14.5826 14.5353 16.5353C12.5826 18.4879 11.6329 20.704 12.414 21.485Z" stroke="#333333" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> -</svg> diff --git a/src/shared/img/svg/github.svg b/src/shared/img/svg/github.svg deleted file mode 100644 index 471c8d9d..00000000 --- a/src/shared/img/svg/github.svg +++ /dev/null @@ -1,12 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g clip-path="url(#clip0_2836_15233)"> -<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z" fill="#333333"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M9.59162 22.7356C9.49492 22.6107 9.49492 21.4984 9.59162 19.3988C8.55572 19.4346 7.90122 19.3627 7.62812 19.1831C7.21852 18.9138 6.80842 18.0831 6.44457 17.4977C6.08072 16.9123 5.27312 16.8198 4.94702 16.6889C4.62091 16.558 4.53905 16.0246 5.84562 16.428C7.15222 16.8315 7.21592 17.9301 7.62812 18.187C8.04032 18.4439 9.02572 18.3315 9.47242 18.1257C9.91907 17.9199 9.88622 17.1537 9.96587 16.8501C10.0666 16.5668 9.71162 16.5039 9.70382 16.5016C9.26777 16.5016 6.97697 16.0034 6.34772 13.7851C5.71852 11.5668 6.52907 10.1168 6.96147 9.4935C7.24972 9.07795 7.22422 8.19235 6.88497 6.8366C8.11677 6.6792 9.06732 7.0669 9.73672 7.9998C9.73737 8.00515 10.6143 7.47835 12.0001 7.47835C13.386 7.47835 13.8777 7.90745 14.2571 7.9998C14.6365 8.09215 14.94 6.3668 17.2834 6.8366C16.7942 7.7982 16.3844 8.9998 16.6972 9.4935C17.0099 9.9872 18.2372 11.5571 17.4833 13.7851C16.9807 15.2704 15.9927 16.1759 14.5192 16.5016C14.3502 16.5555 14.2658 16.6425 14.2658 16.7625C14.2658 16.9426 14.4942 16.9622 14.8233 17.8056C15.0426 18.3679 15.0585 19.9738 14.8708 22.6233C14.3953 22.7443 14.0254 22.8256 13.7611 22.8671C13.2924 22.9408 12.7835 22.9821 12.2834 22.998C11.7834 23.014 11.6098 23.0122 10.9185 22.9478C10.4577 22.9049 10.0154 22.8342 9.59162 22.7356Z" fill="#333333"/> -</g> -<defs> -<clipPath id="clip0_2836_15233"> -<rect width="24" height="24" fill="white"/> -</clipPath> -</defs> -</svg> diff --git a/src/shared/img/svg/heartFill.svg b/src/shared/img/svg/heart.svg similarity index 100% rename from src/shared/img/svg/heartFill.svg rename to src/shared/img/svg/heart.svg diff --git a/src/shared/img/svg/heartOutline.svg b/src/shared/img/svg/heartOutline.svg deleted file mode 100644 index dff34254..00000000 --- a/src/shared/img/svg/heartOutline.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="56" height="55" viewBox="0 0 56 55" xmlns="http://www.w3.org/2000/svg"> -<path d="M27.9999 48.1251C26.4949 46.8143 24.7939 45.4508 22.9949 44.0001H22.9716C16.6366 38.9126 9.45689 33.156 6.28589 26.2581C5.2441 24.062 4.692 21.6727 4.66653 19.2501C4.65957 15.926 6.01702 12.7395 8.43211 10.4106C10.8472 8.08181 14.1161 6.80729 17.4999 6.87514C20.2547 6.87941 22.9502 7.66136 25.2652 9.12784C26.2825 9.77631 27.2029 10.5607 27.9999 11.4585C28.8014 10.5642 29.722 9.7803 30.7369 9.12784C33.0509 7.66107 35.7458 6.87907 38.4999 6.87514C41.8837 6.80729 45.1526 8.08181 47.5677 10.4106C49.9828 12.7395 51.3402 15.926 51.3333 19.2501C51.3094 21.6766 50.7573 24.07 49.7139 26.2695C46.5429 33.1674 39.3656 38.9218 33.0306 44.0001L33.0072 44.0185C31.2059 45.4599 29.5072 46.8235 28.0022 48.1435L27.9999 48.1251ZM17.4999 11.4585C15.3264 11.4318 13.2301 12.2487 11.6666 13.7318C10.1601 15.1851 9.31818 17.1763 9.33303 19.2501C9.35965 21.0159 9.76682 22.756 10.5279 24.356C12.0247 27.3322 14.0445 30.0257 16.4942 32.3126C18.8066 34.6043 21.4666 36.8226 23.7672 38.688C24.4042 39.2037 25.0529 39.7239 25.7016 40.2441L26.1099 40.5718C26.7329 41.0714 27.3769 41.5893 27.9999 42.098L28.0302 42.0705L28.0442 42.0591H28.0582L28.0792 42.043H28.0909H28.1026L28.1446 42.0087L28.2402 41.9331L28.2566 41.9193L28.2822 41.901H28.2962L28.3172 41.8826L29.8666 40.6337L30.2726 40.306C30.9282 39.7812 31.5769 39.261 32.2139 38.7453C34.5146 36.8799 37.1769 34.6639 39.4892 32.3608C41.9393 30.075 43.9591 27.3821 45.4556 24.4064C46.2304 22.7926 46.6434 21.0342 46.6666 19.2501C46.6763 17.1827 45.8348 15.1991 44.3332 13.7501C42.7727 12.2604 40.676 11.4367 38.4999 11.4585C35.8444 11.4363 33.3057 12.5295 31.5232 14.4628L27.9999 18.4503L24.4766 14.4628C22.694 12.5295 20.1554 11.4363 17.4999 11.4585Z" /> -</svg> diff --git a/src/shared/img/svg/house.svg b/src/shared/img/svg/house.svg index 05834259..e97336dc 100644 --- a/src/shared/img/svg/house.svg +++ b/src/shared/img/svg/house.svg @@ -1,3 +1,5 @@ -<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M32 0H0V32H32V0Z" fill="white"/> +<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 36 36" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path class="clr-i-outline clr-i-outline-path-1" d="M33.71,17.29l-15-15a1,1,0,0,0-1.41,0l-15,15a1,1,0,0,0,1.41,1.41L18,4.41,32.29,18.71a1,1,0,0,0,1.41-1.41Z"></path><path class="clr-i-outline clr-i-outline-path-2" d="M28,32h-5V22H13V32H8V18L6,20V32a2,2,0,0,0,2,2h7V24h6V34h7a2,2,0,0,0,2-2V19.76l-2-2Z"></path> + <rect x="0" y="0" width="36" height="36" fill-opacity="0"/> </svg> diff --git a/src/shared/img/svg/plant.svg b/src/shared/img/svg/plant.svg deleted file mode 100644 index cecc5817..00000000 --- a/src/shared/img/svg/plant.svg +++ /dev/null @@ -1,10 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g clip-path="url(#clip0_732_558)"> -<path d="M20.4289 0.00258097C20.9687 -0.0359745 21.4412 0.361849 21.4952 0.9003C21.6452 2.39714 21.3794 4.80402 19.9433 6.67204C18.5817 8.44303 16.3101 9.55171 12.8846 9.165C12.8828 9.3002 12.8818 9.43311 12.8823 9.56386C12.8829 9.71855 12.8857 9.86405 12.8911 10H20.0001C20.2966 10 20.5779 10.1316 20.7679 10.3593C20.9578 10.5869 21.037 10.8872 20.984 11.1789L18.984 22.1789C18.8975 22.6544 18.4834 23 18.0001 23H6.0001C5.51681 23 5.10268 22.6544 5.01623 22.1789L3.01623 11.1789C2.96318 10.8872 3.04235 10.5869 3.23235 10.3593C3.42234 10.1316 3.70358 10 4.0001 10H10.86C10.8065 9.69423 10.7402 9.37631 10.6602 9.05159C8.07268 9.17289 6.26581 8.75545 5.03402 7.7858C3.65825 6.7028 3.23767 5.11468 3.01182 3.65271C2.93444 3.15179 3.24408 2.67218 3.73245 2.53652C6.59875 1.74033 8.60554 1.85059 10.016 3.048C10.6365 3.57476 11.0646 4.25294 11.3968 4.97031C11.7046 4.10126 12.1849 3.2891 12.9166 2.57953C14.4261 1.11578 16.8325 0.259471 20.4289 0.00258097ZM12.0198 12C12.0061 12.0003 11.9923 12.0003 11.9786 12H5.19831L6.83467 21H17.1655L18.8019 12H12.0198ZM12.9558 7.15981C15.9045 7.53657 17.4844 6.58895 18.3577 5.45304C19.1281 4.451 19.4534 3.16794 19.5196 2.09528C16.7783 2.41404 15.2142 3.13744 14.3089 4.01533C13.49 4.80942 13.0946 5.84324 12.9558 7.15981ZM6.2711 6.21429C6.9088 6.71628 8.01876 7.1045 10.0653 7.06997C9.92916 6.66077 9.79339 6.28897 9.6449 5.95048C9.36286 5.30752 9.06846 4.86706 8.7217 4.57269C8.17044 4.10471 7.21993 3.7967 5.16145 4.24145C5.37823 5.13002 5.70426 5.76808 6.2711 6.21429Z" fill="black"/> -</g> -<defs> -<clipPath id="clip0_732_558"> -<rect width="24" height="24" fill="white"/> -</clipPath> -</defs> -</svg> diff --git a/src/shared/img/svg/search.svg b/src/shared/img/svg/search.svg deleted file mode 100644 index 05834259..00000000 --- a/src/shared/img/svg/search.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M32 0H0V32H32V0Z" fill="white"/> -</svg> diff --git a/src/shared/img/svg/settings.svg b/src/shared/img/svg/settings.svg deleted file mode 100644 index 05834259..00000000 --- a/src/shared/img/svg/settings.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M32 0H0V32H32V0Z" fill="white"/> -</svg> diff --git a/src/shared/img/svg/truck.svg b/src/shared/img/svg/truck.svg deleted file mode 100644 index 4872b693..00000000 --- a/src/shared/img/svg/truck.svg +++ /dev/null @@ -1,10 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> -<path d="M13.0008 14.75H12.0008C11.5908 14.75 11.2508 14.41 11.2508 14C11.2508 13.59 11.5908 13.25 12.0008 13.25H13.0008C13.6908 13.25 14.2508 12.69 14.2508 12V2.75H6.00075C4.82075 2.75 3.74073 3.38998 3.16073 4.41998C2.96073 4.77998 2.50077 4.91002 2.14077 4.71002C1.78077 4.51002 1.65073 4.05 1.85073 3.69C2.69073 2.19 4.28075 1.25 6.00075 1.25H15.0008C15.4108 1.25 15.7508 1.59 15.7508 2V12C15.7508 13.52 14.5208 14.75 13.0008 14.75Z"/> -<path d="M19.001 20.75H18.001C17.591 20.75 17.251 20.41 17.251 20C17.251 19.31 16.691 18.75 16.001 18.75C15.311 18.75 14.751 19.31 14.751 20C14.751 20.41 14.411 20.75 14.001 20.75H10.001C9.59098 20.75 9.25098 20.41 9.25098 20C9.25098 19.31 8.69098 18.75 8.00098 18.75C7.31098 18.75 6.75098 19.31 6.75098 20C6.75098 20.41 6.41098 20.75 6.00098 20.75H5.00098C2.93098 20.75 1.25098 19.07 1.25098 17C1.25098 16.59 1.59098 16.25 2.00098 16.25C2.41098 16.25 2.75098 16.59 2.75098 17C2.75098 18.24 3.76098 19.25 5.00098 19.25H5.35095C5.68095 18.1 6.74098 17.25 8.00098 17.25C9.26098 17.25 10.321 18.1 10.651 19.25H13.361C13.691 18.1 14.751 17.25 16.011 17.25C17.271 17.25 18.3309 18.1 18.6609 19.25H19.001C20.241 19.25 21.251 18.24 21.251 17V14.75H19.001C18.041 14.75 17.251 13.96 17.251 13V10C17.251 9.04 18.031 8.25 19.001 8.25L17.931 6.38C17.711 5.99 17.291 5.75 16.841 5.75H15.751V12C15.751 13.52 14.521 14.75 13.001 14.75H12.001C11.591 14.75 11.251 14.41 11.251 14C11.251 13.59 11.591 13.25 12.001 13.25H13.001C13.691 13.25 14.251 12.69 14.251 12V5C14.251 4.59 14.591 4.25 15.001 4.25H16.841C17.831 4.25 18.741 4.78001 19.231 5.64001L20.941 8.63C21.071 8.86 21.071 9.15 20.941 9.38C20.811 9.61 20.561 9.75 20.291 9.75H19.001C18.861 9.75 18.751 9.86 18.751 10V13C18.751 13.14 18.861 13.25 19.001 13.25H22.001C22.411 13.25 22.751 13.59 22.751 14V17C22.751 19.07 21.071 20.75 19.001 20.75Z"/> -<path d="M8.00098 22.75C6.48098 22.75 5.25098 21.52 5.25098 20C5.25098 18.48 6.48098 17.25 8.00098 17.25C9.52098 17.25 10.751 18.48 10.751 20C10.751 21.52 9.52098 22.75 8.00098 22.75ZM8.00098 18.75C7.31098 18.75 6.75098 19.31 6.75098 20C6.75098 20.69 7.31098 21.25 8.00098 21.25C8.69098 21.25 9.25098 20.69 9.25098 20C9.25098 19.31 8.69098 18.75 8.00098 18.75Z"/> -<path d="M16.001 22.75C14.481 22.75 13.251 21.52 13.251 20C13.251 18.48 14.481 17.25 16.001 17.25C17.521 17.25 18.751 18.48 18.751 20C18.751 21.52 17.521 22.75 16.001 22.75ZM16.001 18.75C15.311 18.75 14.751 19.31 14.751 20C14.751 20.69 15.311 21.25 16.001 21.25C16.691 21.25 17.251 20.69 17.251 20C17.251 19.31 16.691 18.75 16.001 18.75Z"/> -<path d="M22.001 14.75H19.001C18.041 14.75 17.251 13.96 17.251 13V10C17.251 9.04 18.041 8.25 19.001 8.25H20.291C20.561 8.25 20.811 8.39 20.941 8.63L22.651 11.63C22.711 11.74 22.751 11.87 22.751 12V14C22.751 14.41 22.411 14.75 22.001 14.75ZM19.001 9.75C18.861 9.75 18.751 9.86 18.751 10V13C18.751 13.14 18.861 13.25 19.001 13.25H21.251V12.2L19.851 9.75H19.001Z"/> -<path d="M8.00098 8.75H2.00098C1.59098 8.75 1.25098 8.41 1.25098 8C1.25098 7.59 1.59098 7.25 2.00098 7.25H8.00098C8.41098 7.25 8.75098 7.59 8.75098 8C8.75098 8.41 8.41098 8.75 8.00098 8.75Z"/> -<path d="M6.00098 11.75H2.00098C1.59098 11.75 1.25098 11.41 1.25098 11C1.25098 10.59 1.59098 10.25 2.00098 10.25H6.00098C6.41098 10.25 6.75098 10.59 6.75098 11C6.75098 11.41 6.41098 11.75 6.00098 11.75Z"/> -<path d="M4.00098 14.75H2.00098C1.59098 14.75 1.25098 14.41 1.25098 14C1.25098 13.59 1.59098 13.25 2.00098 13.25H4.00098C4.41098 13.25 4.75098 13.59 4.75098 14C4.75098 14.41 4.41098 14.75 4.00098 14.75Z"/> -</svg> diff --git a/src/shared/img/svg/wallet.svg b/src/shared/img/svg/wallet.svg deleted file mode 100644 index 23a30d27..00000000 --- a/src/shared/img/svg/wallet.svg +++ /dev/null @@ -1,7 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> -<path d="M5 23.75C3.34 23.75 1.78 22.87 0.939999 21.44C0.489999 20.72 0.25 19.87 0.25 19C0.25 16.38 2.38 14.25 5 14.25C7.62 14.25 9.75 16.38 9.75 19C9.75 19.87 9.51 20.72 9.06 21.45C8.22 22.87 6.66 23.75 5 23.75ZM5 15.75C3.21 15.75 1.75 17.21 1.75 19C1.75 19.59 1.91 20.17 2.22 20.67C2.81 21.67 3.85 22.25 5 22.25C6.15 22.25 7.19 21.66 7.78 20.68C8.09 20.17 8.25 19.6 8.25 19C8.25 17.21 6.79 15.75 5 15.75Z"/> -<path d="M4.42988 20.7401C4.23988 20.7401 4.04988 20.6701 3.89988 20.5201L2.90988 19.5301C2.61988 19.2401 2.61988 18.76 2.90988 18.47C3.19988 18.18 3.67988 18.18 3.96988 18.47L4.44988 18.9501L6.04988 17.47C6.34988 17.19 6.82988 17.2101 7.10988 17.5101C7.38988 17.8101 7.36988 18.2901 7.06988 18.5701L4.93988 20.54C4.78988 20.67 4.60988 20.7401 4.42988 20.7401Z"/> -<path d="M6.19004 7.80995C5.95004 7.80995 5.73005 7.69995 5.58005 7.49995C5.41005 7.26995 5.39005 6.96992 5.52005 6.71992C5.69005 6.37992 5.93005 6.04995 6.24005 5.74995L9.49005 2.48994C11.15 0.839941 13.85 0.839941 15.51 2.48994L17.26 4.26997C18 4.99997 18.45 5.97997 18.5 7.01997C18.51 7.24997 18.42 7.46995 18.25 7.61995C18.08 7.76995 17.85 7.83994 17.63 7.79994C17.43 7.76994 17.22 7.75996 17 7.75996H7.00005C6.76005 7.75996 6.53005 7.77995 6.30005 7.80995C6.27005 7.80995 6.23004 7.80995 6.19004 7.80995ZM7.86005 6.24995H16.82C16.69 5.90995 16.48 5.59996 16.2 5.31996L14.44 3.53993C13.37 2.47993 11.62 2.47993 10.54 3.53993L7.86005 6.24995Z"/> -<path d="M17 22.75H7.62998C7.30998 22.75 7.02998 22.55 6.91998 22.26C6.80998 21.96 6.89998 21.63 7.13998 21.43C7.37998 21.23 7.59998 20.97 7.75998 20.69C8.07998 20.18 8.23998 19.6 8.23998 19.01C8.23998 17.22 6.77998 15.76 4.98998 15.76C4.05998 15.76 3.16998 16.16 2.54998 16.87C2.33998 17.1 2.00998 17.19 1.71998 17.08C1.42998 16.97 1.22998 16.69 1.22998 16.38V12C1.22998 8.92 3.12998 6.69001 6.07998 6.32001C6.34998 6.28001 6.65998 6.25 6.97998 6.25H16.98C17.22 6.25 17.53 6.26 17.85 6.31C20.8 6.65 22.73 8.89 22.73 12V17C22.75 20.44 20.44 22.75 17 22.75ZM9.17998 21.25H17C19.58 21.25 21.25 19.58 21.25 17V12C21.25 9.66 19.88 8.04998 17.66 7.78998C17.42 7.74998 17.21 7.75 17 7.75H6.99998C6.75998 7.75 6.52998 7.76999 6.29998 7.79999C4.09998 8.07999 2.74998 9.68 2.74998 12V14.82C3.42998 14.45 4.20998 14.25 4.99998 14.25C7.61998 14.25 9.74998 16.38 9.74998 19C9.74998 19.79 9.54998 20.57 9.17998 21.25Z"/> -<path d="M22 17.25H19C17.48 17.25 16.25 16.02 16.25 14.5C16.25 12.98 17.48 11.75 19 11.75H22C22.41 11.75 22.75 12.09 22.75 12.5C22.75 12.91 22.41 13.25 22 13.25H19C18.31 13.25 17.75 13.81 17.75 14.5C17.75 15.19 18.31 15.75 19 15.75H22C22.41 15.75 22.75 16.09 22.75 16.5C22.75 16.91 22.41 17.25 22 17.25Z"/> -</svg> diff --git a/src/widgets/Header/model/HeaderModel.ts b/src/widgets/Header/model/HeaderModel.ts index cfb65815..86594e7a 100644 --- a/src/widgets/Header/model/HeaderModel.ts +++ b/src/widgets/Header/model/HeaderModel.ts @@ -44,10 +44,12 @@ class HeaderModel { const logoutButton = this.view.getLogoutButton(); if (isUserLoggedIn) { this.view.getToProfileLink().setEnabled(); + this.view.getToAddressesLink().setEnabled(); logoutButton.setEnabled(); } else { logoutButton.setDisabled(); this.view.getToProfileLink().setDisabled(); + this.view.getToAddressesLink().setDisabled(); } } diff --git a/src/widgets/Header/view/HeaderView.ts b/src/widgets/Header/view/HeaderView.ts index d137cf74..7a611fe7 100644 --- a/src/widgets/Header/view/HeaderView.ts +++ b/src/widgets/Header/view/HeaderView.ts @@ -36,6 +36,8 @@ class HeaderView { private switchThemeCheckbox: InputModel; + private toAddressesLink: LinkModel; + private toCartLink: LinkModel; private toProfileLink: LinkModel; @@ -50,6 +52,7 @@ class HeaderView { this.toCartLink = this.createToCartLink(); this.toWishlistLink = this.createToWishlistLink(); this.toProfileLink = this.createToProfileLink(); + this.toAddressesLink = this.createToAddressesLink(); this.switchThemeCheckbox = this.createSwitchThemeCheckbox(); this.switchLanguageCheckbox = this.createSwitchLanguageCheckbox(); this.navigationWrapper = this.createNavigationWrapper(); @@ -148,10 +151,11 @@ class HeaderView { tag: 'div', }); this.navigationWrapper.append( - this.createSwitchLanguageLabel(), - this.logoutButton.getHTML(), this.toProfileLink.getHTML(), + this.toAddressesLink.getHTML(), this.createSwitchThemeLabel(), + this.createSwitchLanguageLabel(), + this.logoutButton.getHTML(), ); return this.navigationWrapper; @@ -228,6 +232,39 @@ class HeaderView { return label; } + private createToAddressesLink(): LinkModel { + this.toAddressesLink = new LinkModel({ + attrs: { + href: PAGE_ID.USER_ADDRESSES_PAGE, + }, + classes: [styles.addressesLink], + }); + + const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg'); + svg.append(createSVGUse(SVG_DETAILS.HOUSE)); + this.toAddressesLink.getHTML().append(svg); + + if (!getStore().getState().isUserLoggedIn) { + this.toAddressesLink.getHTML().classList.add(styles.hidden); + } + + observeStore(selectIsUserLoggedIn, () => + this.toAddressesLink.getHTML().classList.toggle(styles.hidden, !getStore().getState().isUserLoggedIn), + ); + + this.toAddressesLink + .getHTML() + .classList.toggle(styles.addressesLinkActive, RouterModel.getCurrentPage() === PAGE_ID.USER_ADDRESSES_PAGE); + + observeStore(selectCurrentPage, () => + this.toAddressesLink + .getHTML() + .classList.toggle(styles.addressesLinkActive, RouterModel.getCurrentPage() === PAGE_ID.USER_ADDRESSES_PAGE), + ); + + return this.toAddressesLink; + } + private createToCartLink(): LinkModel { this.toCartLink = new LinkModel({ attrs: { @@ -296,7 +333,7 @@ class HeaderView { }); const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg'); - svg.append(createSVGUse(SVG_DETAILS.FILL_HEART)); + svg.append(createSVGUse(SVG_DETAILS.HEART)); this.toWishlistLink.getHTML().append(svg); @@ -355,6 +392,10 @@ class HeaderView { return this.switchLanguageCheckbox; } + public getToAddressesLink(): LinkModel { + return this.toAddressesLink; + } + public getToCartLink(): LinkModel { return this.toCartLink; } diff --git a/src/widgets/Header/view/headerView.module.scss b/src/widgets/Header/view/headerView.module.scss index db77a30d..44dbc877 100644 --- a/src/widgets/Header/view/headerView.module.scss +++ b/src/widgets/Header/view/headerView.module.scss @@ -44,7 +44,7 @@ gap: var(--medium-offset); @media (max-width: 768px) { - top: calc(var(--extra-small-offset) * 6.1); + top: calc(var(--extra-small-offset) * 6); grid-row: 2; width: 45%; } @@ -90,12 +90,13 @@ .logoutButton { @include green-btn; - order: 4; + order: 5; } .cartLink, .wishListLink, -.profileLink { +.profileLink, +.addressesLink { position: relative; display: flex; align-items: center; @@ -178,7 +179,7 @@ } .profileLink { - order: 2; + order: 1; svg { stroke: var(--noble-gray-1100); @@ -194,10 +195,16 @@ } } -.profileLinkActive { +.addressesLink { + order: 2; +} + +.profileLinkActive, +.addressesLinkActive { pointer-events: none; svg { + fill: var(--steam-green-800); stroke: var(--steam-green-800); } } @@ -320,6 +327,7 @@ .switchThemeLabel { position: relative; display: inline-block; + order: 3; width: var(--large-offset); height: calc(calc(var(--small-offset) / 1.5) + var(--extra-small-offset)); cursor: pointer; @@ -392,7 +400,7 @@ .switchLanguageLabel { position: relative; display: inline-block; - order: 3; + order: 4; width: var(--large-offset); height: calc(calc(var(--small-offset) / 1.5) + var(--extra-small-offset)); cursor: pointer; diff --git a/src/widgets/ProductOrder/view/productOrderView.module.scss b/src/widgets/ProductOrder/view/productOrderView.module.scss index a8eda741..0555b58e 100644 --- a/src/widgets/ProductOrder/view/productOrderView.module.scss +++ b/src/widgets/ProductOrder/view/productOrderView.module.scss @@ -1,7 +1,5 @@ @import 'src/app/styles/mixins'; -$color: var(--steam-green-800); - .style { display: block; } @@ -112,8 +110,12 @@ $color: var(--steam-green-800); } } +$color: var(--steam-green-800); + .nameLink { @include link(0 0, $color); + + text-transform: none; } .nameCell { diff --git a/src/widgets/UserAddresses/model/UserAddressesModel.ts b/src/widgets/UserAddresses/model/UserAddressesModel.ts index 4440839d..e8fe3f5c 100644 --- a/src/widgets/UserAddresses/model/UserAddressesModel.ts +++ b/src/widgets/UserAddresses/model/UserAddressesModel.ts @@ -37,14 +37,7 @@ class UserAddressesModel { }; const createAddress = (activeTypes: AddressTypeType[], inactiveTypes?: AddressTypeType[]): UserAddressModel => - new UserAddressModel( - address, - activeTypes, - (isDisabled: boolean) => { - this.view.toggleState(isDisabled); - }, - inactiveTypes, - ); + new UserAddressModel(address, activeTypes, inactiveTypes); const newAddress = determineNewAddress(addressesContainsID, defaultContainsID, user, createAddress); @@ -74,8 +67,6 @@ class UserAddressesModel { } } catch (error) { showErrorMessage(error); - } finally { - this.view.toggleState(false); } } @@ -104,14 +95,6 @@ class UserAddressesModel { public getHTML(): HTMLElement { return this.view.getHTML(); } - - public hide(): void { - this.view.hide(); - } - - public show(): void { - this.view.show(); - } } export default UserAddressesModel; diff --git a/src/widgets/UserAddresses/view/UserAddressesView.ts b/src/widgets/UserAddresses/view/UserAddressesView.ts index c4d66c82..1bbcfa27 100644 --- a/src/widgets/UserAddresses/view/UserAddressesView.ts +++ b/src/widgets/UserAddresses/view/UserAddressesView.ts @@ -78,7 +78,7 @@ class UserAddressView { private createHTML(): HTMLDivElement { this.addressesWrapper = createBaseElement({ - cssClasses: [styles.addressesWrapper, styles.hidden], + cssClasses: [styles.addressesWrapper], tag: 'div', }); this.addressesWrapper.append( @@ -112,18 +112,6 @@ class UserAddressView { public getHTML(): HTMLDivElement { return this.addressesWrapper; } - - public hide(): void { - this.addressesWrapper.classList.add(styles.hidden); - } - - public show(): void { - this.addressesWrapper.classList.remove(styles.hidden); - } - - public toggleState(isDisabled: boolean): void { - this.addressesListWrapper.classList.toggle(styles.disabled, isDisabled); - } } export default UserAddressView; diff --git a/src/widgets/UserAddresses/view/userAddressesView.module.scss b/src/widgets/UserAddresses/view/userAddressesView.module.scss index 94cf7114..4aed2ed5 100644 --- a/src/widgets/UserAddresses/view/userAddressesView.module.scss +++ b/src/widgets/UserAddresses/view/userAddressesView.module.scss @@ -8,6 +8,7 @@ padding: var(--small-offset); width: 100%; height: max-content; + max-width: 100%; font: var(--extra-regular-font); letter-spacing: 1px; color: var(--noble-gray-900); diff --git a/src/widgets/UserInfo/view/userInfoView.module.scss b/src/widgets/UserInfo/view/userInfoView.module.scss index f9567b4f..50fcc747 100644 --- a/src/widgets/UserInfo/view/userInfoView.module.scss +++ b/src/widgets/UserInfo/view/userInfoView.module.scss @@ -4,20 +4,20 @@ position: relative; display: grid; align-items: center; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(6, auto); - margin: 0 var(--small-offset); + grid-template-rows: 5.5rem auto auto auto auto 5.5rem; + margin: 0 auto; padding: var(--small-offset); - width: 60%; - font: var(--extra-regular-font); + width: 65%; + font: var(--basic-regular-font); line-break: break-all; letter-spacing: var(--one); color: var(--noble-gray-900); background-color: var(--steam-green-900); - gap: var(--small-offset); + gap: var(--extra-small-offset); @media (max-width: 768px) { - margin-left: 0; + margin: 0; + padding: var(--extra-small-offset); width: 100%; } } @@ -29,27 +29,22 @@ .editPasswordButton { @include round-btn; - grid-column: 2; grid-row: 1; margin-right: 0; margin-left: auto; } .info { - grid-column: 2 span; + border-radius: var(--medium-br); + padding: var(--extra-small-offset); max-width: 100%; word-break: break-all; + color: var(--steam-green-400); + background: var(--white-tr); } .editInfoButton { @include green-btn; - grid-column: 2 span; grid-row: 6; } - -.hidden { - display: none; - opacity: 0; - visibility: hidden; -}