Skip to content
This repository was archived by the owner on Sep 13, 2023. It is now read-only.

Commit 74aee55

Browse files
mvaaltolamvaaltola
authored
Merge pull request #41 from GispoCoding/32_styles
32_styles
2 parents d724e94 + 8cc2a55 commit 74aee55

9 files changed

+253
-81
lines changed

‎public/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8+
<meta name="apple-mobile-web-app-capable" content="yes">
89
<meta
910
name="description"
10-
content="Web site created using create-react-app"
11+
content="aukiGO by Gispo Ltd."
1112
/>
1213
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1314
<!--
@@ -24,7 +25,7 @@
2425
work correctly both with client-side routing and a non-root public URL.
2526
Learn how to configure a non-root public URL by running `npm run build`.
2627
-->
27-
<title>React App</title>
28+
<title>aukiGO</title>
2829
</head>
2930
<body>
3031
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020
],
2121
"start_url": ".",
22-
"display": "standalone",
22+
"display": "fullscreen",
2323
"theme_color": "#000000",
2424
"background_color": "#ffffff"
2525
}

‎src/components/header.tsx

+56-29
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,61 @@
11
import React from 'react';
22
import AppBar from '@material-ui/core/AppBar';
33
import Toolbar from '@material-ui/core/Toolbar';
4-
import IconButton from '@material-ui/core/IconButton';
5-
import Typography from '@material-ui/core/Typography';
64
import InputBase from '@material-ui/core/InputBase';
75
import {
8-
createStyles, fade, Theme, makeStyles,
6+
createStyles, Theme, makeStyles,
97
} from '@material-ui/core/styles';
108
import { Search, Settings } from '@material-ui/icons';
11-
import { Grid } from '@material-ui/core';
9+
import { Grid, Fab } from '@material-ui/core';
10+
import logo from '../static/AukiGO_logo.svg';
1211

1312
interface HeaderProps {
1413
onToggleBasemap: Function
1514
}
1615

1716
const useStyles = makeStyles((theme: Theme) => createStyles({
1817
root: {
19-
backgroundColor: theme.palette.primary.main,
2018
flexGrow: 1,
21-
margin: '30px auto 0 auto',
19+
margin: 'auto',
2220
pointerEvents: 'auto',
21+
minHeight: '80px',
2322
[theme.breakpoints.up('md')]: {
2423
margin: '30px 30px 0 auto',
2524
},
2625
[theme.breakpoints.down('sm')]: {
2726
paddingRight: 0,
2827
},
2928
},
29+
appBar: {
30+
backgroundColor: theme.palette.primary.dark,
31+
minHeight: '80px',
32+
boxShadow: '0px 0px 10px 5px #999999',
33+
},
34+
toolbar: {
35+
minHeight: '80px',
36+
},
3037
menuButton: {
3138
marginRight: theme.spacing(2),
3239
},
33-
title: {
34-
marginLeft: '16px',
40+
logoDiv: {
41+
float: 'left',
3542
flexGrow: 1,
43+
},
44+
logo: {
45+
color: '#EDF6F9ff',
46+
filter: 'invert()',
47+
height: '50px',
48+
margin: '0 16px',
3649
pointerEvents: 'none',
37-
userSelect: 'none',
38-
display: 'none',
39-
[theme.breakpoints.up('sm')]: {
40-
display: 'block',
41-
},
4250
},
4351
search: {
4452
position: 'relative',
45-
borderRadius: theme.shape.borderRadius,
46-
backgroundColor: fade(theme.palette.common.white, 0.15),
47-
'&:hover': {
48-
backgroundColor: fade(theme.palette.common.white, 0.25),
49-
},
50-
margin: '8px 0 8px 8px',
53+
borderRadius: '50px',
54+
backgroundColor: theme.palette.primary.light,
55+
color: '#006D77',
56+
margin: '20px',
5157
width: '100%',
58+
height: '40px',
5259
[theme.breakpoints.up('sm')]: {
5360
marginLeft: theme.spacing(1),
5461
width: 'auto',
@@ -64,21 +71,41 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
6471
justifyContent: 'center',
6572
},
6673
inputRoot: {
67-
color: 'inherit',
74+
width: '100%',
75+
height: '40px',
6876
},
6977
inputInput: {
7078
padding: theme.spacing(2, 1, 2, 0),
7179
// vertical padding + font size from searchIcon
7280
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
7381
transition: theme.transitions.create('width'),
7482
width: '100%',
83+
height: '40px',
7584
[theme.breakpoints.up('sm')]: {
7685
width: '12ch',
7786
'&:focus': {
7887
width: '20ch',
7988
},
8089
},
8190
},
91+
settings: {
92+
position: 'absolute',
93+
right: '42px',
94+
marginTop: '16px',
95+
color: theme.palette.primary.dark,
96+
backgroundColor: theme.palette.primary.light,
97+
boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)',
98+
[theme.breakpoints.down('xs')]: {
99+
right: '10px',
100+
},
101+
'&:active': {
102+
color: theme.palette.primary.light,
103+
backgroundColor: theme.palette.primary.main,
104+
boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)',
105+
},
106+
'&:hover': {
107+
},
108+
},
82109
}));
83110

