From bcd08b388448a999e727e8af357591c5f5e09e36 Mon Sep 17 00:00:00 2001
From: "Tara Z. Manicsic" <tzmanics@gmail.com>
Date: Mon, 21 Feb 2022 22:21:19 -0500
Subject: [PATCH] adds styling and linting

---
 components/feedbackForm.vue | 41 ++++++++++++++++++++++++++++---------
 pages/index.vue             |  7 ++++++-
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/components/feedbackForm.vue b/components/feedbackForm.vue
index f3aa6cc..b758542 100644
--- a/components/feedbackForm.vue
+++ b/components/feedbackForm.vue
@@ -1,15 +1,36 @@
 <template>
-  <div>
-    <form
-      netlify
-      action="/"
-      method="POST"
-      name="feedback"
-    >
+  <div class="feedback-form">
+    <form netlify method="POST" name="feedback">
       <input type="hidden" name="form-name" value="feedback" />
+      <label for="name">Name</label>
       <input type="text" name="name" />
-      <input type="email" placeholder="email" required>
-      <input type="string" placeholder="feedback" required>
+      <label for="name">Email</label>
+      <input type="email" name="email" required />
+      <label for="feedback">What is your feedback?</label>
+      <textarea wrap="soft" name="feedback" required></textarea>
+      <button type="submit">Submit</button>
     </form>
   </div>
-</template>
\ No newline at end of file
+</template>
+<style scoped>
+.feedback-form {
+  margin: 40px 40px;
+  min-width: 300px;
+  width: 45%;
+}
+input,
+textarea,
+button {
+  font-size: inherit;
+  margin: 15px 0;
+  padding: 12px 20px;
+  width: 100%;
+}
+
+button {
+  background-color: teal;
+  border: 1px solid black;
+  color: white;
+  width: 50%;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index dbbaf3e..a42adf6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,9 +3,14 @@
 </template>
 
 <script>
-import FeedbackForm from '../components/FeedbackForm.vue';
+import FeedbackForm from '../components/FeedbackForm.vue'
 export default {
   name: 'IndexPage',
   components: { FeedbackForm },
 }
 </script>
+<style>
+* {
+  font-family: 'Helvetica', sans-serif;
+}
+</style>