Tt 588 improve technologies data report presentation (#834)

* Adding css rules for Technology Area presentation in report section.

* Refactoring the css rules

* corrections by the reviewer.

Author: Olucas7

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

@@ -49,7 +49,13 @@
           </ng-container>
         </td>
         <td class="col lg-col">{{ entry.description }}</td>
-        <td class="col lg-col">{{ entry.technologies }}</td>
+        <td class="col lg-col">
+          <ng-container *ngIf="entry.technologies.length > 0">
+              <div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
+                  {{ technology }}
+              </div>
+          </ng-container>
+      </td>
       </tr>
     </tbody>
   </table>

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

@@ -83,3 +83,15 @@ table.dataTable thead .sorting_asc,
 table.dataTable thead .sorting_desc {
   background-image: none;
 }
+
+.badge {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0.5em;
+  color: #FFFFFF;
+  font-weight: bold;
+  text-transform: capitalize;
+  font-style: italic;
+  cursor: pointer;
+}