GispoCoding · mvaaltola · Sep 1, 2020 · Aug 28, 2020 · Aug 28, 2020 · Aug 28, 2020
diff --git a/public/index.html b/public/index.html
@@ -5,9 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="aukiGO by Gispo Ltd."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +25,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>aukiGO</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -19,7 +19,7 @@
     }
   ],
   "start_url": ".",
-  "display": "standalone",
+  "display": "fullscreen",
   "theme_color": "#000000",
   "background_color": "#ffffff"
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,54 +1,61 @@
 import React from 'react';
 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 {
-  createStyles, fade, Theme, makeStyles,
+  createStyles, Theme, makeStyles,
 } from '@material-ui/core/styles';
 import { Search, Settings } from '@material-ui/icons';
-import { Grid } from '@material-ui/core';
+import { Grid, Fab } from '@material-ui/core';
+import logo from '../static/AukiGO_logo.svg';
 
 interface HeaderProps {
   onToggleBasemap: Function
 }
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
   root: {
-    backgroundColor: theme.palette.primary.main,
     flexGrow: 1,
-    margin: '30px auto 0 auto',
+    margin: 'auto',
     pointerEvents: 'auto',
+    minHeight: '80px',
     [theme.breakpoints.up('md')]: {
       margin: '30px 30px 0 auto',
     },
     [theme.breakpoints.down('sm')]: {
       paddingRight: 0,
     },
   },
+  appBar: {
+    backgroundColor: theme.palette.primary.dark,
+    minHeight: '80px',
+    boxShadow: '0px 0px 10px 5px #999999',
+  },
+  toolbar: {
+    minHeight: '80px',
+  },
   menuButton: {
     marginRight: theme.spacing(2),
   },
-  title: {
-    marginLeft: '16px',
+  logoDiv: {
+    float: 'left',
     flexGrow: 1,
+  },
+  logo: {
+    color: '#EDF6F9ff',
+    filter: 'invert()',
+    height: '50px',
+    margin: '0 16px',
     pointerEvents: 'none',
-    userSelect: 'none',
-    display: 'none',
-    [theme.breakpoints.up('sm')]: {
-      display: 'block',
-    },
   },
   search: {
     position: 'relative',
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
-    },
-    margin: '8px 0 8px 8px',
+    borderRadius: '50px',
+    backgroundColor: theme.palette.primary.light,
+    color: '#006D77',
+    margin: '20px',
     width: '100%',
+    height: '40px',
     [theme.breakpoints.up('sm')]: {
       marginLeft: theme.spacing(1),
       width: 'auto',
@@ -64,21 +71,41 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
     justifyContent: 'center',
   },
   inputRoot: {
-    color: 'inherit',
+    width: '100%',
+    height: '40px',
   },
   inputInput: {
     padding: theme.spacing(2, 1, 2, 0),
     // vertical padding + font size from searchIcon
     paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
     transition: theme.transitions.create('width'),
     width: '100%',
+    height: '40px',
     [theme.breakpoints.up('sm')]: {
       width: '12ch',
       '&:focus': {
         width: '20ch',
       },
     },
   },
+  settings: {
+    position: 'absolute',
+    right: '42px',
+    marginTop: '16px',
+    color: theme.palette.primary.dark,
+    backgroundColor: theme.palette.primary.light,
+    boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)',
+    [theme.breakpoints.down('xs')]: {
+      right: '10px',
+    },
+    '&:active': {
+      color: theme.palette.primary.light,
+      backgroundColor: theme.palette.primary.main,
+      boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)',
+    },
+    '&:hover': {
+    },
+  },
 }));
 
 export default function Header({ onToggleBasemap }: HeaderProps) {
@@ -92,29 +119,29 @@ export default function Header({ onToggleBasemap }: HeaderProps) {
       sm={11}
       xs={12}
     >
-      <AppBar position="static">
-        <Toolbar disableGutters>
-          <Typography className={classes.title} variant="h6" noWrap>
-            aukigo
-          </Typography>
+      <AppBar position="static" className={classes.appBar}>
+        <Toolbar disableGutters className={classes.toolbar}>
+          <div className={classes.logoDiv}>
+            <img className={classes.logo} src={logo} alt="AukiGO" />
+          </div>
           <div className={classes.search}>
             <div className={classes.searchIcon}>
               <Search />
             </div>
             <InputBase
-              placeholder="Search…"
+              placeholder="Hae…"
               classes={{
                 root: classes.inputRoot,
                 input: classes.inputInput,
               }}
               inputProps={{ 'aria-label': 'search' }}
             />
           </div>
-          <IconButton color="inherit" onClick={() => onToggleBasemap()}>
-            <Settings />
-          </IconButton>
         </Toolbar>
       </AppBar>
+      <Fab className={classes.settings} size="small" onClick={() => onToggleBasemap()}>
+        <Settings />
+      </Fab>
     </Grid>
   );
 }
