From 3f98062425a2ee57293a6bb271c6a19331b21fee Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Fri, 6 Oct 2023 14:38:55 -0400
Subject: [PATCH] Polish the contact view UI.

---
 src/www/ui_components/app-root.js     | 10 ++++++++--
 src/www/views/contact_view/index.ts   | 28 +++++++++++++++++++++++++--
 src/www/views/contact_view/stories.ts |  8 +++++---
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/www/ui_components/app-root.js b/src/www/ui_components/app-root.js
index 86595bb6088..2802ceee30a 100644
--- a/src/www/ui_components/app-root.js
+++ b/src/www/ui_components/app-root.js
@@ -65,6 +65,11 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
       <style>
         :host {
           --app-toolbar-height: 40px;
+          --app-toolbar-gutter: 8px;
+          --app-toolbar-button-gutter: 12px;
+          --app-header-height: 56px;
+          --contact-view-gutter: calc(var(--app-toolbar-gutter) + var(--app-toolbar-button-gutter));
+          --contact-view-max-width: 400px;
           --light-green: #2fbea5;
           --medium-green: #009688;
           --dark-green: #263238;
@@ -77,13 +82,13 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         }
 
         app-header {
-          height: 56px;
+          height: var(--app-header-height);
         }
 
         app-toolbar {
           height: var(--app-toolbar-height);
           color: #fff;
-          padding: 8px;
+          padding: var(--app-toolbar-gutter);
           background: var(--dark-green);
           text-align: center;
           display: flex;
@@ -103,6 +108,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         app-toolbar paper-button {
           /* make the ink color (used for tap animations) actually visible */
           --paper-icon-button-ink-color: #eff;
+          padding: var(--app-toolbar-button-gutter);
         }
 
         #app-toolbar-left,
diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts
index 02e30377720..41e94a033e8 100644
--- a/src/www/views/contact_view/index.ts
+++ b/src/www/views/contact_view/index.ts
@@ -45,9 +45,13 @@ export class ContactView extends LitElement {
   static styles = [
     css`
       :host {
+        color: var(--outline-text-color);
         display: block;
         font-family: var(--outline-font-family);
-        padding: var(--outline-gutter);
+        margin: 0 auto;
+        max-width: var(--contact-view-max-width);
+        padding: var(--contact-view-gutter, var(--outline-gutter));
+        width: 100%;
       }
 
       mwc-circular-progress {
@@ -57,11 +61,25 @@ export class ContactView extends LitElement {
         transform: translate(-50%, -50%);
       }
 
+      h1 {
+        font-size: 1rem;
+      }
+
       ol {
         list-style-type: none;
+        padding-inline-start: 0;
       }
 
       mwc-select {
+        /**
+         * The '<app-header-layout>' restricts the stacking context, which means
+         * the select dropdown will get stacked underneath the header.
+         * See https://github.com/PolymerElements/app-layout/issues/279. Setting
+         * a maximum height will make the dropdown small enough to not run into
+         * this issue.
+         */
+        --mdc-menu-max-height: 200px;
+        --mdc-menu-max-width: var(--contact-view-max-width);
         width: 100%;
       }
 
@@ -164,6 +182,11 @@ export class ContactView extends LitElement {
   reset() {
     this.isFormSubmitting = false;
     this.showIssueSelector = false;
+    this.openTicketSelectionOptions.forEach(element => {
+      if (!element.ref.value) return;
+      element.ref.value.checked = false;
+      element.ref.value.disabled = false;
+    });
     this.step = Step.ISSUE_WIZARD;
     this.formValues = {};
   }
@@ -198,7 +221,7 @@ export class ContactView extends LitElement {
   }
 
   private get renderIntroTemplate(): TemplateResult {
-    return html`<p>${this.localize('contact-view-intro')}</p>`;
+    return html`<h1 class="intro">${this.localize('contact-view-intro')}</h1>`;
   }
 
   private get renderForm(): TemplateResult | typeof nothing {
@@ -259,6 +282,7 @@ export class ContactView extends LitElement {
             .label=${this.localize('contact-view-issue')}
             outlined
             ?hidden=${!this.showIssueSelector}
+            ?fixedMenuPosition=${true}
             @selected="${this.selectIssue}"
           >
             ${ContactView.ISSUES[this.variant].map(value => {
diff --git a/src/www/views/contact_view/stories.ts b/src/www/views/contact_view/stories.ts
index 079e6cfe425..2a33a58faba 100644
--- a/src/www/views/contact_view/stories.ts
+++ b/src/www/views/contact_view/stories.ts
@@ -35,16 +35,18 @@ export default {
         defaultValue: AppType.CLIENT,
       },
     },
-    onSupportContacted: {action: 'SupportContacted'},
+    onSuccess: {action: 'success'},
+    onError: {action: 'error'},
   },
 };
 
-export const Example = ({variant, onSupportContacted}: {variant: AppType; onSupportContacted: Function}) =>
+export const Example = ({variant, onSuccess, onError}: {variant: AppType; onSuccess: Function; onError: Function}) =>
   html`
     <contact-view
       .localize=${localize}
       .variant=${variant}
       .errorReporter=${{report: console.log}}
-      @SupportContacted=${onSupportContacted}
+      @success=${onSuccess}
+      @error=${onError}
     ></contact-view>
   `;