commit 41a11178605c596fa9448f7db82ad6b370d1a5e1
Author: Vaclav Honzik <vaclavhonzik98@gmail.com>
Date:   Sun Apr 24 21:49:43 2022 +0200

    map adjustments
    
    re #9547

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 85f3093..5fb0dc9 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/frontend/create_prod_env.py b/frontend/create_prod_env.py
index 5f6cbc6..101b64d 100644
--- a/frontend/create_prod_env.py
+++ b/frontend/create_prod_env.py
@@ -13,6 +13,6 @@ with open(file_name, 'w+') as file:
     file.writelines([
         'REACT_APP_API_BASE_URL=/api\n',
         'REACT_APP_DEV_ENV=false\n'
-        ])
-    
-print('File created. The environment has been successfully configured for development.')
\ No newline at end of file
+    ])
+
+print('File created. The environment has been successfully configured for development.')
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a083fd3..322c683 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,7 @@ import { Routes, Route, Link } from 'react-router-dom'
 import Home from './features/Home/Home'
 import Catalog from './features/Catalog/Catalog'
 import NotFound from './features/NotFound/NotFound'
-import { Container, Paper, Theme } from '@mui/material'
+import { Box, Container, Paper, Theme } from '@mui/material'
 import { ThemeProvider } from '@emotion/react'
 import { useSelector } from 'react-redux'
 import { RootState } from './features/redux/store'
