Feature/improve styles of assistant (#4901)

* Improve styles

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the style of the assistant
 - Migrated the `HtmlTemplateMiddleware` to use `@Injectable()`
 - Renamed `User` to `user` in the database schema
 - Improved the language localization for French (`fr`)

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html

@@ -1,12 +1,10 @@
 <a
   #link
-  class="d-block line-height-1 px-2 py-1 text-truncate"
+  class="d-block line-height-1 px-3 py-1 text-truncate"
   [queryParams]="queryParams"
   [routerLink]="routerLink"
   (click)="onClick()"
-  ><span
-    ><b>{{ item?.name }}</b></span
-  >
+  ><span>{{ item?.name }}</span>
   @if (item && isAsset(item)) {
     <br />
     <small class="text-muted"

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss

@@ -6,6 +6,11 @@
 
     a {
       color: rgba(var(--light-primary-text));
+      font-weight: bold;
+
+      .text-muted {
+        color: rgba(var(--light-primary-text)) !important;
+      }
     }
   }
 }
@@ -14,6 +19,10 @@
   &.has-focus {
     a {
       color: rgba(var(--dark-primary-text));
+
+      .text-muted {
+        color: rgba(var(--dark-primary-text)) !important;
+      }
     }
   }
 }

libs/ui/src/lib/assistant/assistant.html

@@ -38,23 +38,29 @@
     </div>
     <div
       *ngIf="searchFormControl.value"
-      class="overflow-auto py-3 result-container"
+      class="overflow-auto py-2 result-container"
     >
       <div
         *ngIf="searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks"
-        class="mb-3"
+        class="mb-2"
       >
-        <div class="h6 mb-1 px-2" i18n>Quick Links</div>
+        <div class="font-weight-bold px-3 text-muted title" i18n>
+          Quick Links
+        </div>
+        @for (
+          searchResultItem of searchResults?.quickLinks;
+          track searchResultItem
+        ) {
           <gf-assistant-list-item
-          *ngFor="let searchResultItem of searchResults?.quickLinks"
             [item]="searchResultItem"
             (clicked)="onCloseAssistant()"
           />
+        }
         <ng-container>
           @if (isLoading.quickLinks) {
             <ngx-skeleton-loader
               animation="pulse"
-              class="mx-2"
+              class="mx-3"
               [theme]="{
                 height: '1.5rem',
                 width: '100%'
@@ -64,46 +70,56 @@
         </ng-container>
       </div>
       <div>
-        <div class="h6 mb-1 px-2" i18n>Holdings</div>
+        <div class="font-weight-bold px-3 text-muted title" i18n>Holdings</div>
+        @for (
+          searchResultItem of searchResults?.holdings;
+          track searchResultItem
+        ) {
           <gf-assistant-list-item
-          *ngFor="let searchResultItem of searchResults?.holdings"
             [item]="searchResultItem"
             (clicked)="onCloseAssistant()"
           />
+        }
         <ng-container *ngIf="searchResults?.holdings?.length === 0">
           @if (isLoading.holdings) {
             <ngx-skeleton-loader
               animation="pulse"
-              class="mx-2"
+              class="mx-3"
               [theme]="{
                 height: '1.5rem',
                 width: '100%'
               }"
             />
           } @else {
-            <div class="px-2 py-1" i18n>No entries...</div>
+            <div class="px-3 py-1 text-muted" i18n>No entries...</div>
           }
         </ng-container>
       </div>
-      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
-        <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
+      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-2">
+        <div class="font-weight-bold px-3 text-muted title" i18n>
+          Asset Profiles
+        </div>
+        @for (
+          searchResultItem of searchResults?.assetProfiles;
+          track searchResultItem
+        ) {
           <gf-assistant-list-item
-          *ngFor="let searchResultItem of searchResults?.assetProfiles"
             [item]="searchResultItem"
             (clicked)="onCloseAssistant()"
           />
+        }
         <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
           @if (isLoading.assetProfiles) {
             <ngx-skeleton-loader
               animation="pulse"
-              class="mx-2"
+              class="mx-3"
               [theme]="{
                 height: '1.5rem',
                 width: '100%'
               }"
             />
           } @else {
-            <div class="px-2 py-1" i18n>No entries...</div>
+            <div class="px-3 py-1 text-muted" i18n>No entries...</div>
           }
         </ng-container>
       </div>

libs/ui/src/lib/assistant/assistant.scss

@@ -7,6 +7,24 @@
 
   .result-container {
     max-height: 15rem;
+
+    .title {
+      align-items: center;
+      display: flex;
+      font-size: 0.75rem;
+      display: flex;
+      margin: 0;
+      position: relative;
+      white-space: nowrap;
+
+      &::after {
+        content: '';
+        flex-grow: 1;
+        height: 1px;
+        background: rgba(var(--dark-dividers));
+        margin-left: 0.25rem;
+      }
+    }
   }
 
   .search-container {
@@ -31,6 +49,14 @@
     border-color: rgba(var(--light-dividers));
   }
 
+  .result-container {
+    .title {
+      &::after {
+        background: rgba(var(--light-dividers));
+      }
+    }
+  }
+
   .search-container {
     border-color: rgba(var(--light-dividers));