From 739cb4242dcf6f83b9837a219402ae4c0e32ecf0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 10 Apr 2023 17:59:29 +0200
Subject: [PATCH] Feature/decrease density of theme (#1846)

* Decrease density

* Update changelog
---
 CHANGELOG.md                                              | 1 +
 apps/client/src/app/components/admin-jobs/admin-jobs.html | 5 +----
 .../src/app/components/admin-overview/admin-overview.html | 2 +-
 apps/client/src/app/pages/account/account-page.html       | 8 ++++----
 apps/client/src/styles.scss                               | 4 ----
 apps/client/src/styles/theme.scss                         | 6 ++++--
 6 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e24ef3131..ead4c8a82 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Changed the slide toggles to checkboxes on the account page
 - Changed the slide toggles to checkboxes in the admin control panel
+- Decreased the density of the theme
 - Migrated the style of various components to `@angular/material` `15` (mdc)
 - Upgraded `@angular/cdk` and `@angular/material` from version `15.2.5` to `15.2.6`
 
diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.html b/apps/client/src/app/components/admin-jobs/admin-jobs.html
index b588f3dee..2ae0350fa 100644
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.html
+++ b/apps/client/src/app/components/admin-jobs/admin-jobs.html
@@ -2,10 +2,7 @@
   <div class="row">
     <div class="col">
       <form class="align-items-center d-flex" [formGroup]="filterForm">
-        <mat-form-field
-          appearance="outline"
-          class="compact-with-outline without-hint w-100"
-        >
+        <mat-form-field appearance="outline" class="w-100 without-hint">
           <mat-select formControlName="status">
             <mat-option></mat-option>
             <mat-option
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index f7e084f60..80a285ffd 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -172,7 +172,7 @@
                 <form #couponForm="ngForm" class="align-items-center d-flex">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline mr-2 without-hint"
+                    class="mr-2 without-hint"
                   >
                     <mat-select
                       name="duration"
diff --git a/apps/client/src/app/pages/account/account-page.html b/apps/client/src/app/pages/account/account-page.html
index 0d420c8ba..717b07d3c 100644
--- a/apps/client/src/app/pages/account/account-page.html
+++ b/apps/client/src/app/pages/account/account-page.html
@@ -105,7 +105,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       name="baseCurrency"
@@ -129,7 +129,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       name="language"
@@ -174,7 +174,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       name="locale"
@@ -199,7 +199,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       class="with-placeholder-as-option"
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index ea05051c3..cee7bfd16 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -402,10 +402,6 @@ ngx-skeleton-loader {
 }
 
 .mat-mdc-form-field {
-  &.compact-with-outline {
-    // TODO: Configure density in Angular Material
-  }
-
   &.without-hint {
     .mat-mdc-form-field-subscript-wrapper {
       display: none;
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index ea4008f02..118d53336 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -80,11 +80,12 @@ $gf-theme-default: mat.define-light-theme(
       primary: mat.define-palette($gf-primary),
       accent: mat.define-palette($gf-secondary, 500, 900, A100)
     ),
-    density: 0,
+    density: -3,
     typography: $gf-typography
   )
 );
 @include mat.all-component-themes($gf-theme-default);
+@include mat.button-density(0);
 
 // Create dark theme
 $gf-theme-dark: mat.define-dark-theme(
@@ -93,12 +94,13 @@ $gf-theme-dark: mat.define-dark-theme(
       primary: mat.define-palette($gf-primary),
       accent: mat.define-palette($gf-secondary, 500, 900, A100)
     ),
-    density: 0,
+    density: -3,
     typography: $gf-typography
   )
 );
 .is-dark-theme {
   @include mat.all-component-colors($gf-theme-dark);
+  @include mat.button-density(0);
 }
 
 :root {