From d8cbe758f02c8a0030015636bf5495ef9fd974d2 Mon Sep 17 00:00:00 2001
From: reenphygeorge <reenphygeorge@gmail.com>
Date: Wed, 20 Sep 2023 12:22:01 +0530
Subject: [PATCH 1/6] feat(nc-gui): cloud button ui update

---
 .../components/dashboard/Sidebar/UserInfo.vue |  2 +-
 .../nc-gui/components/general/JoinCloud.vue   | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index af0e8cd7dc..f965f62c75 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -144,7 +144,7 @@ onMounted(() => {
 
     <div v-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 flex-wrap pt-1 truncate">
-      <div class="flex items-start flex-row justify-center px-3 gap-2">
+      <div class="flex items-start flex-row justify-center px-3 gap-2 mb-1">
         <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large">
           Star
         </GithubButton>
diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index 429b2f5e94..b08004c72b 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -3,13 +3,17 @@ import { iconMap } from '#imports'
 </script>
 
 <template>
-  <a
-    v-e="['c:navbar:join-cloud']"
-    class="flex justify-center mx-2 rounded-lg items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 !text-current !no-underline !hover:(text-primary bg-primary bg-opacity-5)"
-    href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url"
-    target="_blank"
-  >
-    <component :is="iconMap.cloud" class="mr-1" />
-    Join NocoDB Cloud
+  <a v-e="['c:navbar:join-cloud']" class="flex !text-current !no-underline"
+    href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url">
+    <div
+      class="group flex justify-center items-center rounded-l-sm w-full cursor-pointer px-2 py-1 !text-current !no-underline text-primary border-1 border-gray-300 bg-gray-100 m-0"
+      target="_blank">
+      <component :is="iconMap.cloud" class="mr-1 mt-[1px] text-black group-hover:text-pink-400" />
+    </div>
+    <div
+      class="group flex justify-center items-center rounded-r-sm w-full cursor-pointer px-2 py-1 text-primary border-r-1 border-b-1 border-t-1 border-gray-300 m-0"
+      target="_blank">
+      <div class="px-1 text-xs font-bold text-gray-700">Join Cloud</div>
+    </div>
   </a>
 </template>

From 0972dedec5f562662e845630deabac94d1aa8f6d Mon Sep 17 00:00:00 2001
From: reenphygeorge <reenphygeorge@gmail.com>
Date: Wed, 20 Sep 2023 14:25:56 +0530
Subject: [PATCH 2/6] fix(nc-gui): corrected spacing

---
 .../components/dashboard/Sidebar/UserInfo.vue | 62 ++++++++++---------
 .../nc-gui/components/general/JoinCloud.vue   |  2 +-
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index f965f62c75..4c2ac1b043 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -67,10 +67,8 @@ onMounted(() => {
 <template>
   <div class="flex w-full flex-col p-1 border-t-1 border-gray-200 gap-y-2">
     <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"
-        data-testid="nc-sidebar-userinfo"
-      >
+      <div class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
+        data-testid="nc-sidebar-userinfo">
         <GeneralUserIcon />
         <div class="flex truncate">
           {{ name ? name : user?.email }}
@@ -82,28 +80,30 @@ onMounted(() => {
           <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
             <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
             <GeneralIcon v-else icon="signout" class="menu-icon" />
-            Log Out</NcMenuItem
-          >
+            Log Out
+          </NcMenuItem>
           <NcDivider />
           <a href="https://docs.nocodb.com" target="_blank" class="!underline-transparent">
             <NcMenuItem>
               <GeneralIcon icon="help" class="menu-icon" />
-              Help Center</NcMenuItem
-            >
+              Help Center
+            </NcMenuItem>
           </a>
           <NcDivider />
           <a href="https://discord.gg/5RgZmkW" target="_blank" class="!underline-transparent">
-            <NcMenuItem class="social-icon-wrapper"
-              ><GeneralIcon class="social-icon" icon="discord" />Join our Discord</NcMenuItem
-            >
+            <NcMenuItem class="social-icon-wrapper">
+              <GeneralIcon class="social-icon" icon="discord" />Join our Discord
+            </NcMenuItem>
           </a>
           <a href="https://www.reddit.com/r/NocoDB" target="_blank" class="!underline-transparent">
-            <NcMenuItem class="social-icon-wrapper"><GeneralIcon class="social-icon" icon="reddit" />/r/NocoDB</NcMenuItem>
+            <NcMenuItem class="social-icon-wrapper">
+              <GeneralIcon class="social-icon" icon="reddit" />/r/NocoDB
+            </NcMenuItem>
           </a>
           <a href="https://twitter.com/nocodb" target="_blank" class="!underline-transparent">
-            <NcMenuItem class="social-icon-wrapper group"
-              ><GeneralIcon class="text-gray-500 group-hover:text-gray-800" icon="twitter" />Twitter</NcMenuItem
-            >
+            <NcMenuItem class="social-icon-wrapper group">
+              <GeneralIcon class="text-gray-500 group-hover:text-gray-800" icon="twitter" />Twitter
+            </NcMenuItem>
           </a>
           <template v-if="!appInfo.ee">
             <NcDivider />
@@ -114,7 +114,8 @@ onMounted(() => {
                 <div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
                 <div class="flex-1" />
 
-                <MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" />
+                <MaterialSymbolsChevronRightRounded
+                  class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" />
               </NcMenuItem>
 
               <template #content>
@@ -126,32 +127,31 @@ onMounted(() => {
           </template>
 
           <NcDivider />
-          <NcMenuItem @click="onCopy"
-            ><GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" /><GeneralIcon
-              v-else
-              icon="copy"
-              class="menu-icon"
-            />
+          <NcMenuItem @click="onCopy">
+            <GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
+            <GeneralIcon v-else icon="copy" class="menu-icon" />
             <template v-if="isAuthTokenCopied"> Copied Auth Token </template>
             <template v-else> Copy Auth Token </template>
           </NcMenuItem>
           <nuxt-link v-e="['c:navbar:user:email']" class="!no-underline" to="/account/profile">
-            <NcMenuItem><GeneralIcon icon="settings" class="menu-icon" /> Account Settings</NcMenuItem>
+            <NcMenuItem>
+              <GeneralIcon icon="settings" class="menu-icon" /> Account Settings
+            </NcMenuItem>
           </nuxt-link>
         </NcMenu>
       </template>
     </NcDropdown>
 
     <div v-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 flex-wrap pt-1 truncate">
-      <div class="flex items-start flex-row justify-center px-3 gap-2 mb-1">
-        <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large">
+    <div v-else-if="isMounted" class="flex flex-row justify-between pt-1 truncate">
+      <div class="flex flex-wrap mb-1">
+        <GithubButton class="px-3 mb-1" href="https://github.com/nocodb/nocodb" data-icon="octicon-star"
+          data-show-count="true" data-size="large">
           Star
         </GithubButton>
-      </div>
-
-      <div class="flex items-start flex-row justify-center gap-2">
-        <GeneralJoinCloud class="color-transition px-3 text-gray-500 cursor-pointer select-none hover:text-accent" />
+        <div>
+          <GeneralJoinCloud class="color-transition px-3 text-gray-500 cursor-pointer select-none hover:text-accent" />
+        </div>
       </div>
     </div>
   </div>
@@ -167,6 +167,7 @@ onMounted(() => {
 :deep(.ant-popover-inner-content) {
   @apply !p-0 !rounded-md;
 }
+
 .social-icon {
   // Make icon black and white
   filter: grayscale(100%);
@@ -181,6 +182,7 @@ onMounted(() => {
   .nc-icon {
     @apply mr-0.15;
   }
+
   &:hover {
     .social-icon {
       filter: none !important;
diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index b08004c72b..bb57264ff6 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -13,7 +13,7 @@ import { iconMap } from '#imports'
     <div
       class="group flex justify-center items-center rounded-r-sm w-full cursor-pointer px-2 py-1 text-primary border-r-1 border-b-1 border-t-1 border-gray-300 m-0"
       target="_blank">
-      <div class="px-1 text-xs font-bold text-gray-700">Join Cloud</div>
+      <div class="px-1 text-xs font-bold text-gray-700">Join NocoDB Cloud</div>
     </div>
   </a>
 </template>

From 4319b990eba2594716a801b4c7ab979854333158 Mon Sep 17 00:00:00 2001
From: reenphygeorge <reenphygeorge@gmail.com>
Date: Wed, 20 Sep 2023 14:27:59 +0530
Subject: [PATCH 3/6] fix(nc-gui): reduced gap

---
 packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index 4c2ac1b043..6856562227 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -145,12 +145,12 @@ onMounted(() => {
     <div v-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-3 mb-1" href="https://github.com/nocodb/nocodb" data-icon="octicon-star"
+        <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-3 text-gray-500 cursor-pointer select-none hover:text-accent" />
+          <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
         </div>
       </div>
     </div>

From 728225cc2caba0b6b1aecdc2dbeb509e7314889e Mon Sep 17 00:00:00 2001
From: reenphygeorge <reenphygeorge@gmail.com>
Date: Thu, 21 Sep 2023 12:19:59 +0530
Subject: [PATCH 4/6] feat(nc-gui): cloud button ui update

---
 packages/nc-gui/components/general/JoinCloud.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue
index bb57264ff6..c7e909d576 100644
--- a/packages/nc-gui/components/general/JoinCloud.vue
+++ b/packages/nc-gui/components/general/JoinCloud.vue
@@ -3,17 +3,18 @@ import { iconMap } from '#imports'
 </script>
 
 <template>
-  <a v-e="['c:navbar:join-cloud']" class="flex !text-current !no-underline"
+  <a v-e="['c:navbar:join-cloud']" class="flex !no-underline"
     href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url">
     <div
-      class="group flex justify-center items-center rounded-l-sm w-full cursor-pointer px-2 py-1 !text-current !no-underline text-primary border-1 border-gray-300 bg-gray-100 m-0"
+      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"
       target="_blank">
-      <component :is="iconMap.cloud" class="mr-1 mt-[1px] text-black group-hover:text-pink-400" />
+      <component :is="iconMap.cloud" class="mt-[1px] text-black font-bold" />
+      <div class="px-1 text-xs font-bold text-gray-800">Join</div>
     </div>
     <div
-      class="group flex justify-center items-center rounded-r-sm w-full cursor-pointer px-2 py-1 text-primary border-r-1 border-b-1 border-t-1 border-gray-300 m-0"
+      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"
       target="_blank">
-      <div class="px-1 text-xs font-bold text-gray-700">Join NocoDB Cloud</div>
+      <div class="px-1 text-xs font-semibold group-hover:text-[#0a69da] text-gray-900">NocoDB Cloud</div>
     </div>
   </a>
 </template>

From 0f955d1be5b1cc3c48938c8948426465f106a95f Mon Sep 17 00:00:00 2001
From: reenphygeorge <reenphygeorge@gmail.com>
Date: Thu, 21 Sep 2023 12:34:30 +0530
Subject: [PATCH 5/6] fix(nc-gui): app store view padding

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

diff --git a/packages/nc-gui/components/account/AppStore.vue b/packages/nc-gui/components/account/AppStore.vue
index 0dc8415e7a..2403b8bc3f 100644
--- a/packages/nc-gui/components/account/AppStore.vue
+++ b/packages/nc-gui/components/account/AppStore.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
+  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2 px-5">
     <div class="text-xl mt-4 mb-8 text-left font-weight-bold">{{ $t('title.appStore') }}</div>
     <div>
       <LazyDashboardSettingsAppStore />

From 926b49d337979b6187d817caeab8c8ad2e79c83f Mon Sep 17 00:00:00 2001
From: reenphygeorge <reenphygeorge@gmail.com>
Date: Thu, 21 Sep 2023 12:52:05 +0530
Subject: [PATCH 6/6] feat(nc-gui): main icon update

---
 packages/nc-gui/components/workspace/Menu.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/workspace/Menu.vue b/packages/nc-gui/components/workspace/Menu.vue
index 98527c3985..c941ddc97f 100644
--- a/packages/nc-gui/components/workspace/Menu.vue
+++ b/packages/nc-gui/components/workspace/Menu.vue
@@ -3,19 +3,12 @@
 <template>
   <div class="flex flex-row flex-grow pl-0.5 pr-1 py-0.5 rounded-md w-full" style="max-width: calc(100% - 2.5rem)">
     <div class="flex-grow min-w-20">
-      <div
-        data-testid="nc-workspace-menu"
-        class="flex items-center nc-workspace-menu overflow-hidden py-1.25 pr-0.25 justify-center w-full"
-      >
-        <a
-          class="w-10 min-w-10 transition-all duration-200 p-1 transform"
-          href="https://github.com/nocodb/nocodb"
-          target="_blank"
-        >
-          <img width="25" alt="NocoDB" src="~/assets/img/icons/256x256.png" />
+      <div data-testid="nc-workspace-menu"
+        class="flex items-center nc-workspace-menu overflow-hidden py-1.25 pr-0.25 justify-center w-full">
+        <a class="transition-all duration-200 transform" href="https://github.com/nocodb/nocodb"
+          target="_blank">
+          <img alt="NocoDB" src="~/assets/img/brand/nocodb-full.png" class="h-10" />
         </a>
-
-        <div class="font-semibold text-base">Nocodb</div>
         <div class="flex flex-grow"></div>
       </div>
     </div>