84111
export default function Header({ onToggleBasemap }: HeaderProps) {
@@ -92,29 +119,29 @@ export default function Header({ onToggleBasemap }: HeaderProps) {
92119
sm={11}
93120
xs={12}
94121
>
95-
<AppBar position="static">
96-
<Toolbar disableGutters>
97-
<Typography className={classes.title} variant="h6" noWrap>
98-
aukigo
99-
</Typography>
122+
<AppBar position="static" className={classes.appBar}>
123+
<Toolbar disableGutters className={classes.toolbar}>
124+
<div className={classes.logoDiv}>
125+
<img className={classes.logo} src={logo} alt="AukiGO" />
126+
</div>
100127
<div className={classes.search}>
101128
<div className={classes.searchIcon}>
102129
<Search />
103130
</div>
104131
<InputBase
105-
placeholder="Search…"
132+
placeholder="Hae…"
106133
classes={{
107134
root: classes.inputRoot,
108135
input: classes.inputInput,
109136
}}
110137
inputProps={{ 'aria-label': 'search' }}
111138
/>
112139
</div>
113-
<IconButton color="inherit" onClick={() => onToggleBasemap()}>
114-
<Settings />
115-
</IconButton>
116140
</Toolbar>
117141
</AppBar>
142+
<Fab className={classes.settings} size="small" onClick={() => onToggleBasemap()}>
143+
<Settings />
144+
</Fab>
118145
</Grid>
119146
);
120147
}

‎src/components/layerselectionbutton.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { ReactElement } from 'react';
2+
import {
3+
createStyles,
4+
IconButton, Paper, Theme, Tooltip,
5+
} from '@material-ui/core';
6+
import { makeStyles } from '@material-ui/styles';
7+
8+
interface LayerSelProps {
9+
children: ReactElement
10+
onToggleLayer: Function
11+
name: string
12+
}
13+
14+
const useStyles = makeStyles((theme: Theme) => (
15+
createStyles({
16+
root: {
17+
color: theme.palette.primary.main,
18+
},
19+
layerSelButton: {
20+
borderRadius: '50%',
21+
backgroundColor: theme.palette.primary.light,
22+
width: '70px',
23+
height: '70px',
24+
margin: 'auto',
25+
boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)',
26+
'&:active': {
27+
backgroundColor: theme.palette.primary.main,
28+
},
29+
},
30+
layerSelIconButton: {
31+
color: theme.palette.primary.main,
32+
// margin: '13px',
33+
margin: 'auto',
34+
width: '100%',
35+
height: '100%',
36+
padding: 0,
37+
'&:active': {
38+
color: theme.palette.primary.light,
39+
},
40+
},
41+
})
42+
));
43+
44+
const LayerSelectionButton = ({ children, onToggleLayer, name }: LayerSelProps) => {
45+
const classes = useStyles();
46+
return (
47+
<Paper className={classes.layerSelButton}>
48+
<Tooltip title={name}>
49+
<IconButton className={classes.layerSelIconButton} onClick={() => onToggleLayer(name)}>
50+
{children}
51+
</IconButton>
52+
</Tooltip>
53+
</Paper>
54+
);
55+
};
56+
57+
export default LayerSelectionButton;

‎src/components/layerselector.tsx

+33-46
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
22
import {
3-
Grid, makeStyles, createStyles, IconButton, Paper, Theme, Tooltip,
3+
Grid, makeStyles, createStyles, Theme,
44
} from '@material-ui/core';
55
import {
6-
AcUnit, Accessible, AccountBalance, AccountCircle, Apartment,
6+
Apartment, ShoppingCart, Restaurant, PhotoCamera, LocalHospital, DirectionsBus,
77
} from '@material-ui/icons';
8+
import LayerSelectionButton from './layerselectionbutton';
89

