From 502da61b8b039d61d78ae0b9bf6a78b539e0d13f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 6 Dec 2023 23:34:02 +0530
Subject: [PATCH] fix: ui styles

---
 packages/hoppscotch-common/locales/en.json    | 30 +++++------
 .../src/components/share/CreateModal.vue      | 18 ++++---
 .../src/components/share/CustomizeModal.vue   | 51 ++++++++++++-------
 .../src/components/share/Request.vue          | 17 ++++---
 .../src/components/share/templates/Button.vue |  8 +--
 .../src/components/share/templates/Embeds.vue | 41 ++++++++-------
 .../src/components/share/templates/Link.vue   |  4 +-
 .../src/components/smart/Checkbox.vue         |  1 +
 8 files changed, 93 insertions(+), 77 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 6e4912501..eeaf86ade 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -434,7 +434,7 @@
     "confirm": "Confirm",
     "customize_request": "Customize Request",
     "edit_request": "Edit Request",
-    "share_request":"Share Request",
+    "share_request": "Share Request",
     "import_export": "Import / Export"
   },
   "mqtt": {
@@ -623,30 +623,30 @@
     "additional": "Additional Settings",
     "verify_email": "Verify email"
   },
-  "shared_requests":{
-    "button":"Button",
+  "shared_requests": {
+    "button": "Button",
     "button_info": "Create a 'Run in Hoppscotch' button for your website, blog or a README.",
     "customize": "Customize",
     "creating_widget": "Creating widget",
     "copy_html": "Copy HTML",
     "copy_link": "Copy Link",
     "copy_markdown": "Copy Markdown",
-    "deleted":"Shared request deleted",
+    "deleted": "Shared request deleted",
     "description": "Select a widget, you can change and customize this later",
-    "embed":"Embed",
+    "embed": "Embed",
     "embed_info": "Add a mini 'Hoppscotch API Playground' to your website, blog or documentation.",
-    "link":"Link",
+    "link": "Link",
     "link_info": "Create a shareable link to share with anyone on the internet with view access.",
     "modified": "Shared request modified",
-    "not_found":"Shared request not found",
+    "not_found": "Shared request not found",
     "open_new_tab": "Open in new tab",
-    "preview":"Preview",
-    "run_in_hoppscotch":"Run in Hoppscotch",
-    "theme":{
-      "dark":"Dark",
-      "light":"Light",
-      "system" :"System",
-      "title":"Theme"
+    "preview": "Preview",
+    "run_in_hoppscotch": "Run in Hoppscotch",
+    "theme": {
+      "dark": "Dark",
+      "light": "Light",
+      "system": "System",
+      "title": "Theme"
     }
   },
   "shortcut": {
@@ -692,7 +692,7 @@
       "save_to_collections": "Save to Collections",
       "send_request": "Send Request",
       "show_code": "Generate code snippet",
-      "share_request":"Share Request",
+      "share_request": "Share Request",
       "title": "Request"
     },
     "response": {
diff --git a/packages/hoppscotch-common/src/components/share/CreateModal.vue b/packages/hoppscotch-common/src/components/share/CreateModal.vue
index eb79e6c65..3a1d08666 100644
--- a/packages/hoppscotch-common/src/components/share/CreateModal.vue
+++ b/packages/hoppscotch-common/src/components/share/CreateModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="selectedWidget"
-    class="divide-y divide-divider rounded border border-divider"
+    class="border divide-y rounded divide-divider border-divider"
   >
     <div v-if="loading" class="px-4 py-2">
       {{ t("shared_requests.creating_widget") }}
@@ -10,17 +10,17 @@
       {{ t("shared_requests.description") }}
     </div>
     <div class="flex flex-col divide-y divide-divider">
-      <div class="flex flex-col space-y-4 p-4">
+      <div class="flex flex-col p-4 space-y-4">
         <div
           v-for="widget in widgets"
           :key="widget.value"
-          class="flex cursor-pointer flex-col space-y-2 rounded border border-divider px-4 py-3 hover:bg-dividerLight"
+          class="flex flex-col p-4 border rounded cursor-pointer border-divider hover:bg-dividerLight"
           :class="{
             '!border-accentLight': selectedWidget.value === widget.value,
           }"
           @click="selectedWidget = widget"
         >
-          <span class="text-md font-bold">
+          <span class="mb-1 font-bold text-secondaryDark">
             {{ widget.label }}
           </span>
           <span class="text-tiny">
@@ -28,9 +28,13 @@
           </span>
         </div>
       </div>
-      <div class="flex flex-col divide-y divide-divider">
-        <div class="px-4 py-3">{{ t("shared_requests.preview") }}</div>
-        <div class="flex flex-col items-center justify-center px-4 py-10">
+      <div class="flex flex-col items-center justify-center p-4">
+        <span
+          class="flex justify-center flex-1 mb-2 text-secondaryLight text-tiny"
+        >
+          {{ t("shared_requests.preview") }}
+        </span>
+        <div class="w-full">
           <ShareTemplatesEmbeds
             v-if="selectedWidget.value === 'embed'"
             :endpoint="request?.endpoint"
diff --git a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue b/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
index 36b4ca8f6..7131315a9 100644
--- a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
+++ b/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="selectedWidget"
-    class="divide-y divide-divider rounded border border-divider"
+    class="border divide-y rounded divide-divider border-divider"
   >
     <div v-if="loading" class="px-4 py-2">
       {{ t("shared_requests.creating_widget") }}
@@ -14,7 +14,7 @@
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div v-else class="flex flex-col divide-y divide-divider">
-      <div class="flex flex-col space-y-4 p-4">
+      <div class="flex flex-col p-2 space-y-2">
         <HoppSmartRadioGroup
           v-model="selectedWidget.value"
           :radios="widgets"
@@ -22,9 +22,9 @@
         />
       </div>
       <div class="flex flex-col divide-y divide-divider">
-        <div class="flex items-center justify-center px-4 py-8">
-          <div v-if="selectedWidget.value === 'embed'" class="w-full flex-1">
-            <div class="flex flex-col pb-8">
+        <div class="flex items-center justify-center px-6 py-4">
+          <div v-if="selectedWidget.value === 'embed'" class="w-full">
+            <div class="flex flex-col pb-4">
               <div
                 v-for="option in embedOptions.tabs"
                 :key="option.value"
@@ -36,7 +36,8 @@
                 <HoppSmartCheckbox
                   :on="option.enabled"
                   @change="removeEmbedOption(option.value)"
-                />
+                >
+                </HoppSmartCheckbox>
               </div>
               <div class="flex items-center justify-between">
                 <span>
@@ -49,13 +50,11 @@
                     theme="popover"
                     :on-shown="() => tippyActions!.focus()"
                   >
-                    <span class="select-wrapper">
-                      <HoppButtonSecondary
-                        class="ml-2 rounded-none pr-8 capitalize"
-                        :label="embedOptions.theme"
-                        :icon="embedThemeIcon"
-                      />
-                    </span>
+                    <HoppButtonSecondary
+                      class="!py-2 !px-0 capitalize"
+                      :label="embedOptions.theme"
+                      :icon="embedThemeIcon"
+                    />
                     <template #content="{ hide }">
                       <div
                         ref="tippyActions"
@@ -102,14 +101,20 @@
                 </div>
               </div>
             </div>
+            <span
+              class="flex justify-center mb-2 text-secondaryLight text-tiny"
+            >
+              {{ t("shared_requests.preview") }}
+            </span>
             <ShareTemplatesEmbeds
               :endpoint="request?.endpoint"
               :method="request?.method"
               :model-value="embedOptions"
             />
-            <div class="flex items-center justify-center py-4">
+            <div class="flex items-center justify-center">
               <HoppButtonSecondary
                 :label="t('shared_requests.copy_html')"
+                class="underline text-secondaryDark"
                 @click="
                   copyContent({
                     widget: 'embed',
@@ -126,12 +131,18 @@
             <div
               v-for="variant in buttonVariants"
               :key="variant.id"
-              class="flex flex-col space-y-4"
+              class="flex flex-col"
             >
+              <span
+                class="flex justify-center mb-2 text-secondaryLight text-tiny"
+              >
+                {{ t("shared_requests.preview") }}
+              </span>
               <ShareTemplatesButton :img="variant.img" />
               <div class="flex items-center justify-between">
                 <HoppButtonSecondary
                   :label="t('shared_requests.copy_html')"
+                  class="underline text-secondaryDark"
                   @click="
                     copyContent({
                       widget: 'button',
@@ -142,6 +153,7 @@
                 />
                 <HoppButtonSecondary
                   :label="t('shared_requests.copy_markdown')"
+                  class="underline text-secondaryDark"
                   @click="
                     copyContent({
                       widget: 'button',
@@ -157,12 +169,17 @@
             <div
               v-for="variant in linkVariants"
               :key="variant.type"
-              class="flex flex-col items-center justify-center space-y-2"
+              class="flex flex-col items-center justify-center"
             >
+              <span
+                class="flex justify-center mb-2 text-secondaryLight text-tiny"
+              >
+                {{ t("shared_requests.preview") }}
+              </span>
               <ShareTemplatesLink :link="variant.link" :label="variant.label" />
-
               <HoppButtonSecondary
                 :label="t(`shared_requests.copy_${variant.type}`)"
+                class="underline text-secondaryDark"
                 @click="
                   copyContent({
                     widget: 'link',
diff --git a/packages/hoppscotch-common/src/components/share/Request.vue b/packages/hoppscotch-common/src/components/share/Request.vue
index a81ae8710..d62742e5e 100644
--- a/packages/hoppscotch-common/src/components/share/Request.vue
+++ b/packages/hoppscotch-common/src/components/share/Request.vue
@@ -1,31 +1,31 @@
 <template>
   <div
-    class="group flex items-stretch"
+    class="flex items-stretch group"
     @contextmenu.prevent="options!.tippy.show()"
   >
     <div
       v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
-      class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center py-2"
+      class="flex items-center justify-center flex-1 min-w-0 py-2 cursor-pointer pointer-events-auto"
       :title="`${timeStamp}`"
       @click="openInNewTab"
     >
       <span
-        class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
+        class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
         :style="{ color: requestLabelColor }"
       >
-        <span class="truncate text-tiny font-semibold">
+        <span class="font-semibold truncate text-tiny">
           {{ parseRequest.method }}
         </span>
       </span>
       <span
-        class="pointer-events-none flex min-w-0 flex-1 items-center pr-2 transition group-hover:text-secondaryDark"
+        class="flex items-center flex-1 min-w-0 pr-2 transition pointer-events-none group-hover:text-secondaryDark"
       >
         <span class="flex-1 truncate">
           {{ parseRequest.endpoint }}
         </span>
       </span>
       <span
-        class="flex-1 truncate border-l border-dividerDark px-2 text-secondaryLight group-hover:text-secondaryDark"
+        class="flex px-2 truncate text-secondaryLight group-hover:text-secondaryDark"
       >
         {{ parseRequest.name }}
       </span>
@@ -69,7 +69,7 @@
               />
               <HoppSmartItem
                 ref="customizeAction"
-                :icon="IconFileEdit"
+                :icon="IconCustomize"
                 :label="`${t('shared_requests.customize')}`"
                 :shortcut="['E']"
                 @click="
@@ -110,7 +110,7 @@ import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
 import { Shortcode } from "~/helpers/shortcode/Shortcode"
 import IconArrowUpRight from "~icons/lucide/arrow-up-right-square"
 import IconMoreVertical from "~icons/lucide/more-vertical"
-import IconFileEdit from "~icons/lucide/file-edit"
+import IconCustomize from "~icons/lucide/settings-2"
 import IconTrash2 from "~icons/lucide/trash-2"
 import { shortDateTime } from "~/helpers/utils/date"
 
@@ -135,6 +135,7 @@ const tippyActions = ref<TippyComponent | null>(null)
 const openInNewTabAction = ref<HTMLButtonElement | null>(null)
 const customizeAction = ref<HTMLButtonElement | null>(null)
 const deleteAction = ref<HTMLButtonElement | null>(null)
+const options = ref<any | null>(null)
 
 const parseRequest = computed(() =>
   pipe(props.request.request, JSON.parse, translateToNewRequest)
diff --git a/packages/hoppscotch-common/src/components/share/templates/Button.vue b/packages/hoppscotch-common/src/components/share/templates/Button.vue
index c3bbd7fa4..4d1e8e4d5 100644
--- a/packages/hoppscotch-common/src/components/share/templates/Button.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Button.vue
@@ -1,10 +1,6 @@
 <template>
-  <div
-    class="flex items-center justify-center rounded border border-dotted border-dividerDark p-5"
-  >
-    <a href="/" target="_blank">
-      <img :src="img" :alt="t('shared_requests.run_in_hoppscotch')" />
-    </a>
+  <div class="flex flex-col items-center p-4 border rounded border-dividerDark">
+    <img :src="img" :alt="t('shared_requests.run_in_hoppscotch')" />
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue b/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
index fe10b2be4..a6b4f5a63 100644
--- a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
@@ -1,32 +1,30 @@
 <template>
   <div
-    class="flex flex-col rounded border border-dotted border-divider p-5"
+    class="flex flex-col p-4 border rounded border-dividerDark"
     :class="{
       'bg-accentContrast': isEmbedThemeLight,
     }"
   >
     <div
-      class="flex items-stretch space-x-2 rounded border-divider"
+      class="flex items-stretch space-x-2"
       :class="{
         'bg-accentContrast': isEmbedThemeLight,
       }"
     >
-      <span
-        class="flex max-w-[4rem] items-center justify-center rounded border border-divider p-2 text-tiny"
-        :class="{
-          '!border-dividerLight bg-accentContrast text-primary':
-            isEmbedThemeLight,
-        }"
-      >
-        <span class="truncate">
-          {{ method }}
-        </span>
-      </span>
-      <span
-        class="flex max-w-46 items-center rounded border border-divider p-2"
-      >
+      <span class="flex items-center min-w-0 border rounded border-divider">
         <span
-          class="min-w-0 truncate"
+          class="flex max-w-[4rem] rounded-l h-full items-center justify-center border-r border-divider text-tiny"
+          :class="{
+            '!border-dividerLight bg-accentContrast text-primary':
+              isEmbedThemeLight,
+          }"
+        >
+          <span class="px-3 truncate">
+            {{ method }}
+          </span>
+        </span>
+        <span
+          class="px-3 truncate"
           :class="{
             'text-primary': isEmbedThemeLight,
           }"
@@ -35,7 +33,7 @@
         </span>
       </span>
       <button
-        class="flex items-center justify-center rounded border border-dividerDark bg-primaryDark px-3 py-2 font-semibold text-secondary"
+        class="flex items-center justify-center flex-shrink-0 px-3 py-2 font-semibold border rounded border-dividerDark bg-primaryDark text-secondary"
         :class="{
           '!bg-accentContrast text-primaryLight': isEmbedThemeLight,
         }"
@@ -44,10 +42,10 @@
       </button>
     </div>
     <div
-      class="flex border-divider"
+      class="flex"
       :class="{
         'bg-accentContrast text-primary': isEmbedThemeLight,
-        'border-b pt-2 ': !noActiveTab,
+        'border-b border-divider pt-2': !noActiveTab,
       }"
     >
       <span
@@ -57,7 +55,8 @@
         class="px-2 py-2"
         :class="{
           'border-b border-dividerDark':
-            embedOptions.selectedTab === option.value,
+            embedOptions.tabs.filter((tab) => tab.enabled)[0]?.value ===
+            option.value,
         }"
       >
         {{ option.label }}
diff --git a/packages/hoppscotch-common/src/components/share/templates/Link.vue b/packages/hoppscotch-common/src/components/share/templates/Link.vue
index 156042822..42ce75930 100644
--- a/packages/hoppscotch-common/src/components/share/templates/Link.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Link.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex items-center justify-center rounded border border-dotted border-dividerDark p-5"
-  >
+  <div class="flex flex-col items-center p-4 border rounded border-dividerDark">
     <span
       :class="{
         'border-b border-secondary': label,
diff --git a/packages/hoppscotch-ui/src/components/smart/Checkbox.vue b/packages/hoppscotch-ui/src/components/smart/Checkbox.vue
index 096e802f1..ddbc26b82 100644
--- a/packages/hoppscotch-ui/src/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Checkbox.vue
@@ -75,6 +75,7 @@ const emit = defineEmits<{
       @apply w-4;
       @apply mr-2;
       @apply transition;
+      @apply empty:mr-0;
       content: "";
     }