Merge pull request #12 from OpenUpSA/feature/data-sources-modal

Data sources modal

app/mapGrid.tsx

@@ -7,6 +7,7 @@ import FilterPanel from "@/components/filterPanel";
 import Stack from "@mui/material/Stack";
 
 import { IntroModal } from "@/components/introModal";
+import { DataSourcesModal } from "@/components/dataSourcesModal";
 
 import { getCookie, setCookie } from "cookies-next";
 import { useSearchParams } from "next/navigation";
@@ -19,15 +20,22 @@ export default function Page() {
     setCookie("seenIntroModal", "true");
     setIntroModalOpen(false);
   };
-
   const showIntroModal = (showUseToolButton: boolean) => {
     setIntroModalOpen(true);
     setShowUseToolButton(showUseToolButton);
   };
-
   const [introModalOpen, setIntroModalOpen] = useState(
     !seenIntroModal && currentSearchParams.toString() === ""
   );
+
+  const closeDataSourcesModal = () => {
+    setDataSourcesModalOpen(false);
+  };
+  const showDataSourcesModal = () => {
+    setDataSourcesModalOpen(true);
+  };
+  const [dataSourcesModalOpen, setDataSourcesModalOpen] = useState(false);
+
   const [filteredPowerStations, setFilteredPowerStations] = useState<
     PowerStation[]
   >([]);
@@ -43,6 +51,7 @@ export default function Page() {
           setFilteredPowerStations={setFilteredPowerStations}
           filteredPowerStations={filteredPowerStations}
           showIntroModal={showIntroModal}
+          showDataSourcesModal={showDataSourcesModal}
           panelOpen={panelOpen}
           setPanelOpen={setPanelOpen}
         />
@@ -59,6 +68,10 @@ export default function Page() {
         closeIntroModal={closeIntroModal}
         showUseToolButton={showUseToolButton}
       />
+      <DataSourcesModal
+        dataSourcesModalOpen={dataSourcesModalOpen}
+        closeDataSourcesModal={closeDataSourcesModal}
+      />
     </>
   );
 }

components/dataSourcesModal/index.scss

@@ -0,0 +1,121 @@
+.modalCard {
+  position: relative;
+  max-width: 515px;
+  outline: none;
+  box-shadow: 0px 4px 8px 3px #00000026;
+  border-radius: 12px !important;
+
+  @media (max-width: 1325px) {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0 !important;
+  }
+
+  .media {
+    background-color: #000;
+    height: 205px;
+  }
+
+  .content {
+    padding: 1.5em 1.5em 0 1.5em;
+
+    .title {
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 28px;
+      margin-bottom: 0em;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 18px;
+    }
+  }
+
+  .actions {
+    padding: 1em 1.5em;
+  }
+
+  button.primary,
+  .button.secondary {
+    cursor: pointer;
+    border-radius: 100px;
+    background: #ffcb14;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 40px;
+    letter-spacing: 0.10000000149011612px;
+    text-align: center;
+    color: #000;
+    padding: 0 2em;
+    text-transform: none;
+    align-items: center;
+    display: flex;
+    text-decoration: none;
+
+    @media (max-width: 1325px) {
+      font-size: 12px;
+    }
+
+    &:hover {
+      background: #ffdb24;
+    }
+
+    svg {
+      margin-right: 0.5em;
+    }
+  }
+
+  .button.secondary {
+    background: #faf4e0;
+
+    &:hover {
+      background: #eae4d0;
+    }
+  }
+
+  button.closeDatasourcesModalButton {
+    cursor: pointer;
+    color: #333;
+    text-align: right !important;
+    background-color: #efefef;
+    border-radius: 8px;
+    padding: 0;
+    margin: 0 0 0 auto;
+    display: flex;
+    width: 44px;
+    height: 44px;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    &:hover {
+      color: #000;
+      background: #dfdfdf;
+    }
+  }
+}
+
+.tabularList {
+  list-style: none;
+  font-size: 12px;
+  li {
+    border-bottom: 1px solid #eee;
+    padding: 1em 0 1em 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    a {
+      text-decoration: none;
+      color: #666;
+
+      &:hover {
+        text-decoration: underline;
+        color: #000;
+      }
+    }
+  }
+}

components/dataSourcesModal/index.tsx

