Commit c13028b3 authored by Deni Rinaldi's avatar Deni Rinaldi

Merge branch 'deni-dev(pc)' into 'master'

push lagi

See merge request !3
parents bdd4bf67 8a7de15a
......@@ -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",
......
const Images = {
dropdownWhite: require('./dropdown-white.svg'),
dropdownBlack: require('./dropdown-black.svg'),
flagEnglish: require('./english.svg'),
search: require('./search.png'),
logout: require('./setting.png'),
......
<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>
<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/assets/search.png

1.21 KB | W: | H:

src/assets/search.png

809 Bytes | W: | H:

src/assets/search.png
src/assets/search.png
src/assets/search.png
src/assets/search.png
  • 2-up
  • Swipe
  • Onion skin
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>
);
}
}
......@@ -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,21 +184,23 @@ 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>
</Switch> */}
<Beranda />
<Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer>
</div>
<Footer>
<span>footer content</span>
</Footer>
</div>
</div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment