fix designs of the single item link

Author: drecodeam

package.json

@@ -1,6 +1,6 @@
 {
     "name": "Est",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "description": "Estimate your day better",
     "homepage": "https://insert.black",
     "repository": "https://github.com/drecodeam/stors",

src/app/components/home/home.component.html

@@ -43,7 +43,7 @@
       [class.active]="item.id === currentTaskID"
       [class.complete] = "!!item.isComplete"
     >
-      <div class="item-title">{{ item.name }}</div>
+      <div class="item-title">{{ item.displayTime}} | {{ item.name }}</div>
       <div class="item-toolbar">
         <div class="toolbar-item" *ngIf="!item.isComplete" (click)="markItemComplete(item)">
           <i class="ion ion-ios-checkmark-circle"></i>
@@ -77,13 +77,13 @@
         </div>
       </div>
       <div class="item-time" *ngIf="!item.isComplete && !item.isTicked">
-        {{ item.displayTime }} left
+        <!-- {{ item.displayTime }} left -->
       </div>
-      <div
+      <!-- <div
         class="item-progress-bar-ghost"
         *ngIf="!item.isComplete"
         [style.width.%]="100 - item.progress + 2"
-      ></div>
+      ></div> -->
 
       <div
         class="item-progress-bar"

src/app/components/home/home.component.scss

@@ -16,8 +16,8 @@ $grey: #CDCDCD;
     position: relative;
     overflow: hidden;
     padding: 2rem;
-    background: $haiti;
-    background: linear-gradient(270deg, darken( #F97C24, 10%), darken( #D9497D, 10%));
+    background: $mirage;
+    // background: linear-gradient(270deg, darken( #F97C24, 10%), darken( #D9497D, 10%));
     .title {
         position: relative;
         overflow: hidden;
@@ -153,13 +153,12 @@ $grey: #CDCDCD;
         position: absolute;
         transition: 0.4s all ease-in-out;
         height: 2px;
-        bottom: 2rem;
+        bottom: 2px;
         margin-bottom: -2px;
         vertical-align: middle;
         background: linear-gradient(270deg, darken( #F97C24, 10%), darken( #D9497D, 10%));;
         width: 100%;
         display: none;
-        border-radius: 50%;
     }
     .item-progress-bar-ghost {
         position: absolute;
@@ -238,7 +237,7 @@ $grey: #CDCDCD;
         opacity: 1;
         background: white;
         border: 1px solid rgba( white, 0.01 );
-        padding-bottom: 3rem;
+        // padding-bottom: 3rem;
         background: black;
         .item-progress-bar {
             display: block;

src/styles.scss

@@ -9,8 +9,8 @@ body {
 
 body {
     background: #000000;
-    background: #0c0c0c;
-    background: #141414;
+    // background: #0c0c0c;
+    // background: #141414;
 }
 
 * {