Mappingview

UI/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'dark': appStatus.isDark }" class="h-screen">
+  <div class="h-screen">
     <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-900">
       <!-- Header -->
       <Header />
@@ -74,24 +74,8 @@ const WSConnect = () => {
 
 onMounted(() => {
   WSConnect();
-  // Check for saved dark mode preference
-  const savedDarkMode = localStorage.getItem('darkMode')
-  if (savedDarkMode !== null) {
-    appStatus.isDark = savedDarkMode === 'true'
-  } else {
-    // If no saved preference, check system preference
-    appStatus.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  }
 })
 
 
-// Watch for system color scheme changes
-watch(
-  () => window.matchMedia('(prefers-color-scheme: dark)').matches,
-  (isDark) => {
-    if (localStorage.getItem('darkMode') === null) {
-      isDarkMode.value = isDark
-    }
-  }
-)
+
 </script>

UI/src/components/Header.vue

@@ -4,17 +4,12 @@
 	          <button @click="appStatus.toggleSidebar" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
 	            <Menu class="h-6 w-6" />
 	            <span class="sr-only">Toggle menu</span>
-	          </button>
-	          <h1 class="text-xl font-semibold text-gray-800 dark:text-white">{{ $route.name }}</h1>
-	          <button
-	            @click="appStatus.toggleDarkMode"
-	            class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-	            aria-label="Toggle dark mode"
-	          >
-	            <Sun v-if="appStatus.isDark" class="h-6 w-6" />
-	            <Moon v-else class="h-6 w-6" />
-	          </button>
-	        </div>
+	          </button>			  
+			  <div class="flex-1 text-center">
+				<h1 class="text-lg font-extrabold text-gray-800 dark:text-white">MMock Console</h1>
+			  </div>
+			<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ $route.name }}</h4>
+			</div>
 	      </header>
 </template>
 

UI/src/components/RequestList.vue

@@ -1,7 +1,7 @@
 <template>
 <template v-if="data.length > 0">	
 	<ul class="divide-y divide-gray-200 dark:divide-gray-700">
-		<li v-for="item in data" :key="item.id" class="p-4">
+		<li v-for="item in data" :key="item.id" class="p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
 			<div @click="toggleExpand(item.id)" class="flex items-center justify-between cursor-pointer">
 				<div class="flex items-center space-x-2">
 					<span :class="getMethodColor(item.request.method)" class="px-2 py-1 rounded text-xs font-medium">
@@ -36,16 +36,16 @@
 					</div>
 					<div class="mt-4">
 						<pre v-if="activeTab === 'payload'"
-							class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto">
-	                            <code class="text-sm"><vue-json-pretty :data="item.request" :deep=2 :theme="dark" :showLine="false"/></code>
+							class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
+	                            <code class="text-sm"><vue-json-pretty :data="item.request" :deep=2 :showLine="false"/></code>
 	                          </pre>
 						<pre v-if="activeTab === 'response'"
-							class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto">
-	                            <code class="text-sm"><vue-json-pretty :data="item.response" :deep=2 :theme='dark':showLine="false"  /></code>
+							class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
+	                            <code class="text-sm"><vue-json-pretty :data="item.response" :deep=2 :showLine="false"  /></code>
 	                          </pre>
 						<pre v-if="activeTab === 'match'"
-							class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto">
-	                            <code class="text-sm"><vue-json-pretty :data="item.result" :deep=3 :theme='light' :showLine="false" /></code>
+							class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
+	                            <code class="text-sm"><vue-json-pretty :data="item.result" :deep=3 :showLine="false" /></code>
 	                          </pre>
 					</div>
 				</div>

UI/src/stores/appStatus.js

@@ -2,16 +2,13 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useAppStatusStore = defineStore('appStatus', () => {
-  const isDark = ref(false)
   const isSidebarOpen = ref(false)
 
   function toggleSidebar(){
     isSidebarOpen.value = !isSidebarOpen.value
   }
 
-  function toggleDarkMode(){
-    isDark.value = !isDark.value
-  }
+
 
-  return { isDark, isSidebarOpen, toggleSidebar, toggleDarkMode }
+  return { isSidebarOpen, toggleSidebar }
 })

UI/src/views/MappingView.vue

@@ -90,7 +90,7 @@
               </div>
               <div class="mb-4">
                 <label for="edit-mock" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Definition</label>
-                <textarea id="edit-mock" v-model="editingItem.definition" rows="4" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" required></textarea>
+                <textarea id="edit-mock" v-model="editingItem.definition" rows="10" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" required></textarea>
               </div>
             </div>
             <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">