Merge pull request #223 from zenml-io/dev

Dev

Author: danialraza03

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

@@ -12,7 +12,7 @@
   padding-left: 1.6rem;
   padding-right: 1.6rem;
   outline: 0;
-  margin-top: 23px;
+  margin-top: 27px;
   line-height: 37px;
 }
 
@@ -39,7 +39,7 @@
 
 
 .removeIcon {
-    margin-top: 23px !important;
+    margin-top: 27px !important;
     padding-top: 4px !important;
     width: 34px;
     height: 40px;
@@ -54,7 +54,7 @@
     width: 146;
     height: 40px;
     font-size: 12px;
-    margin-top: 23px !important;
+    margin-top: 27px !important;
 }
 
 .inputRow {

src/ui/components/Filters/index.tsx

@@ -775,7 +775,7 @@ const FilterComponent = ({
   return (
     <FlexBox.Column fullWidth>
       <div className={styles.inputRow}>
-        <Box marginRight="md" marginTop="md">
+        <Box marginRight="md" marginTop="md" style={{ marginTop: '70px' }}>
           <SearchInputField
             placeholder={'Search'}
             value={searchText ? filters[0]?.filterValue : ''}

src/ui/components/forms/index.tsx

@@ -180,7 +180,7 @@ export const EditField = (
   } & any,
 ): JSX.Element => {
   return (
-    <FlexBox.Column fullWidth >
+    <FlexBox.Column fullWidth>
       <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
         <InputWithLabel
           name={props.name}
@@ -208,6 +208,7 @@ export const EditField = (
 
 export const SearchInputField = (
   props: {
+    fromRegisterComponent: boolean;
     label?: string;
     labelColor?: any;
     placeholder: any;
@@ -216,16 +217,32 @@ export const SearchInputField = (
   } & any,
 ): JSX.Element => {
   return (
-    <FlexBox.Column fullWidth style={{ height: '100px', marginTop: '-10px' }}>
+    <FlexBox.Column
+      fullWidth
+      style={{
+        height: props.fromRegisterComponent ? '50px' : '100px',
+        marginTop: '-10px',
+      }}
+    >
       <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
         <LinkBox
           style={{ position: 'absolute', left: '7px', top: '35px' }}
           onClick={() => {}}
         >
-          <icons.search color={iconColors.grey} />
+          <icons.search
+            style={{ position: 'relative', top: '-27px' }}
+            color={iconColors.grey}
+          />
         </LinkBox>
-
-        <InputWithLabel
+        <TextInput
+          type="search"
+          {...props}
+          style={{ paddingLeft: '40px' }}
+          value={props.value}
+          onChangeText={props.onChange}
+          placeholder={props.placeholder}
+        />
+        {/* <InputWithLabel
           name={props.name}
           label={props.label}
           labelColor={props.labelColor}
@@ -239,7 +256,7 @@ export const SearchInputField = (
               placeholder={props.placeholder}
             />
           }
-        />
+        /> */}
       </FlexBox>
     </FlexBox.Column>
   );

src/ui/layouts/common/Tabs/index.tsx

@@ -50,14 +50,14 @@ export const Tabs: React.FC<{ pages: TabPage[]; basePath: string }> = ({
                       <IfElse
                         condition={isActive}
                         renderWhenFalse={() => (
-                           <Truncate maxLines={1}>
-                              <Paragraph color="grey" style={{ padding: '5px 0' }} >{page.text}</Paragraph>
-                           </Truncate> 
+                          <Truncate maxLines={1}>
+                            <Paragraph color="grey">{page.text}</Paragraph>
+                          </Truncate>
                         )}
                         renderWhenTrue={() => (
-                           <Truncate maxLines={1}>
-                              <Paragraph color="primary" style={{ padding: '5px 0' }}>{page.text}</Paragraph>
-                           </Truncate>
+                          <Truncate maxLines={1}>
+                            <Paragraph color="primary">{page.text}</Paragraph>
+                          </Truncate>
                         )}
                       />
                     </Link>

src/ui/layouts/stackComponents/RegisterComponents/ListForAll/index.tsx

@@ -81,8 +81,9 @@ export const ListForAll: React.FC<Props> = ({ type }: Props) => {
   return (
     <>
       <FlexBox.Column fullWidth>
-        <div style={{ marginBottom: '-10px' }}>
+        <div style={{ marginTop: '17px' }}>
           <SearchInputField
+            fromRegisterComponent={true}
             placeholder={'Search'}
             value={text}
             // disabled={applyFilter || showInBar}