From ac95ee1344663f564f1df274fdc8ca573337a1de Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 4 May 2023 13:06:39 -0400
Subject: [PATCH] WIP format code.

---
 .../customer-details/customer-details.vue     |  7 ++--
 .../text-area/text-area-multi-line.vue        | 35 ++++++++++++-------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 91bd77afe..975ef7804 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -3,8 +3,7 @@
         labelText="Notes for your technician"
         labelTextOptional="(Optional)"
         textAreaFooterText="250/250 characters remaining"
-        footerText
-     />
+        footerText />
 </template>
 
 <script>
@@ -12,7 +11,7 @@ import textareamultiline from "@/ux-components/text-area/text-area-multi-line";
 export default {
     name: "customer-details",
     components: {
-        textareamultiline
-    }
+        textareamultiline,
+    },
 };
 </script>
diff --git a/src/ux-components/text-area/text-area-multi-line.vue b/src/ux-components/text-area/text-area-multi-line.vue
index ad87f9893..c5d285193 100644
--- a/src/ux-components/text-area/text-area-multi-line.vue
+++ b/src/ux-components/text-area/text-area-multi-line.vue
@@ -1,8 +1,19 @@
 <template>
     <div class="text-area-multine">
-        <label for="textarea-comments" class="fw-bold mb-1">{{labelText}} <span class="fw-normal">{{labelTextOptional}}</span></label>
-        <textarea id="textarea-comments" class="p-4" maxlength="250" role="textbox" contenteditable="true" aria-multiline="true" aria-required="false"></textarea>
-        <p tabindex="0" v-show="footerText" class="caption mt-2 mb-0" id="charactersremaining">{{textAreaFooterText}}</p>
+        <label for="textarea-comments" class="fw-bold mb-1"
+            >{{ labelText }} <span class="fw-normal">{{ labelTextOptional }}</span></label
+        >
+        <textarea
+            id="textarea-comments"
+            class="p-4"
+            maxlength="250"
+            role="textbox"
+            contenteditable="true"
+            aria-multiline="true"
+            aria-required="false"></textarea>
+        <p tabindex="0" v-show="footerText" class="caption mt-2 mb-0" id="charactersremaining">
+            {{ textAreaFooterText }}
+        </p>
     </div>
 </template>
 
@@ -13,20 +24,20 @@ export default {
         labelText: String,
         labelTextOptional: String,
         textAreaFooterText: String,
-        footerText: Boolean
+        footerText: Boolean,
     },
-    mounted: function() {
-        const my_textarea = document.getElementById('textarea-comments');
-        const remaining = document.getElementById('charactersremaining');
+    mounted: function () {
+        const my_textarea = document.getElementById("textarea-comments");
+        const remaining = document.getElementById("charactersremaining");
         const remain = 250;
 
-        my_textarea.addEventListener('input',()=>{
+        my_textarea.addEventListener("input", () => {
             const total = remain - my_textarea.value.length;
-            const color = total < remain * 0.1 ? 'red' : null; //Change text to red when the total remaining goes below 25;
+            const color = total < remain * 0.1 ? "red" : null; //Change text to red when the total remaining goes below 25;
             remaining.innerHTML = `${total}/250 characters remaining`;
-            remaining.style.color =  color;
+            remaining.style.color = color;
         });
-    }
+    },
 };
 </script>
 
@@ -40,7 +51,7 @@ export default {
         }
     }
     textarea {
-        border-radius: .5rem;
+        border-radius: 0.5rem;
         border: 1px solid $gray-550;
         height: 88px;
         &:hover {