feature: update ui and placeholder

Author: bencodezen

src/App.vue

@@ -10,8 +10,12 @@ import HelloWorld from './components/HelloWorld.vue'
 </template>
 
 <style>
+:root {
+ --primaryFont: Avenir, Helvetica, Arial, sans-serif;
+}
+
 #app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-family: var(--primaryFont);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;

src/components/HelloWorld.vue

@@ -6,9 +6,9 @@ defineProps({
 })
 
 const data = reactive({
- name: 'Ben',
- email: 'ben@bencodezen.io',
- message: 'Test Message'
+ name: '',
+ email: '',
+ message: ''
 })
 
 const elFeedbackForm = ref(null)
@@ -46,17 +46,31 @@ const submitForm = () => {
 
  <div class="input-wrapper">
  <label for="name">Name</label>
- <input id="name" v-model="data.name" type="text" />
+ <input
+ id="name"
+ v-model="data.name"
+ type="text"
+ placeholder="Your Name"
+ />
  </div>
 
  <div class="input-wrapper">
  <label for="email">Email</label>
- <input id="email" v-model="data.email" type="email" />
+ <input
+ id="email"
+ v-model="data.email"
+ type="email"
+ placeholder="yourname@domain.extension"
+ />
  </div>
 
  <div class="input-wrapper">
  <label for="message">Message</label>
- <textarea id="message" v-model="data.message"></textarea>
+ <textarea
+ id="message"
+ v-model="data.message"
+ placeholder="What would you like to share?"
+ />
  </div>
 
  <button type="submit" @click="submitForm">Submit</button>
@@ -85,12 +99,23 @@ a {
  margin-bottom: 0;
 }
 
+.input-wrapper input,
+.input-wrapper textarea {
+ font-family: var(--primaryFont);
+}
+
 .input-wrapper input {
  padding: 10px;
- font-size: 1rem;
+ font-size: 0.9rem;
 }
 
 .input-wrapper textarea {
  height: 100px;
+ padding: 10px;
+ font-size: 0.9rem;
+}
+
+button {
+ padding: 8px 16px;
 }
 </style>