Revert "Updated License Note field with buttons"

This reverts commit 65b77cff85.

web/src/components/HeaderBar.vue

@@ -158,7 +158,42 @@
               </v-card-actions>
             </v-form>
           </v-card>
-        </v-dialog> 
+        </v-dialog>
+        <!--              -->
+        <!-- EDIT SECTION -->
+        <!--              -->
+        <v-btn icon class="mr-3" @click="edit = true">
+          <Pencil />
+        </v-btn>
+        <v-dialog v-model="edit" width="600" persistent>
+          <v-card max-width="600">
+            <v-form @submit.prevent="submit">
+              <v-card-title>
+                <span class="headline">Edit License</span>
+              </v-card-title>
+              <v-card-subtitle>
+                <span> Edit a License inside the Database</span>
+              </v-card-subtitle>
+              <v-card-text>
+                <!-- PLACEHOLDER FOR ELEMENTS -->
+              </v-card-text>
+              <v-card-actions>
+                <v-row>
+                  <v-col cols="10" align="right" no-gutters>
+                    <v-btn
+                      class="ms-auto"
+                      text="Cancel"
+                      @click="edit = false"
+                    ></v-btn>
+                  </v-col>
+                  <v-col>
+                    <v-btn class="ms-auto" text="Save" type="submit"></v-btn>
+                  </v-col>
+                </v-row>
+              </v-card-actions>
+            </v-form>
+          </v-card>
+        </v-dialog>
       </div>
 
       <!-- Search -->
@@ -290,7 +325,11 @@ const addNotes = ref<string | undefined>("");
 const addStartDate = ref<Date | undefined>();
 const addStopDate = ref<Date | undefined>();
 
+//
+//  EDIT SECTION
+//
 
+const edit = ref(false);
 </script>
 
 <style scoped>

web/src/components/ListViewElement.vue

@@ -4,6 +4,7 @@
     width="96vw"
     rounded="lg"
     class="mt-3"
+    style="border-left: 0.5rem outset #0fa4af"
   >
     <v-expansion-panels>
       <v-expansion-panel>
@@ -77,39 +78,28 @@
           </div>
         </v-expansion-panel-title>
         <v-expansion-panel-text>
-          Notes:
             <v-row
-              class="flex-nowrap"
+              class="flex-nowrap bg-surface-variant"
               no-gutters
             >
               <v-col
-                class="flex-grow-1 flex-shrink-0 overflow-x-auto border-e-md"
+                class="flex-grow-0 flex-shrink-0"
-                cols="10"
+                cols="7"
               >
-                {{ props.notes }}
+                  Notes: {{ props.notes }}
-         
               </v-col>
 
+        
               <v-col
-                class="flex-grow-0 flex-shrink-1 overflow-x-auto"
+                class="flex-grow-0 flex-shrink-1"
-                cols="2"
+                cols="5"
-                align="end"
               >
-              <!--              -->
+                  I'm 5 column wide and I shrink if there's not enough space
-              <!-- EDIT SECTION -->
-              <!--              -->
-              <v-btn class="mr-3" flat size="small">
-                <Pencil />
-              </v-btn>
-              <!--                 -->
-              <!--   DELETE BTN    -->
-              <!--                 -->
-              <v-btn class="mr-3" flat size="small" color="red" variant="text">
-                <Trash />
-              </v-btn>
               </v-col>
             </v-row>
 
+          
+
         </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
@@ -117,8 +107,7 @@
 </template>
 
 <script setup lang="ts">
-import { Infinity, KeyRound, CalendarCheck, CalendarX, Pencil, Trash } from "lucide-vue-next";
+import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
-import { ref } from "vue";
 
 const props = defineProps({
   licenseName: String,
@@ -128,19 +117,6 @@ const props = defineProps({
   amount: Number,
   notes: String,
 });
-
-
-//
-//  EDIT SECTION
-//
-
-const edit = ref(false);
-
-
-
-
-
-
 </script>
 
 <style scoped>