diff --git a/src/components/layerselectionbutton.tsx b/src/components/layerselectionbutton.tsx
@@ -0,0 +1,57 @@
+import React, { ReactElement } from 'react';
+import {
+  createStyles,
+  IconButton, Paper, Theme, Tooltip,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+interface LayerSelProps {
+  children: ReactElement
+  onToggleLayer: Function
+  name: string
+}
+
+const useStyles = makeStyles((theme: Theme) => (
+  createStyles({
+    root: {
+      color: theme.palette.primary.main,
+    },
+    layerSelButton: {
+      borderRadius: '50%',
+      backgroundColor: theme.palette.primary.light,
+      width: '70px',
+      height: '70px',
+      margin: 'auto',
+      boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)',
+      '&:active': {
+        backgroundColor: theme.palette.primary.main,
+      },
+    },
+    layerSelIconButton: {
+      color: theme.palette.primary.main,
+      // margin: '13px',
+      margin: 'auto',
+      width: '100%',
+      height: '100%',
+      padding: 0,
+      '&:active': {
+        color: theme.palette.primary.light,
+      },
+    },
+  })
+));
+
+const LayerSelectionButton = ({ children, onToggleLayer, name }: LayerSelProps) => {
+  const classes = useStyles();
+  return (
+    <Paper className={classes.layerSelButton}>
+      <Tooltip title={name}>
+        <IconButton className={classes.layerSelIconButton} onClick={() => onToggleLayer(name)}>
+          {children}
+        </IconButton>
+      </Tooltip>
+    </Paper>
+  );
+};
+
+export default LayerSelectionButton;
diff --git a/src/components/layerselector.tsx b/src/components/layerselector.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import {
-  Grid, makeStyles, createStyles, IconButton, Paper, Theme, Tooltip,
+  Grid, makeStyles, createStyles, Theme,
 } from '@material-ui/core';
 import {
-  AcUnit, Accessible, AccountBalance, AccountCircle, Apartment,
+  Apartment, ShoppingCart, Restaurant, PhotoCamera, LocalHospital, DirectionsBus,
 } from '@material-ui/icons';
