From 83c27b82fb3f9ff7f579302cabd7b1aa002b30ff Mon Sep 17 00:00:00 2001 From: chichoon Date: Sat, 12 Mar 2022 13:00:02 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Design:=20Global.styled.js=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EB=AA=85=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 노션 팔레트 참고 --- src/Styled/Global.styled.js | 87 ++++++++++++++++++++----------------- 1 file changed, 46 insertions(+), 41 deletions(-) diff --git a/src/Styled/Global.styled.js b/src/Styled/Global.styled.js index 8dc0820..a701e3c 100644 --- a/src/Styled/Global.styled.js +++ b/src/Styled/Global.styled.js @@ -1,52 +1,57 @@ import styled from 'styled-components'; const theme = { + // Main Theme primary: '#53b7ba', - secondary: 'rgba(42, 45, 56, 1)', - background: '#f5f5f5', - text: '#000', - textSecondary: '#666', - textLightSecondary: '#ccc', - disabled: '#c4c4c4', - - textColor: '#000', - textColorSecondary: '#666', - textColorGray: '#979797', - textColorLightGray: '#ddd', - textColorLight: '#eee', - textColorWhite: '#fff', - textColorMint: '#54b7ba', - - likedIconColor: '#df867d', - commentIconColor: '#53b7ba', - - borderColor: '#e6e6e6', + secondary: '#2a2d38', + primaryEcole: '#387e9c', + white: '#fff', + black: '#000', + + //Background Color + backgroundTheme1: '#696b72', + backgroundTheme2: '#40424c', + backgroundTheme3: '#2a2d38', + backgroundWhite: '#fff', + backgroundGray1: '#f9f9f9', + backgroundGray2: '#eaeaea', + backgroundGray3: '#c4c4c4', + backgroundBlack: '#000', + backgroundBlue1: '#e4f3f3', + backgroundBlue2: '#53b7ba', + backgroundBlue3: '#4c5a66', + + //Text Color + textWhite: '#fff', + textGray1: '#eee', + textGray2: '#c4c4c4', + textGray3: '#979797', + textGray4: '#5f5f5f', + textBlack: '#000', + textBlue: '#53b7ba', + textRed: '#df867d', + + //Button Color + buttonWhite: '#fff', + buttonGray1: '#d8d8d8', + buttonGray2: '#b4b4b4', + buttonBlack: '#000', + buttonBlue1: '#bce0e1', + buttonBlue2: '#53b7ba', + buttonRed1: '#df867d', + buttonRed2: '#ad0000', + + //Line Color + lineGray1: '#d8d8d8', + lineGray2: '#e6e6e6', + lineGray3: '#f9f9f9', + lineBlue1: '#dadde6', + + //Length borderRadius: '0.25rem', - headerHeight: '4.5rem', - headerBackgroundColor: 'rgba(42, 45, 56, 1)', - headerIconColor: '#fff', - - mainPageCheckInInfoBackgroundColor: '#e4f3f3', - mainPageCheckInInfoProgressBarColorGaepo: '#53b7ba', - mainPageCheckInInfoProgressBarColorSeocho: '#387E9C', - mainPageCheckInInfoProgressBarBackgroundColor: '#B4B4B4', - - previewArticleBackgroundColor: '#fff', - - profilePageMyInfoBackgroundColor: '#2a2d38', - profilePageBackgroundColor: '#f9f9f9', - - createArticlePageInputBorderColor: '#dadde6', - - categoryNameBackgroundColor: '#4C5A66', - categoryNameTextColor: '#FFF', - mobileMinWidth: '28rem', desktopWidth: '24.5rem', - - likedCountColor: '#DF867D', - commentCountColor: '#53B7BA', }; const assets = { From f3082cdd7dd65a2d7ff00bd686bf192207de365c Mon Sep 17 00:00:00 2001 From: chichoon Date: Sat, 12 Mar 2022 13:00:23 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Design:=20=EB=B0=94=EB=80=90=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EB=AA=85=EC=9D=84=20=EB=AA=A8=EB=93=A0=20Styled.js?= =?UTF-8?q?=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Footer.styled.js | 4 +-- src/Components/Header.jsx | 12 +++---- src/Components/PreviewArticle.styled.js | 8 ++--- src/Components/ProfileHeader.styled.js | 2 +- .../Components/AlarmArticle.styled.js | 5 +-- src/Pages/ArticlePage/ArticlePage.styled.js | 36 +++++++++---------- src/Pages/AuthPage/Components/Auth.styled.js | 28 +++++++-------- src/Pages/CategoryPage/CategoryPage.styled.js | 4 +-- .../CategoryPage/Components/Body.styled.js | 2 +- .../CreateArticlePage.styled.js | 7 ++-- src/Pages/MainPage/Components/Body.styled.js | 36 +++++++++---------- .../Components/MyComment.styled.js | 4 +-- .../ProfilePage/Components/Info.styled.js | 4 +-- .../SettingPage/Components/Setting.styled.js | 2 +- 14 files changed, 76 insertions(+), 78 deletions(-) diff --git a/src/Components/Footer.styled.js b/src/Components/Footer.styled.js index bd841a8..8354e10 100644 --- 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 index 408fd13..3e67cb9 100644 --- a/src/Components/Header.jsx +++ b/src/Components/Header.jsx @@ -101,13 +101,13 @@ const Header = () => {
{!isArticle && ( )} {isArticle && ( )} @@ -122,15 +122,15 @@ const Header = () => {
{/**/} navi('/profile')} /> navi('/alarm')} />
@@ -142,7 +142,7 @@ const Header = () => { height: GlobalStyled.theme.headerHeight, }} > - {/* navi('/search')} /> */} + {/* navi('/search')} /> */} * { + .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 index 51f9f4f..b16f2e3 100644 --- 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 index 5e3741c..a5a90dd 100644 --- 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 index 5db3b02..25b68c0 100644 --- a/src/Pages/ArticlePage/ArticlePage.styled.js +++ b/src/Pages/ArticlePage/ArticlePage.styled.js @@ -27,11 +27,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; @@ -47,7 +47,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 { @@ -58,7 +58,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; @@ -93,7 +93,7 @@ const CreateCommentDiv = styled.div` form { width: 90%; - background-color: ${GlobalStyled.theme.textColorLight}; + background-color: ${GlobalStyled.theme.textGray1}; border-radius: 2rem; display: flex; flex-direction: row; @@ -104,11 +104,11 @@ const CreateCommentDiv = 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; @@ -120,8 +120,8 @@ const CreateCommentDiv = 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; @@ -129,7 +129,7 @@ const CreateCommentDiv = styled.div` box-shadow: none; &:hover { - background-color: ${GlobalStyled.theme.primary}; + background-color: ${GlobalStyled.theme.buttonBlue2}; } } } @@ -143,7 +143,7 @@ const ArticleLikedDiv = styled.div` margin-top: 1em; margin-bottom: 0.2rem; font-size: 0.95rem; - color: ${GlobalStyled.theme.likedCountColor}; + color: ${GlobalStyled.theme.buttonRed1}; svg { width: 2rem; @@ -166,12 +166,12 @@ const ArticleCommentDiv = styled.div` width: 100%; align-items: center; justify-content: flex-start; - color: ${GlobalStyled.theme.commentIconColor}; + color: ${GlobalStyled.theme.textBlue}; font-size: 0.85rem; margin-top: 0.5rem; padding: 0.3rem 0.8rem 0.5rem 0.8rem; - border-top: 1.5px solid ${GlobalStyled.theme.borderColor}; + border-top: 1.5px solid ${GlobalStyled.theme.lineGray2}; svg { width: 1.3rem; @@ -212,7 +212,7 @@ const ArticlePageDiv = styled.div` align-items: flex-end; padding: 0.7rem; width: 100%; - border-bottom: 1px solid ${GlobalStyled.theme.borderColor}; + border-bottom: 1px solid ${GlobalStyled.theme.lineGray2}; .title { display: flex; @@ -222,7 +222,7 @@ const ArticlePageDiv = styled.div` h1 { font-size: 1rem; font-weight: 600; - color: ${GlobalStyled.theme.textColor}; + color: ${GlobalStyled.theme.textBlack}; margin-bottom: 0.2rem; padding-right: 0.5rem; } @@ -233,7 +233,7 @@ const ArticlePageDiv = styled.div` align-items: center; h2 { - color: ${GlobalStyled.theme.textColorGray}; + color: ${GlobalStyled.theme.textGray3}; font-size: 0.7rem; font-weight: 300; margin-right: 0.8rem; @@ -285,13 +285,13 @@ const CommentDiv = styled.div` margin: 0rem 0.7rem; ${props => props.isMine && `text-align: right;`} h1 { - color: ${GlobalStyled.theme.textColor}; + color: ${GlobalStyled.theme.textBlack}; font-size: 0.9rem; font-weight: 600; line-height: 1.1; } h2 { - color: ${GlobalStyled.theme.textColorGray}; + color: ${GlobalStyled.theme.textGray3}; font-size: 0.4rem; font-weight: 400; } diff --git a/src/Pages/AuthPage/Components/Auth.styled.js b/src/Pages/AuthPage/Components/Auth.styled.js index 097b629..f9b0830 100644 --- 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 index e215f02..1af3be4 100644 --- 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 index 87d9a06..5715e83 100644 --- 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 index 7c7e3f9..931bdd7 100644 --- 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}; } } } diff --git a/src/Pages/MainPage/Components/Body.styled.js b/src/Pages/MainPage/Components/Body.styled.js index 0fafd9f..d2afff1 100644 --- a/src/Pages/MainPage/Components/Body.styled.js +++ b/src/Pages/MainPage/Components/Body.styled.js @@ -8,7 +8,7 @@ const ListDivider = styled.div` box-sizing: border-box; padding: ${props => props.margin || '0'}; background-color: ${props => - props.backgroundColor || GlobalStyled.theme.borderColor}; + props.backgroundColor || GlobalStyled.theme.lineGray2}; `; const StyledList = styled(List)` @@ -20,7 +20,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}) { @@ -36,9 +36,9 @@ const BoardTitleDiv = styled.div` box-sizing: border-box; width: 100%; display: flex; - background-color: ${GlobalStyled.theme.background}; - color: ${GlobalStyled.theme.text}; - border-bottom: 1px solid ${GlobalStyled.theme.borderColor}; + background-color: ${GlobalStyled.theme.backgroundGray1}; + color: ${GlobalStyled.theme.textBlack}; + border-bottom: 1px solid ${GlobalStyled.theme.lineGray2}; // padding: 0.65rem 1.2rem; padding: 0.65rem 1rem; align-items: center; @@ -66,7 +66,7 @@ const BoardTitleDiv = styled.div` const CheckInHeader = styled.div` display: flex; justify-content: space-between; - background-color: ${GlobalStyled.theme.mainPageCheckInInfoBackgroundColor}; + background-color: ${GlobalStyled.theme.backgroundBlue1}; flex-direction: row; align-items: center; padding: 0.5rem 1.2rem; @@ -81,7 +81,7 @@ const CheckInHeader = styled.div` } button { padding: 0.2rem 0.5rem; - background-color: ${GlobalStyled.theme.primary}; + background-color: ${GlobalStyled.theme.buttonBlue2}; } `; @@ -89,7 +89,7 @@ const CheckInBody = styled.div` display: flex; justify-content: space-around; padding: 0.5rem 1.2rem 1.8rem; - background-color: ${GlobalStyled.theme.mainPageCheckInInfoBackgroundColor}; + background-color: ${GlobalStyled.theme.backgroundBlue1}; .circular_progress_bar_div { width: 7.3rem; @@ -102,7 +102,7 @@ const CheckInBody = styled.div` font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; - color: ${GlobalStyled.theme.textColor}; + color: ${GlobalStyled.theme.textBlack}; } .circular_progress_bar { @@ -120,29 +120,27 @@ const CheckInBody = styled.div` .gaepo { .CircularProgressbar-trail { - stroke: ${GlobalStyled.theme - .mainPageCheckInInfoProgressBarBackgroundColor}80; + stroke: ${GlobalStyled.theme.backgroundGray3}80; } .CircularProgressbar-path { - stroke: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorGaepo}; + stroke: ${GlobalStyled.theme.primary}; } .CircularProgressbar-text { - fill: ${GlobalStyled.theme.textColor}; - //fill: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorGaepo}; + fill: ${GlobalStyled.theme.textBlack}; + //fill: ${GlobalStyled.theme.primary}; } } .seocho { .CircularProgressbar-trail { - stroke: ${GlobalStyled.theme - .mainPageCheckInInfoProgressBarBackgroundColor}80; + stroke: ${GlobalStyled.theme.backgroundGray3}80; } .CircularProgressbar-path { - stroke: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorSeocho}; + stroke: ${GlobalStyled.theme.primaryEcole}; } .CircularProgressbar-text { - fill: ${GlobalStyled.theme.textColor}; - //fill: ${GlobalStyled.theme.mainPageCheckInInfoProgressBarColorSeocho}; + fill: ${GlobalStyled.theme.textBlack}; + //fill: ${GlobalStyled.theme.primaryEcole}; } } `; diff --git a/src/Pages/MyCommentPage/Components/MyComment.styled.js b/src/Pages/MyCommentPage/Components/MyComment.styled.js index b492bbb..3fe7a54 100644 --- a/src/Pages/MyCommentPage/Components/MyComment.styled.js +++ b/src/Pages/MyCommentPage/Components/MyComment.styled.js @@ -21,7 +21,7 @@ const MyCommentDiv = styled.div` padding: 0.5rem 1rem; .top { - color: ${GlobalStyled.theme.textColorGray}; + color: ${GlobalStyled.theme.textGray2}; font-size: 0.6rem; } .middle { @@ -37,7 +37,7 @@ const MyCommentDiv = styled.div` justify-content: space-between; align-items: center; font-size: 0.75rem; - color: ${GlobalStyled.theme.textColorGray}; + color: ${GlobalStyled.theme.textGray2}; *:nth-child(1) { font-weight: bold; diff --git a/src/Pages/ProfilePage/Components/Info.styled.js b/src/Pages/ProfilePage/Components/Info.styled.js index 10480ba..12995c0 100644 --- a/src/Pages/ProfilePage/Components/Info.styled.js +++ b/src/Pages/ProfilePage/Components/Info.styled.js @@ -20,12 +20,12 @@ const InfoDiv = styled.div` font-size: 1.2rem; line-height: 20px; - color: ${GlobalStyled.theme.textColorWhite}; + color: ${GlobalStyled.theme.textWhite}; } .welcome-message { padding-left: 0.4rem; font-size: 0.5rem; - color: ${GlobalStyled.theme.textColorLightGray}; + color: ${GlobalStyled.theme.textGray2}; } } `; diff --git a/src/Pages/SettingPage/Components/Setting.styled.js b/src/Pages/SettingPage/Components/Setting.styled.js index 0bfa3f5..d46788f 100644 --- a/src/Pages/SettingPage/Components/Setting.styled.js +++ b/src/Pages/SettingPage/Components/Setting.styled.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; import GlobalStyled from 'Styled/Global.styled'; const SettingDiv = styled.div` - background: ${GlobalStyled.theme.profilePageBackgroundColor}; + background: ${GlobalStyled.theme.backgroundGray1}; .setting_container_title { box-sizing: border-box; font-size: 1.2rem; From ebdf2ac78c4066929749b1146a8606d64732d380 Mon Sep 17 00:00:00 2001 From: chichoon Date: Sat, 12 Mar 2022 13:19:19 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Design:=20Global.styled.js=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EB=AA=85=EB=8F=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Styled/Global.styled.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Styled/Global.styled.js b/src/Styled/Global.styled.js index a701e3c..c551e69 100644 --- a/src/Styled/Global.styled.js +++ b/src/Styled/Global.styled.js @@ -86,17 +86,15 @@ const ProfileBackgroundDiv = styled.div` // color background-color: ${props => - props.isProfile - ? theme.profilePageMyInfoBackgroundColor - : theme.profilePageBackgroundColor}; + props.isProfile ? theme.backgroundTheme3 : theme.backgroundGray1}; `; const BoardTitleDiv = styled.div` box-sizing: border-box; width: 100%; display: flex; - background-color: ${theme.categoryNameBackgroundColor}; - color: ${theme.categoryNameTextColor}; + background-color: ${theme.backgroundBlue3}; + color: ${theme.textWhite}; // padding: 0.65rem 1.2rem; padding: 0.65rem 1rem; align-items: center;