Change style to filled fields without color background to stay consis…

…tent with our Material 1 text fields.
Jigsaw-Code · Oct 9, 2023 · 6249e03 · 6249e03
1 parent afd41e0
commit 6249e03
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 241 deletions.
diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts
@@ -26,7 +26,6 @@ import {Radio} from '@material/mwc-radio';
 import {SingleSelectedEvent} from '@material/mwc-list/mwc-list';
 
 import './support_form';
-import {CardType} from '../shared/card';
 import {IssueType, UNSUPPORTED_ISSUE_TYPE_HELPPAGES} from './issue_type';
 import {AppType} from './app_type';
 import {FormValues, SupportForm, ValidFormValues} from './support_form';
@@ -45,15 +44,20 @@ export class ContactView extends LitElement {
   static styles = [
     css`
       :host {
+        background: #fff;
         color: var(--outline-text-color);
-        display: block;
         font-family: var(--outline-font-family);
-        margin: 0 auto;
-        max-width: var(--contact-view-max-width);
         padding: var(--contact-view-gutter, var(--outline-gutter));
         width: 100%;
       }
 
+      :host > * {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: var(--contact-view-max-width);
+      }
+
       mwc-circular-progress {
         left: 50%;
         position: absolute;
@@ -66,10 +70,6 @@ export class ContactView extends LitElement {
         margin-bottom: var(--contact-view-gutter, var(--outline-gutter));
       }
 
-      outline-card {
-        width: 100%;
-      }
-
       p {
         margin-top: .25rem;
       }
@@ -89,8 +89,11 @@ export class ContactView extends LitElement {
          * this issue.
          */
         --mdc-menu-max-height: 200px;
-        --mdc-menu-max-width: calc(100vw - calc(var(--outline-gutter) * 4));
+        --mdc-menu-max-width: min(calc(100vw - calc(var(--outline-gutter) * 4)), var(--contact-view-max-width));
+        --mdc-ripple-color: none;
+        --mdc-select-fill-color: none;
         margin-top: 1rem;
+        max-width: var(--contact-view-max-width);
         width: 100%;
       }
 
@@ -231,7 +234,7 @@ export class ContactView extends LitElement {
   }
 
   private get renderIntroTemplate(): TemplateResult {
-    return html`<h1 class="intro">${this.localize('contact-view-intro')}</h1>`;
+    return html`<p class="intro">${this.localize('contact-view-intro')}</p>`;
   }
 
   private get renderForm(): TemplateResult | typeof nothing {
@@ -260,52 +263,49 @@ export class ContactView extends LitElement {
       }
 
       case Step.EXIT: {
-        return html` <outline-card class="exit" .type=${CardType.Elevated}> ${this.exitTemplate} </outline-card> `;
+        return html` <p class="exit">${this.exitTemplate}</p>`;
       }
 
       case Step.ISSUE_WIZARD:
       default: {
         return html`
           ${this.renderIntroTemplate}
 
-          <outline-card .type=${CardType.Elevated}>
-            <p>${this.localize('contact-view-open-ticket')}</p>
-
-            <ol>
-              ${this.openTicketSelectionOptions.map(
-                element => html`
-                  <li>
-                    <mwc-formfield .label=${this.localize(element.labelMsg)}>
-                      <mwc-radio
-                        name="open-ticket"
-                        .value="${element.value}"
-                        required
-                        @change=${this.selectHasOpenTicket}
-                        ${ref(element.ref)}
-                      >
-                      </mwc-radio>
-                    </mwc-formfield>
-                  </li>
-                `
-              )}
-            </ol>
-
-            <mwc-select
-              .label=${this.localize('contact-view-issue')}
-              outlined
-              ?hidden=${!this.showIssueSelector}
-              ?fixedMenuPosition=${true}
-              @selected="${this.selectIssue}"
-            >
-              ${ContactView.ISSUES[this.variant].map(value => {
-                return html`
-                  <mwc-list-item value="${value}">
-                    <span>${this.localize(`contact-view-issue-${value}`)}</span>
-                  </mwc-list-item>
-                `;
-              })}
-            </mwc-select>
-          </outline-card>
+          <p>${this.localize('contact-view-open-ticket')}</p>
+
+          <ol>
+            ${this.openTicketSelectionOptions.map(
+              element => html`
+                <li>
+                  <mwc-formfield .label=${this.localize(element.labelMsg)}>
+                    <mwc-radio
+                      name="open-ticket"
+                      .value="${element.value}"
+                      required
+                      @change=${this.selectHasOpenTicket}
+                      ${ref(element.ref)}
+                    >
+                    </mwc-radio>
+                  </mwc-formfield>
+                </li>
+              `
+            )}
+          </ol>
+
+          <mwc-select
+            .label=${this.localize('contact-view-issue')}
+            ?hidden=${!this.showIssueSelector}
+            ?fixedMenuPosition=${true}
+            @selected="${this.selectIssue}"
+          >
+            ${ContactView.ISSUES[this.variant].map(value => {
+              return html`
+                <mwc-list-item value="${value}">
+                  <span>${this.localize(`contact-view-issue-${value}`)}</span>
+                </mwc-list-item>
+              `;
+            })}
+          </mwc-select>
         `;
       }
     }

diff --git a/src/www/views/contact_view/support_form/index.ts b/src/www/views/contact_view/support_form/index.ts
@@ -22,7 +22,6 @@ import '@material/mwc-button';
 import '@material/mwc-select';
 import '@material/mwc-textarea';
 import '@material/mwc-textfield';
-import {CardType} from '../../shared/card';
 import {AppType} from '../app_type';
 import {TextField} from '@material/mwc-textfield';
 import {SelectedDetail} from '@material/mwc-menu/mwc-menu-base';
@@ -56,11 +55,10 @@ export class SupportForm extends LitElement {
   static styles = [
     css`
       :host {
+        --mdc-ripple-color: none;
+        --mdc-text-field-fill-color: none;
         font-family: var(--outline-font-family);
-      }
-
-      outline-card {
-        min-width: 100%;
+        width: 100%;
       }
 
       mwc-select {
@@ -78,6 +76,11 @@ export class SupportForm extends LitElement {
         font-size: 0.8rem;
         text-align: end;
       }
+
+      .actions {
+        display: flex;
+        justify-content: end;
+      }
     `,
   ];
 
@@ -159,7 +162,6 @@ export class SupportForm extends LitElement {
         .value=${live(this.values.cloudProvider ?? '')}
         .disabled=${this.disabled}
         required
-        outlined
         @selected=${(e: CustomEvent<SelectedDetail<number>>) => {
           if (e.detail.index !== -1) {
             this.values.cloudProvider = providers[e.detail.index].value;
@@ -183,7 +185,6 @@ export class SupportForm extends LitElement {
         .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
         .disabled=${this.disabled}
         required
-        outlined
         @input=${this.handleTextInput}
         @blur=${this.checkFormValidity}
       ></mwc-textfield>
@@ -193,61 +194,56 @@ export class SupportForm extends LitElement {
   render() {
     return html`
       <form ${ref(this.formRef)} @submit=${this.submit}>
-        <outline-card .type=${CardType.Elevated}>
-          <mwc-textfield
-            name="email"
-            type="email"
-            .label=${this.localize('support-form-email')}
-            .value=${live(this.values.email ?? '')}
-            .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
-            autoValidate
-            .validationMessage=${this.localize('support-form-email-invalid')}
-            .disabled=${this.disabled}
-            required
-            outlined
-            @input=${this.handleTextInput}
-            @blur=${this.checkFormValidity}
-          ></mwc-textfield>
-
-          ${this.renderCloudProviderInputField} ${this.renderAccessKeySourceInputField}
-
-          <mwc-textfield
-            name="subject"
-            .label=${this.localize('support-form-subject')}
-            .value=${live(this.values.subject ?? '')}
-            .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
-            .disabled=${this.disabled}
-            required
-            outlined
-            @input=${this.handleTextInput}
-            @blur=${this.checkFormValidity}
-          ></mwc-textfield>
-          <mwc-textarea
-            name="description"
-            .label=${this.localize('support-form-description')}
-            .value=${live(this.values.description ?? '')}
-            rows="5"
-            .maxLength=${SupportForm.MAX_LENGTH_DESCRIPTION}
-            .disabled=${this.disabled}
-            required
-            outlined
-            @input=${this.handleTextInput}
-            @blur=${this.checkFormValidity}
-          >
-          </mwc-textarea>
-
-          <p>* = ${this.localize('support-form-required-field')}</p>
-
-          <span slot="card-actions">
-            <mwc-button .label=${this.localize('cancel')} .disabled=${this.disabled} @click=${this.cancel}></mwc-button>
-            <mwc-button
-              type="submit"
-              .label=${this.localize('submit')}
-              .disabled=${!this.valid || this.disabled}
-              @click=${this.submit}
-            ></mwc-button>
-          </span>
-        </outline-card>
+        <mwc-textfield
+          name="email"
+          type="email"
+          .label=${this.localize('support-form-email')}
+          .value=${live(this.values.email ?? '')}
+          .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
+          autoValidate
+          .validationMessage=${this.localize('support-form-email-invalid')}
+          .disabled=${this.disabled}
+          required
+          @input=${this.handleTextInput}
+          @blur=${this.checkFormValidity}
+        ></mwc-textfield>
+
+        ${this.renderCloudProviderInputField} ${this.renderAccessKeySourceInputField}
+
+        <mwc-textfield
+          name="subject"
+          .label=${this.localize('support-form-subject')}
+          .value=${live(this.values.subject ?? '')}
+          .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
+          .disabled=${this.disabled}
+          required
+          @input=${this.handleTextInput}
+          @blur=${this.checkFormValidity}
+        ></mwc-textfield>
+        <mwc-textarea
+          name="description"
+          .label=${this.localize('support-form-description')}
+          .value=${live(this.values.description ?? '')}
+          rows="5"
+          .maxLength=${SupportForm.MAX_LENGTH_DESCRIPTION}
+          .disabled=${this.disabled}
+          required
+          @input=${this.handleTextInput}
+          @blur=${this.checkFormValidity}
+        >
+        </mwc-textarea>
+
+        <p>* = ${this.localize('support-form-required-field')}</p>
+
+        <span class="actions">
+          <mwc-button .label=${this.localize('cancel')} .disabled=${this.disabled} @click=${this.cancel}></mwc-button>
+          <mwc-button
+            type="submit"
+            .label=${this.localize('submit')}
+            .disabled=${!this.valid || this.disabled}
+            @click=${this.submit}
+          ></mwc-button>
+        </span>
       </form>
     `;
   }

diff --git a/src/www/views/shared/card/index.ts b/src/www/views/shared/card/index.ts