chore: update settings panel styling

telerik · Sep 20, 2024 · 9d5111b · 9d5111b
1 parent d2f6c1a
commit 9d5111b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html b/...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
@@ -150,34 +150,54 @@ 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);
 }
 
 .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);
 }