@@ -19,7 +19,7 @@ const App = () => {
     return (
         <ThemeWrapper>
             <Navigation>
-                <Container>
+                <Box sx={{mx: 10}}>
                     <Routes>
                         <Route path="/" element={<Home />} />
                         <Route path="/catalog" element={<Catalog />} />
@@ -32,7 +32,7 @@ const App = () => {
                         <Route path="/map" element={<TrackingTool />} />
                         <Route path="*" element={<NotFound />} />
                     </Routes>
-                </Container>
+                </Box>
             </Navigation>
         </ThemeWrapper>
     )
diff --git a/frontend/src/features/Catalog/Catalog.tsx b/frontend/src/features/Catalog/Catalog.tsx
index 60b6a21..2de5a9d 100644
--- a/frontend/src/features/Catalog/Catalog.tsx
+++ b/frontend/src/features/Catalog/Catalog.tsx
@@ -10,8 +10,9 @@ const Catalog = () => (
             Catalog
         </Typography>
         <Paper
+            elevation={11}
             sx={{ py: 2, mt: 2 }}
-            variant="outlined"
+            // variant="outlined"
             style={{ minHeight: '50vh' }}
         >
             <Container sx={{ mt: 4 }}>
diff --git a/frontend/src/features/Catalog/CatalogFilter.tsx b/frontend/src/features/Catalog/CatalogFilter.tsx
index c8bd6bf..60b8516 100644
--- a/frontend/src/features/Catalog/CatalogFilter.tsx
+++ b/frontend/src/features/Catalog/CatalogFilter.tsx
@@ -18,7 +18,9 @@ import { RootState } from '../redux/store'
 const CatalogFilter = () => {
     const dispatch = useDispatch()
 
-    const filterOpen = useSelector((state: RootState) => state.catalog.filterOpen)
+    const filterOpen = useSelector(
+        (state: RootState) => state.catalog.filterOpen
+    )
     const toggleFilter = () => {
         dispatch(setFilterOpen(!filterOpen))
     }
@@ -35,80 +37,74 @@ const CatalogFilter = () => {
                 startIcon={
                     filterOpen ? <FilterListOffIcon /> : <FilterListIcon />
                 }
-                // variant="outlined"
+                variant="outlined"
                 color="primary"
                 onClick={toggleFilter}
+                sx={{ mb: 2 }}
             >
                 Filter
             </Button>
             <Collapse in={filterOpen} timeout="auto" unmountOnExit>
-                <Grid container spacing={1} alignItems="stretch">
-                    <Grid item xs={6}>
-                        <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
-                            <Stack direction="row" spacing={2}>
-                                <TextField
-                                    size="small"
-                                    id="name"
-                                    label="Name"
-                                    onChange={(e: any) => {
-                                        dispatch(setFilter({
-                                            ...filter,
-                                            name: e.target.value
-                                        }))
-                                    }}
-                                    value={filter.name}
-                                />
-                                <TextField
-                                    size="small"
-                                    id="type"
-                                    label="Type"
-                                    onChange={(e: any) => {
-                                        dispatch(setFilter({
-                                            ...filter,
-                                            type: e.target.value
-                                        }))
-                                    }}
-                                    value={filter.type}
-                                />
-                            </Stack>
-                            <Stack direction="row" spacing={2}>
-                                <TextField
-                                    size="small"
-                                    id="writtenForm"
-                                    label="Written form"
-                                />
-                                <TextField
-                                    size="small"
-                                    id="stateOrTerritory"
-                                    label="State or territory"
-                                    onChange={(e: any) => {
-                                        dispatch(setFilter({
-                                            ...filter,
-                                            country: e.target.value
-                                        }))
-                                    }}
-                                    value={filter.country}
-                                />
-                                <TextField
-                                    size="small"
-                                    id="groupBy"
-                                    label="Group by"
-                                />
-                            </Stack>
-                        </Stack>
-                    </Grid>
-                    <Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>
-                        <Stack
-                            direction="row"
-                            justifyContent="flex-start"
-                            alignItems="flex-end"
-                        >
-                            <Button startIcon={<ManageSearchIcon/>} variant="contained" onClick={applyFilter}>
-                                Search
-                            </Button>
-                        </Stack>
-                    </Grid>
-                </Grid>
+                <Stack direction="row" spacing={2} sx={{ mt: 2 }}>
+                    <TextField
+                        size="small"
+                        id="name"
+                        label="Name"
+                        onChange={(e: any) => {
+                            dispatch(
+                                setFilter({
+                                    ...filter,
+                                    name: e.target.value,
+                                })
+                            )
+                        }}
+                        value={filter.name}
+                    />
+                    <TextField
+                        size="small"
+                        id="type"
+                        label="Type"
+                        onChange={(e: any) => {
+                            dispatch(
+                                setFilter({
+                                    ...filter,
+                                    type: e.target.value,
+                                })
+                            )
+                        }}
+                        value={filter.type}
+                    />
+                    <TextField
+                        size="small"
+                        id="writtenForm"
+                        label="Written form"
+                    />
+
+                    <TextField
+                        size="small"
+                        id="stateOrTerritory"
+                        label="State or territory"
+                        onChange={(e: any) => {
+                            dispatch(
+                                setFilter({
+                                    ...filter,
+                                    country: e.target.value,
+                                })
+                            )
+                        }}
+                        value={filter.country}
+                    />
+                    <TextField size="small" id="groupBy" label="Group by" />
+                </Stack>
+                <Stack alignItems="flex-end" sx={{ mt: 2 }}>
+                    <Button
+                        startIcon={<ManageSearchIcon />}
+                        variant="contained"
+                        onClick={applyFilter}
+                    >
+                        Search
+                    </Button>
+                </Stack>
             </Collapse>
             {filterOpen ? <Divider sx={{ mb: 5, mt: 1 }} /> : null}
         </Fragment>
diff --git a/frontend/src/features/Catalog/CatalogTable.tsx b/frontend/src/features/Catalog/CatalogTable.tsx
index 8fbad55..b647157 100644
--- a/frontend/src/features/Catalog/CatalogTable.tsx
+++ b/frontend/src/features/Catalog/CatalogTable.tsx
@@ -141,7 +141,7 @@ const CatalogTable = () => {
             {loading && !displayError ? <ContentLoading /> : null}
             {!loading && !displayError ? (
                 <Fragment>
-                    <TableContainer sx={{ minHeight: '50vh', maxHeight: '50vh' }}>
+                    <TableContainer sx={{ minHeight: '65vh', maxHeight: '65vh' }}>
                         <Table
                             stickyHeader
                             sx={{ minWidth: 400 }}
diff --git a/frontend/src/features/Navigation/Navigation.tsx b/frontend/src/features/Navigation/Navigation.tsx
index 892ba47..438447b 100644
--- a/frontend/src/features/Navigation/Navigation.tsx
+++ b/frontend/src/features/Navigation/Navigation.tsx
@@ -106,7 +106,6 @@ const PersistentDrawerLeft: FunctionComponent<DrawerProps> = ({ children }) => {
                             >
                                 <MenuIcon />
                             </IconButton>
-                            {/* <Box> */}
                                 <Typography variant="h6" noWrap component="div">
                                     Assyrian Toponyms App Prototype
                                 </Typography>
@@ -121,7 +120,6 @@ const PersistentDrawerLeft: FunctionComponent<DrawerProps> = ({ children }) => {
                                     </IconButton>
                                 )}
                                 </Stack>
-                            {/* </Box> */}
                         </Toolbar>
                     </AppBar>
                     <NavigationMenu
diff --git a/frontend/src/features/Theme/ThemeWrapper.tsx b/frontend/src/features/Theme/ThemeWrapper.tsx
index 1cfa71f..93e10c0 100644
--- a/frontend/src/features/Theme/ThemeWrapper.tsx
+++ b/frontend/src/features/Theme/ThemeWrapper.tsx
@@ -1,22 +1,51 @@
-import { PaletteMode } from "@mui/material"
+import { PaletteMode } from '@mui/material'
 import { createTheme, Theme, ThemeProvider } from '@mui/material/styles'
-import { FunctionComponent, ReactNode, useEffect, useState } from "react"
-import { useSelector } from "react-redux"
-import { RootState } from "../redux/store"
+import { FunctionComponent, ReactNode, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { RootState } from '../redux/store'
 
 export interface ThemeWrapperProps {
     children: ReactNode
 }
 
 const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children }) => {
-    
+    const lightThemePalette = {
+        primary: {
+            main: '#A28253',
+        },
+        secondary: {
+            main: '#E3DBCF',
+        },
+    }
+
+    const darkThemePalette = {
+        primary: {
+            main: '#e0bb84',
+        },
+        secondary: {
+            main: '#E3DBCF',
+        },
+    }
+
+    const getPalette = (paletteMode: PaletteMode) => {
+        switch (paletteMode) {
+            case 'light':
+                return lightThemePalette
+            case 'dark':
+                return darkThemePalette
+            default:
+                return lightThemePalette
+        }
+    }
+
     const buildTheme = (paletteMode: PaletteMode) =>
         createTheme({
             palette: {
                 mode: paletteMode,
+                ...getPalette(paletteMode),
             },
             shape: {
-                borderRadius: 16
+                borderRadius: 8,
             },
             typography: {
                 fontFamily: [
@@ -45,11 +74,7 @@ const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children }) => {
         })
     }, [paletteMode])
 
-    return (
-        <ThemeProvider theme={theme}>
-            {children}
-            </ThemeProvider>
-    )
+    return <ThemeProvider theme={theme}>{children}</ThemeProvider>
 }
 
-export default ThemeWrapper
\ No newline at end of file
+export default ThemeWrapper
diff --git a/frontend/src/features/TrackingTool/TrackingTool.tsx b/frontend/src/features/TrackingTool/TrackingTool.tsx
index 75fec31..bf2c1b3 100644
--- a/frontend/src/features/TrackingTool/TrackingTool.tsx
+++ b/frontend/src/features/TrackingTool/TrackingTool.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid, Stack, Typography } from '@mui/material'
+import { Button, Divider, Grid, Stack, Typography } from '@mui/material'
 import { Fragment } from 'react'
 import AddIcon from '@mui/icons-material/Add'
 import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
@@ -103,7 +103,7 @@ const TrackingTool = () => {
                 <Grid
                     item
                     xs={12}
-                    md={8}
+                    md={12}
                     style={{
                         minHeight: '60vh',
                         maxHeight: '100vh',
@@ -128,6 +128,7 @@ const TrackingTool = () => {
                         {polylines}
                     </MapContainer>
                 </Grid>
+                
             </Grid>
         </Fragment>
     )
