Feature/improve density of various selectors (#1283)

* Improve density

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the style of various selectors (density)
+
 ## 1.196.0 - 22.09.2022
 
 ### Added

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -2,7 +2,10 @@
   <div class="row">
     <div class="col">
       <form class="align-items-center d-flex" [formGroup]="filterForm">
-        <mat-form-field appearance="outline" class="flex-grow-1">
+        <mat-form-field
+          appearance="outline"
+          class="compact-with-outline flex-grow-1 mr-2 without-hint"
+        >
           <mat-select formControlName="status">
             <mat-option></mat-option>
             <mat-option
@@ -13,7 +16,7 @@
           </mat-select>
         </mat-form-field>
         <button
-          class="ml-1"
+          class="mt-1"
           color="warn"
           mat-flat-button
           (click)="onDeleteJobs()"

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -162,8 +162,11 @@
                 </button>
               </div>
               <div class="mt-2">
-                <form #couponForm="ngForm">
-                  <mat-form-field appearance="outline" class="mr-2">
+                <form #couponForm="ngForm" class="align-items-center d-flex">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline mr-2 without-hint"
+                  >
                     <mat-select
                       name="duration"
                       [value]="couponDuration"
@@ -176,6 +179,7 @@
                     </mat-select>
                   </mat-form-field>
                   <button
+                    class="mt-1"
                     color="primary"
                     mat-flat-button
                     (click)="onAddCoupon()"

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html

@@ -10,7 +10,11 @@
     </div>
   </div>
   <div class="col-md-6 col-xs-12 d-flex justify-content-end">
-    <mat-form-field appearance="outline" class="w-100" color="accent">
+    <mat-form-field
+      appearance="outline"
+      class="w-100 without-hint"
+      color="accent"
+    >
       <mat-label i18n>Compare with...</mat-label>
       <mat-select
         name="benchmark"
@@ -26,7 +30,7 @@
     </mat-form-field>
   </div>
 </div>
-<div *ngIf="user.settings.viewMode !== 'ZEN'" class="mb-3 text-center">
+<div *ngIf="user.settings.viewMode !== 'ZEN'" class="my-2 text-center">
   <gf-toggle
     [defaultValue]="user?.settings?.dateRange"
     [isLoading]="isLoading"

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

@@ -94,7 +94,10 @@
                   <ng-container i18n>Base Currency</ng-container>
                 </div>
                 <div class="pl-1 w-50">
-                  <mat-form-field appearance="outline" class="w-100">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
                     <mat-select
                       name="baseCurrency"
                       [disabled]="!hasPermissionToUpdateUserSettings"
@@ -116,7 +119,10 @@
                   <div class="hint-text text-muted" i18n>Beta</div>
                 </div>
                 <div class="pl-1 w-50">
-                  <mat-form-field appearance="outline" class="w-100">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
                     <mat-select
                       name="language"
                       [disabled]="!hasPermissionToUpdateUserSettings"
@@ -139,7 +145,10 @@
                   </div>
                 </div>
                 <div class="pl-1 w-50">
-                  <mat-form-field appearance="outline" class="w-100">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
                     <mat-select
                       name="locale"
                       [disabled]="!hasPermissionToUpdateUserSettings"
@@ -162,7 +171,10 @@
                 </div>
                 <div class="pl-1 w-50">
                   <div class="align-items-center d-flex overflow-hidden">
-                    <mat-form-field appearance="outline" class="w-100">
+                    <mat-form-field
+                      appearance="outline"
+                      class="compact-with-outline w-100 without-hint"
+                    >
                       <mat-select
                         name="viewMode"
                         [disabled]="!hasPermissionToUpdateViewMode"

apps/client/src/styles.scss

@@ -146,13 +146,6 @@ ngx-skeleton-loader {
   @include gf-table;
 }
 
-.mat-fab,
-.mat-flat-button {
-  &.mat-primary {
-    color: rgba(var(--light-primary-text)) !important;
-  }
-}
-
 .mat-card {
   &:not([class*='mat-elevation-z']) {
     border: 1px solid rgba(var(--dark-dividers));
@@ -164,6 +157,49 @@ ngx-skeleton-loader {
   margin: 0 !important;
 }
 
+.mat-fab,
+.mat-flat-button {
+  &.mat-primary {
+    color: rgba(var(--light-primary-text)) !important;
+  }
+}
+
+.mat-form-field {
+  &.compact-with-outline {
+    .mat-form-field-wrapper {
+      margin: 0.5rem 0 0.25rem;
+      padding-bottom: 1rem;
+
+      .mat-form-field-infix {
+        border-top-width: 0;
+        padding: 1rem 0 0.75rem;
+
+        .mat-form-field-label {
+          margin-top: 0.1rem;
+        }
+
+        .mat-select-arrow-wrapper {
+          transform: none;
+        }
+      }
+
+      .mat-form-field-prefix {
+        top: 0;
+      }
+
+      .mat-form-field-suffix {
+        top: 0;
+      }
+    }
+  }
+
+  &.without-hint {
+    .mat-form-field-wrapper {
+      padding-bottom: 0;
+    }
+  }
+}
+
 .no-min-width {
   min-width: unset !important;
 }