UI Update

apps/client/index.html

@@ -14,10 +14,6 @@
     <meta name="%VITE_APP_NAME%-build-date" content="%VITE_APP_BUILD_DATE%" />
     <meta name="%VITE_APP_NAME%-git-hash" content="%VITE_APP_GIT_HASH%" />
     <meta name="%VITE_APP_NAME%-version" content="%VITE_APP_VERSION%" />
-    <meta
-      name="%VITE_APP_NAME%-use-cache-buster"
-      content="%VITE_APP_USE_CACHE_BUSTER%"
-    />
 
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" href="/logo192.png" />

apps/client/package.json

@@ -68,6 +68,7 @@
     "intro.js-react": "^1.0.0",
     "jszip": "^3.10.1",
     "load-google-maps-api": "^2.0.2",
+    "motion": "^12.35.2",
     "notistack": "^3.0.2",
     "ol": "^10.8.0",
     "proj4": "^2.20.3",
@@ -78,6 +79,7 @@
     "react-event-observer": "^0.5.11",
     "react-horizontal-scrolling-menu": "^8.2.0",
     "react-markdown": "^10.1.0",
+    "react-modal-sheet": "^5.3.1",
     "react-number-format": "^5.4.4",
     "react-rnd": "^10.5.2",
     "react-scroll": "^1.9.3",
@@ -87,4 +89,4 @@
     "x2js": "^3.4.4",
     "xlsx": "^0.18.5"
   }
-}
+}

apps/client/src/components/App.jsx

@@ -1023,6 +1023,7 @@ class App extends React.PureComponent {
           sx={(theme) => ({
             padding: theme.spacing(1, 2),
             height: theme.spacing(6),
+            flexShrink: 0,
           })}
         >
           <LogoImage alt={logoAltText} src={logoUrl} />
@@ -1162,8 +1163,11 @@ class App extends React.PureComponent {
             sx={(theme) => ({
               "& .MuiPaper-root": {
                 width: DRAWER_WIDTH,
+                height: "auto",
+                maxHeight: "100%",
                 backgroundColor: theme.palette.background.default,
                 backgroundImage: "unset", // To match the new (darker) black theme.
+                borderBottomRightRadius: theme.spacing(2),
               },
             })}
           >
@@ -1329,10 +1333,12 @@ class App extends React.PureComponent {
                   },
                 }}
               >
-                <Zoom
-                  map={this.appModel.getMap()}
-                  mapConfig={this.appModel.config.mapConfig.map}
-                />
+                {!isMobile && (
+                  <Zoom
+                    map={this.appModel.getMap()}
+                    mapConfig={this.appModel.config.mapConfig.map}
+                  />
+                )}
                 {clean === false && (
                   <CookieNoticeButton appModel={this.appModel} />
                 )}

apps/client/src/components/ControlButton.jsx

@@ -0,0 +1,33 @@
+import { IconButton, Paper } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import HajkToolTip from "components/HajkToolTip";
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+}));
+
+export const StyledControlButton = styled(IconButton)(({ theme }) => ({
+  minWidth: "unset",
+  // Tried to set this the "correct" MUI way in the custom theme, but it didn't work after trying for x hours.
+  borderRadius: `${theme.shape.borderRadius}px`,
+  ".MuiTouchRipple-root": {
+    borderRadius: `${theme.shape.borderRadius}px !important`,
+  },
+  ".MuiTouchRipple-child": {
+    borderRadius: `${theme.shape.borderRadius}px !important`,
+  },
+}));
+
+const ControlButton = ({ tooltip, ariaLabel, onClick, children, ...rest }) => {
+  return (
+    <HajkToolTip title={tooltip} placement="left">
+      <StyledPaper>
+        <StyledControlButton aria-label={ariaLabel} onClick={onClick} {...rest}>
+          {children}
+        </StyledControlButton>
+      </StyledPaper>
+    </HajkToolTip>
+  );
+};
+
+export default ControlButton;

apps/client/src/components/CookieNotice.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {
+  Box,
   Button,
   Checkbox,
   Dialog,
@@ -11,7 +12,6 @@ import {
   Link,
   Slide,
 } from "@mui/material";
-import { styled } from "@mui/material/styles";
 import {
   functionalOk,
   setLevel,
@@ -25,15 +25,6 @@ const DEFAULT_MESSAGE =
 const DEFAULT_URL =
   "https://pts.se/sv/bransch/regler/lagar/lag-om-elektronisk-kommunikation/kakor-cookies/";
 
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [theme.breakpoints.up("sm")]: {
-    "& .MuiDialog-container": {
-      alignItems: "flex-end",
-      padding: "16px 20px",
-    },
-  },
-}));
-
 // We're using several labeled checkboxes, let's create a component so that we keep DRY.
 const LabeledCheckbox = ({ checked, disabled, label, onChange }) => {
   return (
@@ -126,10 +117,16 @@ function CookieNotice({ globalObserver, appModel }) {
   }, [showThirdPartCheckbox]);
 
   return (
-    <StyledDialog
+    <Dialog
+      slotProps={{
+        paper: {
+          sx: {
+            width: { xs: "calc(100% - 16px)", sm: "calc(100% - 32px)" },
+            maxWidth: "md",
+          },
+        },
+      }}
       sx={{ zIndex: "9999" }}
-      fullWidth={true}
-      maxWidth={"md"}
       open={open}
       TransitionComponent={Transition}
       keepMounted
@@ -158,9 +155,13 @@ function CookieNotice({ globalObserver, appModel }) {
         }}
       >
         <FormGroup
-          sx={{
-            flexDirection: { xs: "column", sm: "row" },
-          }}
+          row={true}
+          sx={(theme) => ({
+            // For some weird reason, the last checkbox is not getting the correct margin-right on mobile. And the only way to fix it is to use a media query and forced css.
+            [theme.breakpoints.down("sm")]: {
+              ".MuiFormControlLabel-root:last-child": { mr: 0 },
+            },
+          })}
         >
           <LabeledCheckbox
             disabled={true}
@@ -184,23 +185,34 @@ function CookieNotice({ globalObserver, appModel }) {
             />
           )}
         </FormGroup>
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={handleAllowSelectedClick}
-        >
-          {"Tillåt valda"}
-        </Button>
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={handleAllowAllClick}
-          sx={{ margin: [1, 1] }}
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            gap: 1,
+            pt: 1,
+            pb: 2,
+            "&&": { ml: 0 },
+          }}
         >
-          {"Tillåt Alla"}
-        </Button>
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={handleAllowSelectedClick}
+          >
+            {"Tillåt valda"}
+          </Button>
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={handleAllowAllClick}
+            sx={{ mr: { sm: 2 } }}
+          >
+            {"Tillåt Alla"}
+          </Button>
+        </Box>
       </DialogActions>
-    </StyledDialog>
+    </Dialog>
   );
 }
 

apps/client/src/components/Dialog/Dialog.jsx

@@ -114,7 +114,7 @@ export default function ResponsiveDialog(props) {
           <Button
             onClick={handleClose}
             variant={primaryButtonVariant || "text"}
-            sx={{ color: "text.primary" }}
+            color="primary"
           >
             {buttonText}
           </Button>