fix: ui styles

2023-12-06 23:34:02 +05:30
parent f2777a9a75
commit 502da61b8b
8 changed files with 93 additions and 77 deletions
--- 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": {
--- 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"
--- 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',
--- 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)
--- 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>

--- 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 }}
--- 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,
--- 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: "";
    }