Feature/decrease density of theme (#1846)

* Decrease density

* Update changelog

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`
 

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

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"

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"

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;

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 {