910
interface LayerSelectorProps {
1011
onToggleLayer: Function
@@ -13,9 +14,8 @@ interface LayerSelectorProps {
1314
const useStyles = makeStyles((theme: Theme) => (
1415
createStyles({
1516
root: {
16-
backgroundColor: theme.palette.primary.main,
1717
zIndex: 100,
18-
margin: 'auto',
18+
margin: '20px auto',
1919
pointerEvents: 'auto',
2020
flexGrow: 1,
2121
[theme.breakpoints.up('md')]: {
@@ -24,8 +24,10 @@ const useStyles = makeStyles((theme: Theme) => (
2424
right: '30px',
2525
},
2626
},
27-
layerSelButton: {
28-
minWidth: '100%',
27+
layerSelIcon: {
28+
margin: '0 auto',
29+
height: '30px',
30+
width: '100%',
2931
},
3032
})
3133
));
@@ -45,50 +47,35 @@ export default function LayerSelector({ onToggleLayer }: LayerSelectorProps) {
4547
sm={11}
4648
xs={12}
4749
>
48-
<Grid item xs>
49-
<Paper>
50-
<Tooltip title="Lodging">
51-
<IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Lodging')}>
52-
<AcUnit />
53-
</IconButton>
54-
</Tooltip>
55-
</Paper>
50+
<Grid item xs={4} sm={2}>
51+
<LayerSelectionButton name="Accommodation" onToggleLayer={onToggleLayer}>
52+
<Apartment className={classes.layerSelIcon} />
53+
</LayerSelectionButton>
5654
</Grid>
57-
<Grid item xs>
58-
<Paper>
59-
<Tooltip title="Shops">
60-
<IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Shops')}>
61-
<Accessible />
62-
</IconButton>
63-
</Tooltip>
64-
</Paper>
55+
<Grid item xs={4} sm={2}>
56+
<LayerSelectionButton name="Shops" onToggleLayer={onToggleLayer}>
57+
<ShoppingCart className={classes.layerSelIcon} />
58+
</LayerSelectionButton>
6559
</Grid>
66-
<Grid item xs>
67-
<Paper>
68-
<Tooltip title="Finance">
69-
<IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Finance')}>
70-
<AccountBalance />
71-
</IconButton>
72-
</Tooltip>
73-
</Paper>
60+
<Grid item xs={4} sm={2}>
61+
<LayerSelectionButton name="Restaurant" onToggleLayer={onToggleLayer}>
62+
<Restaurant className={classes.layerSelIcon} />
63+
</LayerSelectionButton>
7464
</Grid>
75-
<Grid item xs>
76-
<Paper>
77-
<Tooltip title="Health">
78-
<IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Health')}>
79-
<AccountCircle />
80-
</IconButton>
81-
</Tooltip>
82-
</Paper>
65+
<Grid item xs={4} sm={2}>
66+
<LayerSelectionButton name="Transportation" onToggleLayer={onToggleLayer}>
67+
<DirectionsBus className={classes.layerSelIcon} />
68+
</LayerSelectionButton>
8369
</Grid>
84-
<Grid item xs>
85-
<Paper>
86-
<Tooltip title="Attractions">
87-
<IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Attractions')}>
88-
<Apartment />
89-
</IconButton>
90-
</Tooltip>
91-
</Paper>
70+
<Grid item xs={4} sm={2}>
71+
<LayerSelectionButton name="Healthcare" onToggleLayer={onToggleLayer}>
72+
<LocalHospital className={classes.layerSelIcon} />
73+
</LayerSelectionButton>
74+
</Grid>
75+
<Grid item xs={4} sm={2}>
76+
<LayerSelectionButton name="Entertainment" onToggleLayer={onToggleLayer}>
77+
<PhotoCamera className={classes.layerSelIcon} />
78+
</LayerSelectionButton>
9279
</Grid>
9380
</Grid>
9481
);

‎src/requests/getcapabilities.rest

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
GET http://ec2-13-53-138-137.eu-north-1.compute.amazonaws.com/api/capabilities/
1+
GET https://api.aukigo.gispocoding.fi/api/capabilities/

‎src/static/AukiGO_logo.svg

+3
Loading

‎src/theme.ts

+18-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,24 @@ declare module '@material-ui/core/styles/createMuiTheme' {
1616

1717
const defaultTheme = createMuiTheme({
1818
palette: {
19-
primary: blue,
20-
secondary: orange,
19+
primary: {
20+
main: '#006D77',
21+
dark: '#114B5F',
22+
light: '#E8EBDD',
23+
contrastText: '#333333',
24+
},
25+
},
26+
typography: {
27+
fontFamily: [
28+
'montserrat',
29+
'sans-serif',
30+
].join(','),
31+
h1: {
32+
fontSize: '24px',
33+
},
34+
body1: {
35+
lineHeight: '1.5',
36+
},
2137
},
2238
custom: {
2339
variable: '#000',

0 commit comments

Comments
 (0)