From 7125b12631e290fc1e99682354204c147f85c461 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 16 Feb 2023 17:17:30 +0100
Subject: [PATCH] Feature/improve styles on about page (#1707)

* Improve styles

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../src/app/pages/about/about-page.html       | 16 +++++-----
 apps/client/src/styles.scss                   | 32 +++++++++++++++++++
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8072623..e60b1b80 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the styles on the about page
 - Eliminated the `GhostfolioScraperApiService`
 
 ## 1.234.0 - 2023-02-15
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index 0ce83fb5..d4d8cad3 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@@ -62,7 +62,7 @@
             mat-icon-button
             title="Follow Ghostfolio on Twitter"
           >
-            <ion-icon name="logo-twitter" size="large"></ion-icon>
+            <ion-icon name="logo-twitter"></ion-icon>
           </a>
           <a
             class="mx-2"
@@ -70,7 +70,7 @@
             mat-icon-button
             title="Send an e-mail"
           >
-            <ion-icon name="mail" size="large"></ion-icon>
+            <ion-icon name="mail"></ion-icon>
           </a>
           <a
             class="mx-2"
@@ -78,7 +78,7 @@
             mat-icon-button
             title="Join the Ghostfolio Slack channel"
           >
-            <ion-icon name="logo-slack" size="large"></ion-icon>
+            <ion-icon name="logo-slack"></ion-icon>
           </a>
           <a
             class="mx-2"
@@ -86,7 +86,7 @@
             mat-icon-button
             title="Find Ghostfolio on GitHub"
           >
-            <ion-icon name="logo-github" size="large"></ion-icon>
+            <ion-icon name="logo-github"></ion-icon>
           </a>
         </p>
         <div
@@ -191,7 +191,7 @@
   <div class="row">
     <div *ngIf="hasPermissionForSubscription" class="col-md-3 col-xs-12 my-2">
       <a
-        class="py-2 w-100"
+        class="py-4 w-100"
         color="primary"
         mat-flat-button
         [routerLink]="['/faq']"
@@ -203,7 +203,7 @@
       [ngClass]="{ 'offset-md-4': !hasPermissionForBlog }"
     >
       <a
-        class="py-2 w-100"
+        class="py-4 w-100"
         color="primary"
         mat-flat-button
         [routerLink]="['/about', 'changelog']"
@@ -212,7 +212,7 @@
     </div>
     <div *ngIf="hasPermissionForSubscription" class="col-md-3 col-xs-12 my-2">
       <a
-        class="py-2 w-100"
+        class="py-4 w-100"
         color="primary"
         mat-flat-button
         [routerLink]="['/about', 'privacy-policy']"
@@ -221,7 +221,7 @@
     </div>
     <div *ngIf="hasPermissionForBlog" class="col-md-3 col-xs-12 my-2">
       <a
-        class="py-2 w-100"
+        class="py-4 w-100"
         color="primary"
         mat-flat-button
         [routerLink]="['/blog']"
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index f9c101de..181e4ab6 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -256,6 +256,23 @@ body {
       }
     }
 
+    .mat-mdc-card {
+      --mdc-elevated-card-container-color: var(--dark-background);
+    }
+
+    .mat-mdc-fab {
+      &.mat-primary {
+        --mdc-fab-icon-color: rgba(var(--dark-primary-text));
+        --mat-mdc-fab-color: rgba(var(--dark-primary-text));
+      }
+    }
+
+    .mat-mdc-unelevated-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);
     }
@@ -394,6 +411,21 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-mdc-fab {
+  color: var(--mat-mdc-fab-color, inherit) !important;
+
+  &.mat-primary {
+    --mdc-fab-icon-color: rgba(var(--light-primary-text));
+    --mat-mdc-fab-color: rgba(var(--light-primary-text));
+  }
+}
+
+.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);