From b2a3c63fc7028f7915adfb8036a8a9e23cb9f8a6 Mon Sep 17 00:00:00 2001
From: dmitri-korin-bcps <108112696+dmitri-korin-bcps@users.noreply.github.com>
Date: Wed, 1 May 2024 10:15:42 -0700
Subject: [PATCH] 
 feature/CE-632-Add-labels-to-toggle/button-between-list-and-map-view  (#408)

Co-authored-by: Barrett Falk <bfalk@salussystems.com>
Co-authored-by: afwilcox <alecwilcox@gmail.com>
---
 .../app/components/common/map-list-toggle.tsx | 21 +++++++++++++++----
 frontend/src/assets/sass/complaint.scss       | 18 ++++++++++++++--
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/common/map-list-toggle.tsx b/frontend/src/app/components/common/map-list-toggle.tsx
index c4d736614..982e48d53 100644
--- a/frontend/src/app/components/common/map-list-toggle.tsx
+++ b/frontend/src/app/components/common/map-list-toggle.tsx
@@ -10,6 +10,11 @@ interface Props {
 }
 
 const MapListToggle: React.FC<Props> = ({ activeView, onToggle, className }) => {
+  const setElementActive = (classPrefix: string, viewType: string): string => {
+    const result = `${classPrefix} ` + (activeView === viewType ? "active" : "");
+    return result;
+  };
+
   return (
     <ToggleButtonGroup
       className={className}
@@ -24,17 +29,25 @@ const MapListToggle: React.FC<Props> = ({ activeView, onToggle, className }) =>
         title="Complaint List View"
         value="list"
         id="list_toggle_id"
-        className={`toggle-button ${activeView === "list" ? "active" : ""}`}
+        className={setElementActive("toggle-button", "list")}
       >
-        <FontAwesomeIcon icon={faList} />
+        <FontAwesomeIcon
+          icon={faList}
+          className={setElementActive("toggle-button-icon", "list")}
+        />
+        <span className={setElementActive("toggle-button-text", "list")}>List</span>
       </ToggleButton>
       <ToggleButton
         title="Complaint Map View"
         value="map"
         id="map_toggle_id"
-        className={`toggle-button ${activeView === "map" ? "active" : ""}`}
+        className={setElementActive("toggle-button", "map")}
       >
-        <FontAwesomeIcon icon={faMap} />
+        <FontAwesomeIcon
+          icon={faMap}
+          className={setElementActive("toggle-button-icon", "map")}
+        />
+        <span className={setElementActive("toggle-button-text", "map")}>Map</span>
       </ToggleButton>
     </ToggleButtonGroup>
   );
diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
index e2b5e3bd1..f30addc20 100644
--- a/frontend/src/assets/sass/complaint.scss
+++ b/frontend/src/assets/sass/complaint.scss
@@ -1358,7 +1358,7 @@ p {
 }
 
 .toggle-button {
-  background-color: $gray-100 !important;
+  background-color: white !important;
   color: $gray-800 !important;
   border-color: $gray-300 !important;
   border-radius: 8px;
@@ -1366,13 +1366,27 @@ p {
 }
 
 .toggle-button.active {
-  background-color: white !important;
+  background-color: $gray-100 !important;
   color: $gray-800 !important;
   border-color: $gray-300 !important;
   border-radius: 8px;
   z-index: 0 !important;
 }
 
+.toggle-button-icon.active {
+  color: $gray-600 !important;
+}
+
+.toggle-button-text {
+  color: $gray-800 !important;
+  margin-left: 4px;
+}
+
+.toggle-button-text.active {
+  color: $gray-600 !important;
+  margin-left: 4px;
+}
+
 .comp-filter-search {
   margin-left: 16px;
 }