Fix for duplicate catalog ids & dark mode svg fill applied to light mode

ucfopen · Feb 24, 2025 · bbece18 · bbece18
1 parent a5f69fa
commit bbece18
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/src/components/catalog.jsx b/src/components/catalog.jsx
@@ -306,14 +306,12 @@ const Catalog = ({widgets = [], isLoading = true}) => {
 						</div>
 					</div>
 					{ mobileFilterRender }
-					<div id='filters-container'
-						className={`ready ${state.showingFilters ? 'open' : 'closed'}`} aria-hidden={!state.showingFilters}>
+					<div className={`filters-container ready ${state.showingFilters ? 'open' : 'closed'}`} aria-hidden={!state.showingFilters}>
 						<div className='filter-labels-container' disabled={!state.showingFilters}>
 							{ filterOptionsRender }
 						</div>
 					</div>
-					<div id='filters-container'
-						className={`ready ${state.showingAccessibility ? 'open' : 'closed'}`} aria-hidden={!state.showingAccessibility}>
+					<div className={`filters-container ready ${state.showingAccessibility ? 'open' : 'closed'}`} aria-hidden={!state.showingAccessibility}>
 						<div className='filter-labels-container accessibility' disabled={!state.showingAccessibility}>
 							{ accessibilityOptionsRender }
 						</div>

diff --git a/src/components/catalog.scss b/src/components/catalog.scss
@@ -155,7 +155,7 @@
 		cursor: pointer;
 	}
 
-	#filters-container {
+	.filters-container {
 		z-index: 1;
 		display: flex;
 		justify-content: space-between;
@@ -236,7 +236,7 @@
 						width: 16px;
 						height: auto;
 						margin-right: 6px;
-						fill: #fff;
+						fill: #000;
 					}
 				}
 			}
@@ -549,7 +549,7 @@
 		color: #3690e6;
 	}
 
-	#filters-container {
+	.filters-container {
 
 		.filter-labels-container {
 
@@ -693,7 +693,7 @@
 
 @media (max-width: 960px) {
 	.catalog {
-		#filters-container {
+		.filters-container {
 			text-align: center;
 			margin: auto 0;
 
@@ -849,7 +849,7 @@
 			}
 		}
 
-		#filters-container {
+		.filters-container {
 			display: none;
 		}