Merge pull request #218 from zenml-io/QA-Fixes

Qa fixes

Author: talhainvenxion

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

@@ -46,35 +46,21 @@ export const Tabs: React.FC<{ pages: TabPage[]; basePath: string }> = ({
                       isActive ? styles.activeItem : '',
                     )}
                   >
-                    <div
-                      style={{
-                        // backgroundColor: 'red',
-                        height: '35px',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                      }}
-                    >
-                      <div>
-                        <Link className={styles.link} to={page.path}>
-                          <IfElse
-                            condition={isActive}
-                            renderWhenFalse={() => (
-                              <Truncate maxLines={1}>
-                                <Paragraph color="grey">{page.text}</Paragraph>
-                              </Truncate>
-                            )}
-                            renderWhenTrue={() => (
-                              <Truncate maxLines={1}>
-                                <Paragraph color="primary">
-                                  {page.text}
-                                </Paragraph>
-                              </Truncate>
-                            )}
-                          />
-                        </Link>
-                      </div>
-                    </div>
+                    <Link className={styles.link} to={page.path}>
+                      <IfElse
+                        condition={isActive}
+                        renderWhenFalse={() => (
+                          <Truncate maxLines={1}>
+                            <Paragraph color="grey">{page.text}</Paragraph>
+                          </Truncate>
+                        )}
+                        renderWhenTrue={() => (
+                          <Truncate maxLines={1}>
+                            <Paragraph color="primary">{page.text}</Paragraph>
+                          </Truncate>
+                        )}
+                      />
+                    </Link>
                   </Box>
                 );
               })}

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}