Updating mobile app styles • refactoring code

AnselmMarie · Sep 21, 2024 · 5abf5ca · 5abf5ca
1 parent e22d056
commit 5abf5ca
Show file tree

Hide file tree

Showing 17 changed files with 677 additions and 163 deletions.
diff --git a/libs/ds-tokens/style-dictionary.config.ts b/libs/ds-tokens/style-dictionary.config.ts
@@ -43,7 +43,7 @@ const config: Config | Config[] = {
 
     js: {
       transformGroup: 'ts',
-      transforms: ['custom/dimension-to-pixel', 'custom/name/native'],
+      transforms: ['custom/name/native'],
       buildPath: 'build/ts/',
       files: [
         {

diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.module.css b/libs/features/src/lib/cart/cart.modal/cart.modal.module.css
@@ -25,13 +25,28 @@
   height: 115px;
 }
 
+.itemName {
+  font-size: var(--theme-font-18);
+  margin-bottom: var(--theme-spacing-2);
+}
+
+.price {
+  font-size: var(--theme-font-18);
+}
+
 .quantityWrapper {
   display: flex;
   background-color: var(--theme-netural-200);
   gap: var(--theme-spacing-10);
   border-radius: var(--theme-radius-pill);
   width: fit-content;
   align-items: center;
+  box-shadow: inset 0 3px 3px rgb(0 0 0 / 10%);
+  margin-top: var(--theme-spacing-5);
+}
+
+.quantityIcon {
+  padding: var(--theme-spacing-10);
 }
 
 .sep {

diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx b/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx
@@ -11,7 +11,8 @@ import {
   mobSrcTypeEnum,
   TypographyTypeEnum,
 } from '@pokemon-pet-shop/ui';
-import { pricingFormatUSD } from '@pokemon-pet-shop/utils';
+import { globalStyles } from '@pokemon-pet-shop/ui/styles/global';
+import { capitalizeNameUtil, classNamesUtil, pricingFormatUSD } from '@pokemon-pet-shop/utils';
 
 import CartModalScroll from './cart.modal.content.scroll';
 import { styles } from './cart.modal.module';
@@ -37,26 +38,28 @@ const CartModal = (): ReactElement => {
                 />
                 <UiElementLayout className={newStyles?.middleRow}>
                   <UiTypography
-                    className={newStyles.cardHeadline}
+                    className={newStyles.itemName}
                     typographyType={TypographyTypeEnum.H1}
                   >
-                    {el?.name}
+                    {capitalizeNameUtil(el?.name)}
                   </UiTypography>
                   <UiTypography
                     typographyType={TypographyTypeEnum.SPAN}
-                    className={newStyles.price}
+                    className={classNamesUtil(newStyles.price, globalStyles.fontBold)}
                   >
                     {pricingFormatUSD(el?.price)}
                   </UiTypography>
 
                   <UiElementLayout className={styles.quantityWrapper}>
                     <UiIcon
                       icon={IconTypeEnum.ICON_MINUS}
+                      classNameIcon={styles.quantityIcon}
                       onClick={() => onHandleRemoveFromCart(el?.id)}
                     />
                     <UiTypography>{el?.quantity}</UiTypography>
                     <UiIcon
                       icon={IconTypeEnum.ICON_PLUS}
+                      classNameIcon={styles.quantityIcon}
                       onClick={() => onHandleAddToCart(el?.id)}
                     />
                   </UiElementLayout>

diff --git a/libs/features/src/lib/navigation/header/header.module.native.ts b/libs/features/src/lib/navigation/header/header.module.native.ts
@@ -1,45 +1,87 @@
+import {
+  THEME_NETURAL_100,
+  THEME_NETURAL_200,
+  THEME_RADIUS_CIRCLE,
+  THEME_RADIUS_PILL,
+  THEME_SPACING_10,
+  THEME_SPACING_15,
+  THEME_SPACING_5,
+  THEME_YELLOW_600,
+} from '@pokemon-pet-shop/ui/styles/var';
 import { StyleSheet } from 'react-native';
 
 export const styles = () =>
   StyleSheet.create({
     headerWrapper: {
       justifyContent: 'space-between',
-      paddingTop: 10,
-      paddingLeft: 0,
-      paddingRight: 0,
+      paddingTop: THEME_SPACING_10,
+      shadowOffset: {
+        width: 2,
+        height: 8,
+      },
+      shadowColor: '#062a49',
+      shadowOpacity: 0.15,
+      shadowRadius: 5,
+      elevation: 2,
       // boxShadow: 0 2px 8px 1px rgba(6, 42, 73, 0.15),
+      backgroundColor: THEME_NETURAL_100,
     },
     container: {
       display: 'flex',
       flexDirection: 'row',
-      backgroundColor: 'red',
       alignItems: 'center',
+      paddingLeft: THEME_SPACING_15,
+      paddingRight: THEME_SPACING_15,
     },
     nav: {
       display: 'flex',
       flexDirection: 'row',
       flexGrow: 1,
       marginTop: 0,
-      marginBottom: 0,
-      marginLeft: 15,
-      marginRight: 15,
-      paddingTop: 10,
-      paddingBottom: 10,
-      paddingLeft: 15,
-      paddingRight: 15,
+      marginBottom: THEME_SPACING_15,
+      marginLeft: THEME_SPACING_15,
+      marginRight: THEME_SPACING_15,
+      paddingTop: THEME_SPACING_10,
+      paddingBottom: THEME_SPACING_10,
+      paddingLeft: THEME_SPACING_15,
+      paddingRight: THEME_SPACING_15,
       alignItems: 'center',
-      borderRadius: 100,
-      backgroundColor: 'grey',
+      borderRadius: THEME_RADIUS_PILL,
+      backgroundColor: THEME_NETURAL_200,
+      // box-shadow: inset 0 3px 3px rgb(0 0 0 / 10%);
     },
     navTitle: {
-      marginRight: 10,
+      marginRight: THEME_SPACING_10,
     },
     iconCart: {
-      marginLeft: 15,
+      marginLeft: THEME_SPACING_15,
     },
     logo: {},
     switchTheme: {
       display: 'none',
     },
-    iconMenu: {},
+    cartWrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+    },
+    counterWrapper: {
+      borderRadius: THEME_RADIUS_CIRCLE,
+      backgroundColor: THEME_YELLOW_600,
+      minWidth: 23,
+      minHeight: 23,
+      textAlign: 'center',
+      paddingTop: THEME_SPACING_5,
+      paddingBottom: THEME_SPACING_5,
+      paddingLeft: THEME_SPACING_10,
+      paddingRight: THEME_SPACING_10,
+      position: 'absolute',
+      right: -11,
+      top: -15,
+      cursor: 'pointer',
+    },
+    counterText: {
+      textAlign: 'center',
+    },
   });
diff --git a/libs/features/src/lib/navigation/header/header.view.tsx b/libs/features/src/lib/navigation/header/header.view.tsx
@@ -39,17 +39,22 @@ const Header = () => {
           <UiTypography typographyType={TypographyTypeEnum.SPAN} className={newStyles.navTitle}>
             PETS
           </UiTypography>
-          <UiInput iconClassname={styles.icon} appendIcon={IconTypeEnum.ICON_SEARCH} />
+          <UiInput iconClassname={newStyles.icon} appendIcon={IconTypeEnum.ICON_SEARCH} />
         </UiElementLayout>
 
         <UiHideInMobile>
           <UiSwitchTheme className={newStyles.switchTheme} />
         </UiHideInMobile>
 
-        <UiElementLayout className={styles.cartWrapper}>
+        <UiElementLayout className={newStyles.cartWrapper}>
           {data?.counter ? (
-            <UiElementLayout className={styles.counterWrapper} onClick={onHandleCartModalClick}>
-              <UiTypography typographyType={TypographyTypeEnum.SPAN}>{data?.counter}</UiTypography>
+            <UiElementLayout className={newStyles.counterWrapper} onClick={onHandleCartModalClick}>
+              <UiTypography
+                typographyType={TypographyTypeEnum.SPAN}
+                className={newStyles.counterText}
+              >
+                {data?.counter}
+              </UiTypography>
             </UiElementLayout>
           ) : null}
           <UiIcon