feat(themeAndLayout): add theme and layout

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.0",
     "@reduxjs/toolkit": "^1.8.0",
     "@testing-library/jest-dom": "^4.2.4",

src/app/App.tsx

@@ -0,0 +1,24 @@
+import { Container } from '@mui/material';
+import TrackerList from '../components/trackerList/TrackerList'
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import palette from '../config/CustomTheme';
+import './App.css';
+import AppBar from './AppBar';
+
+const theme = createTheme({
+  palette: palette
+});
+
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Container>
+        <AppBar/>
+        <TrackerList />
+      </Container>
+    </ThemeProvider>
+  );
+}
+
+export default App;

src/app/AppBar.tsx

@@ -0,0 +1,28 @@
+import { AppBar as MuiAppBar, Box, Button, IconButton, Toolbar, Typography } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import './AppBar.css';
+
+function AppBar() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <MuiAppBar position="static">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Bujo Tracker
+          </Typography>
+        </Toolbar>
+      </MuiAppBar>
+    </Box>
+  );
+}
+
+export default AppBar;

src/config/CustomTheme.ts

@@ -0,0 +1,27 @@
+// Coolors URL: https://coolors.co/80cbc4-eeeeee-2e4057-db7f8e-ffe66d
+
+const CHARCOAL = {
+  main: '#2E4057'
+}
+const YELLOW_CRAYOLA = {
+  main: '#FFE66D'
+}
+/*
+const WHITE = {
+  main: '#EEEEEE'
+}
+const SHIMMERING_BLUSH = {
+  main: '#DB7F8E'
+}
+const MIDDLE_BLUE = {
+  main: '#80CBC4'
+}
+*/
+
+
+const palette = {
+  primary: CHARCOAL,
+  secondary: YELLOW_CRAYOLA,
+}
+
+export default palette;

src/index.tsx

@@ -2,7 +2,7 @@
 import {StrictMode} from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './app/App';
 import { BrowserRouter } from "react-router-dom";
 import { store } from './store/store';
 import { Provider } from 'react-redux';