From db4314090ca0946f6d5d84652ff304af5ed44a03 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 7 Sep 2021 14:25:10 +0700 Subject: [PATCH] enhance: UI header --- pages/404.tsx | 3 ++- pages/index.tsx | 20 ++----------------- .../HeaderMenu/HeaderMenu.module.scss | 5 ++++- .../components/HeaderMenu/HeaderMenu.tsx | 4 ++-- src/components/common/Layout/Layout.tsx | 2 +- .../MenuDropdown/MenuDropdown.module.scss | 13 ++++++++++++ .../common/MenuDropdown/MenuDropdown.tsx | 4 ++-- .../common/QuanittyInput/QuanittyInput.tsx | 6 +++--- src/components/icons/IconMinus.tsx | 18 +++++++++++++++++ src/components/icons/IconPlus.tsx | 18 +++++++++++++++++ src/components/icons/index.ts | 2 ++ 11 files changed, 67 insertions(+), 28 deletions(-) create mode 100644 src/components/icons/IconMinus.tsx create mode 100644 src/components/icons/IconPlus.tsx diff --git a/pages/404.tsx b/pages/404.tsx index 7fb30b9de..8a357fb51 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -1,4 +1,5 @@ -import { Layout } from '@components/common' +import { Layout } from "src/components/common" + export default function NotFound() { return (
diff --git a/pages/index.tsx b/pages/index.tsx index 082f76c3e..efdbf5c9c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,34 +1,18 @@ import { Layout } from 'src/components/common'; import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; -import {SelectCommon} from 'src/components/common' - -const OPTION_SORT = [ - { - name: "By Name" - }, - { - name: "Price (High to Low)" - }, - { - name: "On Sale" - } -] export default function Home() { return ( <> - {/* - + - */} - Sort By - Sort By + {/* // todo: uncomment */} {/* */} diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss index a61c059e6..2832211c1 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss @@ -52,7 +52,10 @@ } a { @appy no-underline; - &.iconFovourite { + &:hover { + opacity: .8; + } + &.iconFavourite { svg path { fill: var(--negative); } diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index f4eb57b04..aa962605d 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -52,14 +52,14 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
  • - +
  • - + diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 3009decdb..17f520185 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -15,7 +15,7 @@ interface Props { // note: demo code const Layout: FC = ({ children }) => { const { locale = 'en-US' } = useRouter() - const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true }) + const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false }) const toggle = () => { if (visibleCartDrawer) { diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss index 8fc270b2a..ae5b76c3d 100644 --- a/src/components/common/MenuDropdown/MenuDropdown.module.scss +++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss @@ -3,6 +3,9 @@ .menuDropdown { @apply relative cursor-pointer; width: fit-content; + .label { + all: unset; + } &:hover { .label { color: var(--primary); @@ -65,6 +68,16 @@ margin-top: 0.4rem; li { @apply block w-full transition-all duration-200 cursor-pointer text-active; + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + overflow-x: hidden; + position: relative; + max-width: 15rem; + white-space: nowrap; + text-overflow: ellipsis; button { all: unset; color: currentColor; diff --git a/src/components/common/MenuDropdown/MenuDropdown.tsx b/src/components/common/MenuDropdown/MenuDropdown.tsx index bd3f0c851..ca25f22f8 100644 --- a/src/components/common/MenuDropdown/MenuDropdown.tsx +++ b/src/components/common/MenuDropdown/MenuDropdown.tsx @@ -16,9 +16,9 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) => [s.menuDropdown]: true, [s.arrow]: isHasArrow, })}> - +
    , @@ -64,7 +64,7 @@ const QuanittyInput = ({ return (
    - +
    - +
    ) diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx new file mode 100644 index 000000000..abf3a2907 --- /dev/null +++ b/src/components/icons/IconMinus.tsx @@ -0,0 +1,18 @@ +const IconMinus = ({ ...props }) => { + return ( + + + + ) +} + +export default IconMinus diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx new file mode 100644 index 000000000..63d6d2dd4 --- /dev/null +++ b/src/components/icons/IconPlus.tsx @@ -0,0 +1,18 @@ +const IconPlus = ({ ...props }) => { + return ( + + + + ) +} + +export default IconPlus diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index fcc739706..d773a0b03 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -25,3 +25,5 @@ export { default as IconPeople } from './IconPeople' export { default as IconLocation } from './IconLocation' export { default as IconClose } from './IconClose' export { default as IconDelete } from './IconDelete' +export { default as IconPlus } from './IconPlus' +export { default as IconMinus } from './IconMinus'