From a9b3eba66e8bc4b7719aa50c2f9fb69b312938c1 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 8 Apr 2025 13:49:37 +0000
Subject: [PATCH] Fix paddings; change label to placeholder

---
 .../settings-dropdown.component.html             |  2 +-
 .../settings-dropdown.component.scss             |  3 ++-
 .../general-settings.component.html              |  1 +
 .../general-settings.component.scss              | 16 +++++-----------
 4 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html
index a8617b90a..ea6194595 100644
--- a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html
+++ b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html
@@ -11,12 +11,12 @@
 </div>
 
 <mat-form-field appearance="outline" class="setting-field">
-  <mat-label>{{ label }}</mat-label>
   <mat-select
     aria-labelledby="{{ key }}-group-label"
     id="{{ key }}-group"
     ngDefaultControl
     class="setting-radio-group"
+    [placeholder]="label"
     [compareWith]="compare"
     [formControlName]="controlName">
     <mat-select-trigger>
diff --git a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss
index b3fe66ee5..e17e02add 100644
--- a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss
+++ b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss
@@ -94,10 +94,11 @@
   font-family: variables.$font-text;
 }
 
-.info-column {
+::ng-deep .info-column {
   display: flex;
   flex-direction: column;
   gap: 6px;
   width: 260px;
   padding: 0 12px;
+  justify-content: center;
 }
diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.html b/modules/ui/src/app/pages/general-settings/general-settings.component.html
index 92ee65fee..0716c617f 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.html
@@ -93,6 +93,7 @@
             data: 'analytics',
           }
         "></ng-container>
+      <mat-divider></mat-divider>
     </section>
     <mat-error
       *ngIf="vm.isSubmitting && isFormError"
diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.scss b/modules/ui/src/app/pages/general-settings/general-settings.component.scss
index b1873d29b..32ff90476 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.scss
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.scss
@@ -21,13 +21,13 @@
   display: flex;
   flex-direction: column;
   flex: 1 0 auto;
-  padding: 6px 22px;
+  padding-top: 4px;
 }
 
 .setting-drawer-content {
   overflow-y: scroll;
   height: max-content;
-  padding: 10px;
+  padding: 8px 32px;
 
   .setting-drawer-content-form-empty {
     grid-template-rows: repeat(2, auto) 1fr;
@@ -54,7 +54,7 @@
 }
 
 .setting-drawer-footer {
-  padding: 0 8px;
+  padding: 16px 40px;
   margin-top: auto;
   display: flex;
   flex-shrink: 0;
@@ -80,6 +80,7 @@
 }
 
 .section-item {
+  height: 88px;
   display: grid;
   grid-template-columns: 1fr 1fr 1.1fr;
   gap: 46px;
@@ -88,6 +89,7 @@
   p {
     margin: 0;
   }
+
   .label-column {
     display: flex;
     flex-direction: column;
@@ -97,14 +99,6 @@
     font-family: variables.$font-text;
   }
 
-  .info-column {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    width: 260px;
-    padding: 0 12px;
-  }
-
   .data-column {
     display: flex;
   }