transactions are now input fields (but still dummies)

budgit.client/src/components/Navbar.vue

@@ -43,4 +43,8 @@ a:hover {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+
+.router-link-active {
+  @apply text-green-300;
+}
 </style>

budgit.client/src/components/Transaction.vue

@@ -1,19 +1,27 @@
 <template>
-  <div class="component flex bg-stone-800 mb-2">
-    <div class="w-32">
-      <p>meow</p>
+  <div class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-800 mb-2">
+    <div class="pr-4">
+      <input type="date" v-model="date" placeholder="2022-07-11" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
     </div>
-    <div class="w-32">
-      <p>meow</p>
+    <div class="pr-4">
+      <input type="number" v-model="amount" placeholder="$0.00" class="w-24 bg-stone-800 text-slate-50 hover:bg-green-300 hover:text-stone-900">
     </div>
-    <div class="w-32">
-      <p>meow</p>
+    <div class="pr-4">
+      <input type="text" v-model="payee" placeholder="Payee" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
     </div>
-    <div class="w-32">
-      <p>meow</p>
+    <div class="pr-4">
+      <select v-model="category" class="text-slate-50 bg-stone-800 w-36 hover:bg-green-300 hover:text-stone-900">
+        <option value="" selected>UnCATegorized</option>
+        <option v-for="c in 10" value="meow">meow</option>
+      </select>
     </div>
-    <div class="">
-      <p>{{'meow'}}</p>
+    <div class="pr-4">
+      <input type="text" v-model="comment" placeholder="Comments" class="text-slate-50 bg-stone-800 w-48 hover:bg-green-300 hover:text-stone-900">
+    </div>
+    <div>
+      <button class="text-slate-50 bg-stone-800 w-16 hover:bg-green-300 hover:text-stone-900">
+        Save
+      </button>
     </div>
   </div>
 </template>
@@ -22,12 +30,31 @@
 <script>
 export default {
   setup(){
-    return {}
+    return {
+      date: '2022-07-11'
+    }
   }
 }
 </script>
 
 
-<style lang="scss" scoped>
+<!-- // TODO undo this -->
+<style lang="postcss" scoped>
+  input {
+    color-scheme: dark;
+  }
 
+  input::placeholder {
+    @apply text-slate-50;
+    opacity: 1;
+  }
+
+  input:hover::placeholder {
+    @apply text-stone-900;
+    opacity: 1;
+  }
+
+  input:hover {
+    color-scheme: light;
+  }
 </style>