From 8a43c440c7d68f1cde039308539a25823f31783f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 4 Dec 2023 07:14:29 +0000
Subject: [PATCH 1/5] fix: Added new join cloud btn

---
 .../components/dashboard/Sidebar/UserInfo.vue |  23 +---
 .../nc-gui/components/general/JoinCloud.vue   | 111 +++++++++++++++---
 packages/nc-gui/lang/en.json                  |   1 +
 3 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index 5bc1eed06f..b8cd36b83f 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -79,7 +79,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-2">
+  <div class="flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-1">
+    <div v-if="!appInfo.ee && isMounted && !isMobileMode" class="flex flex-row w-full justify-between pt-0.5 truncate">
+      <GeneralJoinCloud />
+    </div>
     <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
       <div
         class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
@@ -205,23 +208,7 @@ onMounted(() => {
     </NcDropdown>
 
     <template v-if="isMobileMode"></template>
-    <div v-else-if="appInfo.ee" class="text-gray-500 text-xs pl-3">© 2023 NocoDB. Inc</div>
-    <div v-else-if="isMounted" class="flex flex-row justify-between pt-1 truncate">
-      <div class="flex flex-wrap mb-1">
-        <GithubButton
-          class="px-2 mb-1"
-          href="https://github.com/nocodb/nocodb"
-          data-icon="octicon-star"
-          data-show-count="true"
-          data-size="large"
-        >
-          Star
-        </GithubButton>
-        <div>
-          <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
-        </div>
-      </div>
-    </div>
+    <div v-else-if="appInfo.ee" class="text-gray-500 text-xs pl-3 mt-1">© 2023 NocoDB. Inc</div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index 38d8dc8ed0..8c4399a772 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -1,23 +1,96 @@
-<script lang="ts" setup>
-import { iconMap } from '#imports'
-</script>
+<script lang="ts" setup></script>
 
 <template>
-  <a
-    v-e="['c:navbar:join-cloud']"
-    class="flex !no-underline"
-    href="https://app.nocodb.com/#/signin?utm_source=OSS&utm_medium=OSS&utm_campaign=OSS&utm_content=OSS"
-  >
-    <div
-      class="flex justify-center items-center rounded-l-[3px] w-full cursor-pointer px-2 py-1 !text-current !no-underline text-primary border-1 border-[#cdd1d6] bg-[#EFF2F6] hover:bg-[#e9ebef] m-0"
+  <div class="flex flex-row items-center w-full bg-white rounded-lg border-1 shadow-sm mb-0.5 overflow-hidden">
+    <a
+      v-e="['c:navbar:join-cloud']"
+      class="flex flex-grow !no-underline items-center justify-center border-r-1 h-full hover:bg-gray-100"
+      href="https://app.nocodb.com/#/signin?utm_source=OSS&utm_medium=OSS&utm_campaign=OSS&utm_content=OSS"
     >
-      <component :is="iconMap.cloud" class="mt-[1px] text-black font-bold" />
-      <div class="px-1 text-xs font-bold text-gray-800">{{ $t('general.join') }}</div>
-    </div>
-    <div
-      class="group flex justify-center items-center rounded-r-[3px] w-full cursor-pointer px-1 py-1 text-primary border-r-1 border-b-1 border-t-1 border-[#cdd1d6] m-0"
-    >
-      <div class="px-1 text-xs font-semibold group-hover:text-[#0a69da] text-gray-900">NocoDB Cloud</div>
-    </div>
-  </a>
+      <div class="px-1 font-semibold text-gray-700 prose-sm" style="line-height: 1.3125rem">
+        {{ $t('labels.joinCloudForFree') }}
+      </div>
+    </a>
+    <a-tooltip overlay-class-name="nc-join-cloud-tooltip">
+      <template #title>
+        <div class="w-68 bg-transparent overflow-hidden rounded-3xl shadow border border-zinc-100">
+          <div class="p-6 bg-white flex-col justify-start items-center gap-4 inline-flex pb-7">
+            <div class="self-stretch justify-start items-center gap-3 inline-flex">
+              <div class="text-slate-800 text-2xl font-bold leading-9">Business</div>
+              <div class="px-2 py-1 bg-brand-50 rounded-lg justify-center items-center gap-2 flex">
+                <div class="text-brand-500 text-sm font-medium leading-tight">Usage based</div>
+              </div>
+            </div>
+            <div class="self-stretch justify-start items-center gap-2 inline-flex">
+              <div class="text-gray-500 text-base font-bold leading-normal">$</div>
+              <div class="text-gray-500 text-base font-bold line-through leading-normal">99 Onwards</div>
+              <div class="text-neutral-900 text-4xl font-bold leading-10">Free</div>
+            </div>
+            <div class="self-stretch text-gray-500 text-base font-bold leading-normal">/ month / workspace</div>
+            <div
+              class="self-stretch px-4 bg-white rounded-lg shadow border border-gray-200 justify-center items-center gap-2 inline-flex"
+            >
+              <div class="text-gray-700 text-sm font-semibold leading-tight">Start for Free</div>
+            </div>
+            <div class="self-stretch text-center text-gray-500 text-xs font-medium leading-none">No credit card required</div>
+            <div class="self-stretch opacity-0 text-center text-gray-500 text-xs font-medium leading-none">
+              No credit card required
+            </div>
+            <div class="self-stretch text-slate-600 text-sm font-semibold leading-tight">Everything in Team plus:</div>
+            <div class="self-stretch justify-between items-center inline-flex">
+              <div class="justify-end items-center gap-3 flex">
+                <GeneralIcon icon="check" class="text-brand-500" />
+                <div class="text-brand-500 text-lg font-bold leading-normal">20 Users Included</div>
+              </div>
+            </div>
+            <div class="self-stretch justify-between items-center inline-flex">
+              <div class="justify-start items-center gap-3 flex">
+                <GeneralIcon icon="check" class="text-brand-500" />
+
+                <div class="text-slate-800 text-sm font-semibold leading-tight">300k + rows/workspace</div>
+              </div>
+            </div>
+            <div class="self-stretch justify-between items-center inline-flex">
+              <div class="justify-start items-center gap-3 flex">
+                <GeneralIcon icon="check" class="text-brand-500" />
+
+                <div class="text-slate-800 text-sm font-semibold leading-tight">25 GB + storage</div>
+              </div>
+            </div>
+            <div class="self-stretch justify-between items-center inline-flex">
+              <div class="justify-start items-center gap-3 flex">
+                <GeneralIcon icon="check" class="text-brand-500" />
+
+                <div class="text-slate-800 text-sm font-semibold leading-tight">APIs - 10+ Requests/second</div>
+              </div>
+            </div>
+            <div class="self-stretch justify-start items-center gap-3 inline-flex">
+              <GeneralIcon icon="check" class="text-brand-500" />
+
+              <div class="text-slate-800 text-sm font-semibold leading-tight">Support for External Database</div>
+            </div>
+            <div class="self-stretch justify-start items-center gap-3 inline-flex">
+              <GeneralIcon icon="check" class="text-brand-500" />
+
+              <div class="text-slate-800 text-sm font-semibold leading-tight">Folders for views</div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <NcButton type="text" size="small" class="!rounded-l-none !rounded-r-lg">
+        <GeneralIcon icon="help" class="!text-lg -mt-0.5 text-gray-700" />
+      </NcButton>
+    </a-tooltip>
+  </div>
 </template>
+
+<style lang="scss">
+.nc-join-cloud-tooltip {
+  .ant-tooltip-inner {
+    @apply !bg-transparent !p-0 !text-gray-700 rounded-3xl;
+  }
+  .ant-tooltip-arrow-content {
+    @apply !bg-white;
+  }
+}
+</style>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 8087854b9e..6fb57bf1d2 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -581,6 +581,7 @@
     "childTable": "Child table",
     "childColumn": "Child field",
     "childField": "Child field",
+    "joinCloudForFree": "Join Cloud for Free",
     "linkToAnotherRecord": "Link to another record",
     "links": "Links",
     "onUpdate": "On Update",

From c145d58fff65f1d2d0e593f33e1efbb26c43c849 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 4 Dec 2023 07:14:29 +0000
Subject: [PATCH 2/5] fix: Improved join cloud btn

---
 .../components/dashboard/Sidebar/UserInfo.vue |  6 +--
 .../nc-gui/components/general/JoinCloud.vue   | 51 +++++++++++--------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index b8cd36b83f..684808036a 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -80,9 +80,6 @@ onMounted(() => {
 
 <template>
   <div class="flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-1">
-    <div v-if="!appInfo.ee && isMounted && !isMobileMode" class="flex flex-row w-full justify-between pt-0.5 truncate">
-      <GeneralJoinCloud />
-    </div>
     <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
       <div
         class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
@@ -209,6 +206,9 @@ onMounted(() => {
 
     <template v-if="isMobileMode"></template>
     <div v-else-if="appInfo.ee" class="text-gray-500 text-xs pl-3 mt-1">© 2023 NocoDB. Inc</div>
+    <div v-else class="flex flex-row w-full justify-between pt-0.5 truncate">
+      <GeneralJoinCloud />
+    </div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index 8c4399a772..6c4f3e7534 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -7,61 +7,68 @@
       class="flex flex-grow !no-underline items-center justify-center border-r-1 h-full hover:bg-gray-100"
       href="https://app.nocodb.com/#/signin?utm_source=OSS&utm_medium=OSS&utm_campaign=OSS&utm_content=OSS"
     >
-      <div class="px-1 font-semibold text-gray-700 prose-sm" style="line-height: 1.3125rem">
-        {{ $t('labels.joinCloudForFree') }}
+      <div class="px-1 text-gray-500 prose-sm" style="line-height: 1.3125rem">Try NocoDB Cloud</div>
+      <div class="relative absolute h-8 w-8">
+        <img
+          src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTVtdDhhaTBlYjN3NTR0bmR2aXc0YzlvNmkwMGg0c3E3NzM1ajEzaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/iicVNq4tGrWfYJiPM0/giphy.gif"
+          width="48"
+          class="mt-2 absolute -top-1 left-0"
+        />
       </div>
     </a>
     <a-tooltip overlay-class-name="nc-join-cloud-tooltip">
       <template #title>
-        <div class="w-68 bg-transparent overflow-hidden rounded-3xl shadow border border-zinc-100">
-          <div class="p-6 bg-white flex-col justify-start items-center gap-4 inline-flex pb-7">
+        <div class="w-72 bg-transparent overflow-hidden rounded-3xl shadow border border-zinc-100">
+          <div class="p-6 bg-white flex-col justify-start items-center gap-4 inline-flex pb-7 w-full">
             <div class="self-stretch justify-start items-center gap-3 inline-flex">
-              <div class="text-slate-800 text-2xl font-bold leading-9">Business</div>
+              <div class="text-slate-800 text-lg font-semibold leading-9">NocoDB Cloud</div>
               <div class="px-2 py-1 bg-brand-50 rounded-lg justify-center items-center gap-2 flex">
                 <div class="text-brand-500 text-sm font-medium leading-tight">Usage based</div>
               </div>
             </div>
             <div class="self-stretch justify-start items-center gap-2 inline-flex">
-              <div class="text-gray-500 text-base font-bold leading-normal">$</div>
-              <div class="text-gray-500 text-base font-bold line-through leading-normal">99 Onwards</div>
+              <div class="text-gray-500 text-base font-bold line-through leading-normal">
+                $ 99
+                <span class="font-thin text-gray-500"> Onwards </span>
+              </div>
               <div class="text-neutral-900 text-4xl font-bold leading-10">Free</div>
             </div>
             <div class="self-stretch text-gray-500 text-base font-bold leading-normal">/ month / workspace</div>
-            <div
-              class="self-stretch px-4 bg-white rounded-lg shadow border border-gray-200 justify-center items-center gap-2 inline-flex"
-            >
-              <div class="text-gray-700 text-sm font-semibold leading-tight">Start for Free</div>
-            </div>
-            <div class="self-stretch text-center text-gray-500 text-xs font-medium leading-none">No credit card required</div>
-            <div class="self-stretch opacity-0 text-center text-gray-500 text-xs font-medium leading-none">
+
+            <a href="https://app.nocodb.com/#/signin" target="_blank" class="!no-underline">
+              <NcButton class="text-gray-700 text-base font-semibold leading-tight py-4 w-full">Start for Free</NcButton>
+            </a>
+            <div class="self-stretch text-center text-gray-500 text-xs font-medium leading-none mb-4">
               No credit card required
             </div>
-            <div class="self-stretch text-slate-600 text-sm font-semibold leading-tight">Everything in Team plus:</div>
-            <div class="self-stretch justify-between items-center inline-flex">
-              <div class="justify-end items-center gap-3 flex">
-                <GeneralIcon icon="check" class="text-brand-500" />
-                <div class="text-brand-500 text-lg font-bold leading-normal">20 Users Included</div>
+            <div class="flex flex-col items-start w-full">
+              <div class="self-stretch text-gray-500 text-xs font-semibold leading-tight mb-2">Includes</div>
+              <div class="self-stretch justify-between items-center inline-flex">
+                <div class="justify-end items-center gap-3 flex">
+                  <GeneralIcon icon="check" class="text-brand-500" />
+                  <div class="text-brand-500 text-lg font-bold leading-normal">20 Users</div>
+                </div>
               </div>
             </div>
             <div class="self-stretch justify-between items-center inline-flex">
               <div class="justify-start items-center gap-3 flex">
                 <GeneralIcon icon="check" class="text-brand-500" />
 
-                <div class="text-slate-800 text-sm font-semibold leading-tight">300k + rows/workspace</div>
+                <div class="text-slate-800 text-sm font-semibold leading-tight">300k rows / workspace</div>
               </div>
             </div>
             <div class="self-stretch justify-between items-center inline-flex">
               <div class="justify-start items-center gap-3 flex">
                 <GeneralIcon icon="check" class="text-brand-500" />
 
-                <div class="text-slate-800 text-sm font-semibold leading-tight">25 GB + storage</div>
+                <div class="text-slate-800 text-sm font-semibold leading-tight">25 GB+ storage</div>
               </div>
             </div>
             <div class="self-stretch justify-between items-center inline-flex">
               <div class="justify-start items-center gap-3 flex">
                 <GeneralIcon icon="check" class="text-brand-500" />
 
-                <div class="text-slate-800 text-sm font-semibold leading-tight">APIs - 10+ Requests/second</div>
+                <div class="text-slate-800 text-sm font-semibold leading-tight">APIs - 10+ requests / second</div>
               </div>
             </div>
             <div class="self-stretch justify-start items-center gap-3 inline-flex">

From a2e41ed7fd22e685147ae2653662cb75999c5742 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 4 Dec 2023 07:14:29 +0000
Subject: [PATCH 3/5] fix: Minor UI ifx

---
 packages/nc-gui/components/general/JoinCloud.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index 6c4f3e7534..3a90563c41 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -42,7 +42,7 @@
               No credit card required
             </div>
             <div class="flex flex-col items-start w-full">
-              <div class="self-stretch text-gray-500 text-xs font-semibold leading-tight mb-2">Includes</div>
+              <div class="self-stretch text-gray-500 text-base font-semibold leading-tight mb-2">Includes</div>
               <div class="self-stretch justify-between items-center inline-flex">
                 <div class="justify-end items-center gap-3 flex">
                   <GeneralIcon icon="check" class="text-brand-500" />

From b5204a2b68ab3d1633e0f2d016cf9280ae11ff88 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 4 Dec 2023 07:14:29 +0000
Subject: [PATCH 4/5] fix: Improved join cloud btn UI

---
 packages/nc-gui/components/general/JoinCloud.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index 3a90563c41..aee6ed0c4c 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -1,20 +1,13 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="flex flex-row items-center w-full bg-white rounded-lg border-1 shadow-sm mb-0.5 overflow-hidden">
+  <div class="flex flex-row items-center w-full bg-white rounded-lg border-1 border-brand-500 shadow-sm mb-0.5 overflow-hidden">
     <a
       v-e="['c:navbar:join-cloud']"
       class="flex flex-grow !no-underline items-center justify-center border-r-1 h-full hover:bg-gray-100"
       href="https://app.nocodb.com/#/signin?utm_source=OSS&utm_medium=OSS&utm_campaign=OSS&utm_content=OSS"
     >
       <div class="px-1 text-gray-500 prose-sm" style="line-height: 1.3125rem">Try NocoDB Cloud</div>
-      <div class="relative absolute h-8 w-8">
-        <img
-          src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTVtdDhhaTBlYjN3NTR0bmR2aXc0YzlvNmkwMGg0c3E3NzM1ajEzaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/iicVNq4tGrWfYJiPM0/giphy.gif"
-          width="48"
-          class="mt-2 absolute -top-1 left-0"
-        />
-      </div>
     </a>
     <a-tooltip overlay-class-name="nc-join-cloud-tooltip">
       <template #title>

From 21e803e64be8bec5db48fa7f83b540a4442328b1 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 4 Dec 2023 15:35:20 +0530
Subject: [PATCH 5/5] fix: remove folder for views

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/general/JoinCloud.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index aee6ed0c4c..bf64e24686 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -26,7 +26,7 @@
               </div>
               <div class="text-neutral-900 text-4xl font-bold leading-10">Free</div>
             </div>
-            <div class="self-stretch text-gray-500 text-base font-bold leading-normal">/ month / workspace</div>
+            <div class="self-stretch text-gray-500 text-base leading-normal">/ month / workspace</div>
 
             <a href="https://app.nocodb.com/#/signin" target="_blank" class="!no-underline">
               <NcButton class="text-gray-700 text-base font-semibold leading-tight py-4 w-full">Start for Free</NcButton>
@@ -61,7 +61,7 @@
               <div class="justify-start items-center gap-3 flex">
                 <GeneralIcon icon="check" class="text-brand-500" />
 
-                <div class="text-slate-800 text-sm font-semibold leading-tight">APIs - 10+ requests / second</div>
+                <div class="text-slate-800 text-sm font-semibold leading-tight">APIs : 10+ requests / second</div>
               </div>
             </div>
             <div class="self-stretch justify-start items-center gap-3 inline-flex">
@@ -69,11 +69,6 @@
 
               <div class="text-slate-800 text-sm font-semibold leading-tight">Support for External Database</div>
             </div>
-            <div class="self-stretch justify-start items-center gap-3 inline-flex">
-              <GeneralIcon icon="check" class="text-brand-500" />
-
-              <div class="text-slate-800 text-sm font-semibold leading-tight">Folders for views</div>
-            </div>
           </div>
         </div>
       </template>