More theming work for the web app • token update

AnselmMarie · Sep 17, 2024 · 4b2e9ae · 4b2e9ae
1 parent b0ac073
commit 4b2e9ae
Show file tree

Hide file tree

Showing 35 changed files with 337 additions and 108 deletions.
diff --git a/libs/ds-tokens/src/imported/design-tokens.tokens.json b/libs/ds-tokens/src/imported/design-tokens.tokens.json
@@ -176,6 +176,22 @@
             "exportKey": "variables"
           }
         }
+      },
+      "900-dark": {
+        "type": "color",
+        "value": "#ffffffff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:486:5189",
+            "exportKey": "variables"
+          }
+        }
       }
     },
     "blue": {

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,6 +25,15 @@
   height: 115px;
 }
 
+.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;
+}
+
 .sep {
   background-color: var(--theme-netural-400);
   width: 100%;

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
@@ -48,7 +48,8 @@ const CartModal = (): ReactElement => {
                   >
                     {pricingFormatUSD(el?.price)}
                   </UiTypography>
-                  <UiElementLayout>
+
+                  <UiElementLayout className={styles.quantityWrapper}>
                     <UiIcon
                       icon={IconTypeEnum.ICON_MINUS}
                       onClick={() => onHandleRemoveFromCart(el?.id)}

diff --git a/libs/features/src/lib/navigation/header/header.module.css b/libs/features/src/lib/navigation/header/header.module.css
@@ -21,6 +21,7 @@
   align-items: center;
   border-radius: var(--theme-radius-pill);
   background: var(--theme-netural-200);
+  box-shadow: inset 0 3px 3px rgb(0 0 0 / 10%);
 }
 
 .navTitle {
@@ -29,13 +30,43 @@
 
 .iconCart {
   margin-left: var(--theme-spacing-15);
+  stroke: var(--theme-blue-600);
 }
 
 .logo,
 .switchTheme {
   display: none;
 }
 
+.switchTheme svg {
+  stroke: var(--theme-blue-600);
+}
+
+.cartWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.icon {
+  stroke: var(--theme-blue-600);
+}
+
+.counterWrapper {
+  border-radius: var(--theme-radius-circle);
+  background-color: var(--theme-yellow-600);
+  min-width: 23px;
+  min-height: 23px;
+  text-align: center;
+  display: inline-block;
+  padding: 5px 12px;
+  position: absolute;
+  right: -11px;
+  top: -15px;
+  cursor: pointer;
+}
+
 @media only screen and (min-width: 830px) {
   .logo {
     display: block;

diff --git a/libs/features/src/lib/navigation/header/header.view.tsx b/libs/features/src/lib/navigation/header/header.view.tsx
@@ -11,6 +11,7 @@ import {
   TypographyTypeEnum,
   UiContainer,
   UiHideInMobile,
+  IconColorEnum,
 } from '@pokemon-pet-shop/ui';
 
 import { UiSwitchTheme } from '../component/switch.theme';
@@ -38,16 +39,24 @@ const Header = () => {
           <UiTypography typographyType={TypographyTypeEnum.SPAN} className={newStyles.navTitle}>
             PETS
           </UiTypography>
-          <UiInput appendIcon={IconTypeEnum.ICON_SEARCH} />
+          <UiInput iconClassname={styles.icon} appendIcon={IconTypeEnum.ICON_SEARCH} />
         </UiElementLayout>
 
         <UiHideInMobile>
           <UiSwitchTheme className={newStyles.switchTheme} />
         </UiHideInMobile>
 
-        <UiElementLayout>
-          <UiTypography>{data?.counter}</UiTypography>
-          <UiIcon classNameIcon={newStyles.iconCart} onClick={onHandleCartModalClick} />
+        <UiElementLayout className={styles.cartWrapper}>
+          {data?.counter ? (
+            <UiElementLayout className={styles.counterWrapper} onClick={onHandleCartModalClick}>
+              <UiTypography typographyType={TypographyTypeEnum.SPAN}>{data?.counter}</UiTypography>
+            </UiElementLayout>
+          ) : null}
+          <UiIcon
+            classNameIcon={newStyles.iconCart}
+            color={IconColorEnum.BLUE}
+            onClick={onHandleCartModalClick}
+          />
         </UiElementLayout>
       </UiContainer>
     </UiElementLayout>

diff --git a/...eatures/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.interface.ts b/...eatures/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.interface.ts
@@ -5,4 +5,5 @@ export interface PokemonAbilityNameProps {
   typeData: any;
   getThemeClass: string;
   showAtkLine?: boolean;
+  displayInDetail?: boolean;
 }
diff --git a/.../features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css b/.../features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css
@@ -4,7 +4,8 @@
   justify-items: center;
   width: 100%;
   align-items: center;
-  margin-bottom: var(--theme-spacing-5);
+  color: var(--theme-netural-100);
+  margin-bottom: var(--theme-spacing-10);
 }
 
 .atkLine {
@@ -22,23 +23,31 @@
 }
 
 .atkText {
-  font-size: 13px;
+  font-size: var(--theme-font-13);
+}
+
+.atkWrapperDetailModal {
+  color: var(--theme-netural-900);
+  margin-bottom: var(--theme-spacing-15);
+  height: auto;
+}
+
+.atkCircleDetailModal {
+  height: 35px;
+  width: 35px;
+  margin-right: var(--theme-spacing-10);
+}
+
+.atkTextDetailModal {
+  color: var(--theme-netural-900);
+  font-size: var(--theme-font-18);
 }
 
 @media only screen and (min-width: 830px) {
   .atkWrapperWithAtkLine {
     margin-left: -15px;
   }
 
-  /* .atkWrapper {
-    display: flex;
-    height: 17px;
-    justify-items: center;
-    width: 100%;
-    align-items: center;
-    margin-bottom: var(--theme-spacing-5);
-  } */
-
   .atkLine {
     height: 100%;
     width: 30px;
@@ -48,20 +57,6 @@
   .atkCircleWithAtkLine {
     margin-left: -10px;
   }
-
-  /* .atkCircle {
-    height: 17px;
-    width: 17px;
-    border-radius: var(--theme-radius-circle);
-    margin-right: var(--theme-spacing-5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  } */
-
-  .atkText {
-    font-size: 10px;
-  }
 }
 
 /**

diff --git a/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx b/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx
@@ -18,8 +18,10 @@ const PokemonAbilityName = ({
   typeData,
   getThemeClass = '',
   showAtkLine = true,
+  displayInDetail = false,
 }: PokemonAbilityNameProps): ReactElement => {
   const { newStyles } = useRenderStyles(styles);
+
   const isAtkLineShownCircleClass = useMemo(() => {
     return showAtkLine ? newStyles?.atkCircleWithAtkLine : '';
   }, [showAtkLine, newStyles]);
@@ -28,32 +30,59 @@ const PokemonAbilityName = ({
     return showAtkLine ? newStyles?.atkWrapperWithAtkLine : '';
   }, [showAtkLine, newStyles]);
 
+  const formatName = useMemo(() => {
+    const splitName = abilityData?.ability?.name.split('-');
+
+    const capitalizeName = splitName.map((el) => {
+      return el?.replace(/^\w/, (el) => {
+        return el.toUpperCase();
+      });
+    });
+
+    return capitalizeName.join(' ');
+  }, [abilityData?.ability?.name]);
+
   return (
-    <UiElementLayout className={classNamesUtil(newStyles.atkWrapper, isAtkLineShownWrapperClass)}>
+    <UiElementLayout
+      className={classNamesUtil(
+        newStyles.atkWrapper,
+        displayInDetail ? newStyles.atkWrapperDetailModal : '',
+        isAtkLineShownWrapperClass
+      )}
+    >
       {showAtkLine ? (
         <UiHideInMobile>
           <UiElementLayout
-            className={classNamesUtil(newStyles.atkLine, newStyles?.[`${getThemeClass}AtkLine`])}
+            className={classNamesUtil(
+              newStyles.atkLine,
+              displayInDetail ? newStyles.atkLineDetailModal : '',
+              newStyles?.[`${getThemeClass}AtkLine`]
+            )}
           />
         </UiHideInMobile>
       ) : null}
       <UiElementLayout
         className={classNamesUtil(
           newStyles.atkCircle,
+          displayInDetail ? newStyles.atkCircleDetailModal : '',
           isAtkLineShownCircleClass,
           newStyles?.[`${getThemeClass}AtkCircle`]
         )}
       >
-        <UiIconPokeType type={typeData?.types?.[0]?.type?.name} size="10" />
+        <UiIconPokeType
+          type={typeData?.types?.[0]?.type?.name}
+          size={displayInDetail ? '18' : '10'}
+        />
       </UiElementLayout>
       <UiTypography
         className={classNamesUtil(
           newStyles.atkText,
+          displayInDetail ? newStyles.atkTextDetailModal : '',
           newStyles?.[`${getThemeClass}ContentCardText`]
         )}
         typographyType={TypographyTypeEnum.SPAN}
       >
-        {abilityData?.ability?.name}
+        {formatName}
       </UiTypography>
     </UiElementLayout>
   );

diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css
@@ -2,15 +2,14 @@
   min-width: 352px;
   height: 154px;
   display: flex;
-  padding: 5px;
+  padding: var(--theme-spacing-5);
   border-radius: var(--theme-radius-8);
   flex-direction: row;
   position: relative;
 }
 
 .imgCardWrapper {
   max-width: 115px;
-  background: red;
   border-radius: var(--theme-radius-8);
   padding: var(--theme-spacing-5);
   display: flex;
@@ -37,14 +36,16 @@
 .cardSubHeadlineWrapper {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--theme-spacing-10);
 }
 
 .cardSubHeadline {
-  font-size: 10px;
+  font-size: var(--theme-font-10);
 }
 
 .cardHeadline {
-  font-size: 18px;
+  font-size: var(--theme-font-18);
 }
 
 .btnWrapper {
@@ -91,12 +92,8 @@
     justify-content: space-between;
   }
 
-  .cardSubHeadline {
-    font-size: 9px;
-  }
-
   .cardHeadline {
-    font-size: 16px;
+    font-size: var(--theme-font-16);
   }
 
   .contentCardWrapper {

diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx
@@ -1,4 +1,4 @@
-import { memo, ReactElement } from 'react';
+import { memo, ReactElement, useMemo } from 'react';
 
 import { PokemonDetailAbilityObj } from '@pokemon-pet-shop/typing';
 import {
@@ -22,6 +22,12 @@ import usePokemonCardLogic from './use.pokemon.card.logic';
 const PokemonCard = ({ data }: CardProps): ReactElement => {
   const { getThemeClass, onHandleOpenDetailModalClick } = usePokemonCardLogic(data);
 
+  const capitalizeName = useMemo(() => {
+    return data?.name.replace(/^\w/, (el) => {
+      return el.toUpperCase();
+    });
+  }, [data?.name]);
+
   return (
     <UiCard className={classNamesUtil(styles.cardWrapper, styles?.[`${getThemeClass}Wrapper`])}>
       <UiElementLayout className={styles.imgCardWrapper}>
@@ -43,12 +49,12 @@ const PokemonCard = ({ data }: CardProps): ReactElement => {
           <UiElementLayout className={styles.cardSubHeadlineWrapper}>
             <UiTypography
               className={classNamesUtil(
-                styles.cardSubHeadline,
+                styles.cardHeadline,
                 styles?.[`${getThemeClass}ContentCardText`]
               )}
-              typographyType={TypographyTypeEnum.SPAN}
+              typographyType={TypographyTypeEnum.H1}
             >
-              Basic Pokemon
+              {capitalizeName}
             </UiTypography>
             <UiTypography
               className={classNamesUtil(
@@ -60,15 +66,6 @@ const PokemonCard = ({ data }: CardProps): ReactElement => {
               NO. {data?.id}
             </UiTypography>
           </UiElementLayout>
-          <UiTypography
-            className={classNamesUtil(
-              styles.cardHeadline,
-              styles?.[`${getThemeClass}ContentCardText`]
-            )}
-            typographyType={TypographyTypeEnum.H1}
-          >
-            {data?.name}
-          </UiTypography>
 
           {(data?.abilities || []).map(
             (abilityObj: PokemonDetailAbilityObj, i: number): ReactElement | null => {

diff --git a/...rc/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.module.css b/...rc/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.module.css
@@ -1,3 +1,4 @@
 .contentCurve {
   margin-top: -60px;
+  text-align: center;
 }