Improve agent view styles

frontend-vue/src/assets/main.css

@@ -9,6 +9,17 @@ a {
   padding: 3px;
 }
 
+button {
+  color: inherit;
+  background-color: var(--color-background-soft);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+
+button {
+  border-color: var(--color-border-hover);
+}
+
 body {
   display: flex;
   direction: row;

frontend-vue/src/views/Agent.vue

@@ -37,7 +37,7 @@
     };
 
     backend.sendAction("get-agent-kind-info", {kind: _agent.kind}).then(res => {
-      kindInfo.description = res.info.description;
+      kindInfo.value.description = res.info.description;
     });
 
     backend.sendAction('get-agent-config-fields', {agentId}).then(res => {
@@ -98,7 +98,7 @@
         }
       });
     } else {
-      ui.alert("Cancelled identifier update");
+      ui.alert("Cancelled name update");
     }
   }
   async function saveChanges() {
@@ -127,24 +127,70 @@
 
 <template>
   <main>
-    <h1>{{ agent.name || `(Agent #${id})` }}</h1>
-    <section>
-      <p>{{ description }}</p>
-      <p>Agent ID: {{ id }}, Identifier: {{ agent.agentname }}</p>
-
+    <h1>{{ agent.name || `Agent-${id}` }}</h1>
+    <section class="top-section">
       <div>
-        <button @click="updateIdentifier">Update Identifier</button>
-        <button @click="updateName">Update Name</button>
+        <span class="label">Agent ID</span>
+        <span class="value">{{id}}</span>
       </div>
+      <div>
+        <span class="label">Identifier</span>
+        <span class="value">{{agent.agentname}}</span>
+        <button @click="updateIdentifier">Edit</button>
+      </div>
+      <div>
+        <button @click="updateName">Change Name</button>
+      </div>
+    </section>
+    <section>
+      <p style="padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>
 
-      <form @submit.prevent="saveChanges">
-        <div v-for="(configField, index) in configFields" :key="index">
-          <label>{{ configField.name }}</label>
-          <input type="checkbox" v-model="configField.enabled" />
-          <textarea v-model="configField.value" />
-        </div>
-        <button type="submit">Save</button>
-      </form>
+      <div v-for="(configField, index) in configFields" :key="index">
+        <span class="label">{{ configField.name }}</span>
+        <input type="checkbox" v-model="configField.enabled" />
+        <br>
+        <textarea v-model="configField.value" class="config-input" :disabled="!configField.enabled"/>
+      </div>
+      
+      <button type="submit" @click="saveChanges()">Save</button>
     </section>
   </main>
 </template>
+
+<style scoped>
+  section {
+    margin: 1em;
+    padding: 1em;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+  }
+
+  .top-section {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .top-section > div {
+    margin-right: 2em;
+  }
+
+  .label {
+    font-size: 80%;
+    font-weight: bold;
+    margin-right: 0.5em;
+  }
+
+  .value {
+    padding: 0 0.5em;
+    padding-top: 0.35em;
+
+    border: 1px solid var(--color-border);
+    font-family: monospace;
+  }
+
+  textarea.config-input {
+    width: 100%;
+    resize: vertical;
+    height: 5em;
+  }
+</style>