feat: #413 Improving styles for project component

Author: Juan Gabriel Guzman

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html

@@ -4,7 +4,7 @@
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
     </div>
 
-    <div class="autocomplete">
+    <div class="form-control autocomplete">
       <ng-autocomplete
         formControlName="project_id"
         [data]="listProjects"
@@ -19,16 +19,16 @@
       </ng-autocomplete>
 
       <ng-template #itemTemplate let-item>
-        <div class="container" style="cursor:none">
-          <div class="left-side">
+        <div class="d-flex container">
+          <div class="mr-auto p-2">
             <span [innerHTML]="item.customer_name"></span> -
             <strong><span [innerHTML]="item.name"></span></strong>
           </div>
-          <div class="right-side">
+          <div class="p-2 pr-3">
             <button *ngIf="showClockIn" class="btn btn-sm btn-primary btn-select" (click)="clockIn(item.id, item.customer_name, item.name)">Clock In</button>
             <button *ngIf="!showClockIn" class="btn btn-sm btn-primary btn-select"
               (click)="switch(item.id, item.customer_name, item.name)">Switch</button>&nbsp;
-            <button *ngIf="!showClockIn" class="btn btn-sm btn-warning btn-select" (click)="updateProject(item.id)">Update
+            <button *ngIf="!showClockIn" class="btn btn-sm btn-update btn-select" (click)="updateProject(item.id)">Update
               project</button>
           </div>
         </div>

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss

@@ -4,6 +4,7 @@
   width: 6rem;
   background-color: $primary;
   color: white;
+  height: 40px;
 }
 
 .btn-select {
@@ -13,20 +14,19 @@
 
 .container {
   font-size: small;
-  width: 100%;
-  min-height: 30px;
-  position: relative;
+  cursor: text;
 }
 
 .autocomplete {
-  width: 80%
+  width: 80%;
+  display: block;
+  background-clip: padding-box;
+  border: none;
+  margin: 0em;
+  padding: 0em;
 }
 
-.left-side {
-  position: absolute;
-}
-
-.right-side {
-  position: absolute;
-  right: 15px;
+.btn-update {
+  background-color: #ff5e06;
+  color: white;
 }

src/styles.scss

@@ -13,6 +13,13 @@ body {
   overflow-x: hidden;
 }
 
-.table.dataTable th, .table.dataTable td{
+.table.dataTable th,
+.table.dataTable td {
   box-sizing: border-box;
 }
+
+.autocomplete-container {
+  @extend .autocomplete-container;
+  box-shadow: none;
+  border: $input-border-width solid $input-border-color;
+}