Changing how the cart icon works • React Native button changes

AnselmMarie · Nov 9, 2024 · d6bd48f · d6bd48f
1 parent 5757a9e
commit d6bd48f
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 56 deletions.
diff --git a/libs/features/src/lib/navigation/header/header.module.css b/libs/features/src/lib/navigation/header/header.module.css
@@ -64,6 +64,14 @@
   position: relative;
 }
 
+.cartOverlayWrapper {
+  position: absolute;
+  width: 51px;
+  height: 47px;
+  z-index: 13;
+  top: -14px;
+}
+
 .icon {
   stroke: var(--theme-blue-600-mode);
 }

diff --git a/libs/features/src/lib/navigation/header/header.module.native.ts b/libs/features/src/lib/navigation/header/header.module.native.ts
@@ -79,6 +79,14 @@ export const styles = (varThemeMode: any) =>
       alignItems: 'center',
       position: 'relative',
     },
+    cartOverlayWrapper: {
+      position: 'absolute',
+      width: '100%',
+      height: 38,
+      zIndex: 1,
+      top: -40,
+      right: -17,
+    },
     counterWrapper: {
       borderRadius: THEME_RADIUS_CIRCLE,
       backgroundColor: THEME_YELLOW_600,
@@ -90,9 +98,9 @@ export const styles = (varThemeMode: any) =>
       paddingLeft: THEME_SPACING_10,
       paddingRight: THEME_SPACING_10,
       position: 'absolute',
-      right: -25,
-      top: -45,
-      zIndex: 1,
+      right: -8,
+      top: -7,
+      zIndex: 0,
       cursor: 'pointer',
     },
     counterText: {

diff --git a/libs/features/src/lib/navigation/header/header.view.tsx b/libs/features/src/lib/navigation/header/header.view.tsx
@@ -52,12 +52,9 @@ const Header = () => {
           </UiHideInMobile>
 
           <UiElementLayout className={newStyles.cartWrapper}>
-            <UiIcon classNameIcon={newStyles.iconCart} onClick={onHandleCartModalClick} />
+            <UiIcon classNameIcon={newStyles.iconCart} />
             {data?.counter ? (
-              <UiElementLayout
-                className={newStyles.counterWrapper}
-                onClick={onHandleCartModalClick}
-              >
+              <UiElementLayout className={newStyles.counterWrapper}>
                 <UiTypography
                   typographyType={TypographyTypeEnum.SPAN}
                   className={newStyles.counterText}
@@ -66,6 +63,10 @@ const Header = () => {
                 </UiTypography>
               </UiElementLayout>
             ) : null}
+            <UiElementLayout
+              className={newStyles.cartOverlayWrapper}
+              onClick={onHandleCartModalClick}
+            />
           </UiElementLayout>
         </UiElementLayout>
       </UiContainer>

diff --git a/libs/ui/src/lib-base/ui/button/button.element.view.native.tsx b/libs/ui/src/lib-base/ui/button/button.element.view.native.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 import { useRenderStyles } from '@pokemon-pet-shop/hooks';
 import { classNamesUtil } from '@pokemon-pet-shop/utils';
-import { TouchableHighlight, Text } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
 
 import { UiElementLayout } from '../element.layout';
 import { UiIcon } from '../icon';
@@ -25,13 +25,7 @@ const ButtonElement = ({
   const { newStyles } = useRenderStyles(styles);
 
   return (
-    <TouchableHighlight
-      // activeOpacity={0.6}
-      // underlayColor="#DDDDDD"
-      style={className}
-      disabled={isDisabled || isLoading}
-      onPress={onClick}
-    >
+    <TouchableOpacity style={className} disabled={isDisabled || isLoading} onPress={onClick}>
       {isLoading ? (
         <UiElementLayout className={classNamesUtil(newStyles.buttonInnerIsLoadingWrapper)}>
           <UiSkeleton />
@@ -43,7 +37,7 @@ const ButtonElement = ({
           {appendIcon ? <UiIcon icon={appendIcon} /> : null}
         </UiElementLayout>
       )}
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx b/libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
 
-import { TouchableHighlight, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import { ElementLayoutProps } from './element.layout.interface';
 
@@ -11,9 +11,9 @@ const ElementLayout = ({
 }: PropsWithChildren<ElementLayoutProps>): ReactElement => {
   if (onClick !== null) {
     return (
-      <TouchableHighlight onPress={onClick}>
+      <TouchableOpacity onPress={onClick}>
         <View style={className}>{children}</View>
-      </TouchableHighlight>
+      </TouchableOpacity>
     );
   }
   return <View style={className}>{children}</View>;

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.caret.down.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.caret.down.native.tsx
@@ -1,18 +1,18 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconCaretDown = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg width={size} height={size} fill={fill} stroke={stroke} viewBox="0 0 24 24">
         <Path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <Path d="M18 9c.852 0 1.297 .986 .783 1.623l-.076 .084l-6 6a1 1 0 0 1 -1.32 .083l-.094 -.083l-6 -6l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057v-.118l.005 -.058l.009 -.06l.01 -.052l.032 -.108l.027 -.067l.07 -.132l.065 -.09l.073 -.081l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01l.057 -.004l12.059 -.002z" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.github.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.github.native.tsx
@@ -1,18 +1,18 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconGithub = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg width={size} height={size} fill={fill} stroke={stroke} viewBox="0 0 24 24">
         <Path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <Path d="M5.315 2.1c.791 -.113 1.9 .145 3.333 .966l.272 .161l.16 .1l.397 -.083a13.3 13.3 0 0 1 4.59 -.08l.456 .08l.396 .083l.161 -.1c1.385 -.84 2.487 -1.17 3.322 -1.148l.164 .008l.147 .017l.076 .014l.05 .011l.144 .047a1 1 0 0 1 .53 .514a5.2 5.2 0 0 1 .397 2.91l-.047 .267l-.046 .196l.123 .163c.574 .795 .93 1.728 1.03 2.707l.023 .295l.007 .272c0 3.855 -1.659 5.883 -4.644 6.68l-.245 .061l-.132 .029l.014 .161l.008 .157l.004 .365l-.002 .213l-.003 3.834a1 1 0 0 1 -.883 .993l-.117 .007h-6a1 1 0 0 1 -.993 -.883l-.007 -.117v-.734c-1.818 .26 -3.03 -.424 -4.11 -1.878l-.535 -.766c-.28 -.396 -.455 -.579 -.589 -.644l-.048 -.019a1 1 0 0 1 .564 -1.918c.642 .188 1.074 .568 1.57 1.239l.538 .769c.76 1.079 1.36 1.459 2.609 1.191l.001 -.678l-.018 -.168a5.03 5.03 0 0 1 -.021 -.824l.017 -.185l.019 -.12l-.108 -.024c-2.976 -.71 -4.703 -2.573 -4.875 -6.139l-.01 -.31l-.004 -.292a5.6 5.6 0 0 1 .908 -3.051l.152 -.222l.122 -.163l-.045 -.196a5.2 5.2 0 0 1 .145 -2.642l.1 -.282l.106 -.253a1 1 0 0 1 .529 -.514l.144 -.047l.154 -.03z" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.menu.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.menu.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconMenu = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -23,7 +23,7 @@ const IconMenu = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement =
         <Path d="M4 12l16 0" />
         <Path d="M4 18l16 0" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.minus.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.minus.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconMinus = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -21,7 +21,7 @@ const IconMinus = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement
         <Path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <Path d="M5 12l14 0" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.moon.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.moon.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconMoon = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -21,7 +21,7 @@ const IconMoon = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement =
         <Path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <Path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.plus.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.plus.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconPlus = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -22,7 +22,7 @@ const IconPlus = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement =
         <Path d="M12 5l0 14" />
         <Path d="M5 12l14 0" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.pokeball.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.pokeball.native.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
 import { UiImage } from '../../image';
 import pokeBallImage from '../assets/poke.ball.png';
@@ -9,9 +9,9 @@ import { IconImageProps } from './icon.svg.interface';
 
 const IconPokeBall = ({ className, onClick }: IconImageProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <UiImage src={pokeBallImage} className={className} />
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.search.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.search.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconSearch = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -22,7 +22,7 @@ const IconSearch = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement
         <Path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
         <Path d="M21 21l-6 -6" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.shopping.cart.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.shopping.cart.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconShoppingCart = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -24,7 +24,7 @@ const IconShoppingCart = ({ size, fill, stroke, onClick }: IconSvgProps): ReactE
         <Path d="M17 17h-11v-14h-2" />
         <Path d="M6 5l14 1l-1 7h-13" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.sun.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.sun.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconSun = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -22,7 +22,7 @@ const IconSun = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement =>
         <Path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
         <Path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };
 

diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.trash.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.trash.native.tsx
@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 
 import { IconSvgProps } from './icon.svg.interface';
 
 const IconTrash = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement => {
   return (
-    <TouchableHighlight onPress={onClick}>
+    <TouchableOpacity onPress={onClick}>
       <Svg
         width={size}
         height={size}
@@ -25,7 +25,7 @@ const IconTrash = ({ size, fill, stroke, onClick }: IconSvgProps): ReactElement
         <Path d="M10 11l0 6" />
         <Path d="M14 11l0 6" />
       </Svg>
-    </TouchableHighlight>
+    </TouchableOpacity>
   );
 };