navbar new
This commit is contained in:
parent
327e01ef9e
commit
6857f150f3
|
|
@ -30,9 +30,11 @@ imageUrl = "https://giift-api.asacreative.com";
|
|||
type = 'localhost';
|
||||
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
||||
// appUrl = 'http://localhost:7700';
|
||||
apiUrl = "http://localhost:4001/"
|
||||
apiUrl = "https://giift-api.asacreative.com/";
|
||||
// apiUrl = "http://localhost:4001/"
|
||||
}else{
|
||||
appUrl = 'https://sillyfish.asacreative.com';
|
||||
// appUrl = 'https://sillyfish.asacreative.com';
|
||||
appUrl = 'https://giift-api.asacreative.com';
|
||||
}
|
||||
|
||||
export const APP_TYPE = 'btn';
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default class WalletComponent extends React.Component {
|
|||
<p className={'titleVoucher'}>Voucher</p>
|
||||
<RouteDOM render={({ history}) => (
|
||||
<p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
|
||||
<NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
|
||||
<NumberFormat style={{color:"#FF6F00"}} value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
|
||||
</p>
|
||||
)} />
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@ export default class WalletComponent extends React.Component {
|
|||
<p className={'titlePoints'}>Points</p>
|
||||
<RouteDOM render={({ history}) => (
|
||||
<p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
|
||||
<NumberFormat value={(this.props.appstate.wallet.data.point)} displayType={'text'} thousandSeparator={true}/>
|
||||
<NumberFormat style={{color:"#FF6F00"}} value={(this.props.appstate.wallet.data.point)} displayType={'text'} thousandSeparator={true}/>
|
||||
</p>
|
||||
)} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,21 +9,30 @@ import { LINKS } from "../../routes";
|
|||
import startcase from "lodash.startcase";
|
||||
import Route from "./routes";
|
||||
import moment from 'moment';
|
||||
import { Icon, Button, Modal, notification } from 'antd';
|
||||
import {
|
||||
Divider,
|
||||
Drawer,
|
||||
List,
|
||||
ListItem,
|
||||
IconMenu,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
Icon,
|
||||
Button,
|
||||
Modal,
|
||||
notification
|
||||
} from 'antd';
|
||||
import {
|
||||
// Divider,
|
||||
// Drawer,
|
||||
// List,
|
||||
// ListItem,
|
||||
// IconMenu,
|
||||
// IconButton,
|
||||
// MenuItem,
|
||||
DropDownMenu,
|
||||
RaisedButton,
|
||||
Paper,
|
||||
Dialog,
|
||||
Snackbar,
|
||||
Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle, Badge
|
||||
// Toolbar,
|
||||
// ToolbarGroup,
|
||||
// ToolbarSeparator,
|
||||
// ToolbarTitle,
|
||||
// Badge
|
||||
} from 'material-ui';
|
||||
import IconUserCircle from 'material-ui/svg-icons/action/account-circle';
|
||||
import ShoppingCart from 'material-ui/svg-icons/action/shopping-cart';
|
||||
|
|
@ -47,10 +56,39 @@ import WalletComponent from "./WalletComponent";
|
|||
import { APP_TYPE } from "../../config/app";
|
||||
|
||||
|
||||
//new material ui
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import InputBase from '@material-ui/core/InputBase';
|
||||
import Badge from '@material-ui/core/Badge';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import Menu from '@material-ui/core/Menu';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import SearchIcon from '@material-ui/icons/Search';
|
||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||
import CartIcon from '@material-ui/icons/ShoppingCart';
|
||||
import NotificationsIcon from '@material-ui/icons/Notifications';
|
||||
import MoreIcon from '@material-ui/icons/MoreVert';
|
||||
import CancelIcon from '@material-ui/icons/Cancel';
|
||||
import { styles } from './styles';
|
||||
|
||||
import Drawer from '@material-ui/core/Drawer';
|
||||
// import Button from '@material-ui/core/Button';
|
||||
import List from '@material-ui/core/List';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import InboxIcon from '@material-ui/icons/MoveToInbox';
|
||||
import MailIcon from '@material-ui/icons/Mail';
|
||||
|
||||
faker.locale = 'id_ID';
|
||||
@inject("appstate")
|
||||
@observer
|
||||
export default class App extends React.Component {
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
|
|
@ -72,6 +110,10 @@ export default class App extends React.Component {
|
|||
.pathname
|
||||
.split('/')
|
||||
.map(path => startcase(path)),
|
||||
|
||||
anchorEl: null,
|
||||
mobileMoreAnchorEl: null,
|
||||
left: false,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.user = props.appstate.user;
|
||||
|
|
@ -271,7 +313,34 @@ export default class App extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
|
||||
//new
|
||||
handleProfileMenuOpen = event => {
|
||||
this.setState({ anchorEl: event.currentTarget });
|
||||
};
|
||||
|
||||
handleMenuClose = () => {
|
||||
this.setState({ anchorEl: null });
|
||||
this.handleMobileMenuClose();
|
||||
};
|
||||
|
||||
handleMobileMenuOpen = event => {
|
||||
this.setState({ mobileMoreAnchorEl: event.currentTarget });
|
||||
};
|
||||
|
||||
handleMobileMenuClose = () => {
|
||||
this.setState({ mobileMoreAnchorEl: null });
|
||||
};
|
||||
|
||||
toggleDrawerNew = (open) => () => {
|
||||
this.setState({
|
||||
left: open,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { anchorEl, mobileMoreAnchorEl } = this.state;
|
||||
const { classes } = this.props;
|
||||
|
||||
const { redirect } = this.state;
|
||||
if (redirect) {
|
||||
|
|
@ -297,28 +366,6 @@ export default class App extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
// ROLE dan Menu
|
||||
// agent, ga ada setting, member, task
|
||||
// if (window && !window.Tawk_API) {
|
||||
// const script = document.createElement("script");
|
||||
// (this.settingStore.setting.tawkto_siteid && !this.state.scriptTawkto && this.appstate.userData.role === 'agent') ? (() => {
|
||||
// const scriptText = document.createTextNode(`
|
||||
// var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
|
||||
// (function(){
|
||||
// var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
|
||||
// s1.async=true;
|
||||
// s1.src='https://embed.tawk.to/${this.settingStore.setting.tawkto_siteid}/default';
|
||||
// s1.charset='UTF-8';
|
||||
// s1.setAttribute('crossorigin','*');
|
||||
// s0.parentNode.insertBefore(s1,s0);
|
||||
// })();`);
|
||||
// script.appendChild(scriptText);
|
||||
// script.async = true;
|
||||
// document.body.appendChild(script);
|
||||
// this.setState({scriptTawkto: true})
|
||||
// })() : '';
|
||||
// }
|
||||
|
||||
const { userData } = this.appstate;
|
||||
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
|
||||
// let applicationIcon = "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
|
||||
|
|
@ -338,6 +385,145 @@ export default class App extends React.Component {
|
|||
// }
|
||||
return `${LINKS.ORDER}`;
|
||||
}
|
||||
|
||||
const isMenuOpen = Boolean(anchorEl);
|
||||
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
|
||||
|
||||
const renderMenu = (
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
open={isMenuOpen}
|
||||
onClose={this.handleMenuClose}
|
||||
>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/profile')} to={LINKS.PROFILE}>
|
||||
<MenuItem>Profile</MenuItem>
|
||||
</Link>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/login')} to={LINKS.LOGIN}>
|
||||
<MenuItem>Sign Out</MenuItem>
|
||||
</Link>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const renderMobileMenu = (
|
||||
<Menu
|
||||
anchorEl={mobileMoreAnchorEl}
|
||||
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
open={isMobileMenuOpen}
|
||||
onClose={this.handleMobileMenuClose}
|
||||
>
|
||||
{window.location.pathname.split("/")[2] == "shop" ? (
|
||||
<MenuItem>
|
||||
<IconButton color="inherit">
|
||||
<Badge badgeContent={4} color="secondary">
|
||||
<CartIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<p>Cart</p>
|
||||
</MenuItem>
|
||||
) : "" }
|
||||
<MenuItem>
|
||||
<IconButton color="inherit">
|
||||
<Badge badgeContent={11} color="secondary">
|
||||
<NotificationsIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<p>Notifications</p>
|
||||
</MenuItem>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/profile')} to={LINKS.PROFILE}>
|
||||
<MenuItem>
|
||||
<IconButton color="inherit">
|
||||
<AccountCircle />
|
||||
</IconButton>
|
||||
<p>Profile</p>
|
||||
</MenuItem>
|
||||
</Link>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/login')} to={LINKS.LOGIN}>
|
||||
<MenuItem>
|
||||
<IconButton color="inherit">
|
||||
<CancelIcon />
|
||||
</IconButton>
|
||||
<p>Sign Out</p>
|
||||
</MenuItem>
|
||||
</Link>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const sideList = (
|
||||
<div className={classes.list}>
|
||||
<div className={classes.backgroundLogo}>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
||||
<img
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
}}
|
||||
src={applicationIcon} />
|
||||
</Link>
|
||||
</div>
|
||||
<Divider />
|
||||
<List>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Home</span></MenuItem></Link>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Flight</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Hotel</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Car</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Shop</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/vouchers')}
|
||||
to={LINKS.VOUCHERS}
|
||||
><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Vouchers</span></MenuItem></Link>
|
||||
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<div style={{padding:15}}>
|
||||
<a>
|
||||
<WalletComponent />
|
||||
</a>
|
||||
</div>
|
||||
</List>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<Helmet>
|
||||
|
|
@ -363,15 +549,84 @@ export default class App extends React.Component {
|
|||
<DepositDialog />
|
||||
<WithdrawDialog />
|
||||
|
||||
<div className={classes.root}>
|
||||
<AppBar position="fixed">
|
||||
<Toolbar className={classes.toolbar}>
|
||||
<div className={classes.sectionMobile}>
|
||||
<IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
||||
<img
|
||||
className={classes.title}
|
||||
style={{
|
||||
width: 100,
|
||||
height: 30
|
||||
}}
|
||||
src={applicationIcon} />
|
||||
</Link>
|
||||
<div className={classes.search}>
|
||||
<div className={classes.searchIcon}>
|
||||
<SearchIcon />
|
||||
</div>
|
||||
<InputBase
|
||||
placeholder="Search…"
|
||||
classes={{
|
||||
root: classes.inputRoot,
|
||||
input: classes.inputInput,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.sectionDesktop}>
|
||||
<WalletComponent />
|
||||
{window.location.pathname.split("/")[2] == "shop" ? (<IconButton color="action" >
|
||||
<Badge badgeContent={4} color="secondary">
|
||||
<CartIcon />
|
||||
</Badge>
|
||||
</IconButton>) : "" }
|
||||
|
||||
|
||||
<Toolbar className="toolbarAkunTiket">
|
||||
<IconButton color="action">
|
||||
<Badge badgeContent={17} color="secondary">
|
||||
<NotificationsIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
aria-owns={isMenuOpen ? 'material-appbar' : undefined}
|
||||
aria-haspopup="true"
|
||||
onClick={this.handleProfileMenuOpen}
|
||||
color="action"
|
||||
>
|
||||
<AccountCircle />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className={classes.sectionMobile}>
|
||||
<IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="action">
|
||||
<MoreIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
{renderMenu}
|
||||
{renderMobileMenu}
|
||||
</div>
|
||||
<Drawer open={this.state.left} onClose={this.toggleDrawerNew(false)}>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onClick={this.toggleDrawerNew(false)}
|
||||
onKeyDown={this.toggleDrawerNew(false)}
|
||||
>
|
||||
{sideList}
|
||||
</div>
|
||||
</Drawer>
|
||||
{/* <Toolbar className="toolbarAkunTiket">
|
||||
<ToolbarGroup>
|
||||
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus /></IconButton>
|
||||
|
||||
{/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
|
||||
text={"Store Admin"}/> */}
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
||||
|
|
@ -383,12 +638,12 @@ export default class App extends React.Component {
|
|||
src={applicationIcon} />
|
||||
</Link>
|
||||
|
||||
{/*<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>*/}
|
||||
{/*<IconButton className="hide-on-small-only" style={{marginRight: 10}}*/}
|
||||
{/*onClick={() => this.toggleDrawer()}>*/}
|
||||
{/*<IconMenus/>*/}
|
||||
{/*</IconButton>*/}
|
||||
{/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
||||
<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
|
||||
<IconButton className="hide-on-small-only" style={{marginRight: 10}}
|
||||
onClick={() => this.toggleDrawer()}>
|
||||
<IconMenus/>
|
||||
</IconButton>
|
||||
<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
||||
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
||||
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
|
||||
<Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span>
|
||||
|
|
@ -398,15 +653,15 @@ export default class App extends React.Component {
|
|||
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
||||
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "environment")}>
|
||||
<Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
|
||||
</Button> */}
|
||||
</Button>
|
||||
|
||||
{/*<Link onClick={this*/}
|
||||
{/*.changeRoute*/}
|
||||
{/*.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem*/}
|
||||
{/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
||||
{/*className="menuAkun">Home</span></MenuItem></Link>*/}
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Home</span></MenuItem></Link>
|
||||
|
||||
{/* <Link onClick={this
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
|
|
@ -428,17 +683,17 @@ export default class App extends React.Component {
|
|||
.changeRoute
|
||||
.bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Shop</span></MenuItem></Link> */}
|
||||
className="menuAkun">Shop</span></MenuItem></Link>
|
||||
|
||||
{/* <Link onClick={this
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/vouchers')}
|
||||
to={LINKS.VOUCHERS}
|
||||
><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Vouchers</span></MenuItem></Link> */}
|
||||
className="menuAkun">Vouchers</span></MenuItem></Link>
|
||||
|
||||
{/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
||||
<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
||||
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
||||
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>
|
||||
<Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span>
|
||||
|
|
@ -449,7 +704,7 @@ export default class App extends React.Component {
|
|||
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "home")}>
|
||||
<Icon type="home"/> <span
|
||||
className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
|
||||
</Button> */}
|
||||
</Button>
|
||||
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
|
|
@ -476,7 +731,6 @@ export default class App extends React.Component {
|
|||
return (
|
||||
<Link to={onNotifRowClick(item)}>
|
||||
<ListItem
|
||||
// leftAvatar={<Avatar src="images/ok-128.jpg" />}
|
||||
primaryText={item.notification.title}
|
||||
secondaryText={
|
||||
<div>
|
||||
|
|
@ -632,7 +886,7 @@ export default class App extends React.Component {
|
|||
</Link>
|
||||
</IconMenu>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
</Toolbar> */}
|
||||
|
||||
<div className="mainContent" style={{
|
||||
// paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
|
||||
|
|
@ -647,3 +901,5 @@ export default class App extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(App);
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
.textVoucher{
|
||||
margin-bottom: 0px;
|
||||
font-weight: 600;
|
||||
color: #424770;
|
||||
// color: #424770;
|
||||
transition: transform 200ms linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
.textPoints{
|
||||
margin-bottom: 0px;
|
||||
font-weight: 600;
|
||||
color: #424770;
|
||||
// color: #424770;
|
||||
transition: transform 200ms linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background-color: #ffeb3b !important;
|
||||
// background-color: #ffeb3b !important;
|
||||
height: 70px !important;
|
||||
padding: 8px 24px;
|
||||
border-bottom: 1px solid rgb(223, 223, 223);
|
||||
|
|
|
|||
97
src/common/pages/App/styles.js
Normal file
97
src/common/pages/App/styles.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import yellow from '@material-ui/core/colors/yellow';
|
||||
import { fade } from '@material-ui/core/styles/colorManipulator';
|
||||
export const styles = theme => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
},
|
||||
toolbar:{
|
||||
position: "fixed",
|
||||
width: "100%",
|
||||
top: 0,
|
||||
zIndex: 1000,
|
||||
backgroundColor: yellow['500'],
|
||||
height: '70px !important',
|
||||
padding: "8px 24px",
|
||||
borderBottom: "1px solid rgb(223, 223, 223)"
|
||||
},
|
||||
grow: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
menuButton: {
|
||||
// color: '#0336ff !important',
|
||||
marginLeft: -12,
|
||||
marginRight: 20,
|
||||
},
|
||||
title: {
|
||||
color: '#0336ff !important',
|
||||
display: 'none',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
display: 'block',
|
||||
},
|
||||
},
|
||||
search: {
|
||||
color: '#9E9E9E !important',
|
||||
position: 'relative',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: fade(theme.palette.common.white, 0.50),
|
||||
'&:hover': {
|
||||
backgroundColor: fade(theme.palette.common.white, 0.60),
|
||||
},
|
||||
marginRight: theme.spacing.unit * 2,
|
||||
marginLeft: 0,
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
width: 'auto',
|
||||
},
|
||||
},
|
||||
searchIcon: {
|
||||
color: '#9E9E9E !important',
|
||||
width: theme.spacing.unit * 9,
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
inputRoot: {
|
||||
color: 'inherit',
|
||||
width: '100%',
|
||||
},
|
||||
inputInput: {
|
||||
paddingTop: theme.spacing.unit,
|
||||
paddingRight: theme.spacing.unit,
|
||||
paddingBottom: theme.spacing.unit,
|
||||
paddingLeft: theme.spacing.unit * 10,
|
||||
transition: theme.transitions.create('width'),
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
width: 200,
|
||||
},
|
||||
},
|
||||
sectionDesktop: {
|
||||
color: '#0336ff !important',
|
||||
display: 'none',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
display: 'flex',
|
||||
},
|
||||
},
|
||||
sectionMobile: {
|
||||
color: '#424770 !important',
|
||||
display: 'flex',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
list: {
|
||||
width: 250,
|
||||
},
|
||||
backgroundLogo:{
|
||||
padding:"15px 20px",
|
||||
backgroundColor: yellow['500'],
|
||||
},
|
||||
fullList: {
|
||||
width: 'auto',
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user