update(Frontend v2): EditRelationModal

Author: mslaursen

frontend/src/components/modal/EditRelationModal.vue

@@ -1,13 +1,13 @@
 <template>
   <main class="relation-container">
-    <div class="grid-2x2">
+    <div class="input-container">
       <div class="input-group">
-        <label class="relation-label">Field Name:</label>
+        <label class="relation-label">Field name</label>
         <input class="relation-input" v-model="fieldName" type="text" />
       </div>
 
       <div class="input-group">
-        <label class="relation-label">Target Model:</label>
+        <label class="relation-label">Target model</label>
         <select class="relation-select" v-model="selectedNodeId">
           <option disabled value="">-- Select a model --</option>
           <option v-for="node in filteredNodes" :key="node.id" :value="node.id">
@@ -17,7 +17,7 @@
       </div>
 
       <div class="input-group">
-        <label class="relation-label">OnDelete:</label>
+        <label class="relation-label">OnDelete</label>
         <select class="relation-select" v-model="onDelete">
           <option disabled value="">-- Select behavior --</option>
           <option value="CASCADE">CASCADE</option>
@@ -26,7 +26,7 @@
       </div>
 
       <div class="input-group">
-        <label class="relation-label">Back Populates:</label>
+        <label class="relation-label">Back populates</label>
         <input class="relation-input" v-model="backPopulates" type="text" />
       </div>
     </div>
@@ -82,7 +82,6 @@ const filteredNodes = computed(() => projectStore.nodes.filter((node) => node.id
 
 const saveChanges = () => {
   if (!selectedNodeId.value || !fieldName.value) return
-
   projectStore.updateRelation(props.id, props.relation.targetModel, props.relation.fieldName, {
     fieldName: fieldName.value,
     targetModel: selectedNodeId.value,
@@ -92,7 +91,6 @@ const saveChanges = () => {
     isUnique: unique.value,
     isIndex: indexed.value,
   })
-
   modalStore.close()
 }
 
@@ -107,60 +105,53 @@ const deleteRelation = () => {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  border: 2px solid black;
   padding: 1rem;
-  box-shadow: 4px 4px 0px black;
-  background-color: #fff;
 }
 
-.grid-2x2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+.input-container {
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
 }
 
 .input-group {
   display: flex;
   flex-direction: column;
+  gap: 0.15rem;
 }
 
 .relation-label {
   font-weight: bold;
-  margin-bottom: 0.25rem;
+  margin-bottom: 5px;
 }
 
 .relation-input,
 .relation-select {
   border: 2px solid black;
-  border-radius: 4px;
-  padding: 0.5rem;
-  box-shadow: 3px 3px 0px black;
-  background-color: var(--color-background);
-  transition:
-    transform 0.1s ease-in-out,
-    box-shadow 0.1s ease-in-out;
-}
-
-.relation-input:focus,
-.relation-select:focus {
-  outline: none;
-  transform: translate(2px, 2px);
-  box-shadow: none;
+  border-radius: 6px;
+  padding: 0.6rem;
+  background-color: white;
 }
 
 .checkbox-group {
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 0.5rem;
   font-weight: bold;
 }
 
+.action-group {
+  gap: 0.5rem;
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
 .save-relation-btn {
-  align-self: flex-end;
+  width: 100%;
   padding: 0.5rem 1rem;
   border: 2px solid black;
   border-radius: 4px;
-  font-weight: bold;
   background-color: var(--color-success);
   box-shadow: 3px 3px 0px black;
   transition:
@@ -175,11 +166,10 @@ const deleteRelation = () => {
 }
 
 .delete-relation-btn {
-  align-self: flex-end;
+  width: 100%;
   padding: 0.5rem 1rem;
   border: 2px solid black;
   border-radius: 4px;
-  font-weight: bold;
   background-color: var(--color-danger);
   box-shadow: 3px 3px 0px black;
   transition:
@@ -192,10 +182,4 @@ const deleteRelation = () => {
   transform: translate(2px, 2px);
   box-shadow: none;
 }
-
-.action-group {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-}
 </style>