From 6299079c9bea80ff34759dc41435b8d57f48d89b Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 15:15:32 +0900 Subject: [PATCH 1/8] =?UTF-8?q?Refactor:=20Primary40=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=20=EB=B2=84=ED=8A=BC=EC=97=90=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Buttons/ButtonStyle.jsx | 13 ++++++++----- src/components/common/ModalWindow.jsx | 13 ++----------- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/common/Buttons/ButtonStyle.jsx b/src/components/common/Buttons/ButtonStyle.jsx index 4dad6de..e0b3e1e 100644 --- a/src/components/common/Buttons/ButtonStyle.jsx +++ b/src/components/common/Buttons/ButtonStyle.jsx @@ -10,7 +10,8 @@ export const ButtonCommon = styled.button` `; const PrimaryBtn = styled(ButtonCommon)` - padding: 1.4rem 2.4rem; + background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')}); + color: var(--white); // active 여부 &:hover:enabled { @@ -30,9 +31,6 @@ const PrimaryBtn = styled(ButtonCommon)` export const Primary56 = styled(PrimaryBtn)` padding: 1.4rem 2.4rem; border-radius: 1.2rem; - background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')}); - /* Font/18 Bold */ - color: var(--white); /* Font/18 Bold */ font-family: Pretendard; @@ -44,9 +42,14 @@ export const Primary56 = styled(PrimaryBtn)` `; export const Primary40 = styled(PrimaryBtn)` + padding: 0.7rem 1.6rem; border-radius: 0.6rem; - background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')}); /* Font/16 Regular */ + font-family: Pretendard; + font-size: 1.6rem; + font-style: normal; + line-height: 2.6rem; /* 162.5% */ + letter-spacing: -0.16px; `; export const Secondary = styled(ButtonCommon)` diff --git a/src/components/common/ModalWindow.jsx b/src/components/common/ModalWindow.jsx index de7b1be..37e817f 100644 --- a/src/components/common/ModalWindow.jsx +++ b/src/components/common/ModalWindow.jsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import styled from 'styled-components'; +import { Primary40 } from './Buttons/ButtonStyle'; // import { useKakaoShare } from './useKakaoShare'; const ModalBox = styled.div` @@ -25,18 +26,8 @@ const ModalBody = styled.div` transform: translate(-50%, -30%); `; -const CloseBtn = styled.button` - display: flex; +const CloseBtn = styled(Primary40)` width: 120px; - padding: 7px 16px; - align-items: center; - justify-content: center; - border-radius: 6px; - background: var(--purple600); - color: #fff; - font-size: 16px; - line-height: 26px; /* 162.5% */ - letter-spacing: -0.16px; position: absolute; bottom: 40px; `; From 0d0ceb96a50c7b70270b977cbf44c0bfbc0a753b Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 15:16:44 +0900 Subject: [PATCH 2/8] =?UTF-8?q?Refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20console.log=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/CardModal.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/modal/CardModal.jsx b/src/components/modal/CardModal.jsx index 067dc45..de85cff 100644 --- a/src/components/modal/CardModal.jsx +++ b/src/components/modal/CardModal.jsx @@ -26,7 +26,6 @@ function CardModal({ }) { const location = useLocation(); const isEditRoute = location.pathname.includes('/edit'); - console.log(id, isEditRoute); const createdDays = new Date(cardCreatedAt); const fontClass = { From 969f47d2d02d2b4b253113cd5844625e45ff79bb Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 15:19:10 +0900 Subject: [PATCH 3/8] =?UTF-8?q?Refactor:=20ButtonStyle=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=9D=B4=EB=8F=99(->=20styles)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Buttons/BackToPostButton.jsx | 2 +- src/components/common/Buttons/DeleteRecipientButton.js | 2 +- src/components/common/Buttons/EditButton.js | 2 +- src/components/common/Buttons/EditMessageButton.js | 2 +- src/components/common/Buttons/PostButton.js | 2 +- src/components/common/Buttons/PutPatchButton.jsx | 2 +- src/components/common/Buttons/movePageButton.jsx | 2 +- src/components/common/ModalWindow.jsx | 2 +- src/{components/common/Buttons => styles}/ButtonStyle.jsx | 0 9 files changed, 8 insertions(+), 8 deletions(-) rename src/{components/common/Buttons => styles}/ButtonStyle.jsx (100%) diff --git a/src/components/common/Buttons/BackToPostButton.jsx b/src/components/common/Buttons/BackToPostButton.jsx index 1481dfb..572c81a 100644 --- a/src/components/common/Buttons/BackToPostButton.jsx +++ b/src/components/common/Buttons/BackToPostButton.jsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import { Primary56 } from './ButtonStyle'; +import { Primary56 } from '../../../styles/ButtonStyle'; function BackToPostButton({ moveLink, btnName }) { const navigate = useNavigate(); diff --git a/src/components/common/Buttons/DeleteRecipientButton.js b/src/components/common/Buttons/DeleteRecipientButton.js index 40cf38c..e7c86d4 100644 --- a/src/components/common/Buttons/DeleteRecipientButton.js +++ b/src/components/common/Buttons/DeleteRecipientButton.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { useNavigate, useParams } from 'react-router-dom'; import { deleteRecipient } from '../../../api/DeleteApi'; -import { Primary56 } from './ButtonStyle'; +import { Primary56 } from '../../../styles/ButtonStyle'; function DeleteRecipientButton() { const navigate = useNavigate(); diff --git a/src/components/common/Buttons/EditButton.js b/src/components/common/Buttons/EditButton.js index 62a2d03..7413936 100644 --- a/src/components/common/Buttons/EditButton.js +++ b/src/components/common/Buttons/EditButton.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { useNavigate, useParams } from 'react-router-dom'; -import { Primary56 } from './ButtonStyle'; +import { Primary56 } from '../../../styles/ButtonStyle'; function EditButton() { const navigate = useNavigate(); diff --git a/src/components/common/Buttons/EditMessageButton.js b/src/components/common/Buttons/EditMessageButton.js index c25078e..3faa268 100644 --- a/src/components/common/Buttons/EditMessageButton.js +++ b/src/components/common/Buttons/EditMessageButton.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { useNavigate, useParams } from 'react-router-dom'; -import { Primary56 } from './ButtonStyle'; +import { Primary56 } from '../../../styles/ButtonStyle'; function EditMessageButton({ messageID }) { const navigate = useNavigate(); diff --git a/src/components/common/Buttons/PostButton.js b/src/components/common/Buttons/PostButton.js index bf5212a..6dcab3a 100644 --- a/src/components/common/Buttons/PostButton.js +++ b/src/components/common/Buttons/PostButton.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import { Primary56 } from './ButtonStyle'; +import { Primary56 } from '../../../styles/ButtonStyle'; function PostButton({ onSubmit, btnDisable }) { const navigate = useNavigate(); diff --git a/src/components/common/Buttons/PutPatchButton.jsx b/src/components/common/Buttons/PutPatchButton.jsx index 5c433bd..9ca5c11 100644 --- a/src/components/common/Buttons/PutPatchButton.jsx +++ b/src/components/common/Buttons/PutPatchButton.jsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import { Primary56 } from './ButtonStyle'; +import { Primary56 } from '../../../styles/ButtonStyle'; function PutPatchButton({ onSubmit, btnDisable }) { const navigate = useNavigate(); diff --git a/src/components/common/Buttons/movePageButton.jsx b/src/components/common/Buttons/movePageButton.jsx index a9f7efc..ab5b7df 100644 --- a/src/components/common/Buttons/movePageButton.jsx +++ b/src/components/common/Buttons/movePageButton.jsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import { Primary56 } from './ButtonStyle'; +import { Primary56 } from '../../../styles/ButtonStyle'; function MovePageButton({ moveLink, btnName }) { const navigate = useNavigate(); diff --git a/src/components/common/ModalWindow.jsx b/src/components/common/ModalWindow.jsx index 37e817f..df29e43 100644 --- a/src/components/common/ModalWindow.jsx +++ b/src/components/common/ModalWindow.jsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import styled from 'styled-components'; -import { Primary40 } from './Buttons/ButtonStyle'; +import { Primary40 } from '../../styles/ButtonStyle'; // import { useKakaoShare } from './useKakaoShare'; const ModalBox = styled.div` diff --git a/src/components/common/Buttons/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx similarity index 100% rename from src/components/common/Buttons/ButtonStyle.jsx rename to src/styles/ButtonStyle.jsx From 0d6a62319559e013059f99547f9f1686e3317c21 Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 15:41:30 +0900 Subject: [PATCH 4/8] =?UTF-8?q?Refactor:=20Outlined36=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=B2=84=ED=8A=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/post/SubHeader.jsx | 14 +------ .../post/subheader/EmojiDropDown.jsx | 21 +--------- src/styles/ButtonStyle.jsx | 40 ++++++++++++++++--- 3 files changed, 39 insertions(+), 36 deletions(-) diff --git a/src/components/post/SubHeader.jsx b/src/components/post/SubHeader.jsx index 4438fc5..4ae3392 100644 --- a/src/components/post/SubHeader.jsx +++ b/src/components/post/SubHeader.jsx @@ -6,6 +6,7 @@ import ShareToggle from '../modal/ShareToggle'; import KakaoModal from '../modal/KakaoModal'; import ModalPortal from '../modal/ModalPortal'; import Toast from '../common/Toast'; +import { Outlined36 } from '../../styles/ButtonStyle'; const Text = css` font-family: Pretendard; @@ -18,15 +19,6 @@ const FlexCenter = css` align-items: center; `; -const Button = css` - ${FlexCenter} - padding: 6px 16px; - border-radius: 6px; - border: 1px solid var(--gray300); - background: var(--white); - gap: 10px; -`; - const SubHeaderWrapper = styled.div` width: 100%; background-color: var(--white); @@ -144,9 +136,7 @@ const SplitBarVertical2 = styled(SplitBarVertical)` margin: 0 13px; `; -const ShareButton = styled.button` - ${Button} - +const ShareButton = styled(Outlined36)` @media (max-width: 470px) { padding: 6px 8px; } diff --git a/src/components/post/subheader/EmojiDropDown.jsx b/src/components/post/subheader/EmojiDropDown.jsx index ec8204f..6392e18 100644 --- a/src/components/post/subheader/EmojiDropDown.jsx +++ b/src/components/post/subheader/EmojiDropDown.jsx @@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { submitEmojiPost } from '../../../api/PostApi'; import { getEmojiData } from '../../../api/GetApi'; +import { Outlined36 } from '../../../styles/ButtonStyle'; const FlexCenter = css` display: flex; @@ -11,15 +12,6 @@ const FlexCenter = css` align-items: center; `; -const Button = css` - ${FlexCenter} - padding: 6px 16px; - border-radius: 6px; - border: 1px solid var(--gray300); - background: var(--white); - gap: 10px; -`; - const EmojiGroup = styled.div` display: flex; gap: 8px; @@ -93,17 +85,8 @@ const EmojiGroupInDropDown = styled(EmojiGroup)` grid-template-columns: 63px 63px 63px 63px; `; -const EmojiAddButton = styled.div` - ${Button} +const EmojiAddButton = styled(Outlined36)` position: relative; - cursor: pointer; - - color: var(--gray-900, #181818); - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 24px; @media (max-width: 470px) { span { diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx index e0b3e1e..fdb7aab 100644 --- a/src/styles/ButtonStyle.jsx +++ b/src/styles/ButtonStyle.jsx @@ -5,7 +5,7 @@ export const ButtonCommon = styled.button` justify-content: center; text-align: center; gap: 1rem; - background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')}); + cursor: ${({ disabled }) => disabled && 'not-allowed'}; `; @@ -54,16 +54,46 @@ export const Primary40 = styled(PrimaryBtn)` export const Secondary = styled(ButtonCommon)` padding: 0.7rem 1.6rem; + border-radius: 0.6rem; + color: var(--${({ disabled }) => (disabled ? 'white' : 'purple700')}); + border: 1px solid var(--purple600); + + &:hover:enabled { + background: var(--purple700); + } + + &:active:enabled { + background: var(--purple800); + } + + &:focus:enabled { + /* border: 2px solid var(--purple900); */ + background: var(--purple800); + } +`; - &:hover { - background: var(--gray300); +export const Outlined36 = styled(ButtonCommon)` + padding: 0.6rem 1.6rem; + border-radius: 0.6rem; + background: var(--${({ disabled }) => (disabled ? 'gray300' : 'white')}); + color: var(--${({ disabled }) => (disabled ? 'white' : 'gray900')}); + border: 1px solid var(--gray300); + /* Font/16 Regular */ + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + + &:hover:enabled { + background: var(--gray100); } - &:active { + &:active:enabled { background: var(--gray100); } - &:focus { + &:focus:enabled { border: 1px solid var(--gray500); } `; From ba549e8669cca3850c961e42cb3d0342aa3833e5 Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 16:07:00 +0900 Subject: [PATCH 5/8] =?UTF-8?q?Feat:=20Card=20=EB=A7=88=EC=9A=B0=EC=8A=A4?= =?UTF-8?q?=20hover=20=EC=8B=9C,=20=EC=9C=84=EB=A1=9C=20=EC=98=AC=EB=9D=BC?= =?UTF-8?q?=EA=B0=80=EB=8A=94=20animation=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/post/Card.jsx | 4 ++++ src/pages/PostId.jsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/components/post/Card.jsx b/src/components/post/Card.jsx index 37dbde5..63d2b17 100644 --- a/src/components/post/Card.jsx +++ b/src/components/post/Card.jsx @@ -27,6 +27,10 @@ export const CardContentWrapper = styled.div` box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08); cursor: pointer; + transition: all 0.5s ease-out; + &:hover { + transform: translateY(-1.2rem); + } @media (max-width: 1023px) { width: 50%; diff --git a/src/pages/PostId.jsx b/src/pages/PostId.jsx index b57f747..965798e 100644 --- a/src/pages/PostId.jsx +++ b/src/pages/PostId.jsx @@ -70,6 +70,10 @@ export const CardWrapper = styled.div` const CardAdd = styled(CardContentWrapper)` justify-content: center; position: relative; + transition: all 0.5s ease-out; + &:hover { + transform: translateY(-1.2rem); + } `; // eslint-disable-next-line const PlusIcon = styled.div` From 167a12ad7930a3c67d3d747abb7392bf75164bc2 Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 16:20:36 +0900 Subject: [PATCH 6/8] =?UTF-8?q?Refactor:=20Outlined40=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=B2=84=ED=8A=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header.js | 21 ++++----------------- src/styles/ButtonStyle.jsx | 26 ++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/src/components/common/Header.js b/src/components/common/Header.js index 309bd53..88d709f 100644 --- a/src/components/common/Header.js +++ b/src/components/common/Header.js @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { Link } from 'react-router-dom'; +import { Outlined40 } from '../../styles/ButtonStyle'; const StyledNav = styled.nav` width: 100%; @@ -25,20 +26,8 @@ const StyledHeader = styled.div` } `; -const ButtonContainer = styled.div` - button { - height: 40px; - border-radius: 6px; - padding: 8px 16px; - border: 1px solid #ccc; - background: #fff; - cursor: pointer; - font-size: 16px; - line-height: 26px; - letter-spacing: -0.16px; - text-align: center; - } -`; +const Button = styled(Outlined40)``; + const LogoURL = styled.a` display: flex; padding: 6px 0; @@ -65,9 +54,7 @@ function Header({ showButton }) { {showButton && ( - - - + )} diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx index fdb7aab..5c5cab7 100644 --- a/src/styles/ButtonStyle.jsx +++ b/src/styles/ButtonStyle.jsx @@ -97,3 +97,29 @@ export const Outlined36 = styled(ButtonCommon)` border: 1px solid var(--gray500); } `; + +export const Outlined40 = styled(ButtonCommon)` + padding: 0.8rem 1.6rem; + border-radius: 0.6rem; + background: var(--${({ disabled }) => (disabled ? 'gray300' : 'white')}); + color: var(--${({ disabled }) => (disabled ? 'white' : 'gray900')}); + border: 1px solid var(--gray300); + /* Font/16 Regular */ + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + + &:hover:enabled { + background: var(--gray100); + } + + &:active:enabled { + background: var(--gray100); + } + + &:focus:enabled { + border: 1px solid var(--gray500); + } +`; From b4fbc688d7f76a51f39590e76998f567cd6c5a7a Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 16:25:02 +0900 Subject: [PATCH 7/8] =?UTF-8?q?Feat:=20/post=20=EB=82=B4=20color,=20image?= =?UTF-8?q?=20hover=20=EC=8B=9C,=20animation=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/post/postmake/ColorSelection.js | 5 ++++- src/components/post/postmake/ImageSelection.js | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/post/postmake/ColorSelection.js b/src/components/post/postmake/ColorSelection.js index fb5cc7c..293a4f8 100644 --- a/src/components/post/postmake/ColorSelection.js +++ b/src/components/post/postmake/ColorSelection.js @@ -23,7 +23,10 @@ const ColorOption = styled.div` border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.08); cursor: pointer; - + transition: all 0.4s ease-out; + &:hover { + transform: translateY(-1.2rem); + } @media (max-width: 768px) { width: 154px; height: 154px; diff --git a/src/components/post/postmake/ImageSelection.js b/src/components/post/postmake/ImageSelection.js index f778dd0..992eac6 100644 --- a/src/components/post/postmake/ImageSelection.js +++ b/src/components/post/postmake/ImageSelection.js @@ -22,7 +22,10 @@ const ImageOption = styled.div` height: 168px; margin: 5px; cursor: pointer; - + transition: all 0.4s ease-out; + &:hover { + transform: translateY(-1.2rem); + } @media (max-width: 768px) { width: 154px; height: 154px; From cce6487d6fc8ebe9dd9b45dd3feed3d08bc29fb1 Mon Sep 17 00:00:00 2001 From: Hooni07 <79882248+Hooni07@users.noreply.github.com> Date: Fri, 8 Mar 2024 16:33:21 +0900 Subject: [PATCH 8/8] =?UTF-8?q?Feat:=20Secondary=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20ToggleButton=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/post/postmake/ToggleButton.js | 3 ++- src/styles/ButtonStyle.jsx | 11 +++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/post/postmake/ToggleButton.js b/src/components/post/postmake/ToggleButton.js index d0b729e..65bcbad 100644 --- a/src/components/post/postmake/ToggleButton.js +++ b/src/components/post/postmake/ToggleButton.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { Secondary } from '../../../styles/ButtonStyle'; function ToggleButton({ state, handler, text1, text2 }) { return state ? ( @@ -20,7 +21,7 @@ const SelectToggle = styled.div` margin-top: 24px; `; -const BtnCommon = styled.button` +const BtnCommon = styled(Secondary)` display: flex; width: 122px; height: 40px; diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx index 5c5cab7..8f264ff 100644 --- a/src/styles/ButtonStyle.jsx +++ b/src/styles/ButtonStyle.jsx @@ -56,19 +56,14 @@ export const Secondary = styled(ButtonCommon)` padding: 0.7rem 1.6rem; border-radius: 0.6rem; color: var(--${({ disabled }) => (disabled ? 'white' : 'purple700')}); - border: 1px solid var(--purple600); &:hover:enabled { - background: var(--purple700); + background: var(--purple100); + color: var(--purple700); } &:active:enabled { - background: var(--purple800); - } - - &:focus:enabled { - /* border: 2px solid var(--purple900); */ - background: var(--purple800); + background: var(--purple100); } `;