From 259d1f8fe8af9a7bb9af61b86c92de1249672d12 Mon Sep 17 00:00:00 2001
From: Jakub Srsen <jsrsen@gettalkative.uk>
Date: Mon, 6 Sep 2021 02:52:42 +0100
Subject: [PATCH] Fixes other style inconsistencies

---
 resources/views/client/dashboard.twig | 48 ++++++++++++++++-----------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/resources/views/client/dashboard.twig b/resources/views/client/dashboard.twig
index dbee5f5..8eb9fd7 100644
--- a/resources/views/client/dashboard.twig
+++ b/resources/views/client/dashboard.twig
@@ -19,6 +19,9 @@
         ::selection {
             @apply bg-pink-500 bg-opacity-50;
         }
+        .dark {
+            color-scheme: dark;
+        }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
     <link id="hljs-theme" rel="stylesheet">
@@ -290,21 +293,26 @@
                     </h3>
                     <div class="mt-1 max-w-2xl text-sm leading-5 text-gray-500 flex items-center">
                         <div class="mr-4" v-if="currentLog.response">
-                                <span
-                                    v-if="currentLog.response.status >= 200 && currentLog.response.status < 300"
-                                    class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-green-100 text-green-800">
-                                              @{ currentLog.response.status } - @{ currentLog.response.reason }
-                                            </span>
+                            <span
+                                v-if="currentLog.response.status >= 200 && currentLog.response.status < 300"
+                                class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-green-100 text-green-800">
+                                @{ currentLog.response.status } - @{ currentLog.response.reason }
+                            </span>
+                            <span
+                                v-if="currentLog.response.status >= 300 && currentLog.response.status < 400"
+                                class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-blue-100 text-blue-800">
+                                @{ currentLog.response.status } - @{ currentLog.response.reason }
+                            </span>
                             <span
                                 v-if="currentLog.response.status >= 400 && currentLog.response.status < 500"
                                 class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-yellow-100 text-yellow-800">
-                                              @{ currentLog.response.status } - @{ currentLog.response.reason }
-                                            </span>
+                                @{ currentLog.response.status } - @{ currentLog.response.reason }
+                            </span>
                             <span
                                 v-if="currentLog.response.status >= 500"
                                 class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-red-100 text-red-800">
-                                              @{ currentLog.response.status } - @{ currentLog.response.reason }
-                                            </span>
+                                @{ currentLog.response.status } - @{ currentLog.response.reason }
+                            </span>
                         </div>
                         <span class="text-xs text-gray-600 dark:text-gray-200">Received at: @{ currentLog.performed_at }</span>
                     </div>
@@ -351,7 +359,7 @@
                     </div>
                     <div v-for="(value, name) in currentLog.request.query"
                          :key="'query_' + name"
-                         class="even:bg-gray-50 odd:bg-gray-50 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                         class="even:bg-gray-50 odd:bg-gray-100 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                         <dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
                             @{ name }
                         </dt>
@@ -361,7 +369,7 @@
                     </div>
 
                     <div class="px-4 py-5 border-b border-t dark:border-gray-700 border-gray-200 sm:px-6 flex justify-between" v-if="Object.keys(currentLog.request.post).length > 0">
-                        <h3 class="text-lg leading-6 font-medium text-gray-900">
+                        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                             Post Parameters
                         </h3>
                         <span class="inline-flex rounded-md shadow-sm ml-4">
@@ -374,11 +382,11 @@
                     </div>
                     <div v-for="parameter in currentLog.request.post"
                          :key="'post_' + parameter.name"
-                         class="even:bg-gray-100 bg-gray-50 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm leading-5 font-medium text-gray-700">
+                         class="even:bg-gray-50 bg-gray-100 dark:even:bg-gray-700 dark:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
                             @{ parameter.name }
                         </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2 break-all">
+                        <dd class="mt-1 text-sm leading-5 dark:text-gray-200 text-gray-900 sm:mt-0 sm:col-span-2 break-all">
                             <span
                                 v-if="parameter.is_file">File: @{ parameter.filename } (@{ parameter.mime_type })</span>
                             <span v-else>@{ parameter.value }</span>
@@ -399,7 +407,7 @@
                     </div>
                     <div v-for="(value, header) in currentLog.request.headers"
                          :key="header"
-                         class="even:bg-gray-50 bg-gray-50 dark:even:bg-gray-700 dark:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                         class="even:bg-gray-50 bg-gray-100 dark:even:bg-gray-700 dark:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                         <dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
                             @{ header }
                         </dt>
@@ -426,7 +434,7 @@
                     </div>
                     <div v-for="(value, header) in currentLog.response.headers"
                          :key="header"
-                         class="even:bg-gray-50 odd:bg-gray-50 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                         class="even:bg-gray-50 odd:bg-gray-100 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                         <dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
                             @{ header }
                         </dt>
@@ -442,7 +450,7 @@
                         </div>
                         <div v-for="(value, key) in currentLog.request.additional_data"
                              :key="'debug'+key"
-                             class="even:bg-gray-50 odd:bg-gray-50 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                             class="even:bg-gray-50 odd:bg-gray-100 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                             <dt class="text-sm leading-5 font-medium text-gray-700">
                                 @{ key }
                             </dt>
@@ -459,13 +467,13 @@
                                 <a href="#"
                                    @click.prevent="setActiveTab('raw')"
                                    :class="{'outline-none text-white bg-pink-500': activeTab === 'raw'}"
-                                   class="px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 hover:text-gray-700 dark:hover:text-gray-100">
+                                   class="px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300">
                                     Raw
                                 </a>
                                 <a href="#"
                                    @click.prevent="setActiveTab('preview')"
                                    :class="{'outline-none text-white bg-pink-500': activeTab === 'preview'}"
-                                   class="ml-4 px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 hover:text-gray-700 dark:hover:text-gray-100">
+                                   class="ml-4 px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300">
                                     Preview
                                 </a>
                             </nav>
@@ -476,7 +484,7 @@
                     </div>
                     <div v-if="activeTab === 'preview'">
                         <div v-if="responseIsJson()">
-                            <pre class="p-6 overflow-x-scroll"><span id="jsonResponseBody" class="json"></span></pre>
+                            <pre class="p-6 overflow-x-auto"><span id="jsonResponseBody" class="json"></span></pre>
                         </div>
                         <iframe v-else :srcdoc="currentLog.response.body" style="height: 500px;" class="w-full h-full"></iframe>
                     </div>