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%);