Merge pull request #6567 from nocodb/nc-fix/nocodb-branding

Updated nocodb branding and improved breadcrumbs styling

packages/nc-gui/components/dashboard/TreeView/index.vue

@@ -53,7 +53,7 @@ const baseStore = useBase()
 
 const { loadTables } = baseStore
 
-const { tables } = storeToRefs(baseStore)
+const { tables, isSharedBase } = storeToRefs(baseStore)
 
 const { t } = useI18n()
 
@@ -269,7 +269,7 @@ watch(
 
 <template>
   <div class="nc-treeview-container flex flex-col justify-between select-none">
-    <div class="text-gray-500 font-medium pl-3.5 mb-1">{{ $t('objects.projects') }}</div>
+    <div v-if="!isSharedBase" class="text-gray-500 font-medium pl-3.5 mb-1">{{ $t('objects.projects') }}</div>
     <div mode="inline" class="nc-treeview pb-0.5 flex-grow min-h-50 overflow-x-hidden">
       <template v-if="basesList?.length">
         <ProjectWrapper v-for="base of basesList" :key="base.id" :base-role="base.project_role" :base="base">

packages/nc-gui/components/project/View.vue

@@ -70,10 +70,10 @@ watch(
       class="flex flex-row pl-2 pr-2 border-b-1 border-gray-200 justify-between w-full"
       :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--topbar-height)]': !isMobileMode }"
     >
-      <div class="flex flex-row items-center gap-x-4">
+      <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <GeneralProjectIcon :type="openedProject?.type" />
-        <div class="flex font-medium text-base capitalize">
+        <div class="flex font-medium text-sm capitalize">
           {{ openedProject?.title }}
         </div>
       </div>

packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue

@@ -5,7 +5,7 @@ const { isMobileMode } = useGlobal()
 
 const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
 
-const { base } = storeToRefs(useBase())
+const { base, isSharedBase } = storeToRefs(useBase())
 
 const { activeTable } = storeToRefs(useTablesStore())
 
@@ -14,16 +14,22 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
 <template>
   <div
-    class="flex flex-row font-medium items-center border-gray-50 mt-0.5 transition-all duration-100"
+    class="ml-0.25 flex flex-row font-medium items-center border-gray-50 transition-all duration-100"
     :class="{
       'min-w-36/100 max-w-36/100': !isMobileMode && activeView?.type !== ViewTypes.KANBAN && isLeftSidebarOpen,
       'min-w-39/100 max-w-39/100': !isMobileMode && activeView?.type !== ViewTypes.KANBAN && !isLeftSidebarOpen,
       'min-w-1/4 max-w-1/4': !isMobileMode && activeView?.type === ViewTypes.KANBAN,
       'w-2/3 text-base ml-1.5': isMobileMode,
+      '!max-w-3/4': isSharedBase && !isMobileMode,
     }"
   >
     <template v-if="!isMobileMode">
-      <NcTooltip class="ml-0.75 max-w-1/4">
+      <NcTooltip
+        class="ml-0.75 max-w-1/4 max-w-"
+        :class="{
+          '!max-w-none': isSharedBase && !isMobileMode,
+        }"
+      >
         <template #title>
           {{ base?.title }}
         </template>
@@ -35,7 +41,12 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
               filter: 'grayscale(100%) brightness(115%)',
             }"
           />
-          <div class="hidden !2xl:(flex truncate ml-1)">
+          <div
+            class="hidden !2xl:(flex truncate ml-1)"
+            :class="{
+              '!flex': isSharedBase && !isMobileMode,
+            }"
+          >
             <span class="truncate text-gray-700">
               {{ base?.title }}
             </span>
@@ -60,7 +71,8 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
         class="truncate nc-active-table-title"
         :class="{
           'max-w-1/2': isMobileMode || activeView?.is_default,
-          'max-w-20/100': !isMobileMode && !activeView?.is_default,
+          'max-w-20/100': !isSharedBase && !isMobileMode && !activeView?.is_default,
+          'max-w-none': isSharedBase && !isMobileMode,
         }"
       >
         <template #title>
@@ -95,8 +107,8 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
       <NcTooltip
         class="truncate nc-active-view-title"
         :class="{
-          'max-w-2/5': !isMobileMode && activeView?.is_default,
-          'max-w-3/5': !isMobileMode && !activeView?.is_default,
+          'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,
+          'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default,
           'max-w-1/2': isMobileMode,
         }"
       >

packages/nc-gui/components/workspace/Menu.vue

@@ -5,10 +5,10 @@
     <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"
+        class="flex items-center nc-workspace-menu overflow-hidden py-1.25 pr-0.25 justify-center w-full ml-2"
       >
-        <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 class="transition-all duration-200 transform w-24 min-w-10" href="https://github.com/nocodb/nocodb" target="_blank">
+          <img alt="NocoDB" src="~/assets/img/brand/nocodb.png" />
         </a>
         <div class="flex flex-grow"></div>
       </div>