From 8da44424dc0cc12b98c49c566b63b8a5b40d8ca5 Mon Sep 17 00:00:00 2001
From: kevgliss <kevgliss@gmail.com>
Date: Thu, 16 Nov 2023 08:53:54 -0800
Subject: [PATCH] Aligns form styles and reverts project autocomplete (#3989)

* Aligns form styles and reverts project autocomplete

* Adding cases

* Update src/dispatch/static/dispatch/src/auth/Register.vue

Co-authored-by: Marc Vilanova <39573146+mvilanova@users.noreply.github.com>

---------

Co-authored-by: Marc Vilanova <39573146+mvilanova@users.noreply.github.com>
---
 .../static/dispatch/src/auth/Login.vue        |   2 +-
 .../static/dispatch/src/auth/Register.vue     |  30 ++--
 .../static/dispatch/src/case/DetailsTab.vue   |   8 +-
 .../dispatch/src/case/ReportReceiptCard.vue   |  14 +-
 .../src/case/ReportSubmissionCard.vue         |  60 ++++----
 .../src/components/layouts/BasicLayout.vue    |   4 +-
 .../dispatch/src/incident/ReportForm.vue      |   1 -
 .../src/incident/ReportReceiptCard.vue        |  16 +-
 .../src/incident/ReportSubmissionCard.vue     | 140 +++++++++---------
 .../static/dispatch/src/styles/index.scss     |   4 +
 10 files changed, 148 insertions(+), 131 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/auth/Login.vue b/src/dispatch/static/dispatch/src/auth/Login.vue
index 7efe373e44f2..e837b50fdc6c 100644
--- a/src/dispatch/static/dispatch/src/auth/Login.vue
+++ b/src/dispatch/static/dispatch/src/auth/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <v-form @submit.prevent="basicLogin({ email, password })" v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card class="mx-auto ma-4" max-width="600" variant="outlined" :loading="loading">
       <v-card-title> Login </v-card-title>
       <v-card-text>
         <v-container>
diff --git a/src/dispatch/static/dispatch/src/auth/Register.vue b/src/dispatch/static/dispatch/src/auth/Register.vue
index 1b016554e8a5..f8efade92036 100644
--- a/src/dispatch/static/dispatch/src/auth/Register.vue
+++ b/src/dispatch/static/dispatch/src/auth/Register.vue
@@ -1,6 +1,6 @@
 <template>
   <v-form @submit.prevent="register({ email, password })" v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card class="mx-auto ma-4" variant="outlined" max-width="600" flat :loading="loading">
       <v-card-title> Register </v-card-title>
       <v-card-text>
         <v-container>
@@ -26,20 +26,22 @@
         </v-container>
       </v-card-text>
       <v-card-actions>
-        <v-list-item lines="two">
-          <v-list-item-subtitle>
-            Have a account? <router-link :to="{ name: 'BasicLogin' }"> Login </router-link>
-          </v-list-item-subtitle>
-
-          <template #append>
-            <v-btn type="submit" color="info" :loading="loading" :disabled="!isValid.value">
-              Register
-              <template #loader>
-                <v-progress-linear indeterminate color="white" />
-              </template>
-            </v-btn>
+        <div class="text-subheader-2 pl-4 text-medium-emphasis">
+          Have an account? <router-link :to="{ name: 'BasicLogin' }"> Login </router-link>
+        </div>
+        <v-spacer />
+        <v-btn
+          type="submit"
+          variant="elevated"
+          color="info"
+          :loading="loading"
+          :disabled="!isValid.value"
+        >
+          Register
+          <template #loader>
+            <v-progress-linear indeterminate color="white" />
           </template>
-        </v-list-item>
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-form>
diff --git a/src/dispatch/static/dispatch/src/case/DetailsTab.vue b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
index d0ae17432ce9..e9a92feb0333 100644
--- a/src/dispatch/static/dispatch/src/case/DetailsTab.vue
+++ b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
@@ -58,7 +58,7 @@
         />
       </v-col>
       <v-col cols="6">
-        <project-auto-complete v-model="project" />
+        <project-select v-model="project" />
       </v-col>
       <v-col cols="6">
         <case-type-select v-model="case_type" :project="project" />
@@ -82,7 +82,7 @@
           v-model="visibility"
           label="Visibility"
           :items="visibilities"
-          hint="The visibilty of the case."
+          hint="The visibility of the case."
         />
       </v-col>
       <v-col cols="12">
@@ -131,7 +131,7 @@ import CaseSeveritySelect from "@/case/severity/CaseSeveritySelect.vue"
 import CaseTypeSelect from "@/case/type/CaseTypeSelect.vue"
 import DateTimePickerMenu from "@/components/DateTimePickerMenu.vue"
 import IncidentFilterCombobox from "@/incident/IncidentFilterCombobox.vue"
-import ProjectAutoComplete from "@/project/ProjectAutoComplete.vue"
+import ProjectSelect from "@/project/ProjectSelect.vue"
 import ParticipantSelect from "@/components/ParticipantSelect.vue"
 import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
 
@@ -151,7 +151,7 @@ export default {
     DateTimePickerMenu,
     IncidentFilterCombobox,
     ParticipantSelect,
-    ProjectAutoComplete,
+    ProjectSelect,
     TagFilterAutoComplete,
   },
 
diff --git a/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue b/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue
index 7864f972b9fc..a9a5abf12cb9 100644
--- a/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue
+++ b/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue
@@ -1,7 +1,6 @@
 <template>
-  <v-card class="mx-auto ma-4" max-width="600">
+  <v-card class="mx-auto ma-4" title="Case Report" max-width="600">
     <v-card-text>
-      <p class="text-h3 text--primary">Issue Report</p>
       <p>
         This page will be populated with case resources as they are created (if available). If you
         have any questions, please feel free to review the Frequently Asked Questions (FAQ) document
@@ -134,12 +133,13 @@
           </span>
         </v-list-group>
       </v-list>
-      <v-container>
-        <v-col cols="12">
-          <v-btn color="info" variant="flat" @click="resetSelected()"> Report another issue </v-btn>
-        </v-col>
-      </v-container>
     </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="info" block variant="flat" @click="resetSelected()">
+        Report Another Issue
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 
diff --git a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
index f6eb7c614a06..e00fa54d05cd 100644
--- a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
+++ b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
@@ -1,18 +1,24 @@
 <template>
   <v-form @submit.prevent v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card
+      class="mx-auto ma-4"
+      max-width="600"
+      variant="outlined"
+      title="          Open a Case
+"
+      :loading="loading"
+    >
+      <template v-slot:append>
+        <v-tooltip location="bottom">
+          <template #activator="{ props }">
+            <v-btn icon variant="text" v-bind="props" @click="copyView">
+              <v-icon>mdi-content-copy</v-icon>
+            </v-btn>
+          </template>
+          <span>Copy current fields as template.</span>
+        </v-tooltip>
+      </template>
       <v-card-text>
-        <p class="text-h4 text--primary">
-          Open a Case
-          <v-tooltip location="bottom">
-            <template #activator="{ props }">
-              <v-btn icon variant="text" v-bind="props" @click="copyView">
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
-            </template>
-            <span>Copy current fields as template.</span>
-          </v-tooltip>
-        </p>
         <p>
           Cases are meant to triage events that do not raise to the level of incidents, but can be
           escalated to incidents if necessary. If you suspect a security issue and need help, please
@@ -68,23 +74,25 @@
                 <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
               </v-col>
             </v-row>
-            <template>
-              <v-btn
-                color="info"
-                variant="flat"
-                :loading="loading"
-                :disabled="!isValid.value"
-                @click="report()"
-              >
-                Submit
-                <template #loader>
-                  <v-progress-linear indeterminate color="white" />
-                </template>
-              </v-btn>
-            </template>
           </v-container>
         </v-form>
       </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="info"
+          variant="flat"
+          block
+          :loading="loading"
+          :disabled="!isValid.value"
+          @click="report()"
+        >
+          Submit
+          <template #loader>
+            <v-progress-linear indeterminate color="white" />
+          </template>
+        </v-btn>
+      </v-card-actions>
     </v-card>
   </v-form>
 </template>
diff --git a/src/dispatch/static/dispatch/src/components/layouts/BasicLayout.vue b/src/dispatch/static/dispatch/src/components/layouts/BasicLayout.vue
index 81004709c0ea..85c77fbc674a 100644
--- a/src/dispatch/static/dispatch/src/components/layouts/BasicLayout.vue
+++ b/src/dispatch/static/dispatch/src/components/layouts/BasicLayout.vue
@@ -10,9 +10,7 @@
           </router-link>
         </template>
       </v-app-bar>
-      <v-card>
-        <router-view :key="$route.path" />
-      </v-card>
+      <router-view :key="$route.path" />
     </v-main>
   </v-app>
 </template>
diff --git a/src/dispatch/static/dispatch/src/incident/ReportForm.vue b/src/dispatch/static/dispatch/src/incident/ReportForm.vue
index d3a1e6cacf0c..902c9cf4b20b 100644
--- a/src/dispatch/static/dispatch/src/incident/ReportForm.vue
+++ b/src/dispatch/static/dispatch/src/incident/ReportForm.vue
@@ -1,7 +1,6 @@
 <template>
   <v-app>
     <notification-snackbars-wrapper />
-
     <v-main>
       <v-app-bar flat style="border-bottom: 1px solid #d2d2d2 !important" color="background0">
         <template #prepend>
diff --git a/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue b/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue
index d9f2c99ce7b8..7a3fc0f16767 100644
--- a/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue
+++ b/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue
@@ -1,7 +1,6 @@
 <template>
-  <v-card class="mx-auto ma-4" max-width="600">
+  <v-card class="mx-auto ma-4" variant="outlined" title="Incident Report" max-width="600">
     <v-card-text>
-      <p class="text-h3 text--primary">Incident Report</p>
       <p>
         This page will be populated with incident resources as they are created (if available). If
         you have any questions, please feel free to review the Frequently Asked Questions (FAQ)
@@ -171,14 +170,13 @@
           </span>
         </v-list-group>
       </v-list>
-      <v-container>
-        <v-col cols="12">
-          <v-btn color="info" variant="flat" @click="resetSelected()">
-            Report another incident
-          </v-btn>
-        </v-col>
-      </v-container>
     </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="info" block variant="flat" @click="resetSelected()">
+        Report Another Incident
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 
diff --git a/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue
index 0a64f0cf0a25..fddf14371df4 100644
--- a/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue
+++ b/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue
@@ -1,18 +1,23 @@
 <template>
   <v-form @submit.prevent="report()" v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card
+      class="mx-auto ma-4"
+      title="Report Incident"
+      max-width="600"
+      variant="outlined"
+      :loading="loading"
+    >
+      <template v-slot:append>
+        <v-tooltip location="bottom">
+          <template #activator="{ props }">
+            <v-btn icon variant="text" v-bind="props" @click="copyView">
+              <v-icon>mdi-content-copy</v-icon>
+            </v-btn>
+          </template>
+          <span>Copy current fields as template.</span>
+        </v-tooltip>
+      </template>
       <v-card-text>
-        <p class="text-h4 text--primary">
-          Report Incident
-          <v-tooltip location="bottom">
-            <template #activator="{ props }">
-              <v-btn icon variant="text" v-bind="props" @click="copyView">
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
-            </template>
-            <span>Copy current fields as template.</span>
-          </v-tooltip>
-        </p>
         <p>
           If you suspect an incident and need help, please fill out this form to the best of your
           abilities.
@@ -24,61 +29,64 @@
             <v-icon size="small">mdi-open-in-new</v-icon>
           </a>
         </p>
-        <v-container>
-          <v-row>
-            <v-col cols="12">
-              <v-textarea
-                v-model="title"
-                label="Title"
-                hint="A brief explanatory title. You can change this later."
-                clearable
-                auto-grow
-                rows="2"
-                required
-                name="Title"
-                :rules="[rules.required]"
-              />
-            </v-col>
-            <v-col cols="12">
-              <v-textarea
-                v-model="description"
-                label="Description"
-                hint="A summary of what you know so far. It's all right if this is incomplete."
-                clearable
-                auto-grow
-                rows="3"
-                required
-                name="Description"
-                :rules="[rules.required]"
-              />
-            </v-col>
-            <v-col cols="12">
-              <project-select v-model="project" />
-            </v-col>
-            <v-col cols="12">
-              <incident-type-select :project="project" v-model="incident_type" />
-            </v-col>
-            <v-col cols="12">
-              <incident-priority-select :project="project" v-model="incident_priority" />
-            </v-col>
-            <v-col cols="12">
-              <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
-            </v-col>
-          </v-row>
-          <v-btn
-            color="info"
-            variant="flat"
-            :loading="loading"
-            :disabled="!isValid.value"
-            type="submit"
-          >
-            Submit
-            <template #loader>
-              <v-progress-linear indeterminate color="white" />
-            </template>
-          </v-btn>
-        </v-container>
+        <v-row>
+          <v-col cols="12">
+            <v-textarea
+              v-model="title"
+              label="Title"
+              hint="A brief explanatory title. You can change this later."
+              clearable
+              auto-grow
+              rows="2"
+              required
+              name="Title"
+              :rules="[rules.required]"
+            />
+          </v-col>
+          <v-col cols="12">
+            <v-textarea
+              v-model="description"
+              label="Description"
+              hint="A summary of what you know so far. It's all right if this is incomplete."
+              clearable
+              auto-grow
+              rows="3"
+              required
+              name="Description"
+              :rules="[rules.required]"
+            />
+          </v-col>
+          <v-col cols="12">
+            <project-select v-model="project" />
+          </v-col>
+          <v-col cols="12">
+            <incident-type-select :project="project" v-model="incident_type" />
+          </v-col>
+          <v-col cols="12">
+            <incident-priority-select :project="project" v-model="incident_priority" />
+          </v-col>
+          <v-col cols="12">
+            <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
+          </v-col>
+        </v-row>
       </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+
+        <v-btn
+          color="info"
+          block
+          variant="flat"
+          :loading="loading"
+          :disabled="!isValid.value"
+          type="submit"
+        >
+          Submit
+          <template #loader>
+            <v-progress-linear indeterminate color="white" />
+          </template>
+        </v-btn>
+      </v-card-actions>
     </v-card>
   </v-form>
 </template>
diff --git a/src/dispatch/static/dispatch/src/styles/index.scss b/src/dispatch/static/dispatch/src/styles/index.scss
index c672a76c58e2..39de3e324c24 100644
--- a/src/dispatch/static/dispatch/src/styles/index.scss
+++ b/src/dispatch/static/dispatch/src/styles/index.scss
@@ -1,3 +1,7 @@
 .v-data-table {
     font-size: 0.875rem;
 }
+
+.v-card--variant-outlined {
+    border-color: rgb(210, 210, 210);
+}