+import LayerSelectionButton from './layerselectionbutton';
 
 interface LayerSelectorProps {
   onToggleLayer: Function
@@ -13,9 +14,8 @@ interface LayerSelectorProps {
 const useStyles = makeStyles((theme: Theme) => (
   createStyles({
     root: {
-      backgroundColor: theme.palette.primary.main,
       zIndex: 100,
-      margin: 'auto',
+      margin: '20px auto',
       pointerEvents: 'auto',
       flexGrow: 1,
       [theme.breakpoints.up('md')]: {
@@ -24,8 +24,10 @@ const useStyles = makeStyles((theme: Theme) => (
         right: '30px',
       },
     },
-    layerSelButton: {
-      minWidth: '100%',
+    layerSelIcon: {
+      margin: '0 auto',
+      height: '30px',
+      width: '100%',
     },
   })
 ));
@@ -45,50 +47,35 @@ export default function LayerSelector({ onToggleLayer }: LayerSelectorProps) {
       sm={11}
       xs={12}
     >
-      <Grid item xs>
-        <Paper>
-          <Tooltip title="Lodging">
-            <IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Lodging')}>
-              <AcUnit />
-            </IconButton>
-          </Tooltip>
-        </Paper>
+      <Grid item xs={4} sm={2}>
+        <LayerSelectionButton name="Accommodation" onToggleLayer={onToggleLayer}>
+          <Apartment className={classes.layerSelIcon} />
+        </LayerSelectionButton>
       </Grid>
-      <Grid item xs>
-        <Paper>
-          <Tooltip title="Shops">
-            <IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Shops')}>
-              <Accessible />
-            </IconButton>
-          </Tooltip>
-        </Paper>
+      <Grid item xs={4} sm={2}>
+        <LayerSelectionButton name="Shops" onToggleLayer={onToggleLayer}>
+          <ShoppingCart className={classes.layerSelIcon} />
+        </LayerSelectionButton>
       </Grid>
-      <Grid item xs>
-        <Paper>
-          <Tooltip title="Finance">
-            <IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Finance')}>
-              <AccountBalance />
-            </IconButton>
-          </Tooltip>
-        </Paper>
+      <Grid item xs={4} sm={2}>
+        <LayerSelectionButton name="Restaurant" onToggleLayer={onToggleLayer}>
+          <Restaurant className={classes.layerSelIcon} />
+        </LayerSelectionButton>
       </Grid>
-      <Grid item xs>
-        <Paper>
-          <Tooltip title="Health">
-            <IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Health')}>
-              <AccountCircle />
-            </IconButton>
-          </Tooltip>
-        </Paper>
+      <Grid item xs={4} sm={2}>
+        <LayerSelectionButton name="Transportation" onToggleLayer={onToggleLayer}>
+          <DirectionsBus className={classes.layerSelIcon} />
+        </LayerSelectionButton>
       </Grid>
-      <Grid item xs>
-        <Paper>
-          <Tooltip title="Attractions">
-            <IconButton className={classes.layerSelButton} onClick={() => onToggleLayer('Attractions')}>
-              <Apartment />
-            </IconButton>
-          </Tooltip>
-        </Paper>
+      <Grid item xs={4} sm={2}>
+        <LayerSelectionButton name="Healthcare" onToggleLayer={onToggleLayer}>
+          <LocalHospital className={classes.layerSelIcon} />
+        </LayerSelectionButton>
+      </Grid>
+      <Grid item xs={4} sm={2}>
+        <LayerSelectionButton name="Entertainment" onToggleLayer={onToggleLayer}>
+          <PhotoCamera className={classes.layerSelIcon} />
+        </LayerSelectionButton>
       </Grid>
     </Grid>
   );

diff --git a/src/requests/getcapabilities.rest b/src/requests/getcapabilities.rest
@@ -1 +1 @@
-GET http://ec2-13-53-138-137.eu-north-1.compute.amazonaws.com/api/capabilities/
+GET https://api.aukigo.gispocoding.fi/api/capabilities/
diff --git a/logo/AukiGO_logo.svg → src/static/AukiGO_logo.svg b/logo/AukiGO_logo.svg → src/static/AukiGO_logo.svg
diff --git a/src/theme.ts b/src/theme.ts
@@ -16,8 +16,24 @@ declare module '@material-ui/core/styles/createMuiTheme' {
 
 const defaultTheme = createMuiTheme({
   palette: {
-    primary: blue,
-    secondary: orange,
+    primary: {
+      main: '#006D77',
+      dark: '#114B5F',
+      light: '#E8EBDD',
+      contrastText: '#333333',
+    },
+  },
+  typography: {
+    fontFamily: [
+      'montserrat',
+      'sans-serif',
+    ].join(','),
+    h1: {
+      fontSize: '24px',
+    },
+    body1: {
+      lineHeight: '1.5',
+    },
   },
   custom: {
     variable: '#000',
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		GET http://ec2-13-53-138-137.eu-north-1.compute.amazonaws.com/api/capabilities/
		GET https://api.aukigo.gispocoding.fi/api/capabilities/