#1: Add Material UI library

Ateixs · May 12, 2022 · 0e0c807 · 0e0c807
1 parent 1170a93
commit 0e0c807
Show file tree

Hide file tree

Showing 12 changed files with 471 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": false,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.7.0",
     "@types/node": "^17.0.32",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icon.png b/public/icon.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/icon.png" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/components/App/App.css b/src/components/App/App.css
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1,5 +1,9 @@
-import "./App.css";
+import Header from "../Header/Header";
 
-const App = () => <div></div>;
+const App = () => (
+  <div>
+    <Header />
+  </div>
+);
 
 export default App;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -0,0 +1,3 @@
+.logo-icon {
+  margin-right: 16px;
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -0,0 +1,16 @@
+import { AppBar, Toolbar, Typography } from "@mui/material";
+import LogoIcon from "../Logo/Logo";
+import "./Header.css";
+
+const Header = () => (
+  <div>
+    <AppBar position="relative" color="transparent">
+      <Toolbar>
+        <LogoIcon className="logo-icon" />
+        <Typography variant="h1">Paths viewer</Typography>
+      </Toolbar>
+    </AppBar>
+  </div>
+);
+
+export default Header;
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -0,0 +1,84 @@
+import { SvgIcon } from "@mui/material";
+import { FunctionComponent } from "react";
+
+const LogoIcon: FunctionComponent<{ className?: string }> = ({ className }) => (
+  <SvgIcon
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="512.000000pt"
+    height="512.000000pt"
+    viewBox="0 0 512.000000 512.000000"
+    preserveAspectRatio="xMidYMid meet"
+    className={className}
+  >
+    <g
+      transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path
+        d="M2558 4842 l-818 -246 0 -1793 0 -1793 59 7 c57 5 61 4 90 -25 41
+-40 42 -83 2 -122 -22 -23 -41 -30 -90 -36 l-61 -7 0 -397 0 -398 113 34 c61
+18 430 129 820 246 l707 212 0 1749 0 1749 -62 -7 c-35 -4 -96 -16 -137 -26
+-98 -25 -107 -24 -142 10 -36 37 -38 79 -5 119 20 23 43 33 113 50 48 12 121
+25 161 28 l72 7 0 443 c0 244 -1 444 -2 443 -2 0 -371 -111 -820 -247z m342
+-877 c39 -39 33 -83 -21 -147 -25 -29 -58 -72 -72 -95 -15 -23 -35 -47 -46
+-53 -31 -16 -76 -12 -104 10 -38 30 -42 64 -13 124 28 57 127 173 160 187 30
+12 67 2 96 -26z m-245 -520 c29 -28 31 -54 13 -189 -10 -77 -15 -95 -39 -118
+-37 -38 -81 -37 -120 1 -34 34 -36 58 -15 194 16 106 38 137 98 137 28 0 46
+-7 63 -25z m-60 -529 c18 -8 38 -23 44 -34 6 -12 11 -74 11 -142 0 -121 0
+-122 -29 -151 -20 -20 -39 -29 -61 -29 -22 0 -41 9 -61 29 -29 29 -29 30 -29
+151 0 68 5 130 11 141 6 12 25 27 42 34 40 18 32 17 72 1z m4 -551 c47 -24 55
+-60 44 -191 -11 -129 -22 -150 -84 -160 -29 -5 -41 -1 -68 22 l-34 28 5 122
+c5 131 17 166 61 184 32 13 44 12 76 -5z m-59 -550 c57 -30 61 -59 25 -201
+-20 -80 -30 -104 -55 -126 -34 -32 -58 -35 -99 -13 -46 23 -55 65 -31 154 10
+42 24 95 30 119 8 31 20 48 43 62 39 24 49 24 87 5z m-209 -525 c29 -16 51
+-67 44 -100 -7 -34 -115 -154 -157 -176 -60 -31 -128 13 -128 83 0 28 12 46
+67 106 36 40 73 78 81 85 19 15 66 16 93 2z"
+      />
+      <path
+        d="M3570 4641 l0 -439 48 -6 c135 -20 268 -67 296 -107 25 -36 20 -76
+-13 -110 -34 -34 -62 -36 -128 -10 -42 16 -86 27 -180 47 l-23 4 0 -1750 c0
+-962 2 -1750 4 -1750 3 0 325 -101 717 -225 392 -124 727 -225 745 -225 24 0
+39 8 58 31 l26 31 0 2213 0 2214 -22 26 c-19 22 -139 62 -766 260 -409 129
+-748 235 -753 235 -5 0 -9 -178 -9 -439z m580 -721 c50 -27 170 -217 170 -269
+0 -46 -38 -81 -87 -81 -48 1 -62 12 -103 80 -19 30 -51 77 -72 104 -29 37 -38
+58 -38 88 0 69 69 110 130 78z m285 -653 c21 -18 28 -35 35 -92 24 -184 4
+-244 -83 -245 -49 0 -87 35 -88 82 0 18 -4 71 -8 118 -9 90 0 128 36 149 31
+18 80 12 108 -12z m19 -558 c25 -29 26 -36 26 -151 0 -119 0 -120 -29 -149
+-38 -38 -91 -40 -126 -4 -24 23 -25 29 -25 155 0 126 1 132 25 155 37 38 95
+35 129 -6z m-13 -532 c29 -22 39 -55 39 -127 0 -66 -2 -74 -29 -101 -37 -37
+-79 -38 -120 -3 -30 25 -31 28 -31 110 0 77 2 87 25 109 27 28 88 34 116 12z
+m-378 -178 c12 -6 91 -79 174 -162 l153 -151 163 162 c172 170 186 179 240
+150 34 -18 46 -40 47 -82 0 -38 -7 -47 -160 -201 l-160 -161 155 -154 c95 -95
+159 -167 165 -186 20 -60 -22 -114 -89 -114 -31 0 -50 15 -198 162 l-163 162
+-163 -162 c-151 -150 -166 -162 -200 -162 -54 0 -92 36 -92 89 0 40 6 46 163
+204 l162 162 -160 160 c-169 169 -183 191 -156 244 26 49 71 64 119 40z"
+      />
+      <path
+        d="M26 5019 l-26 -31 0 -2213 0 -2214 23 -26 c18 -21 141 -63 766 -260
+410 -129 748 -235 753 -235 4 0 8 178 8 395 0 382 -1 395 -19 395 -23 0 -71
+54 -71 80 0 38 21 71 55 87 l35 17 0 1792 0 1792 -32 11 c-771 245 -1408 441
+-1433 441 -25 0 -40 -8 -59 -31z m819 -644 c104 -22 189 -69 270 -150 193
+-191 216 -468 67 -779 -81 -167 -224 -355 -355 -466 -49 -42 -66 -50 -98 -50
+-37 0 -48 8 -136 93 -122 117 -238 272 -302 401 -140 285 -143 525 -10 726 54
+80 118 134 214 180 123 59 221 72 350 45z m-50 -1660 c24 -23 25 -29 25 -153
+0 -126 -1 -130 -26 -156 -39 -38 -93 -36 -128 5 -25 29 -26 36 -26 149 0 113
+1 120 26 149 34 41 92 44 129 6z m-4 -544 c19 -15 24 -32 30 -97 15 -157 12
+-182 -20 -215 -42 -41 -109 -36 -139 12 -14 22 -28 214 -18 252 15 62 97 89
+147 48z m52 -541 c17 -13 31 -41 42 -78 8 -31 24 -81 35 -110 11 -30 20 -65
+20 -79 0 -36 -51 -83 -90 -83 -51 0 -83 42 -119 153 -39 123 -39 150 -2 188
+35 35 77 38 114 9z m306 -495 c46 -30 87 -55 92 -55 19 0 41 -62 34 -97 -8
+-43 -56 -76 -100 -68 -61 11 -199 109 -216 153 -20 53 27 120 86 122 12 0 58
+-25 104 -55z"
+      />
+      <path
+        d="M673 4200 c-108 -16 -208 -88 -263 -192 -29 -54 -35 -75 -38 -150
+-10 -205 92 -433 285 -639 l77 -81 53 58 c203 225 305 436 306 634 1 118 -26
+185 -107 266 -87 87 -190 121 -313 104z m100 -282 c33 -17 46 -39 46 -78 0
+-54 -38 -90 -94 -90 -38 0 -85 50 -85 90 0 64 76 109 133 78z"
+      />
+    </g>
+  </SvgIcon>
+);
+export default LogoIcon;
diff --git a/src/config/theme.ts b/src/config/theme.ts
@@ -0,0 +1,71 @@
+import { createTheme } from "@mui/material/styles";
+
+export default createTheme({
+  palette: {
+    primary: {
+      main: "#ae3ec9",
+      light: "#e599f7",
+      dark: "#862e9c",
+      contrastText: "#f8f0fc",
+    },
+    secondary: {
+      main: "#f76707",
+      light: "#ffc078",
+      dark: "#d9480f",
+      contrastText: "#fff4e6",
+    },
+    background: {
+      default: "#f1f3f5",
+    },
+    text: {
+      primary: "rgba(52,58,64,0.87)",
+      secondary: "rgba(52,58,64,0.54)",
+    },
+    success: {
+      main: "#0ca678",
+      light: "#96f2d7",
+      dark: "#087f5b",
+      contrastText: "#e6fcf5",
+    },
+    info: {
+      main: "#1098ad",
+      dark: "#0b7285",
+      light: "#66d9e8",
+      contrastText: "#e3fafc",
+    },
+    warning: {
+      main: "#f59f00",
+      dark: "#e67700",
+      light: "#ffe066",
+      contrastText: "#001fc1",
+    },
+    error: {
+      main: "#f03e3e",
+      light: "#ffa8a8",
+      dark: "#c92a2a",
+      contrastText: "#fff5f5",
+    },
+    divider: "#495057",
+  },
+  typography: {
+    htmlFontSize: 14,
+    h1: {
+      fontSize: 24,
+    },
+    h2: {
+      fontSize: 20,
+    },
+    h3: {
+      fontSize: 16,
+    },
+    h4: {
+      fontSize: 14,
+    },
+    body1: {
+      fontSize: 12,
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+});
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,13 +1,17 @@
+import { ThemeProvider } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./components/App/App";
+import theme from "./config/theme";
 import "./index.css";
 
-const MOUNT_NODE = document.getElementById('root') as HTMLElement;
+const MOUNT_NODE = document.getElementById("root") as HTMLElement;
 
 ReactDOM.render(
-  <React.StrictMode>
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
     <App />
-  </React.StrictMode>,
+  </ThemeProvider>,
   MOUNT_NODE
 );