Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design: Color Theme 변수명 변경 및 통일 #213

Merged
merged 4 commits into from
Mar 12, 2022
Merged

Design: Color Theme 변수명 변경 및 통일 #213

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
83c27b8
Design: Global.styled.js 변수명 통일
chichoon Mar 12, 2022
f3082cd
Design: 바뀐 변수명을 모든 Styled.js에 적용
chichoon Mar 12, 2022
ebdf2ac
Design: Global.styled.js에서 사용하는 변수명도 수정
chichoon Mar 12, 2022
c8b36ef
Merge
Mar 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Components/Footer.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -27,7 +27,7 @@ const Footer = styled.div`
h6 {
font-size: 0.6rem;
font-weight: 700;
color: ${GlobalStyled.theme.textColorGray};
color: ${GlobalStyled.theme.textGray3};
}
`;

Expand Down
12 changes: 6 additions & 6 deletions src/Components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
)}
Expand All @@ -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>
Expand All @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions src/Components/PreviewArticle.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -26,7 +26,7 @@ const PreviewArticleDiv = styled.div`
white-space: nowrap;
text-overflow: ellipsis;
}
.top>* {
.top > * {
padding-right: 0.3rem;
}
.middle {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/Components/ProfileHeader.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ProfileHeaderDiv = styled.div`
box-sizing: border-box;

svg {
color: ${GlobalStyled.theme.headerIconColor};
color: ${GlobalStyled.theme.white};
cursor: pointer;
}
#unvisible {
Expand Down
5 changes: 3 additions & 2 deletions src/Pages/AlarmPage/Components/AlarmArticle.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
36 changes: 18 additions & 18 deletions src/Pages/ArticlePage/ArticlePage.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -120,16 +120,16 @@ 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;
border-radius: 50%;
box-shadow: none;

&:hover {
background-color: ${GlobalStyled.theme.primary};
background-color: ${GlobalStyled.theme.buttonBlue2};
}
}
}
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
28 changes: 14 additions & 14 deletions src/Pages/AuthPage/Components/Auth.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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';
}
Expand All @@ -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};
}
}

Expand All @@ -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;
}
}
Expand All @@ -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;
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/Pages/CategoryPage/CategoryPage.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
}
`;
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/CategoryPage/Components/Body.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}) {
Expand Down
Loading