From 0543a8d0c21be35c8596891d432b2cbcf1ddeeb1 Mon Sep 17 00:00:00 2001 From: pkiop Date: Mon, 25 Jan 2021 16:33:17 +0900 Subject: [PATCH 1/4] Feat: Change App color --- .../UI/molecules/BottomBtns/style.ts | 10 ++++----- .../components/UI/molecules/Recode/style.ts | 6 ++++-- .../UI/molecules/TitleInput/style.ts | 2 +- .../components/UI/organisms/Board/style.ts | 2 +- .../UI/organisms/CategorySelectBar/style.ts | 2 +- .../UI/organisms/HeaderBar/style.ts | 10 +++++++-- .../components/UI/organisms/Modal/style.ts | 3 +++ .../components/UI/organisms/NavBar/style.ts | 2 +- .../UI/organisms/TimeInput/style.ts | 2 +- frontend/src/pages/Login/style.ts | 7 ++++++- frontend/src/styles/theme.ts | 21 ++++++++++--------- 11 files changed, 42 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/UI/molecules/BottomBtns/style.ts b/frontend/src/components/UI/molecules/BottomBtns/style.ts index b0ee39f..9e7602b 100644 --- a/frontend/src/components/UI/molecules/BottomBtns/style.ts +++ b/frontend/src/components/UI/molecules/BottomBtns/style.ts @@ -5,7 +5,7 @@ export const BottomBtns = styled.div` padding: 0.5rem; display: flex; justify-content: space-between; - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; border-radius: ${({ theme }) => theme.size.mainInputRadius}; `; @@ -17,25 +17,25 @@ const Btn = css` export const LgBtn = styled(Button)` ${Btn}; - background-color: ${({ theme }) => theme.color.submitGreen}; + background-color: ${({ theme }) => theme.color.submit}; transition: 0.3s; margin-right: 1em; width: 70%; :hover { - background-color: ${({ theme }) => theme.color.submitGreenHover}; + background-color: ${({ theme }) => theme.color.submitHover}; transition: 0.3s; cursor: pointer; } `; export const SmBtn = styled(Button)` ${Btn}; - background-color: ${({ theme }) => theme.color.deleteRed}; + background-color: ${({ theme }) => theme.color.delete}; transition: 0.3s; width: 25%; :hover { - background-color: ${({ theme }) => theme.color.deleteRedHover}; + background-color: ${({ theme }) => theme.color.deleteHover}; transition: 0.3s; cursor: pointer; } diff --git a/frontend/src/components/UI/molecules/Recode/style.ts b/frontend/src/components/UI/molecules/Recode/style.ts index 8e345d8..8430e28 100644 --- a/frontend/src/components/UI/molecules/Recode/style.ts +++ b/frontend/src/components/UI/molecules/Recode/style.ts @@ -3,12 +3,11 @@ import Text from 'components/UI/atoms/Text'; import TimeRangeTextComponent from 'components/UI/molecules/TimeRangeText'; export const Recode = styled.div` - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; padding: 1rem; display: flex; flex-direction: column; align-items: center; - height: 4rem; box-sizing: border-box; height: 6rem; border-radius: ${({ theme }) => theme.size.mainInputRadius}; @@ -19,6 +18,9 @@ export const Recode = styled.div` transition: 0.3s box-shadow; cursor: pointer; } + &.progress { + background-color: ${({ theme }) => theme.color.darkMainColor}; + } `; const textCss = css` diff --git a/frontend/src/components/UI/molecules/TitleInput/style.ts b/frontend/src/components/UI/molecules/TitleInput/style.ts index 41b0f80..1a67d86 100644 --- a/frontend/src/components/UI/molecules/TitleInput/style.ts +++ b/frontend/src/components/UI/molecules/TitleInput/style.ts @@ -3,7 +3,7 @@ import TextComponent from 'components/UI/atoms/Text'; import InputComponent from 'components/UI/atoms/Input'; export const TitleInput = styled.div` - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; border-radius: ${({ theme }) => theme.size.mainInputRadius}; `; diff --git a/frontend/src/components/UI/organisms/Board/style.ts b/frontend/src/components/UI/organisms/Board/style.ts index 01f19b9..9595004 100644 --- a/frontend/src/components/UI/organisms/Board/style.ts +++ b/frontend/src/components/UI/organisms/Board/style.ts @@ -4,7 +4,7 @@ export const Board = styled.div` padding: 1.2rem; width: 45%; height: 10rem; - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; border-radius: ${({ theme }) => theme.size.mainInputRadius}; display: flex; flex-direction: column; diff --git a/frontend/src/components/UI/organisms/CategorySelectBar/style.ts b/frontend/src/components/UI/organisms/CategorySelectBar/style.ts index 76bad64..122ba3f 100644 --- a/frontend/src/components/UI/organisms/CategorySelectBar/style.ts +++ b/frontend/src/components/UI/organisms/CategorySelectBar/style.ts @@ -4,7 +4,7 @@ import ToggleSwitchComponent from 'components/UI/atoms/ToggleSwitch'; export const CategorySelectBar = styled.div` padding: 0.5rem; - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; display: flex; justify-content: space-between; border-radius: ${({ theme }) => theme.size.mainInputRadius}; diff --git a/frontend/src/components/UI/organisms/HeaderBar/style.ts b/frontend/src/components/UI/organisms/HeaderBar/style.ts index b1810a4..8afb458 100644 --- a/frontend/src/components/UI/organisms/HeaderBar/style.ts +++ b/frontend/src/components/UI/organisms/HeaderBar/style.ts @@ -5,7 +5,7 @@ import DatePickerComponent from 'components/UI/atoms/DatePicker'; import UserModalComponent from 'components/UI/organisms/Modal'; export const HeaderBar = styled.div` - background-color: ${({ theme }) => theme.color.black}; + background-color: ${({ theme }) => theme.color.headerBar}; display: flex; justify-content: space-between; align-items: center; @@ -25,7 +25,7 @@ export const DigitalClockWrap = styled.div` `; export const DatePicker = styled(DatePickerComponent)` - background-color: black ; + background-color: ${({ theme }) => theme.color.headerBar} ; color: white ; text-align: center; color: transparent; @@ -33,6 +33,9 @@ export const DatePicker = styled(DatePickerComponent)` :focus { outline: none; } + :hover { + cursor: pointer; + } `; const UserRight = '0.4rem'; @@ -48,6 +51,9 @@ export const UserProfile = styled.div` margin-right: ${UserRight}; display: flex; align-items: center; + :hover { + cursor: pointer; + } `; export const UserImg = styled(Img)` diff --git a/frontend/src/components/UI/organisms/Modal/style.ts b/frontend/src/components/UI/organisms/Modal/style.ts index c5ce240..451197c 100644 --- a/frontend/src/components/UI/organisms/Modal/style.ts +++ b/frontend/src/components/UI/organisms/Modal/style.ts @@ -19,6 +19,9 @@ export const Dropdown = styled(DropdownComponent)` &.active{ flex-direction: column; z-index: 101; + :hover { + cursor: pointer; + } } `; diff --git a/frontend/src/components/UI/organisms/NavBar/style.ts b/frontend/src/components/UI/organisms/NavBar/style.ts index 1a9452f..9fb493f 100644 --- a/frontend/src/components/UI/organisms/NavBar/style.ts +++ b/frontend/src/components/UI/organisms/NavBar/style.ts @@ -9,7 +9,7 @@ export const NavBar = styled.div` `; export const AddBtn = styled.div` - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; width: 2.5rem; height: 2.5rem; border-radius: 1.3rem; diff --git a/frontend/src/components/UI/organisms/TimeInput/style.ts b/frontend/src/components/UI/organisms/TimeInput/style.ts index 3de19bd..4f53dbf 100644 --- a/frontend/src/components/UI/organisms/TimeInput/style.ts +++ b/frontend/src/components/UI/organisms/TimeInput/style.ts @@ -3,7 +3,7 @@ import TextComponent from 'components/UI/atoms/Text'; import InputComponent from 'components/UI/atoms/Input'; export const TimeInput = styled.div` - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; display: flex; justify-content: center; border-radius: ${({ theme }) => theme.size.mainInputRadius}; diff --git a/frontend/src/pages/Login/style.ts b/frontend/src/pages/Login/style.ts index ea38cc7..75fdef6 100644 --- a/frontend/src/pages/Login/style.ts +++ b/frontend/src/pages/Login/style.ts @@ -3,12 +3,14 @@ import ImgComponent from 'components/UI/atoms/Img'; import OAuthLoginComponent from 'components/UI/molecules/OAuthLogin'; export const LoginPage = styled.div` - background-color: ${({ theme }) => theme.color.beige}; + background-color: ${({ theme }) => theme.color.mainColor}; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; + + `; export const Img = styled(ImgComponent)` @@ -21,4 +23,7 @@ export const Img = styled(ImgComponent)` export const GoogleLogin = styled(OAuthLoginComponent)` border: 2px solid ${({ theme }) => theme.color.black}; + :hover { + cursor: pointer; + } `; diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts index 77b7952..b3a0544 100644 --- a/frontend/src/styles/theme.ts +++ b/frontend/src/styles/theme.ts @@ -1,15 +1,16 @@ const color = { black: '#000000', - mainColor: '#2E4B73', + headerBar: '#222831', + mainColor: '#dddddd', + darkMainColor: '#aaaaaa', + subMainColor: '#222831', white: '#FFFFFF', - beige: '#ECE6CC', - beigeCompare: '#E0980C', - navbar: '#3F93FD', - timeInput: '#F87878', - submitGreen: '#28A745', - submitGreenHover: '#218838', - deleteRed: '#DC3545', - deleteRedHover: '#C82333', + navbar: '#222831', + timeInput: '#bbbbbb', + submit: '#bbbbbb', + submitHover: '#218838', + delete: '#DC3545', + deleteHover: '#C82333', }; const size = { @@ -18,7 +19,7 @@ const size = { height: '1.4rem', }, mainInputRadius: '0.5rem', - headerBarHeight: '2.5rem', + headerBarHeight: '3rem', navbarHeight: '3rem', }; From ff2d276dc477b146fbf1c3b0116274579eafc5ba Mon Sep 17 00:00:00 2001 From: pkiop Date: Mon, 25 Jan 2021 16:33:41 +0900 Subject: [PATCH 2/4] Feat: Add progressing recode color --- frontend/src/components/UI/atoms/DatePicker/index.tsx | 2 +- frontend/src/components/UI/molecules/Recode/index.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/UI/atoms/DatePicker/index.tsx b/frontend/src/components/UI/atoms/DatePicker/index.tsx index e0df572..b366c8d 100644 --- a/frontend/src/components/UI/atoms/DatePicker/index.tsx +++ b/frontend/src/components/UI/atoms/DatePicker/index.tsx @@ -11,7 +11,7 @@ interface Props { function DatePicker({ userVar, setUserVar, className }: Props) { return ( setUserVar({ ...userVar, selectedDate: date.toISOString().split('T')[0] })} diff --git a/frontend/src/components/UI/molecules/Recode/index.tsx b/frontend/src/components/UI/molecules/Recode/index.tsx index a0d95c9..7cb5655 100644 --- a/frontend/src/components/UI/molecules/Recode/index.tsx +++ b/frontend/src/components/UI/molecules/Recode/index.tsx @@ -40,9 +40,10 @@ function Recode({ className, }: Props) { const nowTime = getNowTime(startTime, endTime); + const isProgressing = endTime.hour === nowHourMin().hour && endTime.min === nowHourMin().min; return ( - + From 15adb25cb3e7bf67e96b1b5947b3a984a9096b82 Mon Sep 17 00:00:00 2001 From: pkiop Date: Mon, 25 Jan 2021 20:58:47 +0900 Subject: [PATCH 3/4] Fix: Fix default category color --- frontend/src/pages/Main/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Main/index.tsx b/frontend/src/pages/Main/index.tsx index 896ff2d..c069f94 100644 --- a/frontend/src/pages/Main/index.tsx +++ b/frontend/src/pages/Main/index.tsx @@ -1,5 +1,5 @@ import React, { - useCallback, useState, useReducer, + useCallback, useState, useReducer, useRef, } from 'react'; import MainTemplate from 'components/templates/MainTemplate'; import RecodeList from 'components/UI/organisms/RecodeList'; @@ -19,6 +19,7 @@ function Main() { const toggleRecodeInput = useCallback(() => toggleBRecodeInput(), []); const plusOnClick = useCallback(() => { toggleBRecodeInput(); setClickedRecodeId(''); }, []); const userReactiveVar = useReactiveVar(userVar); + const bUserUpdating = useRef(false); const { loading, error, data, refetch, @@ -43,8 +44,9 @@ function Main() { if (userData.getUser.items.length !== 0) { tempLabelList = userData.getUser.items[0]?.categoryList; tempGoalTime = userData.getUser.items[0]?.goalTime; - } else { - const defaultLabelList = [{ color: 'red', labelName: '개발' }, { color: 'blue', labelName: '잠' }, { color: 'green', labelName: '책' }, { color: 'yellow', labelName: '운동' }, { color: 'skyblue', labelName: '산책' }, { color: 'black', labelName: '기타' }]; + } else if (bUserUpdating.current === false) { + bUserUpdating.current = true; + const defaultLabelList = [{ color: '#c70039', labelName: '개발' }, { color: '#111d5e', labelName: '잠' }, { color: '#007965', labelName: '책' }, { color: '#f37121', labelName: '운동' }, { color: '#51c2d5', labelName: '산책' }, { color: '#663f3f', labelName: '기타' }]; addUserData({ variables: { input: { @@ -53,6 +55,7 @@ function Main() { }, }, }).then(() => { + bUserUpdating.current = false; userRefetch(); }); } From 24e507b8d557f8eade386adc73b5455c0dee3efe Mon Sep 17 00:00:00 2001 From: pkiop Date: Mon, 25 Jan 2021 20:59:07 +0900 Subject: [PATCH 4/4] Fix: Fix empty color / string --- frontend/src/components/UI/atoms/PieChart/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/UI/atoms/PieChart/index.tsx b/frontend/src/components/UI/atoms/PieChart/index.tsx index d7e9abc..e206556 100644 --- a/frontend/src/components/UI/atoms/PieChart/index.tsx +++ b/frontend/src/components/UI/atoms/PieChart/index.tsx @@ -49,12 +49,11 @@ function PieChart({ const categoryData = recodeList?.reduce(reducer, {}); const colorData = recodeList?.reduce(colorReducer(categoryList), {}); const dataArray = Object.entries(categoryData || {}).map((el: any) => el); - bb.generate({ data: { - columns: dataArray.length === 0 ? [['empty', 1]] : dataArray, + columns: dataArray.length === 0 ? [['데이터 없음', 1]] : dataArray, type: pie(), - colors: colorData, + colors: JSON.stringify(colorData) === '{}' ? { '데이터 없음': '#dddddd' } : colorData, }, bindto: '#pieChart', });