From 9186f8b011895e694e2bc509daae2bf76517f215 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 16 Sep 2021 14:43:14 +0700 Subject: [PATCH] :art: styles: quantity input shape common :%s --- .../QuanittyInput/QuanittyInput.module.scss | 19 ++++++++++-- .../common/QuanittyInput/QuanittyInput.tsx | 30 ++++++++++--------- src/components/icons/IconMinus.tsx | 8 ++--- src/components/icons/IconPlus.tsx | 8 ++--- src/styles/_utilities.scss | 2 -- 5 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss index d8a0e5fc1..7609ad10d 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.module.scss +++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss @@ -1,10 +1,23 @@ @import '../../../styles/utilities'; -.quanittyInputWarper{ - border-color: theme("textColor.active"); - @apply border border-solid inline-flex justify-between items-center custom-border-radius; +.quanittyInputWarper { + @apply shape-common-border; + &::before{ + height: 100%; + top: 1px; + background-color: var(--text-active); + } + .inner { + @apply inline-flex justify-between items-center; + margin: 0; + } .plusIcon, .minusIcon{ + @apply flex justify-center items-center; + min-height: 2rem; &:hover{ cursor: pointer; + svg path { + fill: var(--primary); + } } } &.default{ diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx index 20baba9ea..e31abb880 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.tsx +++ b/src/components/common/QuanittyInput/QuanittyInput.tsx @@ -4,8 +4,8 @@ import classNames from 'classnames' import { IconMinus, IconPlus } from '../../icons' interface QuanittyInputProps extends Omit< - React.InputHTMLAttributes, - 'onChange' | 'min' | 'max' | 'step' | "type" | "size" + React.InputHTMLAttributes, + 'onChange' | 'min' | 'max' | 'step' | "type" | "size" > { size?: 'default' | 'small' onChange?: (value: number) => void @@ -63,18 +63,20 @@ const QuanittyInput = ({ return (
-
- -
- -
- +
+
+ +
+ +
+ +
) diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx index abf3a2907..6e572412a 100644 --- a/src/components/icons/IconMinus.tsx +++ b/src/components/icons/IconMinus.tsx @@ -1,14 +1,14 @@ -const IconMinus = ({ ...props }) => { +const IconMinus = () => { return ( diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx index 63d6d2dd4..634027c4e 100644 --- a/src/components/icons/IconPlus.tsx +++ b/src/components/icons/IconPlus.tsx @@ -1,14 +1,14 @@ -const IconPlus = ({ ...props }) => { +const IconPlus = () => { return ( diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 5ce5f24af..8abfb0104 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -114,8 +114,6 @@ .shape-common { position: relative; - $border: 2px; - margin: $border; clip-path: url(#svg-custom-shape); }