Button component updates • Pokemon Ui component changes

libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css

@@ -8,6 +8,14 @@
   position: relative;
 }
 
+.cardWrapperShadowLight {
+  box-shadow: 0 3px 12px rgb(0 0 0 / 20%);
+}
+
+.cardWrapperShadowDark {
+  box-shadow: 0 3px 12px rgb(0 0 0 / 10%);
+}
+
 .imgCardWrapper {
   max-width: 115px;
   border-radius: var(--theme-radius-8);

libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx

@@ -1,5 +1,6 @@
 import { memo, ReactElement, useMemo } from 'react';
 
+import { ThemeTypeEnum, useThemeStore } from '@pokemon-pet-shop/store';
 import { PokemonDetailAbilityObj } from '@pokemon-pet-shop/typing';
 import {
   UiElementLayout,
@@ -21,14 +22,19 @@ import usePokemonCardLogic from './use.pokemon.card.logic';
 
 const PokemonCard = ({ data, isLoading }: CardProps): ReactElement => {
   const { getThemeClass, onHandleOpenDetailModalClick } = usePokemonCardLogic(data);
+  const { theme } = useThemeStore();
 
   const capitalizeName = useMemo((): string => {
     return capitalizeNameUtil(data?.name);
   }, [data?.name]);
 
   return (
     <UiCard
-      className={classNamesUtil(styles.cardWrapper, styles?.[`${getThemeClass}Wrapper`])}
+      className={classNamesUtil(
+        styles.cardWrapper,
+        styles?.[`${getThemeClass}Wrapper`],
+        styles?.[theme === ThemeTypeEnum.LIGHT ? 'cardWrapperShadowLight' : 'cardWrapperShadowDark']
+      )}
       isLoading={isLoading}
     >
       <UiElementLayout className={styles.imgCardWrapper}>

libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx

@@ -6,6 +6,7 @@ import { skeletonLoadDataUtil } from '@pokemon-pet-shop/utils';
 
 import { UiPokemonCard } from '../pokemon.card';
 
+import image from './assets/bulbasaur.gif';
 import { styles } from './pokemon.list.module';
 import usePokemonList from './use.pokemon.list.logic';
 
@@ -51,13 +52,8 @@ const PokemonList = (): ReactElement => {
         <UiElementLayout className={styles.btnWrapper}>
           <UiButton
             isDisabled={!hasNextPage || isFetchingNextPage}
-            text={
-              isFetchingNextPage
-                ? 'Loading More...'
-                : hasNextPage
-                  ? 'Load More'
-                  : 'Nothing more to load'
-            }
+            text={isFetchingNextPage ? 'Loading' : 'Load More'}
+            appendImage={isFetchingNextPage ? image : ''}
             onClick={() => {
               onFetchNextPage((old: number) => old + 1);
             }}

libs/ui/src/lib-base/ui/button/button.element.view.tsx

@@ -2,21 +2,28 @@ import { ReactElement } from 'react';
 
 import { UiElementLayout } from '../element.layout';
 import { UiIcon } from '../icon';
+import { UiImage } from '../image';
+import { TypographyTypeEnum, UiTypography } from '../typography';
 
 import { ButtonProps } from './button.interface';
 import { styles } from './button.module';
 
 const ButtonElement = ({
   className = '',
+  classNameText = '',
   text = null,
   appendIcon = '',
+  appendImage = '',
   isDisabled,
   onClick,
 }: ButtonProps): ReactElement => {
   return (
     <button className={className} disabled={isDisabled} onClick={onClick}>
       <UiElementLayout className={styles.buttonInnerWrapper}>
-        {text}
+        <UiTypography typographyType={TypographyTypeEnum.SPAN} className={classNameText}>
+          {text}
+        </UiTypography>
+        {appendImage ? <UiImage src={appendImage} className={styles.appendImage} /> : null}
         {appendIcon ? <UiIcon icon={appendIcon} /> : null}
       </UiElementLayout>
     </button>

libs/ui/src/lib-base/ui/button/button.interface.ts

@@ -5,9 +5,11 @@ import { ButtonSizeEnum, ButtonTypeEnum } from './button.enum';
 export interface ButtonProps {
   type?: ButtonTypeEnum;
   text?: string | null;
+  classNameText: string;
   className?: any;
   size?: ButtonSizeEnum;
   appendIcon?: string;
+  appendImage?: string;
   timerText?: string;
   timerStyle?: string;
   isDisabled?: boolean;

libs/ui/src/lib-base/ui/button/button.module.css

@@ -3,6 +3,7 @@
   cursor: pointer;
   border: 0;
   text-align: center;
+  padding: var(--theme-spacing-5);
 }
 
 .buttonPrimary {
@@ -22,20 +23,30 @@
 }
 
 .standard {
-  padding: var(--theme-spacing-10) var(--theme-spacing-15);
+  padding: var(--theme-spacing-5) var(--theme-spacing-15);
   font-size: var(--theme-font-13);
+  align-items: center;
+  justify-content: center;
+  display: flex;
 }
 
 .large {
   min-width: 230px;
   height: 66px;
-  padding: var(--theme-spacing-15) var(--theme-spacing-30);
+  padding: var(--theme-spacing-10) var(--theme-spacing-30);
   font-size: var(--theme-font-24);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.appendImage {
+  width: 22px;
+  margin-right: var(--theme-spacing-5);
 }
 
 .buttonInnerWrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--theme-spacing-10);
 }

libs/ui/src/lib-base/ui/button/button.view.tsx

@@ -16,6 +16,7 @@ const Button = ({
   text = null,
   size = ButtonSizeEnum.STANDARD,
   appendIcon = '',
+  appendImage = '',
   timerText = '',
   timerStyle = styles.buttonSuccess,
   isDisabled = false,
@@ -69,10 +70,11 @@ const Button = ({
         className,
         newStyles.button,
         getTypeStyles,
-        getSizeStyles,
         getDisabledStyles,
         displaySuccessStyle ? timerStyle : ''
       )}
+      classNameText={getSizeStyles}
+      appendImage={appendImage}
       appendIcon={appendIcon}
       isDisabled={isDisabled || displaySuccessStyle}
       onClick={onClick}