feature: add projects & quick card members button

web/src/shared/components/ProjectGridItem/Styles.ts

@@ -1,6 +1,12 @@
 import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 
+export const AddProjectLabel = styled.span`
+  padding-top: 4px;
+  font-size: 14px;
+  color: #c2c6dc;
+`;
+
 export const ProjectContent = styled.div`
   display: flex;
   flex-direction: column;
@@ -20,8 +26,7 @@ export const TeamTitle = styled.span`
 
 export const ProjectWrapper = styled.div<{ color: string }>`
   display: flex;
-  padding: 15px 25px;
-  border-radius: 20px;
+  padding: 15px 25px; border-radius: 20px;
   ${mixin.boxShadowCard}
   background: ${props => mixin.darken(props.color, 0.35)};
   color: #fff;
@@ -31,8 +36,30 @@ export const ProjectWrapper = styled.div<{ color: string }>`
   height: 100px;
   transition: transform 0.25s ease;
   align-items: center;
+  justify-content: center;
 
   &:hover {
     transform: translateY(-5px);
   }
 `;
+
+export const AddProjectWrapper = styled.div`
+  display: flex;
+  padding: 15px 25px;
+  border-radius: 20px;
+  ${mixin.boxShadowCard}
+  border: 1px dashed;
+  border-color: #c2c6dc;
+  color: #fff;
+  cursor: pointer;
+  margin: 0 10px;
+  width: 240px;
+  flex-direction: column;
+  height: 100px;
+  transition: transform 0.25s ease;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    transform: translateY(-5px);
+  }
+`;

web/src/shared/components/ProjectGridItem/index.tsx

@@ -1,7 +1,23 @@
 import React from 'react';
 
-import { ProjectWrapper, ProjectContent, ProjectTitle, TeamTitle } from './Styles';
+import { Plus } from 'shared/icons';
+import { AddProjectWrapper, AddProjectLabel, ProjectWrapper, ProjectContent, ProjectTitle, TeamTitle } from './Styles';
 
+type AddProjectItemProps = {
+  onAddProject: () => void;
+};
+export const AddProjectItem: React.FC<AddProjectItemProps> = ({ onAddProject }) => {
+  return (
+    <AddProjectWrapper
+      onClick={() => {
+        onAddProject();
+      }}
+    >
+      <Plus size={20} color="#c2c6dc" />
+      <AddProjectLabel>New Project</AddProjectLabel>
+    </AddProjectWrapper>
+  );
+};
 type Props = {
   project: Project;
 };