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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "time-tracker",
-  "version": "1.66.0",
+  "version": "1.69.1",
   "scripts": {
     "config": "ts-node ./scripts/setenv.ts",
     "preinstall": "npx npm-force-resolutions",

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss

@@ -0,0 +1,28 @@
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -30,7 +30,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output() changeValueShowCustomerForm = new EventEmitter<boolean>();
   @Input()
   customers: CustomerUI[] = [];
-  dtOptions: any = {};
+  dtOptions: any = {
+    columnDefs: [{orderable: false, targets: [2]}]
+  };
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })
   dtElement: DataTableDirective;

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -55,3 +55,31 @@ $url-hover-color: darken($url-base-color, 20);
   }
 }
 
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -65,7 +65,7 @@
             id="uri"
             type="text"
             placeholder="Enter Jira ticket URL"
-            class="form-control"
+            class="url-ticket-input form-control"
             aria-label="Small"
             aria-describedby="inputGroup-sizing-sm"
           />

src/app/modules/shared/components/details-fields/details-fields.component.scss

@@ -119,3 +119,14 @@ input[type="date"]::-webkit-clear-button {
 ::ng-deep .cdk-overlay-container {
   z-index: 1100 !important;
 }
+
+.url-ticket-input {
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+}
+
+::ng-deep .ngx-timepicker {
+	border: 1px solid #ced4da;
+	border-radius: 0.25rem;
+	padding: 2px;
+}

src/app/modules/shared/components/month-picker/month-picker.component.html

@@ -22,7 +22,7 @@
 <div class="row content-months">
   <div class="spacing col-xl-1 col-lg-1 col-md-2 col-2" *ngFor="let month of months; let i = index">
     <button class="btn btn-light btn-block"
-      [ngClass]="{'btn-primary': isSelectedMonth(i)}"
+      [ngClass]="{'btn-primary selected-month': isSelectedMonth(i)}"
       (click)="selectMonth(i)"
       [disabled]="monthEnable(i)">
       <small>{{ month.slice(0, 3) }}</small>

src/app/modules/shared/components/month-picker/month-picker.component.scss

@@ -24,6 +24,10 @@
   }
 }
 
+.selected-month {
+  color: white;
+}
+
 .align-item {
   display: flex;
   justify-content: center;

src/app/modules/time-clock/components/entry-fields/entry-fields.component.html

@@ -20,7 +20,7 @@
       placeholder="Enter Jira ticket URL"
       id="uri"
       formControlName="uri"
-      class="form-control"
+      class="url-ticket-input form-control"
     />
   </div>
 

src/app/modules/time-clock/components/entry-fields/entry-fields.component.scss

@@ -9,3 +9,14 @@
 .hidden {
   display: none;
 }
+
+.url-ticket-input {
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+}
+
+::ng-deep .ngx-timepicker {
+	border: 1px solid #ced4da;
+	border-radius: 0.25rem;
+	padding: 2px;
+}

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

@@ -10,6 +10,7 @@
   bottom: 9px;
 }
 
+
 .clock-out{
   text-align: center;
 }
@@ -26,4 +27,5 @@
   -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-entries/pages/time-entries.component.scss

@@ -0,0 +1,28 @@
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}

src/app/modules/time-entries/pages/time-entries.component.ts

@@ -24,6 +24,7 @@ import { CalendarView } from 'angular-calendar';
 export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
   dtOptions: any = {
     order: [[ 0, 'desc' ]],
+    columnDefs: [{orderable: false, targets: [6]}],
     destroy: true,
   };
   dtTrigger: Subject<any> = new Subject();

src/app/modules/users/components/users-list/users-list.component.css

@@ -0,0 +1,28 @@
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}

src/app/modules/users/components/users-list/users-list.component.ts

@@ -22,7 +22,9 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })
   dtElement: DataTableDirective;
-  dtOptions: any = {};
+  dtOptions: any = {
+    columnDefs: [{ orderable: false, targets: [2]}]
+  };
   switchGroupsSubscription: Subscription;
   isDevelopment = true;