design bug fix

db.json

 {
   "task": [
     {
-      "title": "12223",
+      "title": "This HTML file is a template. ",
       "isCompleted": false,
-      "id": 1
+      "id": 2
+    },
+    {
+      "title": "This HTML file is a template.       ",
+      "isCompleted": true,
+      "id": 4
+    },
+    {
+      "title": "hello",
+      "isCompleted": false,
+      "id": 5
+    },
+    {
+      "title": "cscdcv",
+      "isCompleted": false,
+      "id": 6
+    },
+    {
+      "title": "vdvdcv",
+      "isCompleted": false,
+      "id": 7
+    },
+    {
+      "title": "vdvdv",
+      "isCompleted": false,
+      "id": 8
+    },
+    {
+      "title": "ddvdvd",
+      "isCompleted": true,
+      "id": 9
+    },
+    {
+      "title": "dvdvdvd",
+      "isCompleted": false,
+      "id": 10
+    },
+    {
+      "title": "wwww",
+      "isCompleted": false,
+      "id": 11
     }
   ]
 }
\ No newline at end of file

src/components/base/checkbox/checkbox.css

-input[type="checkbox"]{
- height:20px;
- width:25px;
+input[type="checkbox"] {
+  height: 20px;
+  width: 25px;
   cursor: pointer;
-
 }
-.checkbox-bg{
+.checkbox-bg {
   background: white;
-
 }

src/components/base/input/input.css

-input[type="text"]{
-    width:100%;
-   padding:1rem 1.5rem;
+input[type="text"] {
+  width: 100%;
+  padding: 1rem 1.5rem;
   box-sizing: border-box;
   border: 1px solid #ccc;
-    font-size:18px;
+  font-size: 18px;
   outline: none;
-box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px inset;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px inset;
   border-radius: 5px;
 }

src/components/base/layout/index.js

@@ -4,9 +4,9 @@ function Layout({ count, ...props }) {
 
   return (
     <div className="container">
-      <h1>
+      <h2>
         You have {count} {todoCount}
-      </h1>
+      </h2>
       {/* inner section that contain (tasklist and forms) */}
       <div {...props}></div>
     </div>

src/components/base/layout/layout.css

 .container {
-  min-height: 40dvh;
-  margin-inline: auto;
-
+  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
   background: white;
-
-  position: relative;
+  min-height: 40vh;
 }
-.container h1 {
-  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
-  border: none;
+.container h2 {
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 5px;
+  text-shadow: 0px 1px, 1px 0px, 1px 1px;
   text-align: center;
   padding: 1.3rem 0px;
   margin: 0;
-  position: relative;
-  font-size: 25px;
-  z-index: 1;
-}
-h3 {
-  margin-left: 1rem;
-  height: 200px;
-  text-align: center;
 }
+
 @media screen and (min-width: 1024px) {
   .container {
     min-width: 40dvw;

src/components/top-level/form/form.css

 .form-section {
-  padding: 1rem;
+  padding: 1.5rem;
   background: white;
 }
 .form-section form {

src/components/top-level/task/task.css

 .task-section {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem 0.4rem 1rem;
+  padding: 0.3rem 1.4rem;
   justify-content: space-between;
-  border-top: 1px solid #ccc;
+  border-top: 1.5px solid #e0e0e0;
 
   /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; */
   clip-path: inset(0 -100vmax);
@@ -40,8 +40,9 @@ input:focus {
   top: 10px;
   margin-left: 0.4rem;
   font-size: 17px;
-  color: #8e8d8d;
+  color: #504e4e;
   font-family: "Open Sans", sans-serif;
+  font-weight: 500;
 }
 
 .task-section textarea::-webkit-scrollbar {

src/components/top-level/tasks/tasks.css

-.tasks{
-    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
+.tasks {
+  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px,
+    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   background: white;
   padding: 1rem;
-
 }
-.tasks .task-section{
- margin:0.20rem;
-box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
-
+.tasks .task-section {
+  margin: 0.2rem;
+  box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
+    rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
 }
-.fa-close{
+.fa-close {
   cursor: pointer;
 }
-.tasklist{
-    overflow:auto;
-        height: 240px;
-}
\ No newline at end of file

src/index.css

@@ -2,8 +2,12 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans&display=swap");
 
+html {
+  scroll-behavior: smooth;
+}
 body {
   margin: 0;
+  padding: 0;
   font-family: "Open Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -17,8 +21,10 @@ body {
     -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, white
           50%, white 100%);
   background-size: 0.2em 0.2em;
-  height: 100vh;
+  min-height: 100dvh;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
 }