From a2e7cd30732aeeee46bc305f67abfd772c4d637e Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Thu, 13 Jun 2024 16:00:03 +0300 Subject: [PATCH] feat: update user profile styles --- src/app/styles/variables.scss | 3 +- .../view/userAddressView.module.scss | 2 +- .../view/userAddressesPageView.module.scss | 9 +- src/shared/img/svg/house.svg | 83 +------------------ .../view/productOrderView.module.scss | 6 +- .../view/userAddressesView.module.scss | 1 + .../UserInfo/view/userInfoView.module.scss | 23 ++--- 7 files changed, 27 insertions(+), 100 deletions(-) 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/view/userAddressView.module.scss b/src/entities/UserAddress/view/userAddressView.module.scss index b150ec7c..60548319 100644 --- a/src/entities/UserAddress/view/userAddressView.module.scss +++ b/src/entities/UserAddress/view/userAddressView.module.scss @@ -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/pages/UserAddressesPage/view/userAddressesPageView.module.scss b/src/pages/UserAddressesPage/view/userAddressesPageView.module.scss index 0da5eafb..595a1dfc 100644 --- a/src/pages/UserAddressesPage/view/userAddressesPageView.module.scss +++ b/src/pages/UserAddressesPage/view/userAddressesPageView.module.scss @@ -3,8 +3,15 @@ .userAddressesPage { position: relative; display: block; - padding: 0 var(--small-offset); + 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 { diff --git a/src/shared/img/svg/house.svg b/src/shared/img/svg/house.svg index 3e6d7403..e97336dc 100644 --- a/src/shared/img/svg/house.svg +++ b/src/shared/img/svg/house.svg @@ -1,80 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + 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/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 72cfb7d4..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,14 +29,12 @@ .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%; @@ -48,12 +46,5 @@ .editInfoButton { @include green-btn; - grid-column: 2 span; grid-row: 6; } - -.hidden { - display: none; - opacity: 0; - visibility: hidden; -}