Merge pull request #213 from 42-world/style/colorTheme

Design: Color Theme 변수명 변경 및 통일
42-world · Mar 12, 2022 · 3af1c23 · 3af1c23
2 parents 8904f44 + c8b36ef
commit 3af1c23
Show file tree

Hide file tree

Showing 15 changed files with 117 additions and 116 deletions.
diff --git a/src/Components/Footer.styled.js b/src/Components/Footer.styled.js
@@ -4,7 +4,7 @@ import GlobalStyled from 'Styled/Global.styled';
 
 const Footer = styled.div`
   background: ${props =>
-    props.isProfile && GlobalStyled.theme.profilePageMyInfoBackgroundColor};
+    props.isProfile && GlobalStyled.theme.backgroundTheme3};
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@ const Footer = styled.div`
   h6 {
     font-size: 0.6rem;
     font-weight: 700;
-    color: ${GlobalStyled.theme.textColorGray};
+    color: ${GlobalStyled.theme.textGray3};
   }
 `;
 

diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
@@ -101,13 +101,13 @@ const Header = () => {
         <div>
           {!isArticle && (
             <MenuIcon
-              sx={{ color: GlobalStyled.theme.headerIconColor }}
+              sx={{ color: GlobalStyled.theme.white }}
               onClick={handleOpenMenu}
             />
           )}
           {isArticle && (
             <ArrowBackIosRoundedIcon
-              sx={{ color: GlobalStyled.theme.headerIconColor }}
+              sx={{ color: GlobalStyled.theme.white }}
               onClick={handleBackButton}
             />
           )}
@@ -122,15 +122,15 @@ const Header = () => {
         </div>
         <div>
           {/*<SearchIcon
-            sx={{ color: GlobalStyled.theme.headerIconColor }}
+            sx={{ color: GlobalStyled.theme.white }}
             onClick={handleToggleSearch}
           />*/}
           <AccountCircleIcon
-            sx={{ color: GlobalStyled.theme.headerIconColor }}
+            sx={{ color: GlobalStyled.theme.white }}
             onClick={() => navi('/profile')}
           />
           <NotificationsIcon
-            sx={{ color: GlobalStyled.theme.headerIconColor }}
+            sx={{ color: GlobalStyled.theme.white }}
             onClick={() => navi('/alarm')}
           />
         </div>
@@ -142,7 +142,7 @@ const Header = () => {
           height: GlobalStyled.theme.headerHeight,
         }}
       ></div>
-      {/* <SearchIcon sx={{ color: GlobalStyled.theme.headerIconColor }} onClick={() => navi('/search')} /> */}
+      {/* <SearchIcon sx={{ color: GlobalStyled.theme.white }} onClick={() => navi('/search')} /> */}
       <SwipeableDrawer
         anchor="left"
         open={isMenuModal}

diff --git a/src/Components/PreviewArticle.styled.js b/src/Components/PreviewArticle.styled.js
@@ -12,7 +12,7 @@ const PreviewArticleDiv = styled.div`
   align-items: center;
   padding: 0.5rem 0.9rem 0.3rem 0.9rem;
   border-bottom: 1px solid #e6e6e6;
