Merge pull request #8986 from weseek/support/150156-sidebar-header-text-size

support: Sidebar header text size

apps/app/src/client/components/Sidebar/Bookmarks.tsx

@@ -14,7 +14,7 @@ export const Bookmarks = () : JSX.Element => {
   return (
     <div className="px-3">
       <div className="grw-sidebar-content-header">
-        <h4 className="mb-0 py-4">{t('Bookmarks')}</h4>
+        <h3 className="fs-6 fw-bold mb-0 py-4">{t('Bookmarks')}</h3>
       </div>
       {isGuestUser ? (
         <h4 className="fs-6">

apps/app/src/client/components/Sidebar/Custom/CustomSidebar.tsx

@@ -20,10 +20,10 @@ export const CustomSidebar = (): JSX.Element => {
   return (
     <div className="pt-4 pb-3 px-3">
       <div className="grw-sidebar-content-header d-flex">
-        <h4 className="mb-0">
+        <h3 className="fs-6 fw-bold mb-0">
           {t('CustomSidebar')}
           { !isLoading && <Link href="/Sidebar#edit" className="h6 ms-2"><span className="material-symbols-outlined">edit</span></Link> }
-        </h4>
+        </h3>
         { !isLoading && <SidebarHeaderReloadButton onClick={() => mutate()} /> }
       </div>
 

apps/app/src/client/components/Sidebar/InAppNotification/InAppNotification.tsx

@@ -17,9 +17,9 @@ export const InAppNotification = (): JSX.Element => {
   return (
     <div className="px-3">
       <div className="grw-sidebar-content-header py-4 d-flex">
-        <h4 className="mb-0">
+        <h3 className="fs-6 fw-bold mb-0">
           {t('In-App Notification')}
-        </h4>
+        </h3>
       </div>
 
       <InAppNotificationForms

apps/app/src/client/components/Sidebar/PageTree/PageTree.tsx

@@ -23,7 +23,7 @@ export const PageTree = (): JSX.Element => {
   return (
     <div className="pt-4 pb-3 px-3">
       <div className="grw-sidebar-content-header d-flex">
-        <h4 className="mb-0">{t('Page Tree')}</h4>
+        <h3 className="fs-6 fw-bold mb-0">{t('Page Tree')}</h3>
         <Suspense>
           <PageTreeHeader
             isWipPageShown={isWipPageShown}

apps/app/src/client/components/Sidebar/RecentChanges/RecentChanges.tsx

@@ -21,7 +21,7 @@ export const RecentChanges = (): JSX.Element => {
   return (
     <div className="px-3" data-testid="grw-recent-changes">
       <div className="grw-sidebar-content-header py-4 d-flex">
-        <h4 className="mb-0 text-nowrap">{t('Recent Changes')}</h4>
+        <h3 className="fs-6 fw-bold mb-0 text-nowrap">{t('Recent Changes')}</h3>
         <Suspense>
           <RecentChangesHeader
             isSmall={isSmall}

apps/app/src/client/components/Sidebar/Sidebar.module.scss

@@ -11,7 +11,7 @@
 .grw-sidebar :global {
   .grw-sidebar-content-header {
     .grw-btn-reload {
-      font-size: 18px;
+      font-size: 16px;
     }
   }
 }

apps/app/src/client/components/Sidebar/Tag.tsx

@@ -44,8 +44,8 @@ const Tag: FC = () => {
   // todo: adjust design by XD
   return (
     <div className="container-lg px-3 mb-5 pb-5" data-testid="grw-sidebar-content-tags">
-      <div className="grw-sidebar-content-header py-3 d-flex">
-        <h4 className="mb-0">{t('Tags')}</h4>
+      <div className="grw-sidebar-content-header pt-4 pb-3 d-flex">
+        <h3 className="fs-6 fw-bold mb-0">{t('Tags')}</h3>
         <SidebarHeaderReloadButton onClick={() => onReload()} />
       </div>