feature/CE-632-Add-labels-to-toggle/button-between-list-and-map-view (#…

…408) Co-authored-by: Barrett Falk <[email protected]> Co-authored-by: afwilcox <[email protected]>
bcgov · May 1, 2024 · b2a3c63 · b2a3c63
1 parent 15ca6b5
commit b2a3c63
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git 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
@@ -1358,21 +1358,35 @@ p {
 }
 
 .toggle-button {
-  background-color: $gray-100 !important;
+  background-color: white !important;
   color: $gray-800 !important;
   border-color: $gray-300 !important;
   border-radius: 8px;
   z-index: 0 !important;
 }
 
 .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;
 }