From 732a614d89910b4ad2802c4b62e5b8f1ad525777 Mon Sep 17 00:00:00 2001
From: Tyrel Narciso <tyrel@oxd.com>
Date: Thu, 21 Mar 2024 10:12:15 -0700
Subject: [PATCH] DBC22-1880: styling for route search swap button
---
.../src/Components/map/RouteSearch.js | 3 ++-
.../src/Components/map/RouteSearch.scss | 19 +++++++++++++++++++
src/frontend/src/pages/CamerasListPage.js | 4 ++--
src/frontend/src/pages/EventsListPage.js | 4 ++--
4 files changed, 25 insertions(+), 5 deletions(-)
diff --git a/src/frontend/src/Components/map/RouteSearch.js b/src/frontend/src/Components/map/RouteSearch.js
index ed2700a43..6b22b4ee4 100644
--- 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
index bf66374aa..9b81d51c7 100644
--- 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
index 7729e875d..f9f6979d4 100644
--- 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
index 75b8e5525..ccb309bf6 100644
--- 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>
}