Merge pull request #5 from PaulZhemanov/merged-stage-3

Merged stage 3

src/components/Tag.ts

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled"
+
+export const Tag = styled.div`
+display: flex;
+padding: 8px 20px;
+align-items: flex-start;
+gap: 10px;
+border-radius: 9px;
+background: #FFB9B9;
+color: #323232;
+font-family: Open Sans;
+font-size: 16px;
+font-style: normal;
+font-weight: 600;
+line-height: normal;
+`

src/components/Task.tsx

@@ -1,52 +1,76 @@
 import styled from "@emotion/styled"
 import React from "react"
-import { Text } from "./Text"
-import { Row } from "./Flex"
+import {Text} from "./Text"
 import bin from "../assets/icons/Bin.svg"
+import SizedBox from "./SizeBox"
+import check from "../assets/icons/Check.svg"
+import {Tag} from "./Tag"
+import { Row } from "./Flex"
 
 interface IProps {
-  align?: "row" | "column"
-  style?: React.CSSProperties
-  bodyStyle?: React.CSSProperties
+    align?: "row" | "column"
+    style?: React.CSSProperties
+    bodyStyle?: React.CSSProperties
 }
 
-const Icon = styled.div``
-
-const Bin = styled(Icon)`
-  background: url(${bin});
-  width: 25px;
-  height: 25px;
-`
 
 const Root = styled.div`
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   padding: 20px;
-  box-sizing: border-box;
+  width: 423px;
+  /* height: 100vh; */
   background: #f3f5f6;
+  /* flex: 1; */
+  /* align-items: center; */
   width: 100%;
+
   border-radius: 12px;
   background: #fff;
   box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.15);
 `
 
+const Bin = styled.div`
+  background: url(${bin});
+  width: 25px;
+  height: 25px;
+`
+const Check = styled.div`
+  background: url(${check});
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+`
+
 const TaskTitle = styled(Text)`
-    font-size: 20px;
-    font-weight: 700;
-    text-transform: uppercase;
-    margin-bottom: 10px;
-  `
+  font-size: 20px;
+  font-weight: 700;
+  text-transform: uppercase;
+`
 
 const Description = styled(Text)`
-    font-size: 16px;
-    font-weight: 400;
-    margin-bottom: 40px;
-  `
-
-const Task: React.FC<IProps> = ({ ...props }) =>
-  <Root {...props}>
-    <TaskTitle>TASK TITLE</TaskTitle>
-    <Description>TASK DESCRIPTION</Description>
-  </Root>
+  font-size: 16px;
+  font-weight: 400;
+`
+const StyledRow = styled(Row)`
+  justify-content: space-between;
+  align-items: center;
+`
+
+
+const Task: React.FC<IProps> = ({...props}) =>
+    <Root {...props}>
+        <StyledRow>
+            <TaskTitle>task title</TaskTitle>
+            <Bin/>
+        </StyledRow>
+        <SizedBox height={10}/>
+        <Description>task description</Description>
+        <SizedBox height={40}/>
+        <StyledRow>
+            <Tag>Critical</Tag>
+            <Check/>
+        </StyledRow>
+    </Root>
 
 export default Task

src/components/Todolist.tsx

@@ -26,7 +26,7 @@ const Root = styled.div`
   /* height: 100vh; */
   background: #f3f5f6;
   flex: 1;
-  justify-content: start;
+  justify-content: space-between;
   /* align-items: center; */
   width: 100%;