From aa357811bfca2bbc84982a79502608be7a8553ec Mon Sep 17 00:00:00 2001
From: Sinji <sinzi031012@naver.com>
Date: Wed, 11 Oct 2023 17:44:29 +0900
Subject: [PATCH] Chore: Change the design in the box #103

---
 src/components/common/SelectType.js | 48 +++++++++++++++++++++--------
 src/styles/color.js                 |  1 +
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/components/common/SelectType.js b/src/components/common/SelectType.js
index 2be01777..14ec0551 100644
--- a/src/components/common/SelectType.js
+++ b/src/components/common/SelectType.js
@@ -11,21 +11,37 @@ export const SelectType= () =>{
     <StSelectType>
       <Stack spacing={20} direction="row">
         <CreateBox>
-          <Stack spacing={5} direction="column">
+          <Stack spacing={2} direction="column">
             <Stack spacing={1} direction="column">
               <Title>Create New</Title>
               <Title>Open-Source Repository</Title>
             </Stack>
+            <Stack spacing={1} direction="column">
+              <SubTitle>Provides step-by-step help to create</SubTitle>
+              <SubTitle>Open-Source Repository from scratch</SubTitle>
+            </Stack>
+            <Stack spacing={1} direction="column">
+              <Explanation>Recommended for people who are new to</Explanation>
+              <Explanation>creating Open Source repositories</Explanation>
+            </Stack>
             <CreateBtn variant="contained" onClick={() => navigate("/step1")}>
             Choose
             </CreateBtn></Stack>
         </CreateBox>
         <CheckBox>
-          <Stack spacing={5} direction="column">
+          <Stack spacing={2} direction="column">
             <Stack spacing={1} direction="column">
               <Title>Check existing</Title>
               <Title>Open-Source Repository</Title>
             </Stack>
+            <Stack spacing={1} direction="column">
+              <SubTitle>Checks that the existing repository</SubTitle>
+              <SubTitle>is running well as Open-Source</SubTitle>
+            </Stack>
+            <Stack spacing={1} direction="column">
+              <Explanation>Recommended for those who already run</Explanation>
+              <Explanation>an open source repository</Explanation>
+            </Stack>
             <CheckBtn variant="contained" onClick={() => navigate("/step1")}>
             Choose
             </CheckBtn></Stack>
@@ -82,37 +98,45 @@ text-align: center;
 `;
 
 const CreateBtn = styled(Button)({
-  width: "30%",
+  width: "100%",
+  minWidth: "20rem",
   height: "30%",
+  minHeight: "5rem",
+  borderRadius: "1rem",
   backgroundColor: `${COLOR.MAIN_PURPLE}`,
   "&:hover": {
     backgroundColor: `${COLOR.MAIN_PURPLE}`,
   },
+  fontSize: "1.5rem",
 });
 
 const CheckBtn = styled(Button)({
-  width: "30%",
+  width: "100%",
+  minWidth: "20rem",
   height: "30%",
-  backgroundColor: "black",
+  minHeight: "5rem",
+  backgroundColor: "white",
+  borderRadius: "1rem",
   "&:hover": {
-    backgroundColor: "black",
+    backgroundColor: "white",
   },
+  color: "black",
+  fontSize: "1.5rem",
 });
 
 export const Title = styled.h1`
-  font-size: 2.5rem;
+  font-size: 3rem;
   font-family: "Inter", sans-serif;
   font-weight: 700;
 `;
 
 export const SubTitle = styled.h3`
-  font-size: 3rem;
-  padding-bottom: 2rem;
+  font-size: 2rem;
   font-weight: 00;
 `;
 
-export const Explanation = styled.h6`
-  font-size: 3rem;
-  padding-bottom: 2rem;
+export const Explanation = styled.h4`
+  font-size: 1.3rem;
   font-weight: 00;
+  color: ${COLOR.FONT_GRAY}
 `;
diff --git a/src/styles/color.js b/src/styles/color.js
index 23b258cd..24cf6062 100644
--- a/src/styles/color.js
+++ b/src/styles/color.js
@@ -10,4 +10,5 @@ export const COLOR = {
   MAIN_BORDER: "#C4C4CD",
   BORDER_GRAY: "#9696A3",
   MAIN_PURPLE: "#3E1B6C",
+  FONT_GRAY: "#9A9A9A",
 };