Styles was updated v2

public/index.html

@@ -11,7 +11,7 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Source+Sans+Pro:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/__mocks__/fake-todo-data.ts

@@ -0,0 +1,8 @@
+import { DataInterface } from "../components/todo-wrapper/todo-wrapper.component";
+
+export const temporaryToDoData: DataInterface[] = [
+  { id: 1, title: "First To-Do" },
+  { id: 2, title: "Second To-Do" },
+  { id: 3, title: "Third To-Do" },
+  { id: 4, title: "Fourth To-Do" },
+];

src/assets/icons/close-icon.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const CloseIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" />
+    </svg>
+  );
+};
+
+export default CloseIcon;

src/assets/icons/delete-icon.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+interface Props {
+  id?: string;
+}
+
+const DeleteIcon: FC<Props> = ({id}) => {
+  return (
+    <svg
+      id={id}
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path id={id} d="M0 0h24v24H0z" fill="none" />
+      <path id={id} d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+    </svg>
+  );
+};
+
+export default DeleteIcon;

src/assets/icons/plus-icon.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const PlusIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z" />
+    </svg>
+  );
+};
+
+export default PlusIcon;

src/assets/icons/search-icon.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const SearchIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="36px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M20 19.59V8l-6-6H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c.45 0 .85-.15 1.19-.4l-4.43-4.43c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z" />
+    </svg>
+  );
+};
+
+export default SearchIcon;

src/components/App/App.module.scss

@@ -1,6 +1,7 @@
 .App {
-width: 100%;
-  height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100vh;
 }
 
 

src/components/interaction-area/interaction-area.component.tsx

@@ -1,21 +1,26 @@
-import React, {ChangeEvent, FC} from 'react'
-
+import React, {ChangeEvent, FC, KeyboardEvent} from "react";
+import styles from "./interaction-area.module.scss";
+import PlusIcon from "../../assets/icons/plus-icon";
 
 interface Props {
-    inputValue: string
-    handleInputCallBack: (event: ChangeEvent<HTMLInputElement>) => void
-    addButton: () => void;
-    addButtonText: string;
+  inputValue: string;
+  handleInputCallBack: (event: ChangeEvent<HTMLInputElement>) => void;
+  addButton: () => void;
+  addButtonText: string;
 }
-console.log('1')
-    const InteractionArea:FC<Props> = ({inputValue, handleInputCallBack, addButton, addButtonText}) => {
 
-    return(
-        <div>
-            <input value={inputValue} onChange={handleInputCallBack}/>
-            <button onClick={addButton}>{addButtonText}</button>
-        </div>
-    )
+const InteractionArea: FC<Props> = ({inputValue, handleInputCallBack, addButton}) => {
+  const handleTodoAddingOnKeyDown = (event: KeyboardEvent) => {
+    if (event.code === "Enter" || event.location === 3) {
+      addButton();
+    }
+  };
+  return (
+    <div className={styles.Container}>
+      <input onKeyPress={handleTodoAddingOnKeyDown} value={inputValue} onChange={handleInputCallBack}/>
+      <button onClick={addButton}><PlusIcon/></button>
+    </div>
+  )
 }
 
 export default InteractionArea

src/components/interaction-area/interaction-area.module.scss

@@ -0,0 +1,44 @@
+.Container {
+  display: flex;
+  justify-content: center;
+  width: 40%;
+  margin: 0 auto;
+  height: fit-content;
+
+  input {
+    box-sizing: border-box;
+    width: 100%;
+    margin-right: 2rem;
+    padding: 10px;
+    height: 48px;
+    outline: none;
+    border-radius: 12px;
+    border: 2px solid #222;
+    background-color: white;
+    font-size: 18px;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 500;
+  }
+
+  button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    background-color: white;
+    color: #222222;
+    box-sizing: border-box;
+    font-size: 20px;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 500;
+    border: 2px solid #222222;
+    border-radius: 10px;
+
+    svg {
+      fill: #444444;
+    }
+
+    &:active {
+      border-top: 4px solid #222222;
+    }
+  }
+}

src/components/todo-list/todo-list.component.tsx

@@ -1,36 +1,45 @@
-import React, {FC, MouseEvent} from 'react'
-import styles from './todo-list.module.scss'
-import {DataInterface} from "../todo-wrapper/todo-wrapper.component";
-
+import React, { FC, MouseEvent } from "react";
+import styles from "./todo-list.module.scss";
+import { DataInterface } from "../todo-wrapper/todo-wrapper.component";
+import DeleteIcon from "../../assets/icons/delete-icon";
 
 interface Props {
-    title: string;
-    data: DataInterface[]
-    cleanButtonTitle: string;
-    cleanButtonCallback: () => void
-    deleteListElementCallBack: (event: MouseEvent<HTMLButtonElement>) => void
+  title: string;
+  data: DataInterface[];
+  cleanButtonTitle: string;
+  cleanButtonCallback: () => void;
+  deleteListElementCallBack: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
-const TodoList: FC<Props> = ({title, data, cleanButtonCallback, cleanButtonTitle, deleteListElementCallBack}) => {
-    return(
-        <div className={styles.todoList}>
-            <div className={styles.header}>
-                <span>{title}</span>
-            </div>
-
-            <div className={styles.box}>
-                {data.map(({id, title}) => {
-                    return <div key={id} className={styles.listElement}>{title}
-                    <button id={`${id}`} onClick={deleteListElementCallBack} >DELETE</button>
-                    </div>
-                })}
+const TodoList: FC<Props> = ({
+  title,
+  data,
+  cleanButtonCallback,
+  cleanButtonTitle,
+  deleteListElementCallBack,
+}) => {
+  return (
+    <div className={styles.todoList}>
+      <div className={styles.header}>
+        <span>{title}</span>
+      </div>
+      <div className={styles.cleanButtonArea}>
+        <button onClick={cleanButtonCallback}>{cleanButtonTitle} <DeleteIcon /></button>
+      </div>
+      <div className={styles.box}>
+        {data.map(({ id, title }) => {
+          return (
+            <div key={id} className={styles.listElement}>
+              {title}
+              <div className={styles.deleteItem} id={`${id}`} onClick={deleteListElementCallBack}>
+                <DeleteIcon id={`${id}`} />
+              </div>
             </div>
-            <div className={styles.cleanButtonArea}>
-                <button onClick={cleanButtonCallback}>{cleanButtonTitle}</button>
-            </div>
-        </div>
-    )
-}
-
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
-export default TodoList
+export default TodoList;