-  background-color: ${GlobalStyled.theme.previewArticleBackgroundColor};
+  background-color: ${GlobalStyled.theme.white};
 
   .top {
     display: flex;
@@ -26,7 +26,7 @@ const PreviewArticleDiv = styled.div`
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .top>* {
+  .top > * {
     padding-right: 0.3rem;
   }
   .middle {
@@ -74,7 +74,7 @@ const PreviewArticleDiv = styled.div`
     .liked_icon {
       margin-left: auto;
       margin-bottom: 0.1rem;
-      color: ${GlobalStyled.theme.likedIconColor};
+      color: ${GlobalStyled.theme.buttonRed1};
       &::after {
         content: '${props => {
           if (props.article.likeCount > 0) return props.article.likeCount;
@@ -84,7 +84,7 @@ const PreviewArticleDiv = styled.div`
     }
 
     .comment_icon {
-      color: ${GlobalStyled.theme.commentIconColor};
+      color: ${GlobalStyled.theme.buttonBlue2};
       &::after {
         content: '${props => {
           if (props.article.commentCount > 0) return props.article.commentCount;

diff --git a/src/Components/ProfileHeader.styled.js b/src/Components/ProfileHeader.styled.js
@@ -13,7 +13,7 @@ const ProfileHeaderDiv = styled.div`
   box-sizing: border-box;
 
   svg {
-    color: ${GlobalStyled.theme.headerIconColor};
+    color: ${GlobalStyled.theme.white};
     cursor: pointer;
   }
   #unvisible {

diff --git a/src/Pages/AlarmPage/Components/AlarmArticle.styled.js b/src/Pages/AlarmPage/Components/AlarmArticle.styled.js
@@ -17,9 +17,10 @@ const AlramArticleDiv = styled.div`
   background-color: #fff;
   ${props => (props.isNotice ? `cursor: default;` : `cursor: pointer;`)}
   ${props =>
-    props.isRead && `background-color: ${GlobalStyled.theme.textColorLight};`}
+    props.isRead && `background-color: ${GlobalStyled.theme.textGray1};`}
   ${props =>
-    props.isNotice && `background-color: ${GlobalStyled.theme.primary}99;`}
+    props.isNotice &&
+    `background-color: ${GlobalStyled.theme.backgroundBlue2}99;`}
 
   .left {
     word-break: keep-all;

diff --git a/src/Pages/ArticlePage/ArticlePage.styled.js b/src/Pages/ArticlePage/ArticlePage.styled.js
@@ -190,11 +190,11 @@ const CommentContent = styled.div`
     ${props =>
       props.isMine
         ? css`
-            background: ${GlobalStyled.theme.textColorMint};
+            background: ${GlobalStyled.theme.backgroundBlue2};
             color: white;
           `
         : css`
-            background: ${GlobalStyled.theme.textColorLightGray};
+            background: ${GlobalStyled.theme.backgroundGray2};
           `}
     border-radius: 0.5rem;
     font-size: 0.75rem;
@@ -210,7 +210,7 @@ const CommentContent = styled.div`
     margin-bottom: 0.2rem;
     margin-left: 1rem;
     margin-right: 0.2rem;
-    color: ${GlobalStyled.theme.textColorSecondary};
+    color: ${GlobalStyled.theme.textGray4};
   }
 
   .liked_count {
@@ -221,7 +221,7 @@ const CommentContent = styled.div`
     margin-bottom: 0.2rem;
     margin-right: 1rem;
     font-size: 0.75rem;
-    color: ${GlobalStyled.theme.likedCountColor};
+    color: ${GlobalStyled.theme.buttonRed1};
 
     svg {
       width: 1rem;
@@ -258,7 +258,7 @@ const CreateCommentViewDiv = styled.div`
 
   form {
     width: 90%;
-    background-color: ${GlobalStyled.theme.textColorLight};
+    background-color: ${GlobalStyled.theme.textGray1};
     border-radius: 2rem;
     display: flex;
     flex-direction: row;
@@ -269,11 +269,11 @@ const CreateCommentViewDiv = styled.div`
 
     input {
       width: 90%;
-      color: ${GlobalStyled.theme.textColor};
+      color: ${GlobalStyled.theme.textBlack};
       background-color: rgba(0, 0, 0, 0);
       border: none;
       &::placeholder {
-        color: ${GlobalStyled.theme.textColorGray};
+        color: ${GlobalStyled.theme.textGray3};
       }
       &:focus {
         outline: none;
@@ -285,16 +285,16 @@ const CreateCommentViewDiv = styled.div`
       box-sizing: content-box;
       border: none;
       background: none;
-      background-color: ${GlobalStyled.theme.primary};
-      color: ${GlobalStyled.theme.textColorWhite};
+      background-color: ${GlobalStyled.theme.buttonBlue2};
+      color: ${GlobalStyled.theme.textWhite};
       width: 40px;
       height: 40px;
       margin-left: 0.5rem;
       border-radius: 50%;
       box-shadow: none;
 
       &:hover {
-        background-color: ${GlobalStyled.theme.primary};
+        background-color: ${GlobalStyled.theme.buttonBlue2};
       }
     }
   }

diff --git a/src/Pages/AuthPage/Components/Auth.styled.js b/src/Pages/AuthPage/Components/Auth.styled.js
@@ -36,7 +36,7 @@ const ErrorSpan = styled.span`
 const Input = styled(TextField)`
   && {
     * {
-      color: ${GlobalStyled.theme.textColorLight};
+      color: ${GlobalStyled.theme.textGray1};
     }
     #filled-error-helper-text {
       padding: 10px 12px;
@@ -59,8 +59,8 @@ const AuthDiv = styled.div`
   height: 100%;
   gap: 10px;
 
-  color: ${GlobalStyled.theme.textColorWhite};
-  fill: ${GlobalStyled.theme.textColorWhite};
+  color: ${GlobalStyled.theme.textWhite};
+  fill: ${GlobalStyled.theme.textWhite};
 
   .input_div {
     display: flex;
@@ -74,7 +74,7 @@ const AuthDiv = styled.div`
       flex: 1 1 40%;
       top: 50%;
       /* transform: translateY(-50%); */
-      color: ${GlobalStyled.theme.textColorLight};
+      color: ${GlobalStyled.theme.textGray1};
       font-weight: 600;
       content: '@student.42seoul.kr';
     }
@@ -83,23 +83,23 @@ const AuthDiv = styled.div`
   .send_button {
     width: 100%;
     margin-bottom: 1rem;
-    color: ${GlobalStyled.theme.textColorWhite};
+    color: ${GlobalStyled.theme.textWhite};
     background-color: ${GlobalStyled.theme.primary};
     &:hover {
-      /* color: ${GlobalStyled.theme.textColorWhite}; */
-      background-color: ${GlobalStyled.theme.disabled};
+      /* color: ${GlobalStyled.theme.textWhite}; */
+      background-color: ${GlobalStyled.theme.backgroundGray3};
       /* background-color: #0000001f; */
     }
     &:active {
-      /* color: ${GlobalStyled.theme.textColorWhite}; */
+      /* color: ${GlobalStyled.theme.textWhite}; */
       background-color: ${GlobalStyled.theme.primary};
     }
     &:focus {
-      color: ${GlobalStyled.theme.textColorWhite};
+      color: ${GlobalStyled.theme.textWhite};
       background-color: ${GlobalStyled.theme.primary};
     }
     &:disabled {
-      background-color: ${GlobalStyled.theme.disabled};
+      background-color: ${GlobalStyled.theme.backgroundGray3};
     }
   }
 
@@ -110,12 +110,12 @@ const AuthDiv = styled.div`
       margin-top: 2rem;
       h2 {
         font-size: 1.2rem;
-        color: ${GlobalStyled.theme.primary};
+        color: ${GlobalStyled.theme.textBlue};
         font-weight: 700;
       }
       h3 {
         font-size: 1rem;
-        color: ${GlobalStyled.theme.textColorLight};
+        color: ${GlobalStyled.theme.textGray1};
         font-weight: 400;
       }
     }
@@ -131,7 +131,7 @@ const AuthDiv = styled.div`
 
     h4 {
       font-size: 0.8rem;
-      color: ${GlobalStyled.theme.textColorLight};
+      color: ${GlobalStyled.theme.textGray1};
       font-weight: 400;
       &:first-child {
         margin-bottom: 0.5rem;
@@ -141,7 +141,7 @@ const AuthDiv = styled.div`
     button {
       margin-top: 1rem;
       width: max-content;
-      color: ${GlobalStyled.theme.textColorWhite};
+      color: ${GlobalStyled.theme.textWhite};
       text-decoration: underline;
       border: none;
       background: none;

diff --git a/src/Pages/CategoryPage/CategoryPage.styled.js b/src/Pages/CategoryPage/CategoryPage.styled.js
@@ -48,14 +48,14 @@ const MainBody = styled.div`
     }
 
     select {
-      color: ${GlobalStyled.theme.categoryNameTextColor};
+      color: ${GlobalStyled.theme.textWhite};
       font-size: 1.1rem;
       font-weight: 700;
       padding-top: 0;
       padding-bottom: 0;
     }
     svg {
-      color: ${GlobalStyled.theme.categoryNameTextColor};
+      color: ${GlobalStyled.theme.textWhite};
     }
   }
 `;

diff --git a/src/Pages/CategoryPage/Components/Body.styled.js b/src/Pages/CategoryPage/Components/Body.styled.js
@@ -34,7 +34,7 @@ const StyledList = styled(List)`
     right: 1.5rem;
     z-index: 100;
     background-color: ${GlobalStyled.theme.secondary};
-    color: ${GlobalStyled.theme.headerIconColor};
+    color: ${GlobalStyled.theme.buttonWhite};
     border-radius: 40%;
     cursor: 'pointer';
     @media (min-width: ${GlobalStyled.theme.mobileMinWidth}) {

diff --git a/src/Pages/CreateArticlePage/CreateArticlePage.styled.js b/src/Pages/CreateArticlePage/CreateArticlePage.styled.js
@@ -83,8 +83,7 @@ const CreateArticlePage = styled.div`
         display: flex;
         background-color: #fff;
         padding: 0.9rem 1rem;
-        border: 1px solid
-          ${GlobalStyled.theme.createArticlePageInputBorderColor};
+        border: 1px solid ${GlobalStyled.theme.lineBlue1};
         font-size: 1rem;
         &:focus {
           outline: none;
@@ -134,14 +133,14 @@ const CreateArticlePage = styled.div`
       }
 
       select {
-        color: ${GlobalStyled.theme.categoryNameTextColor};
+        color: ${GlobalStyled.theme.textWhite};
         font-size: 1.1rem;
         font-weight: 700;
         padding-top: 0;
         padding-bottom: 0;
       }
       svg {
-        color: ${GlobalStyled.theme.categoryNameTextColor};
+        color: ${GlobalStyled.theme.textWhite};
       }
     }
   }