Merge pull request #6 from graasp/3/materialUI

feat: add materialUI and materialUI scaffolding
graasp · Sep 18, 2020 · 15e44b6 · 15e44b6
2 parents fa1a3c1 + ffa52f7
commit 15e44b6
Show file tree

Hide file tree

Showing 11 changed files with 321 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "4.11.0",
+    "@material-ui/icons": "4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.56",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Graasp</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import Header from './layout/Header';
+
+function App() {
+  return (
+    <Header>
+      <div>Hello</div>
+    </Header>
+  );
+}
+
+export default App;
diff --git a/src/components/Root.js b/src/components/Root.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import App from './App';
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#5050d2',
+    },
+  },
+});
+
+const Root = () => {
+  return (
+    <div>
+      <MuiThemeProvider theme={theme}>
+        <App />
+      </MuiThemeProvider>
+    </div>
+  );
+};
+
+export default Root;
diff --git a/src/components/layout/Header.js b/src/components/layout/Header.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
+import { AccountCircle } from '@material-ui/icons';
+import { ReactComponent as GraaspLogo } from '../../resources/graasp-logo.svg';
+
+const useStyles = makeStyles((theme) => ({
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  headerLeft: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  logo: {
+    height: '48px',
+    marginRight: theme.spacing(2),
+  },
+}));
+
+const Header = () => {
+  const classes = useStyles();
+  return (
+    <header>
+      <AppBar position="static">
+        <Toolbar className={classes.header}>
+          <div className={classes.headerLeft}>
+            <GraaspLogo className={classes.logo} />
+            <Typography variant="h6" color="inherit">
+              Graasp
+            </Typography>
+          </div>
+          <IconButton color="inherit">
+            <AccountCircle />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import Root from './components/Root';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Root />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/resources/graasp-logo.svg b/src/resources/graasp-logo.svg