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 index b704718..2023005 100644 --- a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css +++ b/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); 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 index 6e0b38d..6c59f5b 100644 --- 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,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,6 +22,7 @@ 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); @@ -28,7 +30,11 @@ const PokemonCard = ({ data, isLoading }: CardProps): ReactElement => { return ( diff --git a/libs/features/src/lib/pokemon/pokemon.list/assets/bulbasaur.gif b/libs/features/src/lib/pokemon/pokemon.list/assets/bulbasaur.gif new file mode 100644 index 0000000..b973a5d Binary files /dev/null and b/libs/features/src/lib/pokemon/pokemon.list/assets/bulbasaur.gif differ diff --git a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx index 90b7e8a..a2c5d0c 100644 --- a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx +++ b/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 => { { onFetchNextPage((old: number) => old + 1); }} diff --git a/libs/ui/src/lib-base/ui/button/button.element.view.tsx b/libs/ui/src/lib-base/ui/button/button.element.view.tsx index 1ceb11d..c628212 100644 --- a/libs/ui/src/lib-base/ui/button/button.element.view.tsx +++ b/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 ( diff --git a/libs/ui/src/lib-base/ui/button/button.interface.ts b/libs/ui/src/lib-base/ui/button/button.interface.ts index e9e1792..3a699b6 100644 --- a/libs/ui/src/lib-base/ui/button/button.interface.ts +++ b/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; diff --git a/libs/ui/src/lib-base/ui/button/button.module.css b/libs/ui/src/lib-base/ui/button/button.module.css index 4fd2240..552db8f 100644 --- a/libs/ui/src/lib-base/ui/button/button.module.css +++ b/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); } diff --git a/libs/ui/src/lib-base/ui/button/button.view.tsx b/libs/ui/src/lib-base/ui/button/button.view.tsx index a182b47..80442dc 100644 --- a/libs/ui/src/lib-base/ui/button/button.view.tsx +++ b/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}