From 51ab7637f1a39cfe07b3b98c6cb7ec7ab2583170 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:12:39 +0700 Subject: [PATCH 01/14] refactor: ItemWishList component --- pages/index.tsx | 5 +++- .../ItemWishList/ItemWishList.module.scss | 8 +++++++ .../common/ItemWishList/ItemWishList.tsx | 23 ++++++++++++------- src/components/common/Logo/Logo.module.scss | 4 +--- src/components/common/Logo/Logo.tsx | 1 - .../ViewAllItem/ViewAllItem.module.scss | 6 +++-- src/components/icons/Heart.tsx | 1 - src/components/icons/Vector.tsx | 1 - 8 files changed, 32 insertions(+), 17 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 0005eacd0..0d2839418 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ -import { ButtonCommon, Layout } from 'src/components/common' +import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo } from 'src/components/common' import { IconBuy } from 'src/components/icons' import { ButonType, ButtonSize } from 'src/utils/constanst.utils' export default function Home() { @@ -13,6 +13,9 @@ export default function Home() { }>{ButtonSize.large} - Button default large } disabled isIconSuffix={true}>Button with icon disabled } type={ButonType.light}>Button with icon + + +

Go to pages/index.tsx to get your hand dirty!

Go to src/components to make your awesome component!

Go to src/styles to find global styles!

diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index c827f4ff6..d87984bc6 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -7,4 +7,12 @@ display: flex; justify-content: center; align-items: center; + path{ + stroke: theme("colors.negative"); + } +} +.isToggleOn{ + path{ + stroke: theme("colors.primary"); + } } \ No newline at end of file diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index 3474178e6..d381036e7 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -1,19 +1,26 @@ +import classNames from 'classnames' import { Heart } from '@components/icons' -import React, { useState } from 'react' +import React, { memo } from 'react' import s from './ItemWishList.module.scss' interface Props { - className?: string - children?: any + isActive?: boolean, + onClick?: () => void } -const ItemWishList = ({}:Props) => { - const [isClick,setClick] = useState(false) +const ItemWishList = memo(({isActive, onClick}:Props) => { + const handleClick = () => { + isActive = !isActive + } return( -
setClick(!isClick)}> - +
+
) -} +}) export default ItemWishList \ No newline at end of file diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 72cde5cd0..2f5964f92 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -1,6 +1,4 @@ @import '../../../styles/utilities'; -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap'); - .logo{ display: flex; @@ -12,7 +10,7 @@ margin-right: 1.2rem; } .conTent{ - font-family: 'Poppins', sans-serif; + @apply font-logo; text-transform: uppercase; line-height: 3.2rem; letter-spacing: -0.02rem; diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx index 44302e00b..5b82f2837 100644 --- a/src/components/common/Logo/Logo.tsx +++ b/src/components/common/Logo/Logo.tsx @@ -9,7 +9,6 @@ const Logo = ({}: Props) => { return(
-
ONLINE GROCERY diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss index aee521b2d..0e481494f 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.module.scss +++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss @@ -1,16 +1,18 @@ @import '../../../styles/utilities'; -@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); .viewAll{ display: flex; color: theme("colors.primary"); .conTent{ margin: 0.8rem 0.8rem 0.8rem 1.6rem; - font-family: 'Nunito', sans-serif; + font-family: var(--font-sans); font-weight: bold; } .vecTor{ margin: 0.8rem 0rem 0.8rem 0rem; + svg path{ + fill: theme("colors.primary"); + } } } diff --git a/src/components/icons/Heart.tsx b/src/components/icons/Heart.tsx index f8c39b6e5..227f41f21 100644 --- a/src/components/icons/Heart.tsx +++ b/src/components/icons/Heart.tsx @@ -11,7 +11,6 @@ const Vector = ({ ...props }) => { > ) diff --git a/src/components/icons/Vector.tsx b/src/components/icons/Vector.tsx index 989f8a125..b9c161940 100644 --- a/src/components/icons/Vector.tsx +++ b/src/components/icons/Vector.tsx @@ -11,7 +11,6 @@ const Vector = ({ ...props }) => { > ) From 73c8e0ce669fec91da0b15ddc3fd65080c4d7167 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:26:37 +0700 Subject: [PATCH 02/14] refactor: add Icon prelix into filename Heart and Vector in common/icons --- src/components/common/ItemWishList/ItemWishList.module.scss | 4 ++-- src/components/common/ItemWishList/ItemWishList.tsx | 4 ++-- src/components/common/ViewAllItem/ViewAllItem.tsx | 4 ++-- src/components/icons/{Heart.tsx => IconHeart.tsx} | 4 ++-- src/components/icons/{Vector.tsx => IconVector.tsx} | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) rename src/components/icons/{Heart.tsx => IconHeart.tsx} (96%) rename src/components/icons/{Vector.tsx => IconVector.tsx} (94%) diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index d87984bc6..9646b650c 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -8,11 +8,11 @@ justify-content: center; align-items: center; path{ - stroke: theme("colors.negative"); + fill: theme("colors.negative"); } } .isToggleOn{ path{ - stroke: theme("colors.primary"); + fill: theme("colors.primary"); } } \ No newline at end of file diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index d381036e7..01ecc9817 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames' -import { Heart } from '@components/icons' +import IconHeart from 'src/components/icons/IconHeart' import React, { memo } from 'react' import s from './ItemWishList.module.scss' @@ -18,7 +18,7 @@ const ItemWishList = memo(({isActive, onClick}:Props) => { [s.isToggleOn]:isActive })} onClick={handleClick}> - +
) }) diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index 4b6daff4c..e85b6181b 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -1,4 +1,4 @@ -import Vector from 'src/components/icons/Vector' +import IconVector from 'src/components/icons/IconVector' import s from './ViewAllItem.module.scss' import Link from 'next/link' @@ -17,7 +17,7 @@ const ViewAllItem = ({ link }: Props) => {
- +
) diff --git a/src/components/icons/Heart.tsx b/src/components/icons/IconHeart.tsx similarity index 96% rename from src/components/icons/Heart.tsx rename to src/components/icons/IconHeart.tsx index 227f41f21..cb2a763b3 100644 --- a/src/components/icons/Heart.tsx +++ b/src/components/icons/IconHeart.tsx @@ -1,5 +1,5 @@ -const Vector = ({ ...props }) => { +const IconHeart = ({ ...props }) => { return ( { ) } - export default Vector \ No newline at end of file + export default IconHeart \ No newline at end of file diff --git a/src/components/icons/Vector.tsx b/src/components/icons/IconVector.tsx similarity index 94% rename from src/components/icons/Vector.tsx rename to src/components/icons/IconVector.tsx index b9c161940..e4a10f559 100644 --- a/src/components/icons/Vector.tsx +++ b/src/components/icons/IconVector.tsx @@ -1,5 +1,5 @@ -const Vector = ({ ...props }) => { +const IconVector = ({ ...props }) => { return ( { ) } - export default Vector \ No newline at end of file + export default IconVector \ No newline at end of file From ffca0a14ac80229055eb3d0653e1147e0ed0ad2b Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:38:53 +0700 Subject: [PATCH 03/14] styles: ItemWishList toggle full color in heart icon --- src/components/common/ItemWishList/ItemWishList.module.scss | 6 +++--- src/components/icons/IconHeart.tsx | 6 +++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index 9646b650c..debaa0550 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -8,11 +8,11 @@ justify-content: center; align-items: center; path{ - fill: theme("colors.negative"); + stroke: theme("colors.primary"); } } .isToggleOn{ - path{ - fill: theme("colors.primary"); + svg path{ + stroke: theme("colors.primary"); } } \ No newline at end of file diff --git a/src/components/icons/IconHeart.tsx b/src/components/icons/IconHeart.tsx index cb2a763b3..0d868c5e7 100644 --- a/src/components/icons/IconHeart.tsx +++ b/src/components/icons/IconHeart.tsx @@ -10,7 +10,11 @@ const IconHeart = ({ ...props }) => { {...props} > ) From 146aa6309f90a53231ebaf52c7111f584f2f85a6 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:43:04 +0700 Subject: [PATCH 04/14] feat: ItemWishList components add onChange event --- src/components/common/ItemWishList/ItemWishList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index 01ecc9817..5adef90b8 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -6,9 +6,10 @@ import s from './ItemWishList.module.scss' interface Props { isActive?: boolean, onClick?: () => void + onChange?: () => void } -const ItemWishList = memo(({isActive, onClick}:Props) => { +const ItemWishList = memo(({isActive, onClick, onChange}:Props) => { const handleClick = () => { isActive = !isActive } From bf2a2c08320e2dac012c36033d6e909f53f2375e Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 15:49:18 +0700 Subject: [PATCH 05/14] remove: remove props interface never use --- src/components/common/Logo/Logo.tsx | 3 +-- src/components/common/ViewAllItem/ViewAllItem.tsx | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx index 5b82f2837..06f9d57f3 100644 --- a/src/components/common/Logo/Logo.tsx +++ b/src/components/common/Logo/Logo.tsx @@ -1,8 +1,7 @@ import s from './Logo.module.scss' interface Props { - className?: string - children?: any + } const Logo = ({}: Props) => { diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index e85b6181b..b9d4e4efe 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -3,8 +3,6 @@ import s from './ViewAllItem.module.scss' import Link from 'next/link' interface Props { - className?: string - children?: any link?: string } From e83f3e0512427c01e5f71ba5129153412c5f06f7 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 16:15:52 +0700 Subject: [PATCH 06/14] styles: width, height 4.8rem down to 2.4rem --- .../common/ItemWishList/ItemWishList.module.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index debaa0550..c7d30d246 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -2,11 +2,8 @@ .heartToggle{ cursor: pointer; - width: 4.8rem; - height: 4.8rem; - display: flex; - justify-content: center; - align-items: center; + width: 2.4rem; + height: 2.4rem; path{ stroke: theme("colors.primary"); } From 9ed49d6ae7a37315f0a528d37b8c335ade0d1ef3 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 25 Aug 2021 11:07:18 +0700 Subject: [PATCH 07/14] bug: ViewAllItem pass props link to href --- pages/index.tsx | 2 +- src/components/common/ViewAllItem/ViewAllItem.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 0d2839418..1359f7e22 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -13,7 +13,7 @@ export default function Home() { }>{ButtonSize.large} - Button default large } disabled isIconSuffix={true}>Button with icon disabled } type={ButonType.light}>Button with icon - +

Go to pages/index.tsx to get your hand dirty!

diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index b9d4e4efe..5472525ac 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -3,13 +3,13 @@ import s from './ViewAllItem.module.scss' import Link from 'next/link' interface Props { - link?: string + link: string } const ViewAllItem = ({ link }: Props) => { return(
- + View All From b69f58b147d250bcb88589852e92e0ba1f442bde Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 25 Aug 2021 11:40:17 +0700 Subject: [PATCH 08/14] remove: remove onClick props and handleClick func --- src/components/common/ItemWishList/ItemWishList.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index 5adef90b8..f93f1e135 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -5,20 +5,17 @@ import s from './ItemWishList.module.scss' interface Props { isActive?: boolean, - onClick?: () => void onChange?: () => void } -const ItemWishList = memo(({isActive, onClick, onChange}:Props) => { - const handleClick = () => { - isActive = !isActive - } +const ItemWishList = memo(({isActive, onChange}:Props) => { return(
+ onChange={onChange} + >
) From f9391f3d0c520638e8c5108a86d1e2e0fc42b69c Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 25 Aug 2021 11:41:55 +0700 Subject: [PATCH 09/14] style: replace with utilities class --- pages/index.tsx | 2 +- .../common/ItemWishList/ItemWishList.module.scss | 5 +++-- src/components/common/Logo/Logo.module.scss | 8 +++----- src/components/common/ViewAllItem/ViewAllItem.module.scss | 1 - 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 1359f7e22..7b6346860 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,7 +14,7 @@ export default function Home() { } disabled isIconSuffix={true}>Button with icon disabled } type={ButonType.light}>Button with icon - +

Go to pages/index.tsx to get your hand dirty!

Go to src/components to make your awesome component!

diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index c7d30d246..2b43dbd53 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -5,11 +5,12 @@ width: 2.4rem; height: 2.4rem; path{ - stroke: theme("colors.primary"); + stroke: var(--primary); } } .isToggleOn{ svg path{ - stroke: theme("colors.primary"); + stroke: var(--negative); + fill: var(--negative); } } \ No newline at end of file diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 2f5964f92..b64c0a6b4 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -5,14 +5,12 @@ .eclipse{ width: 3.2rem; height: 3.2rem; - background-color: theme("colors.primary"); + background-color: var(--primary); border-radius: 50%; margin-right: 1.2rem; } .conTent{ - @apply font-logo; - text-transform: uppercase; - line-height: 3.2rem; - letter-spacing: -0.02rem; + @apply font-logo sub-headline; + font-size: 1.6rem; } } \ No newline at end of file diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss index 0e481494f..41545b380 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.module.scss +++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss @@ -5,7 +5,6 @@ color: theme("colors.primary"); .conTent{ margin: 0.8rem 0.8rem 0.8rem 1.6rem; - font-family: var(--font-sans); font-weight: bold; } .vecTor{ From c0c4aa9c1014df3c2a21b3aca957b69c13589239 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 25 Aug 2021 11:52:42 +0700 Subject: [PATCH 10/14] refactor: format code --- src/components/common/ItemWishList/ItemWishList.tsx | 4 ++-- src/components/common/Logo/Logo.module.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index f93f1e135..d1161e733 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -11,8 +11,8 @@ interface Props { const ItemWishList = memo(({isActive, onChange}:Props) => { return(
diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index b64c0a6b4..37662269c 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -11,6 +11,6 @@ } .conTent{ @apply font-logo sub-headline; - font-size: 1.6rem; + font-size: var(--font-size); } } \ No newline at end of file From a18eb2b320fae07f9cc28c97736194a8f021fb41 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 25 Aug 2021 18:17:57 +0700 Subject: [PATCH 11/14] feat: components SelectCommon --- .../ItemWishList/ItemWishList.module.scss | 5 +-- .../common/ItemWishList/ItemWishList.tsx | 2 +- .../SelectCommon/SelectCommon.module.scss | 32 +++++++++++++++++++ .../common/SelectCommon/SelectCommon.tsx | 27 ++++++++++++++++ 4 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 src/components/common/SelectCommon/SelectCommon.module.scss create mode 100644 src/components/common/SelectCommon/SelectCommon.tsx diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index 2b43dbd53..973ff5af9 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -1,12 +1,9 @@ -@import '../../../styles/utilities'; .heartToggle{ cursor: pointer; width: 2.4rem; height: 2.4rem; - path{ - stroke: var(--primary); - } + } .isToggleOn{ svg path{ diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index d1161e733..74d0b3b04 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -8,7 +8,7 @@ interface Props { onChange?: () => void } -const ItemWishList = memo(({isActive, onChange}:Props) => { +const ItemWishList = memo(({isActive=false, onChange}:Props) => { return(
{ + return( + + ) +} + +export default SelectCommon \ No newline at end of file From 7d55bbf46e49a375575303f16ec393462c6c573d Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 25 Aug 2021 18:30:33 +0700 Subject: [PATCH 12/14] refactor: edit classname and export icon --- .gitignore | 1 + pages/index.tsx | 31 +++++++++++++++---- .../ItemWishList/ItemWishList.module.scss | 1 - src/components/common/Logo/Logo.module.scss | 5 +-- .../ViewAllItem/ViewAllItem.module.scss | 4 +-- .../common/ViewAllItem/ViewAllItem.tsx | 4 +-- src/components/common/index.ts | 3 +- src/components/icons/index.ts | 2 ++ 8 files changed, 37 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index 22f1bf4f3..61386b73c 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ node_modules /.pnp .pnp.js +package-lock.json # testing /coverage diff --git a/pages/index.tsx b/pages/index.tsx index 7b6346860..539a8c74a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,27 @@ -import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo } from 'src/components/common' +import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo, SelectCommon } from 'src/components/common' import { IconBuy } from 'src/components/icons' -import { ButonType, ButtonSize } from 'src/utils/constanst.utils' +import { ButonType, ButtonSize, } from 'src/utils/constanst.utils' + +const OPTION_SORT = [ + { + name: 'By Name', + }, + { + name: 'Price (Hight to Low)', + }, + { + name: 'On Sale', + } +] +const OPTION_STATES = [ + { + name: 'Việt Nam' + }, + { + name: 'US' + }, +] export default function Home() { return ( <> @@ -14,11 +34,10 @@ export default function Home() { } disabled isIconSuffix={true}>Button with icon disabled } type={ButonType.light}>Button with icon - + -

Go to pages/index.tsx to get your hand dirty!

-

Go to src/components to make your awesome component!

-

Go to src/styles to find global styles!

+ + ) } diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index 973ff5af9..9e2b07361 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -3,7 +3,6 @@ cursor: pointer; width: 2.4rem; height: 2.4rem; - } .isToggleOn{ svg path{ diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 37662269c..83eb27516 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -10,7 +10,8 @@ margin-right: 1.2rem; } .conTent{ - @apply font-logo sub-headline; - font-size: var(--font-size); + @apply font-logo; + line-height: 3.2rem; + letter-spacing: -0.02rem; } } \ No newline at end of file diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss index 41545b380..cefa0973b 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.module.scss +++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss @@ -3,11 +3,11 @@ .viewAll{ display: flex; color: theme("colors.primary"); - .conTent{ + .content{ margin: 0.8rem 0.8rem 0.8rem 1.6rem; font-weight: bold; } - .vecTor{ + .vector{ margin: 0.8rem 0rem 0.8rem 0rem; svg path{ fill: theme("colors.primary"); diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index 5472525ac..1a3171e7b 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -10,11 +10,11 @@ const ViewAllItem = ({ link }: Props) => { return(
- + View All -
+
diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 8144b0de0..ef4aace92 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -3,4 +3,5 @@ export { default as Layout } from './Layout/Layout' export { default as Head } from './Head/Head' export { default as ViewAllItem} from './ViewAllItem/ViewAllItem' export { default as ItemWishList} from './ItemWishList/ItemWishList' -export { default as Logo} from './Logo/Logo' \ No newline at end of file +export { default as Logo} from './Logo/Logo' +export { default as SelectCommon} from './SelectCommon/SelectCommon' \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 155948269..74f5ca62f 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -1 +1,3 @@ export { default as IconBuy } from './IconBuy' +export { default as IconHeart } from './IconHeart' +export { default as IconVector } from './IconVector' \ No newline at end of file From aa5e68431dde3454ae4010f8f083070e50574bcb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 26 Aug 2021 18:43:42 +0700 Subject: [PATCH 13/14] :recycle: enhan: refactor code logo, view all item :%s --- src/components/common/Logo/Logo.module.scss | 2 +- src/components/common/Logo/Logo.tsx | 8 ++------ src/components/common/ViewAllItem/ViewAllItem.module.scss | 6 +++--- src/components/common/ViewAllItem/ViewAllItem.tsx | 2 +- 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 37662269c..05ac91d1a 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -9,7 +9,7 @@ border-radius: 50%; margin-right: 1.2rem; } - .conTent{ + .content{ @apply font-logo sub-headline; font-size: var(--font-size); } diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx index 06f9d57f3..96d1820e0 100644 --- a/src/components/common/Logo/Logo.tsx +++ b/src/components/common/Logo/Logo.tsx @@ -1,15 +1,11 @@ import s from './Logo.module.scss' -interface Props { - -} - -const Logo = ({}: Props) => { +const Logo = () => { return(
-
+
ONLINE GROCERY
diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss index 41545b380..192889f1b 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.module.scss +++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss @@ -2,15 +2,15 @@ .viewAll{ display: flex; - color: theme("colors.primary"); + color: var(--primary); .conTent{ margin: 0.8rem 0.8rem 0.8rem 1.6rem; font-weight: bold; } - .vecTor{ + .vector{ margin: 0.8rem 0rem 0.8rem 0rem; svg path{ - fill: theme("colors.primary"); + fill: var(--primary); } } } diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index 5472525ac..6308357e4 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -14,7 +14,7 @@ const ViewAllItem = ({ link }: Props) => { View All -
+
From 9b266e1b14360789249dd37f16fc2b5f54647f8d Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 26 Aug 2021 18:47:23 +0700 Subject: [PATCH 14/14] :bug: bug: logo fontsize :%s --- src/components/common/Logo/Logo.module.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 0a7478e10..3a6a35364 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -11,6 +11,8 @@ } .content{ @apply font-logo; - font-size: var(--font-size); + font-size: 16px; + line-height: 32px; + letter-spacing: -0.02em; } } \ No newline at end of file