diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 2764739190..57327c9820 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -165,7 +165,7 @@ const FiltersSidebar = ({ darkMode }) => (
id="date-filter-input"
type="date"
placeholder="Ending After"
- className={cx('date-filter', darkMode)}
+ className={`${cx('date-filter', darkMode)} ${styles['rectangular-dropdown']}`}
/>
@@ -191,7 +191,9 @@ const FiltersSidebar = ({ darkMode }) => (
type="select"
id="branches"
name="branches"
- className={darkMode ? styles['filter-select-dark'] : ''}
+ className={`${styles['rectangular-dropdown']} ${
+ darkMode ? styles['filter-select-dark'] : ''
+ }`}
>
@@ -205,7 +207,9 @@ const FiltersSidebar = ({ darkMode }) => (
type="select"
id="themes"
name="themes"
- className={darkMode ? styles['filter-select-dark'] : ''}
+ className={`${styles['rectangular-dropdown']} ${
+ darkMode ? styles['filter-select-dark'] : ''
+ }`}
>
@@ -219,7 +223,9 @@ const FiltersSidebar = ({ darkMode }) => (
type="select"
id="categories"
name="categories"
- className={darkMode ? styles['filter-select-dark'] : ''}
+ className={`${styles['rectangular-dropdown']} ${
+ darkMode ? styles['filter-select-dark'] : ''
+ }`}
>
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 0db5c9a67a..5808520f33 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -244,7 +244,12 @@
box-sizing: border-box;
}
-.filter-item input:not([type="checkbox"], [type="radio"]):focus,
+/* Square the search-filter dropdowns (date + selects) */
+.rectangular-dropdown {
+ border-radius: 0 !important;
+}
+
+.filter-item input:not([type="checkbox"]):not([type="radio"]):focus,
.filter-item select:focus {
border-color: #2c3e50;
box-shadow: 0 0 5px rgb(44 62 80 / 40%);