From 1ffa831c5c77a2d0d5372e19eac1eee6636fdfc3 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 19 Feb 2023 11:20:56 +0100
Subject: [PATCH] Feature/improve style of symbol search results (#1728)

* Improve style

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../components/header/header.component.scss   |  2 +-
 .../create-or-update-activity-dialog.html     |  9 ++++---
 .../create-or-update-activity-dialog.scss     | 10 -------
 apps/client/src/styles.scss                   | 26 +++++++++++--------
 .../activities-table.component.html           |  2 +-
 .../holdings-table.component.html             |  2 +-
 7 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7fc6de4e..556c578b 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index 60d9b5ff..bab302d9 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/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) {
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
index 1b46ecf6..8dc7eddb 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/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>
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss
index e72810e1..a795df85 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss
+++ b/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);
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index f26b3e61..40e5a778 100644
--- a/apps/client/src/styles.scss
+++ b/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;
 }
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index 18a63bb7..909143fc 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/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>
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index b994ba12..c30811e4 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/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>