From b4d9b73f78d8f3df69d183fde665199f1367952b Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 27 Jun 2023 11:31:25 +0200
Subject: [PATCH] Polished styling of REST Mock

---
 .../src/components/mock/HeadersComponent.vue  | 21 ++++++++++---------
 .../src/components/mock/HistoryComponent.vue  |  6 +++---
 .../src/components/mock/HistoryRecords.vue    |  4 ++--
 .../mock/RestMockMessageComponent.vue         | 13 ++++++------
 .../src/components/mock/SaveComponent.vue     |  2 +-
 Frontend/src/style.css                        |  6 +++++-
 Frontend/src/views/RestMockView.vue           |  2 +-
 7 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
index b5af03a..7499b3f 100644
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -20,7 +20,7 @@ function isHeaderEssential(headerName : string){
 }
 
 function setEssentialHeaderStyle(headerName : string){
-    return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
+    return isHeaderEssential(headerName) ? "inactive-button" : "tool-button";
 }
 
 function deleteHeader(index : string){
@@ -42,21 +42,22 @@ function addNewHeader(name : string, value : string){
 </script>
 
 <template>
-    <div class="w-full gap-4 flex">
-        <div class="w-full">Header name</div>
-        <div class="w-full">Header value</div>
-        <div class="w-1/5"></div>
-    </div>
+    
     <div class="flex flex-col gap-4">
-        <div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
+        <div class="flex flex-row gap-9">
+            <div class="w-full">Header name</div>
+            <div class="w-full">Header value</div>
+            <div class="w-52 px-4"></div>
+        </div>  
+        <div class="flex flex-row gap-9" v-for="(item, index) in headerData" :key="index">
             <input type="text" :value="index" class="text-field" />
             <input type="text" :value="item" class="text-field" />
-            <button @click="deleteHeader(index)" class="tool-button w-1/5" :class="setEssentialHeaderStyle(index)">Remove</button>
+            <button @click="deleteHeader(index)" class="w-56" :class="setEssentialHeaderStyle(index)">Remove</button>
         </div>
-        <div class="flex gap-9 flex-row">
+        <div class="flex flex-row gap-9">
             <input type="text" v-model="newHeaderName" class="text-field"  />
             <input type="text" v-model="newHeaderValue" class="text-field"  />
-            <button class="tool-button w-1/5" @click="addNewHeader(newHeaderName, newHeaderValue)" >Add</button>
+            <button @click="addNewHeader(newHeaderName, newHeaderValue)" class="tool-button w-56">Add</button>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index 3dbf0c8..8ef67dc 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -33,8 +33,8 @@ function showHeaders(headers: object, index: number){
 
 <template>
     <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
-    <HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
-    <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
-    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
+        <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+        <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
+        <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryRecords.vue b/Frontend/src/components/mock/HistoryRecords.vue
index 31703c2..7f1c8c5 100644
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -52,9 +52,9 @@ function refreshHistory(){
             <tr v-for="(item , index) in historyRecords" :key="index">
                 <td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
                 <td> {{ item.httpMethod }} </td>
-                <td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
+                <td> <button @click="showHeaders(item.headers, index)" class="underline">Show Headers</button> </td>
                 <td> 
-                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)" class="underline">Show Body</button> 
                     <span v-else>Empty Body</span>
                 </td>
             </tr>
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index e35f4e0..d1a8bcf 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -39,17 +39,18 @@ function putDataInFields(data: mockedMessageData){
 </script>
 
 <template>
-  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
-    <div>
-      <label for="link">Link</label><br/>
-      <div class="flex gap-4">
+  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6 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/>
         <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
           <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
         </div>
-        <SaveComponent v-bind:message-data="messageData"></SaveComponent>
       </div>
+      
+      <SaveComponent v-bind:message-data="messageData"></SaveComponent>
     </div>
-    <div class="flex flex-row w-full gap-64">
+    <div class="flex flex-col md:flex-row w-full gap-4 md:gap-36">
       <div class="w-full">
         <label for="contentType">Content Type</label><br/>
         <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
diff --git a/Frontend/src/components/mock/SaveComponent.vue b/Frontend/src/components/mock/SaveComponent.vue
index 3b8d103..4639250 100644
--- a/Frontend/src/components/mock/SaveComponent.vue
+++ b/Frontend/src/components/mock/SaveComponent.vue
@@ -38,7 +38,7 @@ function hideToast(){
 </script>
 
 <template>
-    <button @click="prepareAndSendData()" class="w-2/12 tool-button">Save</button>
+    <button @click="prepareAndSendData()" class="tool-button w-full md:w-32">Save</button>
 
     <div class="fixed bottom-5 right-12">
         <MockedMessageToastComponent @closed:toast_closed="hideToast()" v-bind:visible="visible" v-bind:message="message"/>
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 3012e73..ba8b3b1 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -2,8 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+.inactive-button {
+    @apply py-2.5 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
+}
+
 .tool-button {
-    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply hover:brightness-110 py-2.5 px-4 h-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }
 
 .text-field {
diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index 771d134..82584b9 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -6,7 +6,7 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
 
 
 <template>
-    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-hidden h-full">
+    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-scroll overflow-x-hidden h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
         <HistoryComponent></HistoryComponent>
     </div>