bcgov · ray-oxd · Apr 18, 2024 · Apr 16, 2024 · Apr 17, 2024 · Apr 17, 2024
diff --git 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/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
@@ -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,19 +1325,27 @@ 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}
             disableFeatures={isPreview}
             enableRoadConditions={true}
           />
         )}
+
       </div>
 
       <div id="popup" className="ol-popup">
@@ -1360,7 +1372,7 @@ export default function MapWrapper({
           variant="primary"
           onClick={mapViewRoute}>
           <FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
-          Map View
+          Map view
         </Button>
       )}
 
@@ -1369,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
@@ -162,7 +162,7 @@
       height: 100%;
       overflow: hidden;
 
-      .routing-outer-container {
+      .map-left-container, .routing-outer-container {
         position: absolute;
         z-index: 16;
         width: 100%;
@@ -242,7 +242,7 @@
           margin-right: 8px;
         }
       }
-      &.map-view, &.my-location, &.open-filters {
+      &.map-view, &.my-location {
         svg {
           margin-right: 8px;
         }
@@ -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
@@ -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
@@ -0,0 +1,50 @@
+// 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 [show, setShow] = useState(true);
+
+  // Rendering
+  return (show && (sessionStorage.getItem('exit-survey') === null)) ? (
+    <div className={'exit-survey' + (mobile ? ' mobile' : '')}>
+      <Button
+        className={'exit-survey-close-btn' + (show ? ' show' : '')}
+        aria-label="close exit survey banner"
+        onClick={() => {
+          sessionStorage.setItem('exit-survey', true);
+          show ? setShow(false) : setShow(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
@@ -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
@@ -9,23 +9,23 @@
     justify-content: space-between;
     margin-bottom: 1.5rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
       flex-direction: column;
     }
 
     .route-display-container {
       display: flex;
       align-items: center;
 
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
         width: 100%;
       }
 
       .routing-container {
         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.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>
 

diff --git a/src/frontend/src/pages/EventsListPage.scss b/src/frontend/src/pages/EventsListPage.scss
@@ -10,15 +10,15 @@
     justify-content: space-between;
     margin-bottom: 1.5rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
       flex-direction: column;
       margin-bottom: 1rem;
     }
 
     .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
@@ -99,6 +99,10 @@ ul {
   color: $Error;
 }
 
+.blue-text {
+  color: $BC-Blue;
+}
+
 .lowercase {
   text-transform: lowercase;
 }