From 27253fec10297c8eec27a391dfee7ff8a3cddf58 Mon Sep 17 00:00:00 2001
From: Peter Morton <mortonpd@hotmail.com>
Date: Wed, 19 Oct 2022 13:31:41 -0500
Subject: [PATCH] Added  input styling

---
 src/ReferenceID.vue                | 10 +++++++---
 src/components/ContactsSummary.vue |  7 ++++---
 src/style.css                      | 27 ++++++++++++++++++++++++++-
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/ReferenceID.vue b/src/ReferenceID.vue
index 6a23ce9..25ffa43 100644
--- a/src/ReferenceID.vue
+++ b/src/ReferenceID.vue
@@ -37,12 +37,16 @@ function fetchData() {
 </script>
 <template>
   <div id="app">
+    <h2>Search Criteria</h2>
     <div>
-      <label for="referenceId">Reference ID: </label>
-      <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
-      <button @click="fetchData">Search Contacts</button>
+      <form>
+        <label for="referenceId">Reference ID: </label>
+        <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
+        <button @click="fetchData">Search Contacts</button>
+      </form>
     </div>
 
+    <h2>Results</h2>
     <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
     <div v-else>No Contacts Found</div>
     <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
diff --git a/src/components/ContactsSummary.vue b/src/components/ContactsSummary.vue
index b321c62..b554f07 100644
--- a/src/components/ContactsSummary.vue
+++ b/src/components/ContactsSummary.vue
@@ -16,8 +16,8 @@ defineProps(["summary"]);
         </div>
 
         <div class="item">
-            <div class="measure">{{ summary.totalHTDays.toFixed(2) }}</div>
-            <div class="label">Total Handle Time (days)</div>
+            <div class="measure">{{ summary.totalHTHours.toFixed(2) }}</div>
+            <div class="label">Total Handle Time (hours)</div>
         </div>
 
         <div class="item">
@@ -35,6 +35,7 @@ defineProps(["summary"]);
 .stats {
     display: flex;
 }
+
 .item {
     width: 100%;
     border: 2px solid rgb(57, 145, 201);
@@ -50,7 +51,7 @@ defineProps(["summary"]);
 
 .measure {
     width: 100%;
-    color: rgb(57,145,201);
+    color: rgb(57, 145, 201);
     font-family: 'DejaVu Sans', Ariel, Helvetica, sans-serif;
     text-align: center;
     font-size: 16px;
diff --git a/src/style.css b/src/style.css
index 819859a..691adb1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,7 +2,20 @@ h1 {
     font-size: 18px;
     line-height: 19px;
     overflow: hidden;
-    padding: 6px 0 12px 0;
+    padding: 4px 0 12px 0;
+    min-height: 23px;
+    vertical-align: middle;
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    border-bottom: 1px solid #c7c7c7;
+    margin: 0;
+}
+
+h2 {
+    font-size: 14px;
+    line-height: 19px;
+    overflow: hidden;
+    padding: 4px 0 4px 0;
     min-height: 23px;
     vertical-align: middle;
     font-family: "Lato", sans-serif;
@@ -61,6 +74,18 @@ tr {
     padding: 4px 0px 3px;
 }
 
+input {
+    border-radius: 13px;
+    height: 24px;
+    border-color: #515151;
+    outline: none;
+}
+
+input:focus {
+    border-color: #3395ff;
+    outline: none;
+}
+
 button {
     margin-left: 5px;
     color: #333333;