Improve password show/hide buttons (#18176)

home-assistant · Oct 10, 2023 · 8f1a6ef · 8f1a6ef
1 parent b3f1783
commit 8f1a6ef
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 21 deletions.
diff --git a/src/auth/ha-auth-form-string.ts b/src/auth/ha-auth-form-string.ts
@@ -26,14 +26,13 @@ export class HaAuthFormString extends HaFormString {
         }
         ha-auth-form-string ha-icon-button {
           position: absolute;
-          top: 1em;
-          right: 12px;
-          --mdc-icon-button-size: 24px;
-          color: var(--secondary-text-color);
-        }
-        ha-auth-form-string ha-icon-button {
+          top: 8px;
+          right: 8px;
           inset-inline-start: initial;
-          inset-inline-end: 12px;
+          inset-inline-end: 8px;
+          --mdc-icon-button-size: 40px;
+          --mdc-icon-size: 20px;
+          color: var(--secondary-text-color);
           direction: var(--direction);
         }
       </style>
@@ -63,7 +62,7 @@ export class HaAuthFormString extends HaFormString {
         .validationMessage=${this.schema.required ? "Required" : undefined}
         @input=${this._valueChanged}
         @change=${this._valueChanged}
-        ></ha-auth-textfield> 
+        ></ha-auth-textfield>
         ${this.renderIcon()}
       </ha-auth-textfield>
     `;

diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
@@ -138,15 +138,13 @@ export class HaFormString extends LitElement implements HaFormElement {
       }
       ha-icon-button {
         position: absolute;
-        top: 1em;
-        right: 12px;
-        --mdc-icon-button-size: 24px;
-        color: var(--secondary-text-color);
-      }
-
-      ha-icon-button {
+        top: 8px;
+        right: 8px;
         inset-inline-start: initial;
-        inset-inline-end: 12px;
+        inset-inline-end: 8px;
+        --mdc-icon-button-size: 40px;
+        --mdc-icon-size: 20px;
+        color: var(--secondary-text-color);
         direction: var(--direction);
       }
     `;

diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
@@ -111,13 +111,13 @@ export class HaTextSelector extends LitElement {
       }
       ha-icon-button {
         position: absolute;
-        top: 10px;
-        right: 10px;
-        --mdc-icon-button-size: 36px;
+        top: 8px;
+        right: 8px;
+        inset-inline-start: initial;
+        inset-inline-end: 8px;
+        --mdc-icon-button-size: 40px;
         --mdc-icon-size: 20px;
         color: var(--secondary-text-color);
-        inset-inline-start: initial;
-        inset-inline-end: 10px;
         direction: var(--direction);
       }
     `;