refactor(ui): minor stylings

assets/scss/themes.scss

@@ -6,27 +6,27 @@
 
 @mixin darkTheme {
   // Background color
-  --primary-color: theme("colors.dark.800");
+  --primary-color: theme("colors.true-gray.900");
   // Light Background color
-  --primary-light-color: theme("colors.dark.700");
+  --primary-light-color: theme("colors.true-gray.800");
   // Dark Background color
-  --primary-dark-color: theme("colors.dark.600");
+  --primary-dark-color: theme("colors.dark.900");
   // Text color
-  --secondary-color: theme("colors.gray.400");
+  --secondary-color: theme("colors.true-gray.400");
   // Light Text color
-  --secondary-light-color: theme("colors.gray.500");
+  --secondary-light-color: theme("colors.true-gray.200");
   // Dark Text color
   --secondary-dark-color: theme("colors.white");
   // Border color
-  --divider-color: theme("colors.dark.500");
+  --divider-color: theme("colors.true-gray.700");
   // Light Border color
-  --divider-light-color: theme("colors.dark.400");
+  --divider-light-color: theme("colors.true-gray.800");
   // Dark Border color
-  --divider-dark-color: theme("colors.dark.700");
+  --divider-dark-color: theme("colors.true-gray.600");
   // Error color
-  --error-color: theme("colors.dark.600");
+  --error-color: theme("colors.true-gray.600");
   // Tooltip color
-  --tooltip-color: theme("colors.dark.700");
+  --tooltip-color: theme("colors.true-gray.800");
   // Editor theme
   --editor-theme: "merbivore_soft";
 }
@@ -35,52 +35,52 @@
   // Background color
   --primary-color: theme("colors.white");
   // Light Background color
-  --primary-light-color: theme("colors.gray.50");
+  --primary-light-color: theme("colors.true-gray.50");
   // Dark Background color
-  --primary-dark-color: theme("colors.gray.100");
+  --primary-dark-color: theme("colors.true-gray.100");
   // Text color
-  --secondary-color: theme("colors.gray.500");
+  --secondary-color: theme("colors.true-gray.500");
   // Light Text color
-  --secondary-light-color: theme("colors.gray.400");
+  --secondary-light-color: theme("colors.true-gray.400");
   // Dark Text color
-  --secondary-dark-color: theme("colors.gray.600");
+  --secondary-dark-color: theme("colors.true-gray.600");
   // Border color
-  --divider-color: theme("colors.gray.200");
+  --divider-color: theme("colors.true-gray.200");
   // Light Border color
-  --divider-light-color: theme("colors.gray.100");
+  --divider-light-color: theme("colors.true-gray.100");
   // Dark Border color
-  --divider-dark-color: theme("colors.gray.300");
+  --divider-dark-color: theme("colors.true-gray.300");
   // Error color
-  --error-color: theme("colors.gray.700");
+  --error-color: theme("colors.true-gray.700");
   // Tooltip color
-  --tooltip-color: theme("colors.gray.50");
+  --tooltip-color: theme("colors.true-gray.50");
   // Editor theme
   --editor-theme: "textmate";
 }
 
 @mixin blackTheme {
   // Background color
-  --primary-color: rgba(0, 0, 0, 1);
+  --primary-color: theme("colors.dark.900");
   // Light Background color
-  --primary-light-color: rgba(255, 255, 255, 0.02);
+  --primary-light-color: theme("colors.dark.700");
   // Dark Background color
-  --primary-dark-color: rgba(255, 255, 255, 0.07);
+  --primary-dark-color: theme("colors.dark.800");
   // Text color
-  --secondary-color: rgba(255, 255, 255, 0.9);
+  --secondary-color: theme("colors.true-gray.400");
   // Light Text color
-  --secondary-light-color: rgba(255, 255, 255, 0.5);
+  --secondary-light-color: theme("colors.true-gray.600");
   // Dark Text color
-  --secondary-dark-color: rgba(9, 9, 9, 0.5);
+  --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
-  --divider-color: rgba(255, 255, 255, 0.11);
+  --divider-color: theme("colors.dark.800");
   // Light Border color
-  --divider-light-color: rgba(255, 255, 255, 0.11);
+  --divider-light-color: theme("colors.dark.700");
   // Dark Border color
-  --divider-dark-color: rgba(255, 255, 255, 0.11);
+  --divider-dark-color: theme("colors.dark.600");
   // Error color
-  --error-color: rgba(255, 255, 255, 0.05);
+  --error-color: theme("colors.dark.800");
   // Tooltip color
-  --tooltip-color: rgba(32, 32, 32, 1);
+  --tooltip-color: theme("colors.dark.500");
   // Editor theme
   --editor-theme: "vibrant_ink";
 }

components/http/Request.vue

@@ -85,6 +85,7 @@
           bg-accent
           text-white
           cursor-pointer
+          dark:text-accentDark
         "
         @click="newSendRequest"
       >
@@ -133,6 +134,7 @@
               bg-accent
               text-white
               rounded-r-lg
+              dark:text-accentDark
             "
           >
             <i class="material-icons">keyboard_arrow_down</i>

components/http/ResponseMeta.vue

@@ -1,26 +1,30 @@
 <template>
-  <div>
+  <div class="flex sticky top-0 z-10 bg-primary items-center p-4">
-    <span v-if="response == null">
-      {{ $t("waiting_send_req") }}
-    </span>
     <div
-      v-else
+      v-if="response == null"
       class="
-        flex
+        flex flex-1
-        sticky
-        top-0
-        z-10
-        bg-primary
         items-center
+        text-secondaryLight
+        flex-col
         p-4
-        font-mono font-semibold
+        justify-center
-        space-x-8
       "
     >
+      <i class="material-icons opacity-50 pb-2">send</i>
+      <span class="text-xs text-center">
+        {{ $t("waiting_send_req") }}
+      </span>
+    </div>
+    <div v-else>
       <i v-if="response.type === 'loading'" class="animate-spin material-icons">
         refresh
       </i>
-      <div v-else :class="statusCategory.className">
+      <div
+        v-else
+        :class="statusCategory.className"
+        class="font-mono font-semibold space-x-4"
+      >
         <span v-if="response.statusCode">
           <span class="text-secondaryDark"> Status: </span>
           {{ response.statusCode || $t("waiting_send_req") }}

lang/en-US.json

@@ -167,7 +167,7 @@
   "copy_query": "Copy Query",
   "loading": "Loading...",
   "fetching": "Fetching...",
-  "waiting_send_req": "(waiting to send request)",
+  "waiting_send_req": "Waiting to send request",
   "waiting_receive_response": "(waiting to receive response)",
   "waiting_receive_schema": "(waiting to receive schema)",
   "gql_prettify_invalid_query": "Couldn't prettify an invalid query, solve query syntax errors and try again",

pages/index.vue

@@ -445,11 +445,7 @@
             </SmartTabs>
           </Pane>
           <Pane class="overflow-auto hide-scrollbar">
-            <HttpResponse
+            <HttpResponse ref="response" />
-              :response="response"
-              :active="runningRequest"
-              ref="response"
-            />
           </Pane>
         </Splitpanes>
       </Pane>