From b521604b663279ddcaa7f598bda52774f856dc3e Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Thu, 14 Dec 2023 18:00:46 +0530
Subject: [PATCH] fix: collection properties styles

---
 .../assets/themes/base-themes.scss                 |  2 +-
 .../src/components/collections/Properties.vue      | 14 ++++++--------
 .../src/components/graphql/Authorization.vue       |  7 ++++++-
 .../src/components/graphql/Headers.vue             |  7 ++++++-
 .../src/components/http/Authorization.vue          | 10 +++++-----
 .../src/components/http/Headers.vue                | 10 +++++-----
 .../hoppscotch-selfhost-web/tailwind.config.ts     |  1 +
 .../hoppscotch-ui/src/assets/scss/histoire.scss    |  2 +-
 8 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/hoppscotch-common/assets/themes/base-themes.scss b/packages/hoppscotch-common/assets/themes/base-themes.scss
index 73a228cb7..9bc0a4f30 100644
--- a/packages/hoppscotch-common/assets/themes/base-themes.scss
+++ b/packages/hoppscotch-common/assets/themes/base-themes.scss
@@ -17,7 +17,7 @@
   --lower-tertiary-sticky-fold: 7.125rem;
   --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
-  --properties-primary-sticky-fold: 2.05rem;
+  --properties-primary-sticky-fold: 2.063rem;
 }
 
 @mixin light-theme {
diff --git a/packages/hoppscotch-common/src/components/collections/Properties.vue b/packages/hoppscotch-common/src/components/collections/Properties.vue
index 2ae2dcd34..072aae2b7 100644
--- a/packages/hoppscotch-common/src/components/collections/Properties.vue
+++ b/packages/hoppscotch-common/src/components/collections/Properties.vue
@@ -18,12 +18,11 @@
             :is-collection-property="true"
             @change-tab="changeOptionTab"
           />
-          <div class="bg-bannerInfo p-2 flex items-center">
+          <div
+            class="bg-bannerInfo px-4 py-2 flex items-center sticky bottom-0"
+          >
             <icon-lucide-info class="svg-icons mr-2" />
             {{ t("helpers.collection_properties_header") }}
-            <a href="hopp.sh" target="_blank" class="underline">{{
-              t("action.learn_more")
-            }}</a>
           </div>
         </HoppSmartTab>
         <HoppSmartTab
@@ -36,12 +35,11 @@
             :is-root-collection="editingProperties?.isRootCollection"
             :inherited-properties="editingProperties?.inheritedProperties"
           />
-          <div class="bg-bannerInfo p-2 flex items-center">
+          <div
+            class="bg-bannerInfo px-4 py-2 flex items-center sticky bottom-0"
+          >
             <icon-lucide-info class="svg-icons mr-2" />
             {{ t("helpers.collection_properties_authorization") }}
-            <a href="hopp.sh" target="_blank" class="underline">{{
-              t("action.learn_more")
-            }}</a>
           </div>
         </HoppSmartTab>
       </HoppSmartTabs>
diff --git a/packages/hoppscotch-common/src/components/graphql/Authorization.vue b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
index 9e718ced4..becac3c56 100644
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+      class="sticky z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+      :class="[
+        isCollectionProperty
+          ? 'top-propertiesPrimaryStickyFold'
+          : 'top-sidebarPrimaryStickyFold',
+      ]"
     >
       <span class="flex items-center">
         <label class="truncate font-semibold text-secondaryLight">
diff --git a/packages/hoppscotch-common/src/components/graphql/Headers.vue b/packages/hoppscotch-common/src/components/graphql/Headers.vue
index 81da644a4..6e273968b 100644
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -1,6 +1,11 @@
 <template>
   <div
-    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+    class="sticky z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+    :class="[
+      isCollectionProperty
+        ? 'top-propertiesPrimaryStickyFold'
+        : 'top-sidebarPrimaryStickyFold',
+    ]"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("tab.headers") }}
diff --git a/packages/hoppscotch-common/src/components/http/Authorization.vue b/packages/hoppscotch-common/src/components/http/Authorization.vue
index 3cf9a2a66..684a1aec0 100644
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -2,11 +2,11 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
-      :class="{
-        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
-          !isCollectionProperty,
-        'top-propertiesPrimaryStickyFold': isCollectionProperty,
-      }"
+      :class="[
+        isCollectionProperty
+          ? 'top-propertiesPrimaryStickyFold'
+          : 'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold',
+      ]"
     >
       <span class="flex items-center">
         <label class="truncate font-semibold text-secondaryLight">
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index 9e462d863..1bf7effd8 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -2,11 +2,11 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
-      :class="{
-        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
-          !isCollectionProperty,
-        'top-propertiesPrimaryStickyFold': isCollectionProperty,
-      }"
+      :class="[
+        isCollectionProperty
+          ? 'top-propertiesPrimaryStickyFold'
+          : 'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold',
+      ]"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("request.header_list") }}
diff --git a/packages/hoppscotch-selfhost-web/tailwind.config.ts b/packages/hoppscotch-selfhost-web/tailwind.config.ts
index 83598868b..869b94af1 100644
--- a/packages/hoppscotch-selfhost-web/tailwind.config.ts
+++ b/packages/hoppscotch-selfhost-web/tailwind.config.ts
@@ -26,6 +26,7 @@ export default {
         lowerFourthStickyFold: "var(--lower-fourth-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
         sidebarSecondaryStickyFold: "var(--line-height-body)",
+        propertiesPrimaryStickyFold: "var(--properties-primary-sticky-fold)",
       },
     },
   },
diff --git a/packages/hoppscotch-ui/src/assets/scss/histoire.scss b/packages/hoppscotch-ui/src/assets/scss/histoire.scss
index 64a197c84..b44d9b890 100644
--- a/packages/hoppscotch-ui/src/assets/scss/histoire.scss
+++ b/packages/hoppscotch-ui/src/assets/scss/histoire.scss
@@ -22,7 +22,7 @@
   --lower-tertiary-sticky-fold: 7.125rem;
   --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
-  --properties-primary-sticky-fold: 2.05rem;
+  --properties-primary-sticky-fold: 2.063rem;
 }
 
 @mixin dark-theme {