chore: update common buttons styling

telerik · Sep 20, 2024 · 73ac9d7 · 73ac9d7
1 parent 02cc9b6
commit 73ac9d7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 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
@@ -1,3 +1,4 @@
+<kendo-label text="Specify disability:"></kendo-label>
 <kendo-combobox
     [data]="disabilitiesData"
     [valuePrimitive]="true"
@@ -17,32 +18,28 @@
         </kendo-formfield>
         <kendo-formfield>
             <kendo-label text="Color theme:"></kendo-label>
-            <kendo-buttongroup selection="single">
+            <kendo-buttongroup selection="single" width="100%">
                 <button kendoButton size="large" [svgIcon]="contrastIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'contrast' ? 'defaultTheme' : 'contrast'})" [selected]="getSetting('colorTheme') === 'contrast'">Contrast</button>
                 <button kendoButton size="large" [svgIcon]="darkModeIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'dark' ? 'defaultTheme' : 'dark'})" [selected]="getSetting('colorTheme') === 'dark'">Dark</button>
             </kendo-buttongroup>
         </kendo-formfield>
 
         <kendo-formfield>
             <kendo-label text="Font:"></kendo-label>
-            <kendo-buttongroup selection="single">
+            <kendo-buttongroup selection="single" width="100%">
                 <button kendoButton [svgIcon]="fontIcon" size="large" (click)="settingChange({'font': getSetting('font') === 'legible' ? 'defaultFont' : 'legible'})" [selected]="getSetting('font') === 'legible'">Legible Font</button>
                 <button kendoButton [svgIcon]="dyslexiaFontIcon" size="large" (click)="settingChange({'font': getSetting('font') === 'dyslexia' ? 'defaultFont' : 'dyslexia'})" [selected]="getSetting('font') === 'dyslexia'">Dyslexia Font</button>
             </kendo-buttongroup>
         </kendo-formfield>
 
-        <kendo-formfield>
+        <div class="common-wrapper">
             <kendo-label text="Common:"></kendo-label>
-            <button kendoButton size="large" [svgIcon]="underlineIcon" [toggleable]="true" (selectedChange)="settingChange({'underlineLinks': $event})" [selected]="getSetting('underlineLinks')">Underiline Links</button>
-        </kendo-formfield>
-
-        <kendo-formfield>
-            <button kendoButton size="large" [svgIcon]="pauseIcon" [toggleable]="true" (selectedChange)="settingChange({'pauseAnimations': $event})" [selected]="getSetting('pauseAnimations')">Pause Animation</button>
-        </kendo-formfield>
-
-        <kendo-formfield>
-            <button kendoButton size="large" [svgIcon]="resizeIcon" [toggleable]="true" (selectedChange)="settingChange({'lgSizeWidgets': $event})" [selected]="getSetting('lgSizeWidgets')">Large Size Widgets</button>
-        </kendo-formfield>
+            <div class="buttons-wrapper">
+                <button kendoButton size="large" [svgIcon]="underlineIcon" [toggleable]="true" (selectedChange)="settingChange({'underlineLinks': $event})" [selected]="getSetting('underlineLinks')">Underiline Links</button>
+                <button kendoButton size="large" [svgIcon]="pauseIcon" [toggleable]="true" (selectedChange)="settingChange({'pauseAnimations': $event})" [selected]="getSetting('pauseAnimations')">Pause Animation</button>
+                <button kendoButton size="large" [svgIcon]="resizeIcon" [toggleable]="true" (selectedChange)="settingChange({'lgSizeWidgets': $event})" [selected]="getSetting('lgSizeWidgets')">Large Size Widgets</button>
+            </div>
+        </div>
 
         <kendo-formfield>
             <kendo-label text="Line Height:"></kendo-label>

diff --git a/examples-standalone/coffee-warehouse/src/styles/main.scss b/examples-standalone/coffee-warehouse/src/styles/main.scss
@@ -147,10 +147,14 @@ kendo-recurrence-frequency-editor .k-edit-field {
     color: var(--kendo-color-base-on-surface);
 }
 
+// Settings window
+.settings-panel {
+    --kendo-color-border: var(--kendo-color-subtle);
+}
+
 .settings-panel.k-window {
     border-width: 1px;
     border-style: solid;
-    border-color: var(--kendo-color-base-on-surface);
     --kendo-border-radius-md: var(--kendo-border-radius-lg);
 }
 
@@ -159,5 +163,20 @@ kendo-recurrence-frequency-editor .k-edit-field {
 }
 
 .settings-panel {
-    --kendo-color-border: var(--kendo-color-subtle);
+    --kendo-color-primary: var(--kendo-color-base-on-surface);
+}
+
+.common-wrapper {
+    margin-top: var(--kendo-spacing-3\.5);
+}
+
+.buttons-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kendo-spacing-1);
+    width: 70%;
+}
+
+.reset-button {
+    --kendo-color-primary: #1274AC;
 }