Task/various style improvements (#6780)

* Various style improvements

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the styling of buttons and input fields across various components
 - Upgraded `prettier` from version `3.8.2` to `3.8.3`
 
 ## 3.0.0 - 2026-04-23

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -157,7 +157,7 @@ export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
   public ghostfolioScraperApiSymbolPrefix = ghostfolioScraperApiSymbolPrefix;
   public hasPermissionForSubscription: boolean;
   public info: InfoItem;
-  public isLoading = false;
+  public isLoading = true;
   public isUUID = isUUID;
   public placeholder = '';
   public pageSize = DEFAULT_PAGE_SIZE;

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -421,7 +421,7 @@
                 <input formControlName="url" matInput type="text" />
                 @if (assetProfileForm.controls.url.value) {
                   <gf-entity-logo
-                    class="mr-3"
+                    class="mat-icon"
                     matSuffix
                     [url]="assetProfileForm.controls.url.value"
                   />

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html

@@ -30,7 +30,7 @@
         />
         @if (platformForm.get('url')?.value) {
           <gf-entity-logo
-            class="mr-3"
+            class="mat-icon"
             matSuffix
             [url]="platformForm.get('url').value"
           />

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -13,12 +13,14 @@
             (keydown.enter)="onLoginWithAccessToken(); $event.preventDefault()"
           />
           <button
-            mat-button
+            class="mx-2"
+            mat-icon-button
             matSuffix
             type="button"
             (click)="isAccessTokenHidden = !isAccessTokenHidden"
           >
             <ion-icon
+              class="mat-icon"
               [name]="isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'"
             />
           </button>
@@ -34,7 +36,7 @@
       @if (data.hasPermissionToUseAuthGoogle) {
         <div class="d-flex flex-column">
           <a
-            class="px-4 rounded-pill"
+            class="px-4 py-3 rounded-pill"
             href="../api/v1/auth/google"
             mat-stroked-button
             ><img
@@ -49,7 +51,7 @@
       @if (data.hasPermissionToUseAuthOidc) {
         <div class="d-flex flex-column mt-2">
           <a
-            class="px-4 rounded-pill"
+            class="px-4 py-3 rounded-pill"
             href="../api/auth/oidc"
             mat-stroked-button
             ><ng-container i18n>Sign in with OpenID Connect</ng-container></a

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -19,12 +19,14 @@
             [type]="isAccessTokenHidden ? 'password' : 'text'"
           />
           <button
-            mat-button
+            class="mx-2"
+            mat-icon-button
             matSuffix
             type="button"
             (click)="isAccessTokenHidden = !isAccessTokenHidden"
           >
             <ion-icon
+              class="mat-icon"
               [name]="isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'"
             />
           </button>

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -292,12 +292,14 @@
                   [type]="isAccessTokenHidden ? 'password' : 'text'"
                 />
                 <button
-                  mat-button
+                  class="mx-2"
+                  mat-icon-button
                   matSuffix
                   type="button"
                   (click)="isAccessTokenHidden = !isAccessTokenHidden"
                 >
                   <ion-icon
+                    class="mat-icon"
                     [name]="
                       isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'
                     "

apps/client/src/app/pages/register/register-page.html

@@ -20,7 +20,7 @@
         <div class="py-5 text-center">
           @if (hasPermissionForAuthToken) {
             <button
-              class="d-inline-block"
+              class="py-3"
               color="primary"
               mat-flat-button
               (click)="openShowAccessTokenDialog()"
@@ -33,7 +33,7 @@
           }
           @if (hasPermissionForAuthGoogle) {
             <a
-              class="px-4 rounded-pill w-100"
+              class="px-4 py-3 rounded-pill w-100"
               href="../api/v1/auth/google"
               mat-stroked-button
               ><img

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

@@ -1,7 +1,5 @@
 <mat-form-field appearance="outline" class="w-100">
-  <button disabled mat-icon-button matPrefix>
+  <ion-icon class="mat-icon" matPrefix name="search-outline" />
-    <ion-icon name="search-outline" />
-  </button>
   <mat-chip-grid #chipList aria-label="Search keywords">
     @for (filter of selectedFilters; track filter) {
       <mat-chip-row
@@ -42,12 +40,7 @@
     }
   </mat-autocomplete>
 
-  <button
+  @if (isLoading()) {
-    disabled
+    <mat-spinner class="mx-2" matSuffix [diameter]="20" />
-    mat-icon-button
+  }
-    matSuffix
-    [ngClass]="{ 'd-none': !isLoading() }"
-  >
-    <mat-spinner matSuffix [diameter]="20" />
-  </button>
 </mat-form-field>