feat: remove calendar top bar

packages/nc-gui/assets/style.scss

@@ -11,6 +11,7 @@ body {
 }
 
 :root {
+  --toolbar-height: 2.25rem;
   --topbar-height: 3.1rem;
   --sidebar-bottom-height: 8.5rem;
   --new-header-height: 3.5rem;
@@ -515,7 +516,7 @@ a {
 }
 
 .nc-toolbar-btn {
-  @apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0;
+  @apply !shadow-none rounded hover:(bg-gray-50 !text-gray-800) focus:(!text-gray-800 bg-gray-50) text-gray-600 text-xs font-medium px-2 border-0;
 }
 .nc-toolbar-btn[disabled] {
   @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;

packages/nc-gui/components/cmd-k/index.vue

@@ -427,14 +427,14 @@ defineExpose({
                       <component
                         :is="(iconMap as any)[act.icon]"
                         v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
-                        class="cmdk-action-icon"
                         :class="{
                           '!text-blue-500': act.icon === 'grid',
                           '!text-purple-500': act.icon === 'form',
                           '!text-[#FF9052]': act.icon === 'kanban',
                           '!text-pink-500': act.icon === 'gallery',
-                          '!text-maroon-500': act.icon === 'calendar',
+                          '!text-maroon-500 w-4 h-4': act.icon === 'calendar',
                         }"
+                        class="cmdk-action-icon"
                       />
                       <div v-else-if="act.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center">
                         <LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="act.icon" readonly />

packages/nc-gui/components/cmd-l/index.vue

@@ -206,7 +206,7 @@ onMounted(() => {
               <div class="cmdk-action-content">
                 <div class="flex w-1/2 items-center">
                   <div class="flex gap-2">
-                    <GeneralViewIcon :meta="{ type: cmdOption.viewType }" class="mt-0.5" />
+                    <GeneralViewIcon :meta="{ type: cmdOption.viewType }" class="mt-0.5 w-4 !min-h-4" />
                     <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
                       <template #title>
                         {{ cmdOption.viewName }}

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

@@ -158,7 +158,7 @@ async function onOpenModal({
         <NcMenuItem data-testid="sidebar-view-create-calendar" @click="onOpenModal({ type: ViewTypes.CALENDAR })">
           <div class="item">
             <div class="item-inner">
-              <GeneralViewIcon :meta="{ type: ViewTypes.CALENDAR }" />
+              <GeneralViewIcon :meta="{ type: ViewTypes.CALENDAR }" class="!w-4 !h-4" />
               <div>{{ $t('objects.viewType.calendar') }}</div>
             </div>
 

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

@@ -234,7 +234,7 @@ watch(isDropdownOpen, async () => {
           @emoji-selected="emits('selectIcon', $event)"
         >
           <template #default>
-            <GeneralViewIcon :meta="props.view" class="nc-view-icon !text-[16px]"></GeneralViewIcon>
+            <GeneralViewIcon :meta="props.view" class="nc-view-icon w-4 !text-[16px]"></GeneralViewIcon>
           </template>
         </LazyGeneralEmojiPicker>
       </div>

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -137,7 +137,6 @@ function init() {
   if (repeatCount) {
     form.title = `${form.title}-${repeatCount}`
   }
-
   if (selectedViewId.value) {
     form.copy_from_id = selectedViewId?.value
   }
@@ -320,11 +319,11 @@ onMounted(async () => {
 <template>
   <NcModal
     v-model:visible="vModel"
-    :size="[ViewTypes.KANBAN, ViewTypes.MAP, ViewTypes.CALENDAR].includes(form.type) ? 'small' : 'small'"
+    :size="[ViewTypes.KANBAN, ViewTypes.MAP, ViewTypes.CALENDAR].includes(form.type) ? 'medium' : 'small'"
   >
     <template #header>
       <div class="flex w-full flex-row justify-between items-center">
-        <div class="flex gap-x-1.5 items-center">
+        <div class="flex font-bold text-base gap-x-3 items-center">
           <GeneralViewIcon :meta="{ type: form.type }" class="nc-view-icon !text-xl" />
           <template v-if="form.type === ViewTypes.GRID">
             <template v-if="form.copy_from_id">
@@ -377,7 +376,7 @@ onMounted(async () => {
         </div>
         <a
           v-if="!form.copy_from_id"
-          class="text-sm !text-gray-600 !hover:text-gray-600"
+          class="text-sm !text-gray-600 !font-default !hover:text-gray-600"
           :href="`https://docs.nocodb.com/views/view-types/${typeAlias}`"
           target="_blank"
         >
@@ -434,7 +433,12 @@ onMounted(async () => {
             <span>
               {{ $t('labels.organiseBy') }}
             </span>
-            <NcSelect v-model:value="range.fk_from_column_id" :disabled="isMetaLoading" :loading="isMetaLoading">
+            <NcSelect
+              v-model:value="range.fk_from_column_id"
+              :disabled="isMetaLoading"
+              :loading="isMetaLoading"
+              class="nc-from-select"
+            >
               <a-select-option
                 v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
                   // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
@@ -444,14 +448,24 @@ onMounted(async () => {
                   return firstRange?.uidt === f.uidt
                 })"
                 :key="id"
+                class="w-40"
                 :value="option.value"
               >
-                <div class="flex items-center">
-                  <SmartsheetHeaderIcon :column="option" />
-                  <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                    <template #title>{{ option.label }}</template>
-                    {{ option.label }}
-                  </NcTooltip>
+                <div class="flex w-full gap-2 justify-between items-center">
+                  <div class="flex gap-2 items-center">
+                    <SmartsheetHeaderIcon :column="option" />
+                    <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
+                      <template #title>{{ option.label }}</template>
+                      {{ option.label }}
+                    </NcTooltip>
+                  </div>
+                  <div class="flex-1" />
+                  <component
+                    :is="iconMap.check"
+                    v-if="option.value === range.fk_from_column_id"
+                    id="nc-selected-item-icon"
+                    class="text-primary min-w-4 h-4"
+                  />
                 </div>
               </a-select-option>
             </NcSelect>
@@ -473,8 +487,8 @@ onMounted(async () => {
                   v-model:value="range.fk_to_column_id"
                   :disabled="isMetaLoading"
                   :loading="isMetaLoading"
-                  :placeholder="$t('placeholder.notSelected')"
-                  class="!rounded-r-none nc-to-select"
+                  :placeholder="$t('placenc-to-seleholder.notSelected')"
+                  class="!rounded-r-none ct"
                 >
                   <a-select-option
                     v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
@@ -523,10 +537,12 @@ onMounted(async () => {
         </template>
       </a-form>
       <div v-else-if="!isNecessaryColumnsPresent" class="flex flex-row p-4 border-gray-200 border-1 gap-x-4 rounded-lg w-full">
-        <GeneralIcon class="!text-5xl text-orange-500" icon="warning" />
-        <div class="text-gray-500">
-          <h2 class="font-semibold text-sm text-gray-800">Suitable fields not present</h2>
-          {{ errorMessages[form.type] }}
+        <div class="text-gray-500 flex gap-4">
+          <GeneralIcon class="min-w-6 h-6 text-orange-500" icon="warning" />
+          <div class="flex flex-col gap-1">
+            <h2 class="font-semibold text-sm mb-0 text-gray-800">Suitable fields not present</h2>
+            <span class="text-gray-500 font-default"> {{ errorMessages[form.type] }}</span>
+          </div>
         </div>
       </div>
 
@@ -550,15 +566,27 @@ onMounted(async () => {
   </NcModal>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ant-form-item-required {
   @apply !text-gray-800 font-medium;
   &:before {
     @apply !content-[''];
   }
 }
 
+.nc-from-select .ant-select-selector {
+  @apply !mr-2;
+}
+
 .nc-to-select .ant-select-selector {
   @apply !rounded-r-none;
 }
+
+.ant-input {
+  @apply border-gray-200;
+}
+
+.ant-form-item {
+  @apply !mb-6;
+}
 </style>

packages/nc-gui/components/dlg/ViewDelete.vue

@@ -47,7 +47,7 @@ async function onDelete() {
   <GeneralDeleteModal v-model:visible="vModel" :entity-name="$t('objects.view')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="view" class="flex flex-row items-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <GeneralViewIcon :meta="props.view" class="nc-view-icon"></GeneralViewIcon>
+        <GeneralViewIcon :meta="props.view" class="nc-view-icon w-4 min-h-4"></GeneralViewIcon>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-3"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"