@@ -0,0 +1,99 @@
+import "./index.scss";
+
+import { Modal } from "@mui/material";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+
+import CloseIcon from "@mui/icons-material/Close";
+import StorageRounded from "@mui/icons-material/StorageRounded";
+
+type Props = {
+  dataSourcesModalOpen: boolean;
+  closeDataSourcesModal: Function;
+};
+
+export function DataSourcesModal({
+  dataSourcesModalOpen,
+  closeDataSourcesModal,
+}: Props) {
+  return (
+    <Modal
+      open={dataSourcesModalOpen}
+      onClose={() => closeDataSourcesModal()}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Card className="modalCard">
+        <CardContent className="content">
+          <Stack
+            alignItems="center"
+            direction="row"
+            gap={2}
+            style={{ marginBottom: "1em" }}
+          >
+            <StorageRounded />
+            <Typography
+              gutterBottom
+              variant="h5"
+              component="h1"
+              className="title"
+            >
+              Data sources
+            </Typography>
+            <button
+              className="closeDatasourcesModalButton"
+              onClick={() => closeDataSourcesModal()}
+            >
+              <CloseIcon fontSize="medium" />
+            </button>
+          </Stack>
+          <ul className="tabularList">
+            <li>
+              <a
+                href="https://www.opensecrets.org.za/report-who-has-the-power/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Who Has the Power: South Africa’s Energy Profiteers
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://globalenergymonitor.org/projects/global-coal-plant-tracker/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Global Coal Plant Tracker, Global Energy Monitor, April 2024
+                Supplemental release.
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://globalenergymonitor.org/projects/global-methane-emitters-tracker/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Global Methane Emitters Tracker, Global Energy Monitor, November
+                2023 release.
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://globalenergymonitor.org/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Global Energy Monitor
+              </a>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+    </Modal>
+  );
+}

components/filterPanel.scss

@@ -111,7 +111,7 @@
     }
   }
 
-  .aboutThisTool {
+  .aboutThisTool, .dataSourcesButton {
     color: #48454f;
     text-transform: none;
     text-decoration: underline;
@@ -132,7 +132,11 @@
     }
   }
 
-  .aboutThisToolMobile {
+  .dataSourcesButton {
+    left: 160px;
+  }
+
+  .aboutThisToolMobile, .dataSourcesMobile {
     cursor: pointer;
     color: #333;
     background: #eee;

components/filterPanel.tsx

@@ -16,10 +16,10 @@ import InputAdornment from "@mui/material/InputAdornment";
 import Slider from "@mui/material/Slider";
 
 import FilterAltOutlinedIcon from "@mui/icons-material/FilterAltOutlined";
+import StorageRounded from "@mui/icons-material/StorageRounded";
 import SearchIcon from "@mui/icons-material/Search";
 import BoltIcon from "@mui/icons-material/Bolt";
 import SpeedIcon from "@mui/icons-material/Speed";
-import EventIcon from "@mui/icons-material/Event";
 import CloseIcon from "@mui/icons-material/Close";
 import CheckIcon from "@mui/icons-material/Check";
 import PersonIcon from "@mui/icons-material/Person";
@@ -33,6 +33,7 @@ import Button from "@mui/material/Button";
 
 type Props = {
   showIntroModal: Function;
+  showDataSourcesModal: Function;
   setFilteredPowerStations: Function;
   filteredPowerStations: PowerStation[];
   panelOpen: boolean;
@@ -95,8 +96,13 @@ function Component(props: Props) {
   const currentSearchParams = useSearchParams();
 
   const initialized = useRef(false);
-  const { setFilteredPowerStations, setPanelOpen, panelOpen, showIntroModal } =
-    props;
+  const {
+    setFilteredPowerStations,
+    setPanelOpen,
+    panelOpen,
+    showIntroModal,
+    showDataSourcesModal,
+  } = props;
   const [powerStations, setPowerStations] = useState<PowerStation[]>([]);
   const [energyTypes, setEnergyTypes] = useState<ItemLabel>();
   const [operators, setOperators] = useState<ItemLabel>();
@@ -483,6 +489,14 @@ function Component(props: Props) {
             <InfoOutlinedIcon fontSize="small" />
           </Stack>
         </button>
+        <button
+          onClick={() => showDataSourcesModal()}
+          className="dataSourcesMobile"
+        >
+          <Stack alignItems="center" direction="row" gap={1}>
+            <StorageRounded fontSize="small" />
+          </Stack>
+        </button>
         <button
           onClick={() => setPanelOpen(!panelOpen)}
           className="toggleFilterPanel"
@@ -770,6 +784,15 @@ function Component(props: Props) {
           <div>About this tool</div>
         </Stack>
       </Button>
+      <Button
+        onClick={() => showDataSourcesModal()}
+        className="dataSourcesButton"
+      >
+        <Stack alignItems="center" direction="row" gap={1}>
+          <StorageRounded fontSize="small" />
+          <div>Data sources</div>
+        </Stack>
+      </Button>
     </Stack>
   );
 }