From f34c9cf1a7c81c103c626745b093239434e8480a Mon Sep 17 00:00:00 2001 From: Likilee Date: Sun, 7 Aug 2022 18:07:03 +0900 Subject: [PATCH] =?UTF-8?q?feat(client/style):=20=EB=AA=87=EA=B0=80?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - mui ThemeProvider를 적용하고 몇 가지 색상을 적용해보았습니다. #342 --- packages/client/public/logo192.png | Bin 0 -> 8934 bytes packages/client/src/App.tsx | 75 ++++++++++++++++-- .../components/Sticker/Sticker.tsx | 5 +- .../presentation/pages/DashBoardPage.tsx | 8 +- 4 files changed, 76 insertions(+), 12 deletions(-) create mode 100644 packages/client/public/logo192.png diff --git a/packages/client/public/logo192.png b/packages/client/public/logo192.png new file mode 100644 index 0000000000000000000000000000000000000000..18b934ea3ab7c5543967e7c2b379200c19a51502 GIT binary patch literal 8934 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 literal 0 HcmV?d00001 diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx index e8e1044..bddd90e 100644 --- a/packages/client/src/App.tsx +++ b/packages/client/src/App.tsx @@ -1,16 +1,79 @@ +import { createTheme, ThemeProvider } from '@mui/material'; +import { red } from '@mui/material/colors'; import React from 'react'; import { Route, Routes } from 'react-router-dom'; import DashBoardPage from './dashboard/presentation/pages/DashBoardPage'; import Login from './dashboard/presentation/pages/Login'; +const Colors = { + cyan: '#65C2C2', + magenta: '#EA6390', + yellow: '#F7C667', + blue: '#6492C1', + white: '#FFF', + grey100: '#F5F5F5', +}; + +const theme = createTheme({ + palette: { + mode: 'light', + common: {}, + primary: { + main: Colors.cyan, + }, + secondary: { + main: Colors.magenta, + }, + // error: {}, + warning: { + main: Colors.yellow, + }, + info: { + main: Colors.blue, + }, + // success: {}, + background: { + paper: '#f2f2f2', + default: '#fff', + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + root: { + backgroundColor: Colors.white, + boxShadow: 'none', + borderBottom: '1px solid #e5e5e5', + }, + }, + }, + MuiDrawer: { + styleOverrides: { + paper: { + backgroundColor: Colors.white, + }, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + backgroundColor: Colors.grey100, + }, + }, + }, + }, +}); + function App() { return ( -
- - } /> - } /> - -
+ +
+ + } /> + } /> + +
+ ); } diff --git a/packages/client/src/dashboard/presentation/components/Sticker/Sticker.tsx b/packages/client/src/dashboard/presentation/components/Sticker/Sticker.tsx index 51762c6..bf9dba4 100644 --- a/packages/client/src/dashboard/presentation/components/Sticker/Sticker.tsx +++ b/packages/client/src/dashboard/presentation/components/Sticker/Sticker.tsx @@ -3,6 +3,7 @@ import StickerContentFactory, { } from './StickerContentFactory'; import useMode from '../../../application/services/useMode'; import EditToolBar from '../Common/EditToolBar'; +import { Card } from '@mui/material'; interface StickerProps { id: string; @@ -14,7 +15,7 @@ function Sticker(props: StickerProps) { const { id, data, handleStickerRemove } = props; const { getControlMode } = useMode(); return ( - <> + {getControlMode() === 'edit' && ( )} @@ -22,7 +23,7 @@ function Sticker(props: StickerProps) { type={data.type} contentProps={data.contentProps} /> - + ); } diff --git a/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx b/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx index e1092b7..aa44149 100644 --- a/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx +++ b/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx @@ -1,4 +1,4 @@ -import { Box, CssBaseline } from '@mui/material'; +import { Box, CssBaseline, Paper } from '@mui/material'; import AppBar from '../components/AppBar/AppBar'; import ProfileMenu from '../components/AppBar/ProfileMenu/ProfileMenu'; import Board from '../components/Board/Board'; @@ -30,7 +30,7 @@ function DashBoardPage() { .then((response: any) => response.data) .then((data) => setUser(data)) .catch((error) => { - navigate(`/`); + // navigate(`/`); }); } }); @@ -76,7 +76,7 @@ function DashBoardPage() { ); return ( - + @@ -89,7 +89,7 @@ function DashBoardPage() {