Merge pull request #87 from zenml-io/feat/ahsan-v2

Feat/ahsan v2

Author: danialraza03

src/redux/reducers/projectsReducer.ts

@@ -51,7 +51,7 @@ const projectsReducer = (
       const projects: Projects[] = camelCaseArray(
         action.payload.items as ProjectsPayload,
       );
-
+      
       const myProjectIds: TId[] = projects.map(
         (project: Projects) => project.id,
       );
@@ -83,7 +83,7 @@ const projectsReducer = (
 
     case projectActionTypes.getMyProjectStats.success: {
       // const { projectStats } = action.payload as any;
-      const projectStats = action.payload;
+      const projectStats = action.payload.items;
 
       return { ...newState(state, projectStats) };
     }

src/ui/assets/cookie.svg

@@ -25,7 +25,7 @@
   }
 
   &:hover {
-    background: #E8A562;
+    background: #A8A8A8;
   }
 }
 

src/ui/assets/logo_small.svg

@@ -166,6 +166,43 @@ export const CopyField = (
   );
 };
 
+export const SearchInputField = (
+  props: {
+    label?: string;
+    labelColor?: any;
+    placeholder: any;
+    onChange?: any;
+    value: string;
+  } & any,
+): JSX.Element => {
+  return (
+    <FlexBox.Column fullWidth style={{ height: '100px' }}>
+      <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
+
+      <LinkBox style={{ position: 'absolute', left: '7px', top: '30px' }} onClick={() => {}}>
+          <icons.search color={iconColors.grey} />
+      </LinkBox>
+
+      <InputWithLabel
+        name={props.name}
+        label={props.label}
+        labelColor={props.labelColor}
+        InputComponent={
+          <TextInput
+            {...props}
+            style={{ paddingLeft: '40px' }}
+            value={props.value}
+            onChangeText={props.onChange}
+            placeholder={props.placeholder}
+          />
+        }
+      />
+
+      </FlexBox>
+    </FlexBox.Column>
+  );
+};
+
 export const FormPasswordField = (
   props: {
     label: string;

src/ui/components/buttons/index.module.scss

@@ -43,6 +43,7 @@ import { ReactComponent as Inprogress } from './assets/InProgress.svg';
 import { ReactComponent as Cached } from './assets/Cached.svg';
 import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
 import { ReactComponent as Edit } from './assets/Edit.svg';
+import { ReactComponent as Search } from './assets/Search.svg';
 
 //icons for stackComponents
 import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
@@ -167,6 +168,7 @@ const icons = {
   funnelFill: createIcon({ Component: FunnelFill }),
   delete: createIcon({ Component: Delete }),
   edit: createIcon({ Component: Edit }),
+  search: createIcon({ Component: Search }),
 
   //icons for stackComponents
   artifact_store: createIcon({ Component: Folders, useStroke: true }),

src/ui/components/forms/index.tsx

@@ -4,11 +4,16 @@ import { Image } from '..';
 
 import logo from '../../assets/logo.svg';
 import logoWhite from '../../assets/logo_white.svg';
+import logoSmallWhite from '../../assets/logo_small.svg';
 
 export const ZenMLLogo: React.FC = () => (
   <Image style={{ width: 113, height: 32 }} src={logo} />
 );
 
 export const ZenMLLogoWhite: React.FC = () => (
   <Image style={{ width: 150, height: 35 }} src={logoWhite} />
+);
+
+export const ZenMLLogoSmall: React.FC = () => (
+  <Image style={{ width: 36, height: 36 }} src={logoSmallWhite} />
 );

src/ui/components/icons/assets/Search.svg

@@ -31,7 +31,7 @@
 
 .baseParagraph {
   font-family: $fontFamilyNormal;
-  color: $textColor;
+  color: #828282;
   word-wrap: break-word;
   margin: 0;
 }

src/ui/components/icons/index.tsx

@@ -227,7 +227,16 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
           }}
           icon={icons.paginationLast}
         />
+     
       </FlexBox>
+
+
+
+
+
+
+
+
     </FlexBox.Column>
   );
 });