ACD-17356: making rentokil heatmap more generic

package.json

@@ -12,7 +12,7 @@
     },
     "dependencies": {
         "@googlemaps/extended-component-library": "^0.6.10",
-        "firebase": "^10.11.1",
+        "firebase": "^10.12.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -26,6 +26,7 @@
         "eslint": "^8.57.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
+        "sass": "^1.77.4",
         "typescript": "^5.2.2",
         "vite": "^5.2.0"
     }

src/App.css

@@ -5,16 +5,4 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-}
-
-div.wrapper {
-    height: 100%;
-}
-
-div.areaCalc {
-    font-size: 18px;
-    font-weight: 900;
-    padding: 0px 20px 20px 20px;
-    margin-top: -20px;
-    border-bottom: 1px solid #e0e0e0;
-}
+}

src/App.module.scss

@@ -0,0 +1,19 @@
+@import "./themes/default.scss";
+@import "./themes/dark.scss";
+@import "./themes/mixins";
+
+.wrapper {
+    height: 100%;
+}
+
+.areaCalc {
+    font-size: 18px;
+    font-weight: 900;
+    padding: 0px 20px 20px 20px;
+    margin-top: -20px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.top {
+    background: var(--background-default);
+}

src/App.tsx

@@ -1,14 +1,16 @@
 import { useEffect, useState } from "react";
 import "./App.css";
+import styles from "./App.module.scss";
 import { Map } from "./components/Map";
-import { PrimaryNavigation } from "./components/PrimaryNavigation";
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import Sidebar from "./components/Sidebar/Sidebar";
 import { PolygonEditor } from "./components/PolygonEditor";
 import { GeoJsonArea } from "./components/GeoJsonArea";
 import { SiteInfo } from "./components/SiteInfo/SiteInfo";
 import { AtRiskList } from "./components/AtRiskList/AtRiskList";
+import { Header } from "./components/Header/Header";
+import Logo from "../src/assets/ancoris-logo.svg" assert { type: "png" };
 
 const enum InfoType {
     siteInfo = "siteInfo",
@@ -22,13 +24,12 @@ function App() {
     const [map, setMap] = useState<google.maps.Map | null>(null);
 
     const app = initializeApp({
-        apiKey: "AIzaSyBWjMNpB8OfCyVhcARQUMBh9bDzrcxBOpc",
-        authDomain: "rentokil-map-area-mini-hack.firebaseapp.com",
-        projectId: "rentokil-map-area-mini-hack",
-        storageBucket: "rentokil-map-area-mini-hack.appspot.com",
-        messagingSenderId: "622316479711",
-        appId: "1:622316479711:web:76f9c31911ffd9284df56a",
-        measurementId: "G-R1Y623L7QJ",
+        apiKey: "AIzaSyD7EmsrEvkdxUffWtw0amCJiKVKmqp8DZ4",
+        authDomain: "anc-generic-heatmap.firebaseapp.com",
+        projectId: "anc-generic-heatmap",
+        storageBucket: "anc-generic-heatmap.appspot.com",
+        messagingSenderId: "522511250804",
+        appId: "1:522511250804:web:f1c2c5c4cb3327cd13e821",
     });
     getAnalytics(app);
     const [showSidebar, setShowSidebar] = useState(false);
@@ -54,7 +55,7 @@ function App() {
     const siteDetails = () => {
         return (
             <>
-                <div className="areaCalc">
+                <div className={styles.areaCalc}>
                     <PolygonEditor {...{ lastClickedFeatureIds }} />
                     <GeoJsonArea
                         {...{
@@ -79,7 +80,17 @@ function App() {
 
     return (
         <>
-            <PrimaryNavigation />
+            <div className={styles.top}>
+                <Header
+                    logo={
+                        <img
+                        src={Logo}
+                        alt="Ancoris Logo"
+                    />
+                    }
+                    title="Heatmap"
+                />
+            </div>
             <Sidebar
                 content={
                     activeInfoType == InfoType.siteInfo ? (

src/components/Avatar/Avatar.module.scss

@@ -0,0 +1,38 @@
+.avatarImage {
+    width: 40px;
+    height: 40px;
+}
+
+.avatarBorder {
+    border: 1px solid var(--grey-300);
+    border-radius: 24px;
+}
+
+.avatarDropdown {
+    position: relative;
+    display: inline-block;
+    line-height: 0px;
+}
+
+.avatarDropdownContent {
+    display: block;
+    position: absolute;
+    width: fit-content;
+    z-index: 5;
+    left: auto;
+    right: 0;
+    margin-right: -10px;
+    padding-block-start: var(--space-x1);
+}
+
+.avatarDropdownContentInner {
+    background: var(--grey-300);
+    width: fit-content;
+    border-radius: 10px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+
+.avatarDropdown:hover .avatarDropdownContent {
+    display: block;
+}

src/components/Avatar/Avatar.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, useState, FunctionComponent } from "react";
+import styles from "./Avatar.module.scss";
+import { List } from "../List/List";
+
+interface AvatarProps {
+    image: string;
+    options?: ReactNode[];
+}
+
+export const Avatar: FunctionComponent<AvatarProps> = ({
+    image,
+    options = [],
+}: AvatarProps) => {
+    const [showMenu, setShowMenu] = useState<boolean>(false);
+
+    const handleMenu = () => {
+        console.log("clicked")
+        setShowMenu(!showMenu);
+    };
+
+    return (
+        <div className={styles.avatarDropdown}>
+            <img
+                className={styles.avatarImage}
+                src={image}
+                alt="Avatar"
+                onClick={handleMenu}
+            />
+            {showMenu && (
+                <div className={styles.avatarDropdownContent}>
+                    <div className={styles.avatarDropdownContentInner}>
+                        <List children={options} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

src/components/Button/Button.tsx

@@ -0,0 +1,53 @@
+import { ReactNode, FunctionComponent } from "react";
+import styles from "./Button.module.scss";
+import { ButtonType } from "./ButtonTypes";
+
+interface ButtonProps {
+    type?: ButtonType;
+    label?: string;
+    icon?: ReactNode;
+    hideLabel?: boolean;
+    hideIcon?: boolean;
+    onClick: () => void;
+}
+
+export const Button: FunctionComponent<ButtonProps> = ({
+    type = ButtonType.Action,
+    label,
+    icon,
+    hideLabel = false,
+    hideIcon = true,
+    onClick,
+}: ButtonProps) => {
+    let buttonClass;
+    switch (type) {
+        case ButtonType.Action:
+            buttonClass = styles.actionOuter;
+            break;
+        case ButtonType.Send:
+            buttonClass = styles.sendOuter;
+            break;
+        case ButtonType.Suggestion:
+            buttonClass = styles.suggestionOuter;
+            break;
+    }
+
+    return (
+        <button className={buttonClass} type="button" onClick={onClick}>
+            <div
+                className={
+                    hideLabel
+                        ? styles.buttonContentNoText
+                        : styles.buttonContent
+                }
+            >
+                {!hideIcon && (
+                    <span className={styles.iconContainer}>{icon}</span>
+                )}
+                {!hideLabel && (
+                    <span className={styles.labelContainer}>{label}</span>
+                )}
+            </div>
+        </button>
+    );
+};

src/components/Button/ButtonTypes.ts

@@ -0,0 +1,5 @@
+export enum ButtonType {
+    Action,
+    Send,
+    Suggestion,
+}

src/components/DateSlider/DateSlider.module.css

@@ -67,13 +67,18 @@ div.timeSliderContainer {
             }
         }
 
+        .date {
+            color: var(--text-primary)
+        }
+
         .labels {
             position: absolute;
             bottom: 0;
             left: var(--label-margins);
         }
 
         .labels span {
+            color: var(--text-primary);
             position: absolute;
             left: calc(
                 var(--i) * (var(--slider-width) - (2 * var(--label-margins))) /

src/components/DateSlider/index.tsx

@@ -121,7 +121,7 @@ export const DateSlider: FunctionComponent<DateSliderProps> = ({
                 />
                 <output htmlFor="timeSlider">{daysAgo(0)}</output>
                 <label htmlFor="timeSlider">
-                    <strong>Date</strong>
+                    <strong className={styles.date}>Date</strong>
                     <div className={styles.labels} aria-hidden="true">
                         <span style={{ "--i": 0 } as CSSProperties}>
                             {daysAgo(90 - 0)}

src/components/Header/Header.module.scss

@@ -0,0 +1,42 @@
+@import "../../themes/mixins";
+
+.headerOuter {
+    width: 100%;
+    color: var(--text-primary);
+    @include typography-h5();
+    border-bottom: 1px solid var(--grey-300);
+
+    .headerInner {
+        margin: auto;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row;
+        align-items: center;
+        padding: var(--space-x1) var(--space-x4);
+        column-gap: var(--space-x1);
+        max-width: 1200px;
+
+        .logoContainer {
+            width: 33%;
+            min-height: 40px;
+            display: flex;
+            align-items: center;
+        }
+        .titleContainer {
+            flex-grow: 1;
+            min-height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+        .actionsContainer {
+            width: 33%;
+            min-height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            column-gap: var(--space-x2);
+        }
+    }
+}

src/components/Header/Header.tsx

@@ -0,0 +1,22 @@
+import { ReactNode, FunctionComponent } from "react";
+import styles from "./Header.module.scss";
+
+interface HeaderProps {
+    logo?: ReactNode;
+    title?: string;
+}
+
+export const Header: FunctionComponent<HeaderProps> = ({
+    logo,
+    title,
+}: HeaderProps) => {
+    return (
+        <div className={styles.headerOuter}>
+            <div className={styles.headerInner}>
+                <span className={styles.logoContainer}>{logo}</span>
+                <span className={styles.titleContainer}>{title}</span>
+                <span className={styles.actionsContainer}></span>
+            </div>
+        </div>
+    );
+};

src/components/List/List.module.scss

@@ -0,0 +1,15 @@
+.listContent {
+    background: none;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.listItemNoSeparator {
+    white-space: nowrap;
+}
+
+.listItemWithSeparator {
+    white-space: nowrap;
+    border-top: 1px solid var(--grey-400);
+}