Added styling and RWD

Frontend/src/components/mock/HeadersComponent.vue

@@ -20,7 +20,7 @@ function isHeaderEssential(headerName : string){
 }
 
 function setEssentialHeaderStyle(headerName : string){
-    return isHeaderEssential(headerName) ? "text-gray-400" : "text-red-400";
+    return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
 }
 
 function deleteHeader(index : string){
@@ -48,14 +48,14 @@ function addNewHeader(name : string, value : string){
     </div>
     <div class="flex flex-col gap-4">
         <div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
-            <input type="text" :value="index" class="w-full bg-gray-600 p-2" />
+            <input type="text" :value="index" class="text-field" />
-            <input type="text" :value="item" class="w-full bg-gray-600 p-2" />
+            <input type="text" :value="item" class="text-field" />
-            <button @click="deleteHeader(index)" :class="setEssentialHeaderStyle(index)">X</button>
+            <button @click="deleteHeader(index)" class="tool-button" :class="setEssentialHeaderStyle(index)">X</button>
         </div>
         <div class="flex gap-9 flex-row">
-            <input type="text" v-model="newHeaderName" class="w-full p-2 bg-gray-600"  />
+            <input type="text" v-model="newHeaderName" class="text-field"  />
-            <input type="text" v-model="newHeaderValue" class="w-full p-2 bg-gray-600"  />
+            <input type="text" v-model="newHeaderValue" class="text-field"  />
-            <button class="text-2xl" @click="addNewHeader(newHeaderName, newHeaderValue)" > + </button>
+            <button class="tool-button" @click="addNewHeader(newHeaderName, newHeaderValue)" >+</button>
         </div>
     </div>
 </template>

Frontend/src/components/mock/HistoryComponent.vue

@@ -31,19 +31,22 @@ function showBody(body : String){
 
 
 <template>
-    <table class="text-white h-28 w-5/12 text-center border-l-4 border-b-2">
+    <div class="w-full xl:w-5/12">
-        <tr>
+        <table class="text-white h-28 w-full text-center">
-            <th>Time</th>
+            <tr>
-            <th>HTTP Method</th>
+                <th>Time</th>
-            <th>HTTP Headers</th>
+                <th>HTTP Method</th>
-            <th>Request Body</th>
+                <th>HTTP Headers</th>
-        </tr>
+                <th>Request Body</th>
-        <tr v-for="(item , index) in historyRecords" :key="index">
+            </tr>
-            <td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
+            <tr v-for="(item , index) in historyRecords" :key="index">
-            <td> {{ item.httpMethod }} </td>
+                <td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
-            <td> <button @click="showHeaders(item.headers);">Show Headers</button> </td>
+                <td> {{ item.httpMethod }} </td>
-            <td> <button @click="showBody(item.requestBody)">Show Body</button> </td>
+                <td> <button @click="showHeaders(item.headers);">Show Headers</button> </td>
-        </tr>
+                <td> <button @click="showBody(item.requestBody)">Show Body</button> </td>
-    </table>
+            </tr>
+        </table>
+    </div>
+    
 
 </template>

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -39,11 +39,11 @@ function putDataInFields(data: mockedMessageData){
 </script>
 
 <template>
-  <div class="flex flex-col w-3/5 text-center dark:text-white gap-6">
+  <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="p-2 w-full border-white border-2">
+        <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>
@@ -52,18 +52,18 @@ function putDataInFields(data: mockedMessageData){
     <div class="flex flex-row w-full gap-64">
       <div class="w-full">
         <label for="contentType">Content Type</label><br/>
-        <input  class="bg-gray-600 w-full" id="contentType" type="text" v-model="messageData.contentType"/>
+        <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
       </div>
       
       <div class="w-full">
         <label for="httpStatus">HttpStatus</label><br/>
-        <input class="bg-gray-600 w-full" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
+        <input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
       </div>
       
     </div>
     <div class="flex flex-col">
       <label for="messageBody">Body</label>
-      <textarea class="bg-gray-600 h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
+      <textarea class="text-field h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
     </div>
     <HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
   </div>

Frontend/src/style.css

@@ -4,4 +4,8 @@
 
 .tool-button {
     @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+}
+
+.text-field {
+    @apply w-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
 }

Frontend/src/views/RestMockView.vue

@@ -6,9 +6,11 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
 
 
 <template>
-    <div class="flex gap-6 w-full h-screen">
+    <div class="flex flex-col xl:flex-row gap-6 w-full h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
         <HistoryComponent></HistoryComponent>
+
+        
     </div>
 </template>