Merge pull request #6 from PaulZhemanov/for_review

task bug fix
PaulZhemanov · Sep 27, 2023 · cda94dc · cda94dc
2 parents 4aae42e + 83b771b
commit cda94dc
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 85 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import "./App.css"
 import styled from "@emotion/styled"
-import { Column } from "./components/Flex"
 import TodoList from "./components/Todolist"
 import SizedBox from "./components/SizeBox"
 import Header from "./components/Header"
@@ -13,44 +12,23 @@ const Root = styled.div`
   box-sizing: border-box;
   height: 100vh;
   align-items: center;
-  background: #106c4e;
 `
 
 const Body = styled.div`
   display: flex;
   justify-content: space-between;
   height: 100vh;
   padding: 0 10px;
-  flex: 1; 
+  flex: 1;
   min-width: 980px;
   max-width: 1280px;
-  /* box-sizing: border-box; */
 `
 
 function App() {
   return (
     <Root>
       <Header />
       <Body>
-        {/* <Column>
-          <TodoList style={{ height: "100vh" }} />
-        </Column>{" "}
-        <SizedBox width={10} />
-        <Column>
-          <TodoList style={{ height: "100vh" }} />
-        </Column>{" "}
-        <SizedBox width={10} />
-        <Column>
-          <TodoList style={{ height: "100vh" }} />
-        </Column>{" "}
-        <SizedBox width={10} />
-        <Column>
-          <TodoList style={{ height: "100vh" }} />
-        </Column>
-        <SizedBox width={10} />
-        <Column>
-          <TodoList style={{ height: "100vh" }} />
-        </Column> */}
         <TodoList />
         <SizedBox width={10} />
         <TodoList />

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -5,7 +5,7 @@ import { Row } from "./Flex"
 import SizedBox from "./SizeBox"
 import add from "../assets/icons/Add.svg"
 
-interface IProps { }
+interface IProps {}
 
 const Icon = styled.div`
   width: 48px;
@@ -20,26 +20,24 @@ const Root = styled.div`
   flex-direction: column;
   padding: 0 10px 40px 10px;
   align-items: flex-start;
-  /* background: #3612ba; */
   min-width: 980px;
   max-width: 1280px;
 `
 const Title = styled(Text)`
-    font-size: 64px;
-    font-weight: 700;
-  `
+  font-size: 64px;
+  font-weight: 700;
+`
 const SubTitile = styled(Text)`
-    font-size: 40px;
-    font-weight: 400;
-  `
+  font-size: 40px;
+  font-weight: 400;
+`
 const StyledRow = styled(Row)`
-    justify-content: flex-start;
-    align-items: center;
-    gap: 24px;
-  `
+  justify-content: flex-start;
+  align-items: center;
+  gap: 24px;
+`
 
 const Header: React.FC<IProps> = () => {
-
   return (
     <Root>
       <Title>Project name</Title>

diff --git a/src/components/Task.tsx b/src/components/Task.tsx
@@ -1,33 +1,40 @@
 import styled from "@emotion/styled"
 import React from "react"
-import {Text} from "./Text"
+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 { 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 Root = styled.div`
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   padding: 20px;
   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);
+
+  & .remove-task-button,
+  & .check-button {
+    display: none;
+  }
+
+  :hover {
+    & .remove-task-button,
+    & .check-button {
+      display: block;
+    }
+  }
 `
 
 const Bin = styled.div`
@@ -57,20 +64,20 @@ const StyledRow = styled(Row)`
   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>
+const Task: React.FC<IProps> = ({ ...props }) => (
+  <Root {...props}>
+    <StyledRow>
+      <TaskTitle>task title</TaskTitle>
+      <Bin className="remove-task-button" />
+    </StyledRow>
+    <SizedBox height={10} />
+    <Description>task description</Description>
+    <SizedBox height={40} />
+    <StyledRow>
+      <Tag>Critical</Tag>
+      <Check className="check-button" />
+    </StyledRow>
+  </Root>
+)
 
 export default Task
diff --git a/src/components/Todolist.tsx b/src/components/Todolist.tsx
@@ -22,30 +22,26 @@ const Root = styled.div`
   display: flex;
   flex-direction: column;
   padding: 25px 25px 40px 25px;
-  /* width: 423px; */
-  /* height: 100vh; */
   background: #f3f5f6;
-  flex: 1;
   justify-content: space-between;
-  /* align-items: center; */
   width: 100%;
-   
-  &  .remove-todolist-button{
+
+  & .remove-todolist-button {
     display: none;
   }
 
-  :hover{
-    &  .remove-todolist-button{
-    display: block;
+  :hover {
+    & .remove-todolist-button {
+      display: block;
     }
   }
 `
 
 const Title = styled(Text)`
-    font-size: 28px;
-    font-weight: 600;
-    opacity: 0.8;
-  `
+  font-size: 28px;
+  font-weight: 600;
+  opacity: 0.8;
+`
 
 const HeaderContainer = styled.div`
   display: flex;
@@ -54,30 +50,24 @@ const HeaderContainer = styled.div`
 `
 
 const TasksContainer = styled.div`
-  display: flex;
+  display: inline-flex;
+  justify-content: start;
   flex-direction: column;
-  align-items: stretch;
+  align-items: start;
   height: 100%;
-  border: 1px solid #dadada;
-  /* align-items: center; */
 
   & > * {
     margin-bottom: 20px;
   }
 
-  & > :last-child{
+  & > :last-child {
     margin-bottom: 0;
   }
 `
 
-
 const TodoList: React.FC<IProps> = () => {
-  // const StyledRow = styled(Row)`
-
-  // `
   return (
     <Root>
-      {/* <StyledRow> */}
       <HeaderContainer>
         <Title>Frontend</Title>
         <Bin className="remove-todolist-button" />