feat: update user profile styles

stardustmeg · Jun 13, 2024 · a2e7cd3 · a2e7cd3
1 parent 85a83d8
commit a2e7cd3
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 100 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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;
-}