Nc fix/UI changes (#10079)

* fix(nc-gui): remove button shadow from fields menu calendar view text options

* fix(nc-gui): add new row sticky button shadow issue

* fix(nc-gui): remove unwanted btn shadow from group by menu

* fix(nc-gui): mfe add new field btn shadow issue

* fix(nc-gui): add input box shadow while renaming base/source/view from sidebar

* fix(nc-gui): add some padding transition on rename base/view

* fix(nc-gui): close new record dropdown on click add new record btn

* fix(nc-gui): update feeds page header and megaphone icon

* fix(nc-gui): add some padding in feeds social link list

* fix(nc-gui): feed changelog tag world break issue

* fix(nc-gui): access settings tab icons size

* fix(nc-gui): update rich text options icon

* fix(nc-gui): update rich text option icons

* fix(nc-gui): select input cell row height change on active

* chore(nc-gui): lint

* chore(nc-gui): monor changes

packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue

@@ -1,15 +1,5 @@
 <script lang="ts" setup>
 import type { Editor } from '@tiptap/vue-3'
-import MdiFormatBulletList from '~icons/mdi/format-list-bulleted'
-import MdiFormatStrikeThrough from '~icons/mdi/format-strikethrough'
-import MdiFormatListNumber from '~icons/mdi/format-list-numbered'
-import MdiFormatListCheckbox from '~icons/mdi/format-list-checkbox'
-import MsFormatH1 from '~icons/material-symbols/format-h1'
-import MsFormatH2 from '~icons/material-symbols/format-h2'
-import MsFormatH3 from '~icons/material-symbols/format-h3'
-import TablerBlockQuote from '~icons/tabler/blockquote'
-import MsCode from '~icons/material-symbols/code'
-import MsFormatQuote from '~icons/material-symbols/format-quote'
 import { RichTextBubbleMenuOptions } from '#imports'
 
 interface Props {
@@ -164,10 +154,9 @@ const closeTextArea = () => {
         :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleBold().run()"
       >
-        <MdiFormatBold />
+        <GeneralIcon icon="bold" />
       </NcButton>
     </NcTooltip>
-
     <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
@@ -185,7 +174,7 @@ const closeTextArea = () => {
         :tabindex="tabIndex"
         @click=";(editor!.chain().focus() as any).toggleItalic().run()"
       >
-        <MdiFormatItalic />
+        <GeneralIcon icon="italic" />
       </NcButton>
     </NcTooltip>
     <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
@@ -206,7 +195,7 @@ const closeTextArea = () => {
         :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleUnderline().run()"
       >
-        <MdiFormatUnderline />
+        <GeneralIcon icon="underline" />
       </NcButton>
     </NcTooltip>
     <NcTooltip v-if="embedMode && !isEditColumn" :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
@@ -226,20 +215,7 @@ const closeTextArea = () => {
         :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleStrike().run()"
       >
-        <MdiFormatStrikeThrough />
-      </NcButton>
-    </NcTooltip>
-
-    <NcTooltip v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.code)" :placement="tooltipPlacement">
-      <template #title> {{ $t('general.code') }}</template>
-      <NcButton
-        size="small"
-        type="text"
-        :tabindex="tabIndex"
-        :class="{ 'is-active': editor.isActive('codeBlock') }"
-        @click="editor!.chain().focus().toggleCodeBlock().run()"
-      >
-        <MsCode />
+        <GeneralIcon icon="strike" />
       </NcButton>
     </NcTooltip>
     <NcTooltip
@@ -247,7 +223,7 @@ const closeTextArea = () => {
       :placement="tooltipPlacement"
       :disabled="editor.isActive('codeBlock')"
     >
-      <template #title> {{ $t('general.quote') }}</template>
+      <template #title> {{ $t('general.code') }}</template>
       <NcButton
         size="small"
         type="text"
@@ -256,9 +232,22 @@ const closeTextArea = () => {
         :disabled="editor.isActive('codeBlock')"
         @click="editor!.chain().focus().toggleCode().run()"
       >
-        <MsFormatQuote />
+        <GeneralIcon icon="code" />
       </NcButton>
     </NcTooltip>
+    <NcTooltip v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.code)" :placement="tooltipPlacement">
+      <template #title> {{ $t('general.codeBlock') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :tabindex="tabIndex"
+        :class="{ 'is-active': editor.isActive('codeBlock') }"
+        @click="editor!.chain().focus().toggleCodeBlock().run()"
+      >
+        <GeneralIcon icon="ncCodeBlock" />
+      </NcButton>
+    </NcTooltip>
+
     <div class="divider"></div>
 
     <template v-if="embedMode && !isFormField">
@@ -277,7 +266,7 @@ const closeTextArea = () => {
           :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
           @click="editor!.chain().focus().toggleHeading({ level: 1 }).run()"
         >
-          <MsFormatH1 />
+          <GeneralIcon icon="ncHeading1" />
         </NcButton>
       </NcTooltip>
       <NcTooltip>
@@ -295,7 +284,7 @@ const closeTextArea = () => {
           :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
           @click="editor!.chain().focus().toggleHeading({ level: 2 }).run()"
         >
-          <MsFormatH2 />
+          <GeneralIcon icon="ncHeading2" />
         </NcButton>
       </NcTooltip>
       <NcTooltip>
@@ -313,7 +302,7 @@ const closeTextArea = () => {
           :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
           @click="editor!.chain().focus().toggleHeading({ level: 3 }).run()"
         >
-          <MsFormatH3 />
+          <GeneralIcon icon="ncHeading3" />
         </NcButton>
       </NcTooltip>
 
@@ -332,7 +321,7 @@ const closeTextArea = () => {
         :class="{ 'is-active': editor.isActive('blockquote') }"
         @click="editor!.chain().focus().toggleBlockquote().run()"
       >
-        <TablerBlockQuote class="-mt-0.25" />
+        <GeneralIcon icon="ncQuote" />
       </NcButton>
     </NcTooltip>
 
@@ -345,7 +334,7 @@ const closeTextArea = () => {
         :class="{ 'is-active': editor.isActive('bulletList') }"
         @click="editor!.chain().focus().toggleBulletList().run()"
       >
-        <MdiFormatBulletList />
+        <GeneralIcon icon="ncList" />
       </NcButton>
     </NcTooltip>
 
@@ -358,7 +347,7 @@ const closeTextArea = () => {
         :class="{ 'is-active': editor.isActive('orderedList') }"
         @click="editor!.chain().focus().toggleOrderedList().run()"
       >
-        <MdiFormatListNumber />
+        <GeneralIcon icon="ncNumberList" />
       </NcButton>
     </NcTooltip>
 
@@ -371,7 +360,7 @@ const closeTextArea = () => {
         :class="{ 'is-active': editor.isActive('taskList') }"
         @click="editor!.chain().focus().toggleTaskList().run()"
       >
-        <MdiFormatListCheckbox />
+        <GeneralIcon icon="ncCheckList" />
       </NcButton>
     </NcTooltip>
 
@@ -423,14 +412,14 @@ const closeTextArea = () => {
       >
         <GeneralIcon v-if="isFormField" icon="link2"></GeneralIcon>
         <div v-else class="flex flex-row items-center px-0.5">
-          <MdiLink />
+          <GeneralIcon icon="link2"></GeneralIcon>
           <div class="!text-xs !ml-1">{{ $t('general.link') }}</div>
         </div>
       </NcButton>
     </NcTooltip>
 
-    <div class="!sticky right-0 pr-0.5 bg-white">
-      <NcButton v-if="enableCloseButton" type="text" size="small" @click="closeTextArea">
+    <div v-if="enableCloseButton" class="!sticky right-0 pr-0.5 bg-white">
+      <NcButton type="text" size="small" @click="closeTextArea">
         <GeneralIcon icon="close" />
       </NcButton>
     </div>