Styling improvements.

Author: renemadsen

eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.html

@@ -144,25 +144,31 @@
       <div class="plan-text" *ngIf="row.planningPrDayModels[col.field]?.plannedStartOfShift1 !== 0">
         <span class="{{ getCellTextColor(row, col.field) }}" id="firstShift{{index}}_{{col.field}}">
           <mat-icon class="neutral-icon" [matTooltip]="'Planned working hours' | translate ">calendar_month</mat-icon>
-          {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedStartOfShift1) }} -
-          {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedEndOfShift1) }} /
-          {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedBreakOfShift1) }}
+          <strong>
+            {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedStartOfShift1) }} -
+            {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedEndOfShift1) }} /
+            {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedBreakOfShift1) }}
+          </strong>
         </span>
       </div>
 
       <div class="plan-text" *ngIf="row.planningPrDayModels[col.field]?.plannedStartOfShift1 === 0 && row.planningPrDayModels[col.field]?.plannedEndOfShift1 !== 0 ">
         <span class="{{ getCellTextColor(row, col.field) }}" id="firstShift{{index}}_{{col.field}}">
           <mat-icon class="neutral-icon" [matTooltip]="'Planned working hours' | translate ">calendar_month</mat-icon>
-          {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedStartOfShift1) }} -
-          {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedEndOfShift1) }} /
-          {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedBreakOfShift1) }}
+          <strong>
+            {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedStartOfShift1) }} -
+            {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedEndOfShift1) }} /
+            {{ convertMinutesToTime(row.planningPrDayModels[col.field]?.plannedBreakOfShift1) }}
+          </strong>
         </span>
       </div>
 
       <div class="plan-text" *ngIf="row.planningPrDayModels[col.field]?.plannedStartOfShift1 === 0 && row.planningPrDayModels[col.field]?.plannedEndOfShift1 === 0 && row.planningPrDayModels[col.field]?.planHours !== 0">
         <span class="{{ getCellTextColor(row, col.field) }}" id="plannedHours{{index}}_{{col.field}}">
           <mat-icon class="neutral-icon" [matTooltip]="'Planned working hours' | translate ">calendar_month</mat-icon>
-          {{ convertHoursToTime(row.planningPrDayModels[col.field]?.planHours) }}
+          <strong>
+            {{ convertHoursToTime(row.planningPrDayModels[col.field]?.planHours) }}
+          </strong>
         </span>
       </div>
 

eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.scss

@@ -10,6 +10,7 @@
 
 .comment {
   display: flex;
+  max-width: 250px;
 }
 
 .first-column {
@@ -21,17 +22,18 @@
 }
 
 .time-dashboard table td {
-  background-color: white;
-  border-right: 1px solid #EBEFF2;
-  border-bottom: 1px solid #EBEFF2;
-
+  background-color: var(--tp-td-bg);
+  border-right: 1px solid var(--tp-border);
+  border-bottom: 1px solid var(--tp-border);
+  color: var(--tp-text);
 }
 
 .time-dashboard table tr th {
-  background-color: #f7f9fa !important;
+  background-color: var(--tp-th-bg) !important;
   font-size: 14px;
   font-weight: 500;
-  border-right: 1px solid #EBEFF2;
-  border-top: 1px solid #EBEFF2;
-  border-left: 1px solid #EBEFF2;
+  border-right: 1px solid var(--tp-border);
+  border-top: 1px solid var(--tp-border);
+  border-left: 1px solid var(--tp-border);
+  color: var(--tp-text);
 }

eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.ts

@@ -204,7 +204,7 @@ export class TimePlanningsTableComponent implements OnInit, OnChanges {
     // Case 1: Has planned hours
     if (planHours > 0) {
       if (workDayStarted) {
-        return workDayEnded ? 'white-text' : 'red-text';
+        return workDayEnded ? 'black-text' : 'red-text';
       } else {
         return isInOlderThanToday ? 'red-text' : 'black-text';
       }