DBC22-1880: styling for route search swap button

bcgov · Mar 21, 2024 · 732a614 · 732a614
1 parent d7761b2
commit 732a614
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/src/frontend/src/Components/map/RouteSearch.js b/src/frontend/src/Components/map/RouteSearch.js
@@ -14,6 +14,7 @@ import {
   faCircleDot,
   faLocationDot
 } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUpArrowDown } from '@fortawesome/pro-solid-svg-icons';
 import Button from 'react-bootstrap/Button';
 import Spinner from 'react-bootstrap/Spinner';
 
@@ -105,7 +106,7 @@ export default function RouteSearch(props) {
       }
 
       {!!searchLocationFrom.length && !!searchLocationTo.length &&
-        <Button onClick={() => swapHandler()}>Swap</Button>
+        <Button className="swap-button" onClick={() => swapHandler()}><FontAwesomeIcon icon={faArrowUpArrowDown} /></Button>
       }
     </div>
   );

diff --git a/src/frontend/src/Components/map/RouteSearch.scss b/src/frontend/src/Components/map/RouteSearch.scss
@@ -5,6 +5,25 @@
   padding: 1rem 1rem 0;
   z-index: 5;
 
+  .swap-button{
+    position: relative;
+    display: row;
+    top: -53px;
+    left: 292px;
+    padding: 8px 4px 8px 4px;
+    gap: 6px;
+    color: black;
+    border-radius: 32px 32px 32px 32px;
+    border: 1px 0px 0px 0px;
+    opacity: 0px;
+    border: 1px solid #D9D9D9;
+    background: #FFFFFF;
+
+    &:hover {
+      background-color: grey;
+    }
+  }
+
   .typeahead-container {
     position: relative;
     width: 100%;

diff --git a/src/frontend/src/pages/CamerasListPage.js b/src/frontend/src/pages/CamerasListPage.js
@@ -132,9 +132,9 @@ export default function CamerasListPage() {
           <div className="route-display-container">
             <RouteSearch routeEdit={routeEdit} />
 
-            {!routeEdit &&
+            {/* {!routeEdit &&
               <Button onClick={() => setRouteEdit(true)}>Change</Button>
-            }
+            } */}
           </div>
 
           <div className="search-container">

diff --git a/src/frontend/src/pages/EventsListPage.js b/src/frontend/src/pages/EventsListPage.js
@@ -232,9 +232,9 @@ export default function EventsListPage() {
             <div className="route-display-container">
               <RouteSearch routeEdit={routeEdit} />
 
-              {!routeEdit &&
+              {/* {!routeEdit &&
                 <Button onClick={() => setRouteEdit(true)}>Change</Button>
-              }
+              } */}
             </div>
           }