Feature/improve style of symbol search results (#1728)

* Improve style

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Increased the file size limit for the activities import
+- Improved the style of the search results for symbols
 - Migrated the style of `GfHeaderModule` to `@angular/material` `15` (mdc)
 - Upgraded `angular` from version `15.1.2` to `15.1.5`
 - Upgraded `Nx` from version `15.6.3` to `15.7.2`

apps/client/src/app/components/header/header.component.scss

@@ -11,7 +11,7 @@
       flex: 1 1 auto;
     }
 
-    .mat-mdc-unelevated-button {
+    .mdc-button {
       height: unset;
 
       &:not(.mat-primary) {

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -54,11 +54,14 @@
           <ng-container>
             <mat-option
               *ngFor="let lookupItem of filteredLookupItemsObservable | async"
-              class="autocomplete"
+              class="line-height-1"
               [value]="lookupItem"
             >
-              <span class="mr-2 symbol">{{ lookupItem.symbol | gfSymbol }}</span
+              <span><b>{{ lookupItem.name }}</b></span>
-              ><span><b>{{ lookupItem.name }}</b></span>
+              <br />
+              <small class="text-muted"
+                >{{ lookupItem.symbol | gfSymbol }}</small
+              >
             </mat-option>
           </ng-container>
         </mat-autocomplete>

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss

@@ -10,16 +10,6 @@
   .mat-dialog-content {
     max-height: unset;
 
-    .autocomplete {
-      font-size: 90%;
-      height: 2.5rem;
-
-      .symbol {
-        display: inline-block;
-        min-width: 4rem;
-      }
-    }
-
     .mat-datepicker-input {
       &.mat-mdc-input-element:disabled {
         color: var(--dark-primary-text);

apps/client/src/styles.scss

@@ -267,16 +267,16 @@ body {
       }
     }
 
-    .mat-mdc-unelevated-button {
+    .mat-paginator {
+      background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+    }
+
+    .mdc-button {
       &.mat-primary {
         --mdc-filled-button-label-text-color: rgba(var(--dark-primary-text));
       }
     }
 
-    .mat-paginator {
-      background-color: rgba(var(--palette-foreground-base-dark), 0.02);
-    }
-
     .svgMap-tooltip {
       background: var(--dark-background);
 
@@ -353,6 +353,10 @@ ngx-skeleton-loader {
   visibility: hidden;
 }
 
+.line-height-1 {
+  line-height: 1;
+}
+
 .lead {
   font-weight: unset;
 }
@@ -429,12 +433,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-mdc-unelevated-button {
-  &:not(:disabled) {
-    --mdc-filled-button-label-text-color: rgba(var(--light-primary-text));
-  }
-}
-
 .mat-paginator {
   background-color: rgba(var(--palette-foreground-base-light), 0.02);
 
@@ -443,6 +441,12 @@ ngx-skeleton-loader {
   }
 }
 
+.mdc-button {
+  &.mat-primary {
+    --mdc-filled-button-label-text-color: rgba(var(--light-primary-text));
+  }
+}
+
 .no-min-width {
   min-width: unset !important;
 }

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -164,7 +164,7 @@
       >
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1" mat-cell>
+      <td *matCellDef="let element" class="line-height-1 px-1" mat-cell>
         <div class="d-flex align-items-center">
           <div>
             <span class="text-truncate">{{ element.SymbolProfile?.name }}</span>

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -27,7 +27,7 @@
       >
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1" mat-cell>
+      <td *matCellDef="let element" class="line-height-1 px-1" mat-cell>
         <div *ngIf="element.name !== element.symbol" class="text-truncate">
           {{ element.name }}
         </div>