fixed filters design

Author: talhainvenxion

src/ui/components/Filters/filter.module.scss

@@ -24,14 +24,20 @@
 }
 
 .tile {
+  align-items: center;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: Rubik;
+  color: $primaryColor;
    height: 28px;
-   background-color: #EDE4FF; 
+   background-color:#FBFBFB; 
    margin-top: -5px !important; 
    margin-left: 7px !important;
    border-radius: 4px; 
    padding: 5px 11px !important
 }
 
+
 .removeIcon {
     margin-top: 23px !important;
     padding-top: 4px !important;

src/ui/components/Filters/index.tsx

@@ -534,7 +534,7 @@ const FilterComponent = ({
       border: '1px solid grey',
       height: '40px',
       fontSize: '12px',
-      display: 'flex'
+      display: 'flex',
       // ...base,
     }),
   };
@@ -650,25 +650,23 @@ const FilterComponent = ({
   return (
     <FlexBox.Column fullWidth>
       <div className={styles.inputRow}>
-        
         {!window.location.href?.includes('components') && (
-          <Box marginRight="md" marginTop='md'>
-            <SearchInputField 
-                placeholder={'Search'}
-                value={searchText ? filters[0]?.filterValue : ''}
-                disabled={applyFilter}
-                onChange={(value: string) => {
-                  setSearchText(value ? true : false);
-                  handleValueFieldChangeOnSearch(value);
-                }}
+          <Box marginRight="md" marginTop="md">
+            <SearchInputField
+              placeholder={'Search'}
+              value={searchText ? filters[0]?.filterValue : ''}
+              disabled={applyFilter}
+              onChange={(value: string) => {
+                setSearchText(value ? true : false);
+                handleValueFieldChangeOnSearch(value);
+              }}
             />
           </Box>
         )}
 
-
         <FlexBox
           fullWidth
-          className="border border-primary rounded rounded-4 p-2 align-item-center"
+          className="border  rounded rounded-4 p-2 align-item-center"
         >
           <Box
             onClick={() => {
@@ -909,7 +907,7 @@ const FilterComponent = ({
                           }}
                           isClearable={true}
                           // value={'role'}
-                          className={styles.searchableInput} 
+                          className={styles.searchableInput}
                           // classNamePrefix="select"
                           // isClearable={false}
                         />