fix: #29 Refactor design

Author: jorgecod

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

@@ -37,7 +37,7 @@
     />
   </div>
 
-  <div class="input-group input-group-sm mb-3">
+  <div class="input-group input-group-sm">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
     </div>
@@ -50,11 +50,10 @@
     />
   </div>
 
-  <app-search-project (changeFilterProject)="filterTechnology = $event"></app-search-project>
   <div *ngIf="isLoading">LOADING...</div>
   <div *ngIf="technology" class="d-flex flex-column technology-content">
     <div
-      *ngFor="let item of technology.items | filterProject: filterTechnology"
+      *ngFor="let item of technology.items"
       (click)="setTechnology(item.name)"
       class="technology-list"
       [ngClass]="{ active: selectedTechnology.includes(item.name) }"
@@ -63,12 +62,10 @@
     </div>
   </div>
   <div class="tags-content d-flex flex-wrap">
-    <span
-      *ngFor="let technology of selectedTechnology; let tagIndex = index"
-      (click)="removeTag(tagIndex)"
-      class="tag"
-      >{{ technology }}</span
-    >
+    <div *ngFor="let technology of selectedTechnology; let tagIndex = index" class="tag">
+      <span class="mr-3">{{ technology }}</span>
+      <i class="fas fa-times text-white" (click)="removeTag(tagIndex)"></i>
+    </div>
   </div>
 
   <div class="form-group">

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

@@ -3,7 +3,6 @@
 @mixin tagTechnology() {
   background-color: $modal-button-secondary;
   color: #ffffff;
-  cursor: pointer;
 
   &:hover {
     opacity: 0.8;
@@ -31,12 +30,12 @@
 }
 
 .technology-content {
-  margin-bottom: 2rem;
+  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
+  margin: 0 0 2rem 6rem;
   max-height: 7.5rem;
   overflow-y: auto;
 
   .technology-list {
-    background-color: #efefef;
     cursor: pointer;
     font-size: 0.8rem;
     margin-bottom: 0.1rem;
@@ -48,33 +47,25 @@
   }
 
   .active {
-    @include tagTechnology();
+    background-color: #efefef;
   }
 }
 
 .tags-content {
-  margin-bottom: 2rem;
+  margin: 2rem 0;
 
-  span {
+  div {
     @include tagTechnology();
 
     border-radius: 0.2rem;
     box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
     font-size: 0.8rem;
-    padding: 0 1rem 0.2rem 1.5rem;
+    padding: 0.1rem 1rem 0.2rem 1.5rem;
     position: relative;
     margin: 0 0.5rem 0.5rem 0;
 
-    &::before {
-      background: #fff;
-      border-radius: 1rem;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.6);
-      content: '';
-      height: 0.4rem;
-      left: 0.6rem;
-      position: absolute;
-      width: 0.4rem;
-      top: 0.5rem;
+    i {
+      cursor: pointer;
     }
   }
 }

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

@@ -18,7 +18,6 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   @ViewChild('closeModal') closeModal: ElementRef;
   entryForm: FormGroup;
   technology: Technology;
-  filterTechnology = '';
   selectedTechnology: string[] = [];
   isLoading = false;