Use space tokens in more info dialog area (#28627)

Co-authored-by: Wendelin <[email protected]>

Author: timmo001

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -37,8 +37,8 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */
       scrollbar-width: none; /* Firefox */
-      margin: -2px -24px;
-      padding: 2px 24px;
+      margin: -2px calc(var(--ha-space-6) * -1);
+      padding: 2px var(--ha-space-6);
     }
     .controls-scroll::-webkit-scrollbar {
       display: none;

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -84,8 +84,8 @@ export class HaMoreInfoStateHeader extends LitElement {
       font-weight: var(--ha-font-weight-medium);
       line-height: var(--ha-line-height-normal);
       letter-spacing: 0.1px;
-      padding: 4px 0;
-      margin-bottom: 20px;
+      padding: var(--ha-space-1) 0;
+      margin-bottom: var(--ha-space-5);
       cursor: pointer;
       user-select: none;
       -webkit-user-select: none;

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -268,14 +268,14 @@ class DialogLightColorFavorite extends LitElement {
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 24px;
+          padding: var(--ha-space-6);
           flex: 1;
         }
         .modes {
           display: flex;
           flex-direction: row;
           justify-content: flex-end;
-          padding: 0 24px;
+          padding: 0 var(--ha-space-6);
         }
         .wheel {
           width: 30px;

src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts

@@ -254,14 +254,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: -8px;
+      margin: calc(var(--ha-space-2) * -1);
       flex-wrap: wrap;
       max-width: 250px;
       user-select: none;
     }
 
     .container > * {
-      margin: 8px;
+      margin: var(--ha-space-2);
     }
 
     .color {

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -515,7 +515,7 @@ class LightRgbColorPicker extends LitElement {
         hr {
           border-color: var(--divider-color);
           border-bottom: none;
-          margin: 16px 0;
+          margin: var(--ha-space-4) 0;
         }
       `,
     ];

src/dialogs/more-info/components/more-info-control-style.ts

@@ -15,29 +15,29 @@ export const moreInfoControlStyle = css`
   }
 
   .controls:not(:last-child) {
-    margin-bottom: 24px;
+    margin-bottom: var(--ha-space-6);
   }
 
   .controls > *:not(:last-child) {
-    margin-bottom: 24px;
+    margin-bottom: var(--ha-space-6);
   }
 
   .buttons {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 12px;
+    margin-bottom: var(--ha-space-3);
   }
 
   .buttons > * {
-    margin: 8px;
+    margin: var(--ha-space-2);
   }
 
   ha-attributes {
     display: block;
     width: 100%;
   }
   ha-more-info-control-select-container + ha-attributes:not([empty]) {
-    margin-top: 16px;
+    margin-top: var(--ha-space-4);
   }
 `;

src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

@@ -209,7 +209,7 @@ class MoreInfoSirenAdvancedControls extends LitElement {
           flex-direction: row;
           justify-content: center;
           gap: var(--ha-space-4);
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
         ha-control-button {
           --control-button-border-radius: var(--ha-border-radius-xl);

src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts

@@ -48,7 +48,7 @@ class MoreInfoViewVoiceAssistants extends LitElement {
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 24px;
+          padding: var(--ha-space-6);
           flex: 1;
         }
       `,

src/dialogs/more-info/controls/more-info-automation.ts

@@ -52,15 +52,15 @@ class MoreInfoAutomation extends LitElement {
       justify-content: space-between;
     }
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
     }
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
   `;
 }

src/dialogs/more-info/controls/more-info-camera.ts

@@ -106,7 +106,7 @@ class MoreInfoCamera extends LitElement {
       flex-wrap: wrap;
       justify-content: flex-end;
       box-sizing: border-box;
-      padding: 16px;
+      padding: var(--ha-space-4);
       z-index: 1;
       gap: var(--ha-space-2);
     }