changed min-dimensions

db.json

@@ -1,7 +1,7 @@
 {
   "tasks": [
     {
-      "title": "Drink Iced Coffee",
+      "title": "Drink Coffee",
       "completed": false,
       "editing": false,
       "id": 1

src/app/Todo-List-App/containers/TodoList/todo-list.component.css

@@ -34,9 +34,11 @@ li > *{
 
 .main{
     max-width: 50%;
-    box-shadow: 8px 4px#ffffff;
+    box-shadow: 8px 6px#858181;
     border-radius: 20px;
     padding: 0;
+    min-height: 350px;
+    min-width: 400px;
 }
 
 .header, .inputDiv{
@@ -87,13 +89,15 @@ input[type="checkbox"]{
 }
 
 .dateClass{
-    font-size: 1.5em;
+    font-size: 1em;
     float: right;
     margin-right: 20px;
     color: rgb(0, 0, 0);
     background-color: rgb(255, 255, 255);
     padding: 0 10px;
     border-radius: 20px;
+    /* visibility: hidden; */
 }
 
 
+

src/app/Todo-List-App/containers/TodoList/todo-list.component.html

@@ -23,7 +23,6 @@
                     </ng-template>
 
                     <!-- buttons switching -->
-                
                     <div *ngIf="!task.editing; else doneBtn" ><button [ngClass] = "{disabled: task.completed}" class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> Edit</i></button></div>    
                     <ng-template #doneBtn>
                     <div>
@@ -36,10 +35,12 @@
                     </div>
                 </li>
             </ul>
+            
             <!-- all task completed template-->
             <div *ngIf="remaining() === 0">
                 <todo-empty></todo-empty>
             </div>
+            <hr>
             <div class="info">
                 <div>{{ remaining()}} uncompleted tasks</div>
             </div>