DBC22-1827: Updated icons for minor and major delays, and road condit…

…ions
bcgov · Feb 27, 2024 · aa3503e · aa3503e
1 parent e1ba9bf
commit aa3503e
Show file tree

Hide file tree

Showing 31 changed files with 34 additions and 45 deletions.
diff --git a/src/frontend/src/Components/EventTypeIcon.js b/src/frontend/src/Components/EventTypeIcon.js
@@ -15,26 +15,26 @@ import closuresActiveIcon from '../images/mapIcons/closure-active.png';
 import closuresStaticIcon from '../images/mapIcons/closure-static.png';
 
 // Future Events
-import futureEventsMajorActiveIcon from '../images/mapIcons/futureevent-major-active.png';
-import futureEventsMajorStaticIcon from '../images/mapIcons/futureevent-major-static.png';
-import futureEventsActiveIcon from '../images/mapIcons/futureevent-minor-active.png';
-import futureEventsStaticIcon from '../images/mapIcons/futureevent-minor-static.png';
+import futureEventsMajorActiveIcon from '../images/mapIcons/future-event-major-active.png';
+import futureEventsMajorStaticIcon from '../images/mapIcons/future-event-major-static.png';
+import futureEventsActiveIcon from '../images/mapIcons/future-event-minor-active.png';
+import futureEventsStaticIcon from '../images/mapIcons/future-event-minor-static.png';
 
 // Road Conditions
 import roadConditionsActiveIcon from '../images/mapIcons/road-condition-active.png';
 import roadConditionsStaticIcon from '../images/mapIcons/road-condition-static.png';
 
 // Constructions
-import constructionsMajorActiveIcon from '../images/mapIcons/construction-major-active.png';
-import constructionsMajorStaticIcon from '../images/mapIcons/construction-major-static.png';
-import constructionsActiveIcon from '../images/mapIcons/construction-minor-active.png';
-import constructionsStaticIcon from '../images/mapIcons/construction-minor-static.png';
+import constructionsMajorActiveIcon from '../images/mapIcons/delay-major-active.png';
+import constructionsMajorStaticIcon from '../images/mapIcons/delay-major-static.png';
+import constructionsActiveIcon from '../images/mapIcons/delay-minor-active.png';
+import constructionsStaticIcon from '../images/mapIcons/delay-minor-static.png';
 
 // Generic Events
