theming for filter UI

DISSINET · Apr 19, 2024 · d3472c8 · d3472c8
1 parent 7e0022d
commit d3472c8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/...nt/src/pages/Main/containers/TerritoryTreeBox/TerritoryTreeFilter/TerritoryTreeFilter.tsx b/...nt/src/pages/Main/containers/TerritoryTreeBox/TerritoryTreeFilter/TerritoryTreeFilter.tsx
@@ -1,14 +1,16 @@
+import { UserEnums } from "@shared/enums";
 import { Checkbox, Input } from "components";
-import React from "react";
+import React, { useContext } from "react";
+import { FaSearch } from "react-icons/fa";
+import { MdCancel } from "react-icons/md";
+import { ThemeContext } from "styled-components";
 import { ITerritoryFilter } from "types";
 import {
   StyledCancelButton,
   StyledFilterList,
   StyledFilterWrap,
+  StyledInputWrap,
 } from "./TerritoryTreeFilterStyles";
-import { UserEnums } from "@shared/enums";
-import { MdCancel } from "react-icons/md";
-import { FaSearch } from "react-icons/fa";
 
 interface TerritoryTreeFilter {
   filterData: ITerritoryFilter;
@@ -23,6 +25,8 @@ export const TerritoryTreeFilter: React.FC<TerritoryTreeFilter> = ({
   handleFilterChange,
   userRole,
 }) => {
+  const themeContext = useContext(ThemeContext);
+
   return (
     <StyledFilterWrap>
       <StyledFilterList>
@@ -46,15 +50,8 @@ export const TerritoryTreeFilter: React.FC<TerritoryTreeFilter> = ({
             }
           />
         )}
-        <div
-          style={{
-            position: "relative",
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0 4px",
-          }}
-        >
-          <FaSearch />
+        <StyledInputWrap>
+          <FaSearch color={themeContext?.color.black} />
           <Input
             value={filterData.filter}
             placeholder="Filter by text"
@@ -70,7 +67,7 @@ export const TerritoryTreeFilter: React.FC<TerritoryTreeFilter> = ({
               />
             </StyledCancelButton>
           )}
-        </div>
+        </StyledInputWrap>
       </StyledFilterList>
     </StyledFilterWrap>
   );

diff --git a/.../pages/Main/containers/TerritoryTreeBox/TerritoryTreeFilter/TerritoryTreeFilterStyles.tsx b/.../pages/Main/containers/TerritoryTreeBox/TerritoryTreeFilter/TerritoryTreeFilterStyles.tsx
@@ -16,3 +16,10 @@ export const StyledCancelButton = styled.div`
     color: ${({ theme }) => theme.color["danger"]};
   }
 `;
+
+export const StyledInputWrap = styled.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0 4px;
+`;