From 9d5111b56f9ddc2dfadb1771fef266fefbc861d0 Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Fri, 20 Sep 2024 15:39:03 +0300
Subject: [PATCH] chore: update settings panel styling

---
 .../settings-list.component.html              |  6 ++--
 .../coffee-warehouse/src/styles/main.scss     | 28 ++++++++++++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/examples-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html b/examples-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
index 2bdfe5b7..dd64ac5d 100644
--- a/examples-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
+++ b/examples-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
@@ -4,7 +4,9 @@
     [valuePrimitive]="true"
     (valueChange)="onValueChange($event)"
     textField="text"
-    valueField="text" class="k-mb-4 !k-w-full" placeholder="Write or select type of disability">
+    valueField="text" class="k-mb-4 !k-w-full"
+    [size]="'large'"
+    placeholder="Write or select type of disability">
     <ng-template kendoSuffixTemplate>
         <button kendoButton fillMode="flat" [svgIcon]="microphoneIcon"></button>
     </ng-template>
@@ -52,7 +54,7 @@
         </kendo-formfield>
 
         <kendo-formfield>
-            <button kendoButton themeColor="primary" size="large" [svgIcon]="resetIcon">Reset All Settings</button>
+            <button kendoButton themeColor="primary" size="large" [svgIcon]="resetIcon" class="k-w-full">Reset All Settings</button>
         </kendo-formfield>
     </form>
 </kendo-expansionpanel>
diff --git a/examples-standalone/coffee-warehouse/src/styles/main.scss b/examples-standalone/coffee-warehouse/src/styles/main.scss
index 1476914f..f6f4298e 100644
--- a/examples-standalone/coffee-warehouse/src/styles/main.scss
+++ b/examples-standalone/coffee-warehouse/src/styles/main.scss
@@ -150,23 +150,39 @@ kendo-recurrence-frequency-editor .k-edit-field {
 
 // Settings window
 .settings-panel {
-    --kendo-color-border: var(--kendo-color-subtle);
+    
 }
 
 .settings-panel.k-window {
     border-width: 1px;
     border-style: solid;
     --kendo-border-radius-md: var(--kendo-border-radius-lg);
+    --kendo-color-border: var(--kendo-color-inverse);
 }
 
 .settings-panel .k-expander {
     border-radius: var(--kendo-border-radius-lg);
 }
 
-.settings-panel {
+.settings-panel .k-expander-title {
+    color: var(--kendo-color-inverse);
+}
+
+.settings-panel .k-selected {
     --kendo-color-primary: var(--kendo-color-base-on-surface);
 }
 
+.settings-panel .k-window,
+.settings-panel .k-form {
+    font-size: var(--kendo-font-size-lg);
+    line-height: var(--kendo-line-height-lg);
+}
+
+.settings-panel .k-label {
+    display: block;
+    margin-bottom: var(--kendo-spacing-1);
+}
+
 .common-wrapper {
     margin-top: var(--kendo-spacing-3\.5);
 }
@@ -174,10 +190,14 @@ kendo-recurrence-frequency-editor .k-edit-field {
 .buttons-wrapper {
     display: flex;
     flex-direction: column;
-    gap: var(--kendo-spacing-1);
-    width: 70%;
+    gap: var(--kendo-spacing-2);
+    width: 220px;
 }
 
 .reset-button {
     --kendo-color-primary: #1274AC;
+}
+
+.settings-panel .k-input-solid:hover {
+    border-color: var(--kendo-color-inverse-hover);
 }
\ No newline at end of file