feat: improve filter dropdown UI

- Center filter dropdown in its container - Remove commented-out code - Fix length of dropdown button
ajyey · Jun 21, 2023 · 46ce3e7 · 46ce3e7
1 parent 1ada99a
commit 46ce3e7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/pages/popup/components/home/Home.tsx b/src/pages/popup/components/home/Home.tsx
@@ -35,7 +35,7 @@ export default function HomeComponent() {
         <div className="flex flex-1">
           <div className="columns-[250px] border-r border-r-big-stone">
             {/*<FilterPane onFilterChange={setFilterOption()} />*/}
-            <div className="h-[35px] border-b border-b-big-stone">
+            <div className="h-[35px] border-b border-b-big-stone flex items-center justify-center">
               <FilterEmailsDropdown onFilterChange={setFilterOption} />
             </div>
             {isLoading ? (

diff --git a/src/pages/popup/components/home/filter-pane/FilterEmailsDropdown.tsx b/src/pages/popup/components/home/filter-pane/FilterEmailsDropdown.tsx
@@ -107,17 +107,17 @@ function FilterEmailsDropdown({
   ];
 
   return (
-    <div>
+    <div className="relative w-[98%]">
       <button
         id="dropdownCheckboxButton"
         data-dropdown-toggle="dropdownDefaultCheckbox"
-        className="text-white ml-3.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        className="text-white focus:outline-none font-medium rounded-lg text-sm px-4 py-1 inline-flex items-center w-full hover:bg-french-blue "
         type="button"
         onClick={toggleDropdown}
       >
         {selectedOption}
         <svg
-          className="w-4 h-4 ml-2"
+          className="w-4 h-4 ml-auto"
           aria-hidden="true"
           fill="none"
           stroke="currentColor"
@@ -135,8 +135,8 @@ function FilterEmailsDropdown({
       {/*Render the dropdown conditionally*/}
       {isOpen && (
         <div
-          id="dropdownDefaultCheckbox"
-          className="absolute w-48 rounded-lg text-white"
+          id="dropdownContainer"
+          className="absolute top-full w-full mt-1 rounded-lg text-white"
         >
           <ul
             className="p-1 space-y-1 text-sm bg-big-stone rounded-lg"