fix: Added new join cloud btn

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="appInfo.ee" class="text-gray-500 text-xs pl-3 mt-1">© 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>
 </template>
 

packages/nc-gui/components/general/JoinCloud.vue

@@ -1,23 +1,96 @@
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { iconMap } from '#imports'
-</script>
 
 <template>
+  <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 !no-underline"
+      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
+      <div class="px-1 font-semibold text-gray-700 prose-sm" style="line-height: 1.3125rem">
-      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"
+        {{ $t('labels.joinCloudForFree') }}
-    >
+      </div>
-      <component :is="iconMap.cloud" class="mt-[1px] text-black font-bold" />
+    </a>
-      <div class="px-1 text-xs font-bold text-gray-800">{{ $t('general.join') }}</div>
+    <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="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"
+              class="self-stretch px-4 bg-white rounded-lg shadow border border-gray-200 justify-center items-center gap-2 inline-flex"
             >
-      <div class="px-1 text-xs font-semibold group-hover:text-[#0a69da] text-gray-900">NocoDB Cloud</div>
+              <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>
-  </a>
 </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>

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",