From 6e3b53fd326997d812aacfead6e20f253fce8f12 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Wed, 8 Nov 2023 14:10:20 +0100
Subject: [PATCH] Improved UI legibility and added some labels

---
 Frontend/src/components/mock/HeadersComponent.vue    |  1 +
 Frontend/src/components/mock/HistoryComponent.vue    |  1 +
 .../src/components/mock/RestMockMessageComponent.vue | 12 ++++++------
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
index cd0ce2b..b87cafa 100644
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -55,6 +55,7 @@ function addNewHeader(name : string, value : string){
 <template>
     
     <div class="flex flex-col gap-4">
+        <label>Response Headers</label>
         <div class="flex flex-row gap-4">
             <div class="w-full">Header name</div>
             <div class="w-full">Header value</div>
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index c80581c..859bd83 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -35,6 +35,7 @@ function showHeaders(headers: object, index: number){
 
 <template>
     <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
+        <label class="dark:text-white text-center"><span class="font-bold">Attention: </span>History doesn't refresh automatically! Use refresh button on the right!</label>
         <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
         <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
         <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index c12813d..b7b6368 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -44,10 +44,10 @@ function showUpdatedCode(newCode : string){
 </script>
 
 <template>
-  <div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
+  <div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-3 p-1">
     <div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
       <div class="flex flex-col w-full">
-        <label for="link">Link</label><br/>
+        <label for="link">REST Service URL</label><br/>
         <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
           <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
         </div>
@@ -57,18 +57,18 @@ function showUpdatedCode(newCode : string){
     </div>
     <div class="flex flex-col md:flex-row w-full gap-4">
       <div class="w-full">
-        <label for="contentType">Content Type</label><br/>
+        <label for="contentType">Response Content Type</label><br/>
         <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
       </div>
       
       <div class="w-full">
-        <label for="httpStatus">HttpStatus</label><br/>
+        <label for="httpStatus">Response HTTP Status</label><br/>
         <input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
       </div>
       
     </div>
-    <div class="flex text-left flex-col overflow-scroll h-3/4">
-      <label for="messageBody text-center">Body</label>
+    <div class="flex text-left flex-col overflow-scroll gap-2 h-3/4">
+      <label class="text-center" for="messageBody text-center">Response Body</label>
       <CodeEditorComponent
       @update:updated-code="showUpdatedCode"
       v-model="messageData.messageBody"