-import genericDelaysMajorActiveIcon from '../images/mapIcons/generic-event-major-active.png';
-import genericDelaysMajorStaticIcon from '../images/mapIcons/generic-event-major-static.png';
-import genericDelaysActiveIcon from '../images/mapIcons/generic-event-minor-active.png';
-import genericDelaysStaticIcon from '../images/mapIcons/generic-event-minor-static.png';
+import genericDelaysMajorActiveIcon from '../images/mapIcons/incident-major-active.png';
+import genericDelaysMajorStaticIcon from '../images/mapIcons/incident-major-static.png';
+import genericDelaysActiveIcon from '../images/mapIcons/incident-minor-active.png';
+import genericDelaysStaticIcon from '../images/mapIcons/incident-minor-static.png';
 
 export default function EventTypeIcon(props) {
   const { event, state } = props;

diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js
@@ -269,7 +269,9 @@ export default function Filters(props) {
                   />
                   <label htmlFor="filter--road-conditions">
                     <span className="filter-item__icon">
-                      <FontAwesomeIcon icon={faSnowflake} alt="road conditions" />
+                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path className="filter-item__icon__path" d="M19.5625 8.8925L11.1125 0.4425C10.4825 -0.1475 9.5125 -0.1475 8.8825 0.4425L0.4425 8.8925C-0.1475 9.5225 -0.1475 10.4925 0.4425 11.1225L8.8925 19.5725C9.5225 20.1625 10.4925 20.1625 11.1225 19.5725L19.5725 11.1225C20.1625 10.4925 20.1625 9.5225 19.5725 8.8925H19.5625ZM8.9425 10.4525L5.5625 13.8325C5.3125 14.0625 4.9225 14.0625 4.6725 13.8325L1.2925 10.4525C1.0625 10.2025 1.0625 9.8125 1.2925 9.5625L4.6725 6.1825C4.9225 5.9525 5.3125 5.9525 5.5625 6.1825L8.9425 9.5625C9.1725 9.8125 9.1725 10.2025 8.9425 10.4525ZM18.7225 10.4525L15.3425 13.8325C15.0925 14.0625 14.7025 14.0625 14.4525 13.8325L11.0725 10.4525C10.8425 10.2025 10.8425 9.8125 11.0725 9.5625L14.4525 6.1825C14.7025 5.9525 15.0925 5.9525 15.3425 6.1825L18.7225 9.5625C18.9525 9.8125 18.9525 10.2025 18.7225 10.4525Z" fill="#195A97"/>
+                      </svg>
                     </span>
                     Road conditions
                   </label>

diff --git a/src/frontend/src/Components/Filters.scss b/src/frontend/src/Components/Filters.scss
@@ -108,15 +108,6 @@ button.btn.open-filters {
             &__path {
                 fill: white;
             }
-
-            .customIcon-bg {
-              fill: white;
-            }
-
-            .customIcon-fg {
-              fill: $Type-Link;
-            }
-
           }
         }
 
@@ -129,13 +120,9 @@ button.btn.open-filters {
               color: $Type-Disabled;
             }
 
-            .customIcon-bg {
+            &__path {
               fill: $Type-Disabled;
             }
-
-            .customIcon-fg {
-              fill: $Divider;
-            }
           }
           label {
             color: $Type-Disabled;

diff --git a/src/frontend/src/Components/data/featureStyleDefinitions.js b/src/frontend/src/Components/data/featureStyleDefinitions.js
@@ -18,33 +18,33 @@ import closuresHoverIcon from '../../images/mapIcons/closure-hover.png';
 import closuresStaticIcon from '../../images/mapIcons/closure-static.png';
 
 // Future Events
-import futureEventsMajorActiveIcon from '../../images/mapIcons/futureevent-major-active.png';
-import futureEventsMajorHoverIcon from '../../images/mapIcons/futureevent-major-hover.png';
-import futureEventsMajorStaticIcon from '../../images/mapIcons/futureevent-major-static.png';
-import futureEventsActiveIcon from '../../images/mapIcons/futureevent-minor-active.png';
-import futureEventsHoverIcon from '../../images/mapIcons/futureevent-minor-hover.png';
-import futureEventsStaticIcon from '../../images/mapIcons/futureevent-minor-static.png';
+import futureEventsMajorActiveIcon from '../../images/mapIcons/future-event-major-active.png';
+import futureEventsMajorHoverIcon from '../../images/mapIcons/future-event-major-hover.png';
+import futureEventsMajorStaticIcon from '../../images/mapIcons/future-event-major-static.png';
+import futureEventsActiveIcon from '../../images/mapIcons/future-event-minor-active.png';
+import futureEventsHoverIcon from '../../images/mapIcons/future-event-minor-hover.png';
+import futureEventsStaticIcon from '../../images/mapIcons/future-event-minor-static.png';
 
 // Road Conditions
 import roadConditionsActiveIcon from '../../images/mapIcons/road-condition-active.png';
 import roadConditionsHoverIcon from '../../images/mapIcons/road-condition-hover.png';
 import roadConditionsStaticIcon from '../../images/mapIcons/road-condition-static.png';
 
 // Constructions
-import constructionsMajorActiveIcon from '../../images/mapIcons/construction-major-active.png';
-import constructionsMajorHoverIcon from '../../images/mapIcons/construction-major-hover.png';
-import constructionsMajorStaticIcon from '../../images/mapIcons/construction-major-static.png';
-import constructionsActiveIcon from '../../images/mapIcons/construction-minor-active.png';
-import constructionsHoverIcon from '../../images/mapIcons/construction-minor-hover.png';
-import constructionsStaticIcon from '../../images/mapIcons/construction-minor-static.png';
+import constructionsMajorActiveIcon from '../../images/mapIcons/delay-major-active.png';
+import constructionsMajorHoverIcon from '../../images/mapIcons/delay-major-hover.png';
+import constructionsMajorStaticIcon from '../../images/mapIcons/delay-major-static.png';
+import constructionsActiveIcon from '../../images/mapIcons/delay-minor-active.png';
+import constructionsHoverIcon from '../../images/mapIcons/delay-minor-hover.png';
+import constructionsStaticIcon from '../../images/mapIcons/delay-minor-static.png';
 
 // Generic Events
-import genericDelaysMajorActiveIcon from '../../images/mapIcons/generic-event-major-active.png';
-import genericDelaysMajorHoverIcon from '../../images/mapIcons/generic-event-major-hover.png';
-import genericDelaysMajorStaticIcon from '../../images/mapIcons/generic-event-major-static.png';
-import genericDelaysActiveIcon from '../../images/mapIcons/generic-event-minor-active.png';
-import genericDelaysHoverIcon from '../../images/mapIcons/generic-event-minor-hover.png';
-import genericDelaysStaticIcon from '../../images/mapIcons/generic-event-minor-static.png';
+import genericDelaysMajorActiveIcon from '../../images/mapIcons/incident-major-active.png';
+import genericDelaysMajorHoverIcon from '../../images/mapIcons/incident-major-hover.png';
+import genericDelaysMajorStaticIcon from '../../images/mapIcons/incident-major-static.png';
+import genericDelaysActiveIcon from '../../images/mapIcons/incident-minor-active.png';
+import genericDelaysHoverIcon from '../../images/mapIcons/incident-minor-hover.png';
+import genericDelaysStaticIcon from '../../images/mapIcons/incident-minor-static.png';
 
 // Camera icon styles
 export const cameraStyles = {

diff --git a/src/frontend/src/images/mapIcons/construction-major-active.png b/src/frontend/src/images/mapIcons/construction-major-active.png
diff --git a/src/frontend/src/images/mapIcons/construction-major-hover.png b/src/frontend/src/images/mapIcons/construction-major-hover.png
diff --git a/src/frontend/src/images/mapIcons/construction-major-static.png b/src/frontend/src/images/mapIcons/construction-major-static.png
diff --git a/src/frontend/src/images/mapIcons/construction-minor-active.png b/src/frontend/src/images/mapIcons/construction-minor-active.png
diff --git a/src/frontend/src/images/mapIcons/construction-minor-hover.png b/src/frontend/src/images/mapIcons/construction-minor-hover.png
diff --git a/src/frontend/src/images/mapIcons/construction-minor-static.png b/src/frontend/src/images/mapIcons/construction-minor-static.png
diff --git a/src/frontend/src/images/mapIcons/delay-major-active.png b/src/frontend/src/images/mapIcons/delay-major-active.png
diff --git a/src/frontend/src/images/mapIcons/delay-major-hover.png b/src/frontend/src/images/mapIcons/delay-major-hover.png
diff --git a/src/frontend/src/images/mapIcons/delay-major-static.png b/src/frontend/src/images/mapIcons/delay-major-static.png
diff --git a/src/frontend/src/images/mapIcons/delay-minor-active.png b/src/frontend/src/images/mapIcons/delay-minor-active.png
diff --git a/src/frontend/src/images/mapIcons/delay-minor-hover.png b/src/frontend/src/images/mapIcons/delay-minor-hover.png
diff --git a/src/frontend/src/images/mapIcons/delay-minor-static.png b/src/frontend/src/images/mapIcons/delay-minor-static.png
diff --git a/...ges/mapIcons/futureevent-major-active.png → ...es/mapIcons/future-event-major-active.png b/...ges/mapIcons/futureevent-major-active.png → ...es/mapIcons/future-event-major-active.png
diff --git a/...ages/mapIcons/futureevent-major-hover.png → ...ges/mapIcons/future-event-major-hover.png b/...ages/mapIcons/futureevent-major-hover.png → ...ges/mapIcons/future-event-major-hover.png
diff --git a/...ges/mapIcons/futureevent-major-static.png → ...es/mapIcons/future-event-major-static.png b/...ges/mapIcons/futureevent-major-static.png → ...es/mapIcons/future-event-major-static.png
diff --git a/...ges/mapIcons/futureevent-minor-active.png → ...es/mapIcons/future-event-minor-active.png b/...ges/mapIcons/futureevent-minor-active.png → ...es/mapIcons/future-event-minor-active.png
diff --git a/...ages/mapIcons/futureevent-minor-hover.png → ...ges/mapIcons/future-event-minor-hover.png b/...ages/mapIcons/futureevent-minor-hover.png → ...ges/mapIcons/future-event-minor-hover.png
diff --git a/...ges/mapIcons/futureevent-minor-static.png → ...es/mapIcons/future-event-minor-static.png b/...ges/mapIcons/futureevent-minor-static.png → ...es/mapIcons/future-event-minor-static.png
diff --git a/...s/mapIcons/generic-event-major-active.png → ...images/mapIcons/incident-major-active.png b/...s/mapIcons/generic-event-major-active.png → ...images/mapIcons/incident-major-active.png
diff --git a/...es/mapIcons/generic-event-major-hover.png → .../images/mapIcons/incident-major-hover.png b/...es/mapIcons/generic-event-major-hover.png → .../images/mapIcons/incident-major-hover.png
diff --git a/...s/mapIcons/generic-event-major-static.png → ...images/mapIcons/incident-major-static.png b/...s/mapIcons/generic-event-major-static.png → ...images/mapIcons/incident-major-static.png
diff --git a/...s/mapIcons/generic-event-minor-active.png → ...images/mapIcons/incident-minor-active.png b/...s/mapIcons/generic-event-minor-active.png → ...images/mapIcons/incident-minor-active.png
diff --git a/...es/mapIcons/generic-event-minor-hover.png → .../images/mapIcons/incident-minor-hover.png b/...es/mapIcons/generic-event-minor-hover.png → .../images/mapIcons/incident-minor-hover.png
diff --git a/...s/mapIcons/generic-event-minor-static.png → ...images/mapIcons/incident-minor-static.png b/...s/mapIcons/generic-event-minor-static.png → ...images/mapIcons/incident-minor-static.png
diff --git a/src/frontend/src/images/mapIcons/road-condition-active.png b/src/frontend/src/images/mapIcons/road-condition-active.png
diff --git a/src/frontend/src/images/mapIcons/road-condition-hover.png b/src/frontend/src/images/mapIcons/road-condition-hover.png
diff --git a/src/frontend/src/images/mapIcons/road-condition-static.png b/src/frontend/src/images/mapIcons/road-condition-static.png