Tt 582 improve the summary section of the time clock page QA (#830)

* style: TT-582 improve the summary section with a new row with information of actual clock in register and clock out button

* fix: TT-582 add missing unit test to confirm that clockout function in TimeEntriesSummaryComponent emits an event

* style: TT-582 add a border radius to current elapsed time box

* style: TT-582 improved the clocked in hour text and current time box

* style: TT-582 improved the clocked in hour text and current time box

* style: TT-582 removed whitespace

Co-authored-by: Luis Moyón <[email protected]>

Author: codigodehoy

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.css

@@ -6,6 +6,11 @@
   border-radius: .25rem;
 }
 
+.c-title{
+  position: relative;
+  bottom: 9px;
+}
+
 .clock-out{
   text-align: center;
 }
@@ -22,4 +27,4 @@
   -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.56);
   -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.56);
   color: #fff;
-}
+}

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.html

@@ -1,29 +1,24 @@
-<div *ngIf="areFieldsVisible" class="row pb-4">
-  <div class="col-2 d-flex align-items-center">
-    <p class="card-title text-left" style="margin: 0; padding: 0;">
+<div *ngIf="areFieldsVisible" class="grid grid-cols-2 gap-4 pb-4">
+  <div class="align-items-center">
+    <p class="card-title text-left inline-block c-title" style="margin: 0; padding: 0;">
       You clocked in at
       <strong>{{ activeTimeEntry?.start_date | date:'shortTime' }}</strong>
     </p>
-  </div>
-  <div class="col-2 col-sm-3">
-    <div class="current-elapsed-time-box d-flex flex-column justify-content-center align-items-center" style="width: 50%">
+    <div class="inline-block ml-12 text-center current-elapsed-time-box " style="width: 22%">
       <h6>Current</h6>
       <h3>{{ currentWorkingTime }}</h3>
     </div>
   </div>
-  <div class="col-7 clock-out">
-    <button
-      class="btn bt-clock-out"
-      type="button"
-      (click)="clockOut()">
-        Clock Out
+  <div class="clock-out pr-28">
+    <button class="btn bt-clock-out" type="button" (click)="clockOut()">
+      Clock Out
     </button>
   </div>
 </div>
 
 <h6 class="text-left"><strong>Summary</strong></h6>
 <hr class="mb-4" />
-<div class ="container px-0">
+<div class="container px-0">
 
   <div class="row pb-4">
     <div class="col-12 col-sm-4">
@@ -40,4 +35,4 @@ <h3>{{ timeEntriesSummary?.month | timeDetails }}</h3>
     </div>
   </div>
 
-</div>
+</div>