push lagi

src/Utils/Index.js

@@ -74,13 +74,12 @@ function FadeMenu() {
 }
 
 const footerStyle = {
-    backgroundColor: "purple",
+    backgroundColor: "#0d2846",
     fontSize: "20px",
     color: "white",
     borderTop: "1px solid #E7E7E7",
     textAlign: "center",
     padding: "20px",
-    position: "fixed",
     left: "0",
     bottom: "0",
     height: "60px",

src/assets/Images.js

 const Images = {
 
     dropdownWhite: require('./dropdown-white.svg'),
+    dropdownBlack: require('./dropdown-black.svg'),
     flagEnglish: require('./english.svg'),
     search: require('./search.png'),
     logout: require('./setting.png'),

src/assets/dropdown-black.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H23.977V24H0z" transform="rotate(90 13.5 2.5)"/>
+        <path fill="#4B4B4B" d="M8.998 10.02L15.002 8.998 13.975 14.998z" transform="rotate(90 13.5 2.5) rotate(45 12 11.998)"/>
+    </g>
+</svg>

src/assets/dropdown-white.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6">
     <g fill="none" fill-rule="evenodd">
         <path d="M0 0H23.977V24H0z" transform="rotate(90 13.5 2.5)"/>
-        <path fill="#4B4B4B" d="M8.998 10.02L15.002 8.998 13.975 14.998z" transform="rotate(90 13.5 2.5) rotate(45 12 11.998)"/>
+        <path fill="#FFF" d="M8.998 10.02L15.002 8.998 13.975 14.998z" transform="rotate(90 13.5 2.5) rotate(45 12 11.998)"/>
     </g>
 </svg>

src/container/Beranda.js

+import React, { Component } from 'react';
+import { Typography } from '@material-ui/core';
+
+export default class Beranda extends Component {
+    render() {
+        return (
+            <div style={{ flex: 1 }}>
+                <div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 20 }}>
+                    <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
+                    <Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography>
+                </div>
+                <div style={{ flex: 1, padding: 20, width: '100%' }}>
+                    <div style={{ display: 'flex' }}>
+                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Budget - 2021 (0/7)</Typography>
+                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Laporan Bulanan - Oct 2020 (1/7)</Typography>
+                        <Typography style={{ color: '#51c6ea', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Rolling Outlook - Oct 2020 (0/5)</Typography>
+                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline' }}>Lainnya</Typography>
+                    </div>
+                </div>
+                <div style={{ flex: 1, padding: 20, width: '100%' }}>
+                    <div style={{ display: 'flex' }}>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25, padding: 16 }}>
+                            <Typography style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>BALANCE SHEET</Typography>
+
+                        </div>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>
+
+                        </div>
+                    </div>
+                    <div style={{ display: 'flex', marginTop: 25 }}>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25 }}>
+
+                        </div>
+                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/container/Home.js

@@ -28,6 +28,7 @@ import {
 } from "react-router-dom";
 import Images from '../assets/Images';
 import { FadeMenu, Footer } from '../Utils/Index';
+import Beranda from './Beranda';
 
 const drawerWidth = 240;
 
@@ -117,9 +118,9 @@ export default function MiniDrawer() {
           [classes.appBarShift]: open,
         })}
       >
-        <Toolbar style={{ flex: 1, backgroundColor: 'white' }}>
+        <Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
           <IconButton
-            color="default"
+            color="inherit"
             aria-label="open drawer"
             onClick={handleDrawerOpen}
             edge="start"
@@ -129,19 +130,19 @@ export default function MiniDrawer() {
           >
             <MenuIcon />
           </IconButton>
-          <div style={{ backgroundColor: 'white', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
+          <div style={{ backgroundColor: '#51c6ea', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}>
               <div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} />
-              <Typography style={{ color: 'black' }}>Tommy</Typography>
+              <Typography style={{ color: 'white' }}>Tommy</Typography>
               {/* <img src={require('./assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} /> */}
               <FadeMenu />
             </div>
-            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 10, paddingLeft: 10, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
               <img src={Images.search} alt="React Logo" style={{ height: 18, width: 18 }} />
             </div>
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
               <img src={Images.flagEnglish} alt="React Logo" style={{ height: 32, width: 32 }} />
-              <Typography style={{ color: 'black' }}>EN</Typography>
+              <Typography style={{ color: 'white' }}>EN</Typography>
             </div>
           </div>
         </Toolbar>
@@ -183,22 +184,24 @@ export default function MiniDrawer() {
           ))}
         </List>
       </Drawer>
-      <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between' }}>
+      <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
         <div>
           <div className={classes.toolbar} />
-          <Switch>
+          {/* <Switch>
             <Route exact path={path}>
               <h3>Please select a topic.</h3>
             </Route>
             <Route path={`${path}/:topicId`}>
               <Topic />
             </Route>
-          </Switch>
-        </div>
+          </Switch> */}
+          <Beranda />
           <Footer>
-          <span>footer content</span>
+            <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
           </Footer>
         </div>
+
+      </div>
     </div>
   );
 }