Adjust button style

apps/app/src/components/CustomNavigation/CustomNavButton.tsx

@@ -53,15 +53,15 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
             const isActive = activeTab === key;
             const _isLinkEnabled = value.isLinkEnabled ?? true;
             const isLinkEnabled = typeof _isLinkEnabled === 'boolean' ? _isLinkEnabled : _isLinkEnabled(value);
-            const { Icon, i18n } = value;
+            const { Icon, i18n, roundClass } = value;
 
             return (
               <NavItem
                 key={key}
-                className={`${isActive ? 'active' : 'passive'}`}
+                className={`${isActive ? 'active' : 'passive'} rounded-1 ${roundClass}`}
               >
                 <NavLink type="button" key={key} innerRef={elm => registerNavLink(key, elm)} disabled={!isLinkEnabled} onClick={() => navLinkClickHandler(key)}>
-                  { Icon != null && <span className="me-1"><Icon /></span> } {i18n}
+                  { Icon != null && <span className="me-1"><Icon /></span> } <small>{i18n}</small>
                 </NavLink>
               </NavItem>
             );

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -45,10 +45,12 @@ const SlackNotification = dynamic(() => import('../SlackNotification').then(mod
 const navTabMapping = {
   comment_editor: {
     Icon: () => <span className="material-symbols-outlined">edit_square</span>,
+    roundClass: 'rounded-end-0',
     i18n: 'Write',
   },
   comment_preview: {
     Icon: () => <span className="material-symbols-outlined">play_arrow</span>,
+    roundClass: 'rounded-start-0',
     i18n: 'Preview',
   },
 };

apps/app/src/interfaces/ui.ts

@@ -24,6 +24,7 @@ export type ICustomTabContent = {
   Content?: () => JSX.Element,
   i18n?: string,
   Icon?: () => JSX.Element,
+  roundeClass?: string,
   isLinkEnabled?: boolean | ((content: ICustomTabContent) => boolean),
 };