diff --git a/pages/index.tsx b/pages/index.tsx
index 83b4d8185..4b981486d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,13 +1,18 @@
import { ButtonCommon, Layout } from 'src/components/common'
+import { IconBuy } from 'src/components/icons'
import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
export default function Home() {
return (
<>
This is home page
- Button default
- Button light
- Button default large
+ Button default
+ {ButonType.light} - Button light
+ {ButonType.light} - Button light
+ {ButonType.light} - Button light
+ {ButtonSize.large} - Button default large
+ } disabled>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/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 6f7a94f25..13b4450e3 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -1,14 +1,77 @@
@import "../../../styles/utilities";
.buttonCommon {
- @apply custom-border-radius bg-primary hover:bg-hover-primary transition-all duration-200 text-white;
- padding: 1.6rem 3.6rem;
+ @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1.6rem 3.2rem;
+ &:disabled {
+ filter: brightness(0.9);
+ cursor: not-allowed;
+ color: var(--disabled);
+ }
+ &.loading {
+ &::before {
+ content: "";
+ border-radius: 50%;
+ width: 1.6rem;
+ height: 1.6rem;
+ border: 3px solid rgba(170, 170, 170, 0.5);
+ border-top: 3px solid var(--white);
+ -webkit-animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
+ margin-right: 0.8rem;
+ }
+ }
+ &:hover {
+ @apply shadow-md;
+ &:not(:disabled) {
+ filter: brightness(1.05);
+ }
+ }
+
+ &:focus {
+ outline: none;
+ filter: brightness(1.05);
+ }
+ &:focus-visible {
+ outline: 2px solid var(--text-active);
+ }
+
&.light {
- @apply text-base;
- background-color: #fff !important;
- border: 1px solid theme("textColor.active") !important;
-
+ @apply text-base bg-white;
+ border: 1px solid var(--text-active);
+ &.loading {
+ &::before {
+ border-color: var(--primary);
+ }
+ }
}
&.large {
+ padding: 3.2rem 4.8rem;
+ &.loading {
+ &::before {
+ width: 2.4rem;
+ height: 2.4rem;
+ }
+ }
+ }
+
+ .icon {
+ margin-right: 0.8rem;
+ svg path {
+ fill: currentColor;
+ }
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
}
}
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 4248ad8ab..27a4f3d72 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -7,18 +7,26 @@ interface Props {
children?: any,
type?: ButonType,
size?: ButtonSize,
- icon?: HTMLElement,
+ icon?: any,
+ loading?: boolean,
+ disabled?: boolean,
+ onClick?: () => void,
}
-const ButtonCommon = ({ type, size, icon, children }: Props) => {
+const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
+ icon, loading, disabled, children, onClick }: Props) => {
return (
diff --git a/src/components/icons/IconBuy.tsx b/src/components/icons/IconBuy.tsx
new file mode 100644
index 000000000..70d7ce5dc
--- /dev/null
+++ b/src/components/icons/IconBuy.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconBuy = () => {
+ return (
+
+ )
+}
+
+export default IconBuy
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 71fb01f59..155948269 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1 +1 @@
-// index here
\ No newline at end of file
+export { default as IconBuy } from './IconBuy'
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 0eb621e92..ab1224507 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -1,6 +1,5 @@
:root {
- --primary: #36bf6d;
- --hover-primary: #3ccc76;
+ --primary: #5B9A74;
--primary-light: #e0f6e8;
--primary-lightest: #effaf4;
@@ -28,7 +27,8 @@
--text-base: #3d3d3d;
--text-label: #8f8f8f;
--text-placeholder: #cccccc;
-
+
+ --disabled: #cccccc;
--border-line: #ebebeb;
--background: #f8f8f8;
--white: #fbfbfb;
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 71c9c4358..ccbac413e 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -89,6 +89,6 @@
}
}
.custom-border-radius {
- border-radius: 20% 10% 10% 4%/ 15% 40% 25% 50%;
+ border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
}
}
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 176f9b38e..538cfe306 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -1,12 +1,12 @@
export enum ButonType {
- primary,
- light,
+ primary = 'primary',
+ light = 'light',
}
export enum ButtonSize {
- default,
- large,
+ default = 'default',
+ large = 'large',
}
diff --git a/tailwind.config.js b/tailwind.config.js
index d2cf8b94a..393960c51 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,7 +22,6 @@ module.exports = {
},
colors: {
primary: 'var(--primary)',
- 'hover-primary': 'var(--hover-primary)',
'primary-light': 'var(--primary-light)',
'primary-lightest': 'var(--primary-lightest)',
@@ -49,7 +48,8 @@ module.exports = {
'line': 'var(--border-line)',
'background': 'var(--background)',
'white': 'var(--white)',
-
+ 'disabled': 'var(--text-disabled)',
+
// @deprecated (NOT use these variables)
'primary-2': 'var(--primary-2)',
secondary: 'var(--secondary)',