From 091e85529f0cec5be3b16b490630cfca0b2bc1cf Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Tue, 16 Apr 2024 16:22:57 -0700
Subject: [PATCH 1/3] DBC22-2012: Added exit survey notification

---
 src/frontend/src/App.scss                     |  6 +-
 src/frontend/src/Components/Map.js            | 14 +++-
 src/frontend/src/Components/Map.scss          |  4 +-
 .../advisories/AdvisoriesOnMap.scss           | 13 ++--
 .../src/Components/advisories/ExitSurvey.js   | 49 ++++++++++++
 .../src/Components/advisories/ExitSurvey.scss | 77 +++++++++++++++++++
 src/frontend/src/pages/CamerasListPage.scss   |  8 +-
 src/frontend/src/pages/EventsListPage.scss    |  8 +-
 src/frontend/src/styles/typography.scss       |  4 +
 9 files changed, 161 insertions(+), 22 deletions(-)
 create mode 100644 src/frontend/src/Components/advisories/ExitSurvey.js
 create mode 100644 src/frontend/src/Components/advisories/ExitSurvey.scss

diff --git a/src/frontend/src/App.scss b/src/frontend/src/App.scss
index ec39ed437..b18dc571e 100644
--- a/src/frontend/src/App.scss
+++ b/src/frontend/src/App.scss
@@ -153,11 +153,9 @@ a[target="_blank"] {
 
   &:not(.social-icon):after {
     position: absolute;
-    top: 0;
-    right: -18px;
-    //content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' alt='external link'%3E%3Cpath fill='%23474543' d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'%3E%3C/path%3E%3C/svg%3E");
+    margin-top: 1px;
+    margin-left: 4px;
     content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' alt='external link'%3E%3Cpath fill='%23474543' d='M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16H457.4L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6V176c0 8.8 7.2 16 16 16s16-7.2 16-16V16c0-8.8-7.2-16-16-16H336zM64 32C28.7 32 0 60.7 0 96V448c0 35.3 28.7 64 64 64H416c35.3 0 64-28.7 64-64V304c0-8.8-7.2-16-16-16s-16 7.2-16 16V448c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H208c8.8 0 16-7.2 16-16s-7.2-16-16-16H64z'/%3E%3C/svg%3E");
-    
     display: inline-block;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
index ccce89320..a2dd5adf2 100644
--- a/src/frontend/src/Components/Map.js
+++ b/src/frontend/src/Components/Map.js
@@ -31,6 +31,7 @@ import {
   faLocationCrosshairs,
   faXmark,
 } from '@fortawesome/pro-solid-svg-icons';
+import {useMediaQuery} from '@uidotdev/usehooks';
 
 // Components and functions
 import CamPopup from './map/camPopup.js';
@@ -72,6 +73,7 @@ import AdvisoriesOnMap from './advisories/AdvisoriesOnMap';
 import CurrentCameraIcon from './CurrentCameraIcon';
 import Filters from './Filters.js';
 import RouteSearch from './map/RouteSearch.js';
+import ExitSurvey from './advisories/ExitSurvey.js';
 
 // Map & geospatial imports
 import { applyStyle } from 'ol-mapbox-style';
@@ -1251,6 +1253,8 @@ export default function MapWrapper({
     clickedRestStop
   );
 
+  const smallScreen = useMediaQuery('only screen and (max-width: 767px)');
+
   return (
     <div className={`map-container ${isPreview ? 'preview' : ''}`}>
       <div
@@ -1321,12 +1325,19 @@ export default function MapWrapper({
         )}
 
         {!isPreview && (
-          <div className="routing-outer-container">
+          <div className="map-left-container">
+            {smallScreen && (
+              <ExitSurvey mobile={true} />
+            )}
             <RouteSearch routeEdit={true} />
             <AdvisoriesOnMap advisories={advisoriesInView} />
           </div>
         )}
 
+        {(!isPreview && !smallScreen) && (
+          <ExitSurvey />
+        )}
+
         {!isPreview && (
           <Filters
             toggleHandler={toggleLayer}
@@ -1334,6 +1345,7 @@ export default function MapWrapper({
             enableRoadConditions={true}
           />
         )}
+
       </div>
 
       <div id="popup" className="ol-popup">
diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss
index 9c9cb9750..71eb4affb 100644
--- a/src/frontend/src/Components/Map.scss
+++ b/src/frontend/src/Components/Map.scss
@@ -162,7 +162,7 @@
       height: 100%;
       overflow: hidden;
 
-      .routing-outer-container {
+      .map-left-container, .routing-outer-container {
         position: absolute;
         z-index: 16;
         width: 100%;
@@ -272,7 +272,7 @@
         right: 1rem;
         z-index: 5;
 
-        @media (max-width: 768px) {
+        @media (max-width: 767px) {
           top: initial;
           bottom: 1rem;
         }
diff --git a/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss
index b6c7ac810..db522703d 100644
--- a/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss
+++ b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss
@@ -3,8 +3,11 @@
 .advisories-on-map {
   position: relative;
   top: 6rem;
-  left: 1rem;
-  width: fit-content;
+  padding: 0 1rem;
+
+  @media (min-width: 768px) {
+    width: fit-content;
+  }
 
   .btn.advisories-on-map__btn {
     background: #FAF9F8;
@@ -53,14 +56,10 @@
     border-radius: 4px;
     box-shadow: 0px 1.937px 4.358px 0px rgba(0, 0, 0, 0.13), 0px 0.363px 1.089px 0px rgba(0, 0, 0, 0.10);
     padding: 1rem;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 20;
+    position: relative;
 
     @media (min-width: 768px) {
       width: 360px;
-      position: relative;
     }
 
     h4 {
diff --git a/src/frontend/src/Components/advisories/ExitSurvey.js b/src/frontend/src/Components/advisories/ExitSurvey.js
new file mode 100644
index 000000000..28922f4b7
--- /dev/null
+++ b/src/frontend/src/Components/advisories/ExitSurvey.js
@@ -0,0 +1,49 @@
+// React
+import React, { useState } from 'react';
+
+// Third party packages
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {
+  faComment,
+  faXmark
+} from '@fortawesome/pro-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
+
+// Styling
+import './ExitSurvey.scss';
+
+export default function ExitSurvey({ mobile=false }) {
+
+  // States
+  const [open, setOpen] = useState(true);
+
+  // Rendering
+  return (open) ? (
+    <div className={'exit-survey' + (mobile ? ' mobile' : '')}>
+      <Button
+        className={'exit-survey-close-btn' + (open ? ' open' : '')}
+        aria-label="close exit survey banner"
+        onClick={() => {
+          open ? setOpen(false) : setOpen(true) }
+        }>
+        <FontAwesomeIcon icon={faXmark} />
+      </Button>
+
+      <div className="content">
+        <div className="content__icon">
+          <div className="square-icon">
+            <FontAwesomeIcon icon={faComment} />
+          </div>
+        </div>
+        <div className="content__text">
+          <p className="bold blue-text">Thank you for checking out the new DriveBC beta!</p>
+          <p className="feedback"><span>We&apos;d love to hear your feedback on your experience using the new site. Please take a few minutes to </span>
+          <a className="survey-link" target="_blank" rel="noreferrer" alt="Survey" href="https://forms.office.com/Pages/ResponsePage.aspx?id=AFLbbw09ikqwNtNoXjWa3G-k6A-ZOZVMlxBJti4jf_VURjI4MlRKMlRYQTVFUFJZOU5XTVVZUjEwQS4u" >
+          complete our anonymous survey
+          </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  ) : null;
+}
diff --git a/src/frontend/src/Components/advisories/ExitSurvey.scss b/src/frontend/src/Components/advisories/ExitSurvey.scss
new file mode 100644
index 000000000..94ad72b4c
--- /dev/null
+++ b/src/frontend/src/Components/advisories/ExitSurvey.scss
@@ -0,0 +1,77 @@
+@import "../../styles/variables.scss";
+
+.exit-survey {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 365px;
+  background-color: #F1F8FE;
+  padding: 0.75rem;
+  border: 1px solid #053662;
+  border-radius: 4px;
+  box-shadow: 0px 1.937px 4.358px 0px rgba(0, 0, 0, 0.13), 0px 0.363px 1.089px 0px rgba(0, 0, 0, 0.10);
+  z-index: 22;
+  
+  &.mobile {
+    position: relative;
+    bottom: inherit;
+    left: inherit;
+    transform: none;
+    width: 100%;
+    border: none;
+
+    .content__text {
+      margin: 0 0 0 1rem;
+    }
+  }
+
+  .exit-survey-close-btn {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    padding: 0;
+    margin-bottom: 0;
+    font-size: 0.75rem;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+  }
+
+  .content {
+    display: flex;
+
+    &__icon {
+      display: flex;
+      align-items: center;
+
+      .square-icon {
+        width: 48px;
+        height: 48px;
+        background-color: $BC-Blue;
+        color: #D8EAFD;
+        border-radius: 8px;
+        font-size: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    &__text {
+      margin: 0 2rem 0 1rem;
+
+      p {
+        font-size: 0.875rem;
+
+        &:first-of-type {
+          margin-bottom: 0;
+        }
+
+        &.feedback {
+          color: #053662;
+        }
+      }
+    }
+  }
+}
diff --git a/src/frontend/src/pages/CamerasListPage.scss b/src/frontend/src/pages/CamerasListPage.scss
index 135c25cc6..fc0f7290e 100644
--- a/src/frontend/src/pages/CamerasListPage.scss
+++ b/src/frontend/src/pages/CamerasListPage.scss
@@ -9,7 +9,7 @@
     justify-content: space-between;
     margin-bottom: 1.5rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
       flex-direction: column;
     }
 
@@ -17,7 +17,7 @@
       display: flex;
       align-items: center;
 
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
         width: 100%;
       }
 
@@ -25,7 +25,7 @@
         position:relative;
         padding: 0;
 
-        @media (max-width: 768px) {
+        @media (max-width: 767px) {
           width: 100%;
         }
         .swap-button{
@@ -39,7 +39,7 @@
     .search-container {
       min-width: 360px;
 
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
         min-width: 100%;
         width: 100%;
         margin-top: 1rem;
diff --git a/src/frontend/src/pages/EventsListPage.scss b/src/frontend/src/pages/EventsListPage.scss
index 8a495ca9a..7691bccbb 100644
--- a/src/frontend/src/pages/EventsListPage.scss
+++ b/src/frontend/src/pages/EventsListPage.scss
@@ -10,7 +10,7 @@
     justify-content: space-between;
     margin-bottom: 1.5rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
       flex-direction: column;
       margin-bottom: 1rem;
     }
@@ -18,7 +18,7 @@
     .route-display-container {
       display: flex;
 
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
         width: 100%;
         margin-bottom: 20px;
       }
@@ -27,7 +27,7 @@
         padding: 0;
         position:relative;
 
-        @media (max-width: 768px) {
+        @media (max-width: 767px) {
           width: 100%;
         }
         .swap-button{
@@ -41,7 +41,7 @@
     .right-container {
       display: flex;
 
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
         margin-bottom: 1rem;
         justify-content: space-between;
       }
diff --git a/src/frontend/src/styles/typography.scss b/src/frontend/src/styles/typography.scss
index ebeb51dd3..a034a1110 100644
--- a/src/frontend/src/styles/typography.scss
+++ b/src/frontend/src/styles/typography.scss
@@ -99,6 +99,10 @@ ul {
   color: $Error;
 }
 
+.blue-text {
+  color: $BC-Blue;
+}
+
 .lowercase {
   text-transform: lowercase;
 }
\ No newline at end of file

From 0cf2d7636b7b01c8caa8f2948ea981964751e66e Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Wed, 17 Apr 2024 12:05:05 -0700
Subject: [PATCH 2/3] Fix for sentence caps

---
 src/frontend/src/Components/Filters.js   | 2 +-
 src/frontend/src/Components/Map.js       | 4 ++--
 src/frontend/src/Components/Map.scss     | 2 +-
 src/frontend/src/pages/EventsListPage.js | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js
index 1cf2442f0..5890e85d1 100644
--- a/src/frontend/src/Components/Filters.js
+++ b/src/frontend/src/Components/Filters.js
@@ -112,7 +112,7 @@ export default function Filters(props) {
         onClick={() => {
           open ? setOpen(false) : setOpen(true) }
         }>
-        {textOverride ? textOverride : 'Layer Filters'}
+        {textOverride ? textOverride : 'Layer filters'}
 
         <FontAwesomeIcon icon={faFilter} />
       </Button>
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
index a2dd5adf2..c4b42e90c 100644
--- a/src/frontend/src/Components/Map.js
+++ b/src/frontend/src/Components/Map.js
@@ -1372,7 +1372,7 @@ export default function MapWrapper({
           variant="primary"
           onClick={mapViewRoute}>
           <FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
-          Map View
+          Map view
         </Button>
       )}
 
@@ -1381,7 +1381,7 @@ export default function MapWrapper({
           toggleHandler={toggleLayer}
           disableFeatures={isPreview}
           enableRoadConditions={true}
-          textOverride={'Layer Filters'}
+          textOverride={'Layer filters'}
         />
       )}
     </div>
diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss
index 71eb4affb..58ab2d702 100644
--- a/src/frontend/src/Components/Map.scss
+++ b/src/frontend/src/Components/Map.scss
@@ -242,7 +242,7 @@
           margin-right: 8px;
         }
       }
-      &.map-view, &.my-location, &.open-filters {
+      &.map-view, &.my-location {
         svg {
           margin-right: 8px;
         }
diff --git a/src/frontend/src/pages/EventsListPage.js b/src/frontend/src/pages/EventsListPage.js
index 18c331240..c4582be6f 100644
--- a/src/frontend/src/pages/EventsListPage.js
+++ b/src/frontend/src/pages/EventsListPage.js
@@ -301,7 +301,7 @@ export default function EventsListPage() {
               toggleHandler={eventCategoryFilterHandler}
               disableFeatures={true}
               enableRoadConditions={false}
-              textOverride={'List Filters'}
+              textOverride={'List filters'}
             />
           </div>
 

From 834c644559b53e19200a54643345c4ba0b6ff394 Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Wed, 17 Apr 2024 16:40:25 -0700
Subject: [PATCH 3/3] DBC22-2012: Dismissing exit survey notification once per
 session

---
 src/frontend/src/Components/advisories/ExitSurvey.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/Components/advisories/ExitSurvey.js b/src/frontend/src/Components/advisories/ExitSurvey.js
index 28922f4b7..4b7092877 100644
--- a/src/frontend/src/Components/advisories/ExitSurvey.js
+++ b/src/frontend/src/Components/advisories/ExitSurvey.js
@@ -15,16 +15,17 @@ import './ExitSurvey.scss';
 export default function ExitSurvey({ mobile=false }) {
 
   // States
-  const [open, setOpen] = useState(true);
+  const [show, setShow] = useState(true);
 
   // Rendering
-  return (open) ? (
+  return (show && (sessionStorage.getItem('exit-survey') === null)) ? (
     <div className={'exit-survey' + (mobile ? ' mobile' : '')}>
       <Button
-        className={'exit-survey-close-btn' + (open ? ' open' : '')}
+        className={'exit-survey-close-btn' + (show ? ' show' : '')}
         aria-label="close exit survey banner"
         onClick={() => {
-          open ? setOpen(false) : setOpen(true) }
+          sessionStorage.setItem('exit-survey', true);
+          show ? setShow(false) : setShow(true) }
         }>
         <FontAwesomeIcon icon={faXmark} />
       </Button>