fix: minor input stylings

components/app/Header.vue

@@ -34,11 +34,11 @@
               :url="currentUser.photoURL"
               :alt="currentUser.displayName"
               :title="
-                (currentUser.displayName ||
-                  '<label><i>Name not found</i></label>') +
+                `${currentUser.displayName || 'Name not found'}` +
                 '<br>' +
-                (currentUser.email || '<label><i>Email not found</i></label>')
+                `<sub>${currentUser.email || 'Email not found'}</sub>`
               "
+              indicator
             />
             <TabPrimary
               v-else

components/app/Shortcuts.vue

@@ -22,8 +22,8 @@
               font-bold
               m-1
               text-xs
-              py-2
-              px-4
+              py-1
+              px-2
             "
           >
             {{ key }}

components/collections/SaveRequest.vue

@@ -7,8 +7,8 @@
     <template #body>
       <div class="flex flex-col px-2">
         <label for="selectLabelSaveReq" class="font-semibold text-xs px-4 pb-4">
-          {{ $t("token_req_name") }}</label
-        >
+          {{ $t("request_name") }}
+        </label>
         <input
           id="selectLabelSaveReq"
           v-model="requestData.name"

components/http/BodyParameters.vue

@@ -40,7 +40,7 @@
           font-semibold font-mono
           flex-1
           text-xs
-          py-3
+          py-2
           px-4
           focus:outline-none
         "

components/http/Headers.vue

@@ -62,7 +62,7 @@
           font-semibold font-mono
           flex-1
           text-xs
-          py-3
+          py-2
           px-4
           focus:outline-none
         "

components/http/Parameters.vue

@@ -48,7 +48,7 @@
           font-semibold font-mono
           flex-1
           text-xs
-          py-3
+          py-2
           px-4
           focus:outline-none
         "

components/http/Request.vue

@@ -145,13 +145,13 @@
               class="rounded-l-none"
             />
           </template>
-          <SmartItem :description="$t('token_req_name')" />
           <input
             id="request-name"
             v-model="name"
+            :placeholder="$t('request_name')"
             name="request-name"
             type="text"
-            class="text-sm input"
+            class="mb-2 input"
           />
           <SmartItem
             ref="copyRequest"

components/http/ResponseMeta.vue

@@ -28,11 +28,17 @@
           <span class="text-secondaryDark"> Status: </span>
           {{ response.statusCode || $t("waiting_send_req") }}
         </span>
-        <span v-if="response.meta.responseDuration" class="text-xs">
+        <span
+          v-if="response.meta && response.meta.responseDuration"
+          class="text-xs"
+        >
           <span class="text-secondaryDark"> Time: </span>
           {{ `${response.meta.responseDuration} ms` }}
         </span>
-        <span v-if="response.meta.responseSize" class="text-xs">
+        <span
+          v-if="response.meta && response.meta.responseSize"
+          class="text-xs"
+        >
           <span class="text-secondaryDark"> Size: </span>
           {{ `${response.meta.responseSize} B` }}
         </span>

components/profile/Picture.vue

@@ -14,7 +14,21 @@
       :alt="alt"
       loading="lazy"
     />
-    <div class="rounded shadow-inner inset-0 absolute"></div>
+    <div class="rounded-full shadow-inner inset-0 absolute"></div>
+    <span
+      v-if="indicator"
+      class="
+        bg-accent
+        border-primary
+        rounded-full
+        border-2
+        h-3
+        -top-1
+        -right-1
+        w-3
+        absolute
+      "
+    ></span>
   </div>
 </template>
 
@@ -31,6 +45,10 @@ export default {
       type: String,
       default: "Profile picture",
     },
+    indicator: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>