merge branch m7-lytran4 to m7-sonnguyen-fix-account-page

This commit is contained in:
sonnguyenkieio
2021-09-16 15:06:16 +07:00
9 changed files with 60 additions and 33 deletions

View File

@@ -103,6 +103,20 @@
} }
} }
} }
&.small {
.inner {
padding: .5rem 1rem;
&.onlyIcon {
padding: 1rem;
}
@screen md {
padding: .8rem 1.6rem;
&.onlyIcon {
padding: .8rem;
}
}
}
}
&.large { &.large {
.inner { .inner {

View File

@@ -5,7 +5,7 @@ import s from './ButtonCommon.module.scss'
interface Props { interface Props {
children?: React.ReactNode, children?: React.ReactNode,
type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone', type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
size?: 'default' | 'large', size?: 'default' | 'large' | 'small',
icon?: React.ReactNode, icon?: React.ReactNode,
isIconSuffix?: boolean, isIconSuffix?: boolean,
loading?: boolean, loading?: boolean,

View File

@@ -4,13 +4,13 @@ import ButtonCommon from '../ButtonCommon/ButtonCommon'
interface Props { interface Props {
type?: 'primary' | 'light' | 'ghost', type?: 'primary' | 'light' | 'ghost',
size?: 'default' | 'large', size?: 'default' | 'large' | 'small',
loading?: boolean, loading?: boolean,
disabled?: boolean, disabled?: boolean,
onClick?: () => void, onClick?: () => void,
} }
const ButtonIconBuy = memo(({ type = 'light', size = 'default', loading = false, disabled, onClick }: Props) => { const ButtonIconBuy = memo(({ type = 'light', size = 'small', loading = false, disabled, onClick }: Props) => {
return ( return (
<ButtonCommon <ButtonCommon
type={type} type={type}

View File

@@ -63,15 +63,15 @@ const ProductCard = ({
{ {
isSingleButton ? isSingleButton ?
<div className={s.cardButton}> <div className={s.cardButton}>
<ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon> <ButtonCommon type="light" icon={<IconBuy />} size='small'>Add to cart</ButtonCommon>
</div> </div>
: :
<> <>
<div className={s.cardIcon}> <div className={s.cardIcon}>
<ButtonIconBuy /> <ButtonIconBuy/>
</div> </div>
<div className={s.cardButton}> <div className={s.cardButton}>
<ButtonCommon type="light">{buttonText}</ButtonCommon> <ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>
</div> </div>
</> </>
} }

View File

@@ -1,10 +1,23 @@
@import '../../../styles/utilities'; @import '../../../styles/utilities';
.quanittyInputWarper{ .quanittyInputWarper {
border-color: theme("textColor.active"); @apply shape-common-border;
@apply border border-solid inline-flex justify-between items-center custom-border-radius; &::before{
height: 100%;
top: 1px;
background-color: var(--text-active);
}
.inner {
@apply inline-flex justify-between items-center;
margin: 0;
}
.plusIcon, .minusIcon{ .plusIcon, .minusIcon{
@apply flex justify-center items-center;
min-height: 2rem;
&:hover{ &:hover{
cursor: pointer; cursor: pointer;
svg path {
fill: var(--primary);
}
} }
} }
&.default{ &.default{

View File

@@ -4,8 +4,8 @@ import classNames from 'classnames'
import { IconMinus, IconPlus } from '../../icons' import { IconMinus, IconPlus } from '../../icons'
interface QuanittyInputProps interface QuanittyInputProps
extends Omit< extends Omit<
React.InputHTMLAttributes<HTMLInputElement>, React.InputHTMLAttributes<HTMLInputElement>,
'onChange' | 'min' | 'max' | 'step' | "type" | "size" 'onChange' | 'min' | 'max' | 'step' | "type" | "size"
> { > {
size?: 'default' | 'small' size?: 'default' | 'small'
onChange?: (value: number) => void onChange?: (value: number) => void
@@ -63,18 +63,20 @@ const QuanittyInput = ({
return ( return (
<div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}> <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
<div className={s.minusIcon} onClick={onMinusClick}> <div className={s.inner}>
<IconMinus /> <div className={s.minusIcon} onClick={onMinusClick}>
</div> <IconMinus />
<input </div>
{...props} <input
type="number" {...props}
value={value} type="number"
onChange={onValueChange} value={value}
className={s.quanittyInput} onChange={onValueChange}
/> className={s.quanittyInput}
<div className={s.plusIcon} onClick={onPlusClick}> />
<IconPlus /> <div className={s.plusIcon} onClick={onPlusClick}>
<IconPlus />
</div>
</div> </div>
</div> </div>
) )

View File

@@ -1,14 +1,14 @@
const IconMinus = ({ ...props }) => { const IconMinus = () => {
return ( return (
<svg <svg
width="12" width="12"
height="12" height="2"
viewBox="0 0 12 12" viewBox="0 0 12 2"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z" d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
fill="#141414" fill="#141414"
/> />
</svg> </svg>

View File

@@ -1,14 +1,14 @@
const IconPlus = ({ ...props }) => { const IconPlus = () => {
return ( return (
<svg <svg
width="12" width="12"
height="2" height="12"
viewBox="0 0 12 2" viewBox="0 0 12 12"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z" d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
fill="#141414" fill="#141414"
/> />
</svg> </svg>

View File

@@ -114,8 +114,6 @@
.shape-common { .shape-common {
position: relative; position: relative;
$border: 2px;
margin: $border;
clip-path: url(#svg-custom-shape); clip-path: url(#svg-custom-shape);
} }