fix: email input breaking styles of button (#3191)

.changeset/six-scissors-remember.md

@@ -0,0 +1,24 @@
+---
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@apps/laboratory': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+---
+
+Fixes an issue where email input validation errors broke the button styles.

packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts

@@ -72,14 +72,13 @@ export class W3mEmailLoginWidget extends LitElement {
           @focus=${this.onFocusEvent.bind(this)}
           .disabled=${this.loading}
           @inputChange=${this.onEmailInputChange.bind(this)}
-          .errorMessage=${this.error}
         >
         </wui-email-input>
 
         ${this.submitButtonTemplate()}${this.loadingTemplate()}
         <input type="submit" hidden />
       </form>
-      ${this.separatorTemplate()}
+      ${this.templateError()} ${this.separatorTemplate()}
     `
   }
 
@@ -132,6 +131,14 @@ export class W3mEmailLoginWidget extends LitElement {
       : null
   }
 
+  private templateError() {
+    if (this.error) {
+      return html`<wui-text variant="tiny-500" color="error-100">${this.error}</wui-text>`
+    }
+
+    return null
+  }
+
   private onEmailInputChange(event: CustomEvent<string>) {
     this.email = event.detail.trim()
     this.error = ''

packages/scaffold-ui/src/partials/w3m-email-login-widget/styles.ts

@@ -30,4 +30,8 @@ export default css`
   wui-loading-spinner {
     right: var(--wui-spacing-m);
   }
+
+  wui-text {
+    margin: var(--wui-spacing-xxs) var(--wui-spacing-m) var(--wui-spacing-0) var(--wui-spacing-m);
+  }
 `