@geops/rvf-mobility-web-component 0.1.9 → 0.1.11

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -1,12 +1,8 @@
 import { Map } from "ol";
 import { unByKey } from "ol/Observable";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
 const useUpdatePermalink = (map: Map, permalink: boolean) => {
-  const [x, setX] = useState<string>(null);
-  const [y, setY] = useState<string>(null);
-  const [z, setZ] = useState<string>(null);
-
   useEffect(() => {
     let listener;
     if (map && permalink) {
@@ -15,11 +11,8 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
         const newX = map.getView().getCenter()[0].toFixed(2);
         const newY = map.getView().getCenter()[1].toFixed(2);
         const newZ = map.getView().getZoom().toFixed(1);
-        setX(newX);
         urlParams.set("x", newX);
-        setY(newY);
         urlParams.set("y", newY);
-        setZ(newZ);
         urlParams.set("z", newZ);
         window.history.replaceState(null, null, `?${urlParams.toString()}`);
       });
@@ -28,6 +21,6 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
       unByKey(listener);
     };
   }, [map, permalink]);
-  return { x, y, z };
+  return null;
 };
 export default useUpdatePermalink;

package/tailwind.config.mjs

@@ -26,16 +26,29 @@ const getClamp = (min, max) => {
 };
 
 export default {
-  colors: {
-    darkgray: "#464646", // dark grey
-    grey: "#7C7C7C", // grey
-    lightgrey: "#D0D0D0", // light grey
-    red: "#E3000B", // rvf rot
-    ultradarkgray: "#2D2D2C", // another grey with no name
-    ultralightgrey: "#F5F5F5", // ultralight grey
-  },
   plugins: [containerQueries],
   theme: {
+    extend: {
+      colors: {
+        darkgray: "#464646", // dark grey
+        darkred: "#AF050D", // rvf drk red (ex: button primary hover)
+        grey: "#7C7C7C", // grey
+        lightgrey: "#D0D0D0", // light grey
+        lightred: "#FF5961", //rvf light red (ex:active button)
+        red: "#E3000B", // rvf rot
+        ultradarkgray: "#2D2D2C", // another grey with no name
+        ultralightgrey: "#F5F5F5", // ultralight grey
+      },
+      maxHeight: {
+        button: "40px",
+      },
+      maxWidth: {
+        button: "40px",
+      },
+      padding: {
+        1.75: "7px",
+      },
+    },
     fontFamily: {
       sans: [
         "'Source Sans Pro'",
@@ -48,9 +61,48 @@ export default {
       "2xl": getClamp(29, 39), // h2
       "3xl": getClamp(35, 48), // h1
       base: getClamp(16, 20), // p
+      button: getClamp(14, 18), // button
       lg: getClamp(19, 25), // H4
       sm: getClamp(13, 15), // small
       xl: getClamp(24, 31), // h3
     },
+    extend: {
+      colors: {
+        darkgray: "#464646", // dark grey
+        grey: "#7C7C7C", // grey
+        lightgrey: "#D0D0D0", // light grey
+        red: "#E3000B", // rvf rot
+        ultradarkgray: "#2D2D2C", // another grey with no name
+        ultralightgrey: "#F5F5F5", // ultralight grey
+      },
+      width: {
+        'largeMenu': '350px',
+        'mediumMenu': '300px',
+        'inputControl': '20px',
+        'check': '6px',
+        'innerControl': '12px',
+      },
+      height: {
+        'inputControl': '20px',
+        'innerControl': '12px',
+      },
+      maxWidth: {
+        'button': '40px'
+      },
+      maxHeight: {
+        'button': '40px'
+      },
+      padding: {
+        '1.75': '7px'
+      },
+      margin: {
+        '4px': '4px',
+        '7px': '7px'
+      },
+      screens: {
+        'medium': '577px',
+        'large': '993px'
+      }
+    }
   },
 };