Merge pull request #7072 from nocodb/nc-fix/join-cloud-btn

fix: Added new join cloud btn

packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@@ -79,7 +79,7 @@ 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">
     <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,22 +205,9 @@ 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 v-else class="flex flex-row w-full justify-between pt-0.5 truncate">
-      <div class="flex flex-wrap mb-1">
+      <GeneralJoinCloud />
-        <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,91 @@
-<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 border-brand-500 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 text-gray-500 prose-sm" style="line-height: 1.3125rem">Try NocoDB Cloud</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"
+    </a>
-    >
+    <a-tooltip overlay-class-name="nc-join-cloud-tooltip">
-      <component :is="iconMap.cloud" class="mt-[1px] text-black font-bold" />
+      <template #title>
-      <div class="px-1 text-xs font-bold text-gray-800">{{ $t('general.join') }}</div>
+        <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-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
-      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>
+            <div class="self-stretch justify-start items-center gap-2 inline-flex">
+              <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 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>
             </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="flex flex-col items-start w-full">
+              <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" />
+                  <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>
+            </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>
+        </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>

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