revised: contact-form email field

Author: lucas

packages/drafts-realm/contact-form.gts

@@ -4,12 +4,7 @@ import { AddressInfo } from './address-info';
 import { CardDef, field, contains } from 'https://cardstack.com/base/card-api';
 import { Component } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
-import {
-  FieldContainer,
-  CardContainer,
-  IconButton,
-} from '@cardstack/boxel-ui/components';
-import { Sparkle } from '@cardstack/boxel-ui/icons';
+import { FieldContainer, CardContainer } from '@cardstack/boxel-ui/components';
 
 class Isolated extends Component<typeof ContactForm> {
   get hasTitleField() {
@@ -25,15 +20,6 @@ class Isolated extends Component<typeof ContactForm> {
       {{/if}}
 
       <div class='card-form-display'>
-        <IconButton
-          @icon={{Sparkle}}
-          @width='22px'
-          @height='22px'
-          @variant='undefined'
-          class='icon-profile'
-          aria-label='Profile'
-        />
-
         <div class='contact-form-details'>
 
           <div class='field-input'>
@@ -149,14 +135,6 @@ class Isolated extends Component<typeof ContactForm> {
 class View extends Component<typeof ContactForm> {
   <template>
     <CardContainer @displayBoundaries={{true}} class='container'>
-      <IconButton
-        @icon={{Sparkle}}
-        @width='22px'
-        @height='22px'
-        @variant='undefined'
-        class='icon-profile'
-        aria-label='Profile'
-      />
       <div class='content'>
         <label>User</label>
         <h2><@fields.name /></h2>
@@ -200,7 +178,9 @@ class Edit extends Component<typeof ContactForm> {
         <@fields.name />
       </FieldContainer>
 
-      <@fields.email />
+      <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
+        <@fields.email />
+      </FieldContainer>
 
       <FieldContainer @tag='label' @label='Phone' @vertical={{true}}>
         <@fields.phone />

packages/drafts-realm/user-email.gts

@@ -11,7 +11,7 @@ import {
   StringField,
 } from 'https://cardstack.com/base/card-api';
 import { Component } from 'https://cardstack.com/base/card-api';
-import { BoxelInput, FieldContainer } from '@cardstack/boxel-ui/components';
+import { BoxelInput } from '@cardstack/boxel-ui/components';
 import { TextInputValidator } from '../base/text-input-validator';
 
 function isValidEmail(email: string): boolean {
@@ -74,24 +74,12 @@ class View extends Component<typeof UserEmail> {
 
 class Edit extends Component<typeof UserEmail> {
   <template>
-    <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
-      <BoxelInput
-        @value={{this.textInputValidator.asString}}
-        @onInput={{this.textInputValidator.onInput}}
-        @errorMessage={{this.textInputValidator.errorMessage}}
-        @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
-      />
-    </FieldContainer>
-
-    <style>
-      .card-container {
-        padding: 2rem 1rem;
-        display: grid;
-        gap: var(--boxel-sp-sm);
-        grid-template-columns: 1fr;
-        background-color: #eeeeee50;
-      }
-    </style>
+    <BoxelInput
+      @value={{this.textInputValidator.asString}}
+      @onInput={{this.textInputValidator.onInput}}
+      @errorMessage={{this.textInputValidator.errorMessage}}
+      @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
+    />
   </template>
 
   textInputValidator: TextInputValidator<string> = new TextInputValidator(