diff --git a/src/App.tsx b/src/App.tsx index 20b3b19..164e9be 100644 --- 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,7 +12,6 @@ const Root = styled.div` box-sizing: border-box; height: 100vh; align-items: center; - /* background: #106c4e; */ ` const Body = styled.div` @@ -21,10 +19,9 @@ const Body = styled.div` 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() { @@ -32,25 +29,6 @@ function App() {
- {/* - - {" "} - - - - {" "} - - - - {" "} - - - - - - - - */} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a37bc03..4fc9cc3 100644 --- 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 = () => { - return ( Project name diff --git a/src/components/Task.tsx b/src/components/Task.tsx index 923e9e0..77f4b3e 100644 --- a/src/components/Task.tsx +++ b/src/components/Task.tsx @@ -1,32 +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: flex; flex-direction: column; padding: 20px; width: 423px; - /* height: 100vh; */ background: #f3f5f6; - /* flex: 1; */ - /* align-items: center; */ 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` @@ -56,20 +64,20 @@ const StyledRow = styled(Row)` align-items: center; ` - -const Task: React.FC = ({...props}) => - - - task title - - - - task description - - - Critical - - - +const Task: React.FC = ({ ...props }) => ( + + + task title + + + + task description + + + Critical + + + +) export default Task diff --git a/src/components/Todolist.tsx b/src/components/Todolist.tsx index 9f3dc38..d3e45b7 100644 --- 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; @@ -59,26 +55,19 @@ const TasksContainer = styled.div` flex-direction: column; 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 = () => { - // const StyledRow = styled(Row)` - - // ` return ( - {/* */} Frontend