style: update filters style

globalfund · Nov 13, 2024 · 93308bc · 93308bc
1 parent 5ce0122
commit 93308bc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@types/react-router-hash-link": "^2.4.9",
     "@types/tabulator-tables": "^5.6.0",
     "axios": "^1.4.0",
+    "detect-it": "^4.0.1",
     "dom-to-image": "^2.6.0",
     "dotenv": "^16.4.5",
     "easy-peasy": "^6.0.1",

diff --git a/src/app/pages/grants/layout.tsx b/src/app/pages/grants/layout.tsx
@@ -157,19 +157,22 @@ export const GrantsLayout: React.FC<GrantsLayoutProps> = (
             {filterPopoverContent}
           </Popover>
           <Box
-            gap="8px"
             display="flex"
             sx={{
+              background: "#F8F8F8",
+              border: "1px solid #DFE3E5",
+              color: "#000",
+              width: "410px",
+              height: "32px",
+              borderRadius: "4px",
               input: {
-                color: "#000",
-                width: "200px",
-                height: "32px",
                 outline: "none",
                 padding: "0 8px",
                 fontSize: "12px",
-                borderStyle: "none",
-                borderRadius: "8px",
-                background: "#F1F3F4",
+                border: "none",
+                width: "100%",
+                height: "100%",
+                background: "transparent",
                 "::placeholder": {
                   color: "#CFD4DA",
                 },
@@ -189,7 +192,8 @@ export const GrantsLayout: React.FC<GrantsLayoutProps> = (
               )}
               <IconButton
                 sx={{
-                  height: "30px",
+                  height: "100%",
+                  width: "40px",
                   display: "flex",
                   padding: "8px 12px",
                   borderRadius: "4px",
@@ -209,15 +213,13 @@ export const GrantsLayout: React.FC<GrantsLayoutProps> = (
                   },
                 }}
                 data-cy="grants-search-btn"
-                onClick={handleSearchIconClick(!showSearch)}
+                // onClick={handleSearchIconClick(!showSearch)}
               >
-                {showSearch ? (
-                  <CloseIcon htmlColor="#000" fontSize="small" />
-                ) : (
-                  <SearchIcon htmlColor="#000" fontSize="small" />
-                )}
+                <SearchIcon htmlColor="#000" fontSize="small" />
               </IconButton>
             </React.Fragment>
+          </Box>
+          <Box gap="8px" display="flex">
             <Dropdown
               dropdownSelected={view}
               dropdownItems={DROPDOWN_ITEMS}

diff --git a/yarn.lock b/yarn.lock
@@ -5988,6 +5988,11 @@ detect-indent@^6.1.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
+detect-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/detect-it/-/detect-it-4.0.1.tgz#3f8de6b8330f5086270571251bedf10aec049e18"
+  integrity sha512-dg5YBTJYvogK1+dA2mBUDKzOWfYZtHVba89SyZUhc4+e3i2tzgjANFg5lDRCd3UOtRcw00vUTMK8LELcMdicug==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"