Style modification around global notification

apps/app/src/components/Admin/Common/AdminNavigation.tsx

@@ -13,23 +13,23 @@ const MenuLabel = ({ menu }: { menu: string }) => {
 
   switch (menu) {
     /* eslint-disable no-multi-spaces, max-len */
-    case 'app':                      return <><span className="material-symbols-outlined">settings</span>{        t('headers.app_settings', { ns: 'commons' }) }</>;
-    case 'security':                 return <><span className="material-symbols-outlined">shield</span>{          t('security_settings.security_settings') }</>;
-    case 'markdown':                 return <><span className="material-symbols-outlined">note</span>{            t('markdown_settings.markdown_settings') }</>;
-    case 'customize':                return <><span className="material-symbols-outlined">construction</span>{          t('customize_settings.customize_settings') }</>;
-    case 'importer':                 return <><span className="material-symbols-outlined">cloud_upload</span>{    t('importer_management.import_data') }</>;
-    case 'export':                   return <><span className="material-symbols-outlined">cloud_download</span>{  t('export_management.export_archive_data') }</>;
-    case 'data-transfer':            return <><span className="material-symbols-outlined">flight</span>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
-    case 'notification':             return <><span className="material-symbols-outlined">notifications</span>{            t('external_notification.external_notification')}</>;
-    case 'slack-integration':        return <><span className="material-symbols-outlined">shuffle</span>{         t('slack_integration.slack_integration') }</>;
-    case 'slack-integration-legacy': return <><span className="material-symbols-outlined">shuffle</span>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
-    case 'users':                    return <><span className="material-symbols-outlined">person</span>{            t('user_management.user_management') }</>;
-    case 'user-groups':              return <><span className="material-symbols-outlined">group</span>{          t('user_group_management.user_group_management') }</>;
-    case 'audit-log':                return <><span className="material-symbols-outlined">feed</span>{            t('audit_log_management.audit_log')}</>;
-    case 'plugins':                  return <><span className="material-symbols-outlined">extension</span>{          t('plugins.plugins')}</>;
-    case 'search':                   return <><span className="material-symbols-outlined">search</span>{       t('full_text_search_management.full_text_search_management') }</>;
-    case 'cloud':                    return <><span className="material-symbols-outlined">share</span>{       t('cloud_setting_management.to_cloud_settings')} </>;
-    default:                         return <><span className="material-symbols-outlined">home</span>{            t('wiki_management_homepage') }</>;
+    case 'app':                      return <><span className="material-symbols-outlined me-1">settings</span>{        t('headers.app_settings', { ns: 'commons' }) }</>;
+    case 'security':                 return <><span className="material-symbols-outlined me-1">shield</span>{          t('security_settings.security_settings') }</>;
+    case 'markdown':                 return <><span className="material-symbols-outlined me-1">edit_document</span>{            t('markdown_settings.markdown_settings') }</>;
+    case 'customize':                return <><span className="material-symbols-outlined me-1">construction</span>{          t('customize_settings.customize_settings') }</>;
+    case 'importer':                 return <><span className="material-symbols-outlined me-1">cloud_upload</span>{    t('importer_management.import_data') }</>;
+    case 'export':                   return <><span className="material-symbols-outlined me-1">cloud_download</span>{  t('export_management.export_archive_data') }</>;
+    case 'data-transfer':            return <><span className="material-symbols-outlined me-1">flightsmode</span>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
+    case 'notification':             return <><span className="material-symbols-outlined me-1">notifications</span>{            t('external_notification.external_notification')}</>;
+    case 'slack-integration':        return <><span className="material-symbols-outlined me-1">shuffle</span>{         t('slack_integration.slack_integration') }</>;
+    case 'slack-integration-legacy': return <><span className="material-symbols-outlined me-1">shuffle</span>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
+    case 'users':                    return <><span className="material-symbols-outlined me-1">person</span>{            t('user_management.user_management') }</>;
+    case 'user-groups':              return <><span className="material-symbols-outlined me-1">group</span>{          t('user_group_management.user_group_management') }</>;
+    case 'audit-log':                return <><span className="material-symbols-outlined me-1">feed</span>{            t('audit_log_management.audit_log')}</>;
+    case 'plugins':                  return <><span className="material-symbols-outlined me-1">extension</span>{          t('plugins.plugins')}</>;
+    case 'search':                   return <><span className="material-symbols-outlined me-1">search</span>{       t('full_text_search_management.full_text_search_management') }</>;
+    case 'cloud':                    return <><span className="material-symbols-outlined me-1">share</span>{       t('cloud_setting_management.to_cloud_settings')} </>;
+    default:                         return <><span className="material-symbols-outlined me-1">home</span>{            t('wiki_management_homepage') }</>;
       /* eslint-enable no-multi-spaces, max-len */
   }
 };
@@ -46,7 +46,7 @@ const MenuLink = ({
 }: MenuLinkProps) => {
 
   const pageTransitionClassName = isListGroupItems
-    ? 'list-group-item list-group-item-action border-0 round-corner'
+    ? 'list-group-item list-group-item-action border-0 round-corner d-flex'
     : 'dropdown-item px-3 py-2';
 
   const href = isRoot ? '/admin' : urljoin('/admin', menu);

apps/app/src/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -55,18 +55,25 @@ class StatusTable extends React.PureComponent {
 
     const aliasLabels = aliases.map((aliasName) => {
       return (
-        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary me-2">
-          <span className="material-symbols-outlined">sell</span> {aliasName}
+        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary me-2 d-flex align-items-center">
+          <span className="material-symbols-outlined me-1">sell</span> {aliasName}
         </span>
       );
     });
 
     return (
       <div className="card">
-        <div className="card-header">
-
-          <a role="button" className="text-nowrap me-2" data-bs-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
-            <span className="material-symbols-outlined">database</span> {indexName}
+        <div className="card-header d-flex">
+
+          <a
+            role="button"
+            className="text-nowrap me-2 d-flex align-items-center"
+            data-bs-toggle="collapse"
+            href={`#${collapseId}`}
+            aria-expanded="true"
+            aria-controls={collapseId}
+          >
+            <span className="material-symbols-outlined me-1">database</span> {indexName}
           </a>
           <span className="ms-md-3">{aliasLabels}</span>
         </div>

apps/app/src/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.tsx

@@ -14,16 +14,19 @@ const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps):JSX.Element =>
 
   return (
     <div className="btn-group admin-user-menu dropdown">
-      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
-        <span className="material-symbols-outlined">settings</span> <span className="caret"></span>
+      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown">
+        <span className="material-symbols-outlined">settings</span>
+        <span className="caret"></span>
       </button>
-      <ul className="dropdown-menu" role="menu">
+      <ul className="dropdown-menu">
         <li className="dropdown-header">{t('admin:export_management.export_menu')}</li>
-        <button type="button" className="dropdown-item" onClick={() => { window.location.href = `/admin/export/${props.fileName}` }}>
-          <span className="material-symbols-outlined">cloud_download</span> {t('admin:export_management.download')}
+        <button type="button" className="dropdown-item d-flex align-items-center" onClick={() => { window.location.href = `/admin/export/${props.fileName}` }}>
+          <span className="material-symbols-outlined me-1">cloud_download</span> {t('admin:export_management.download')}
         </button>
         <button type="button" className="dropdown-item" role="button" onClick={() => props.onZipFileStatRemove(props.fileName)}>
-          <span className="text-danger"><span className="material-symbols-outlined">delete</span> {t('admin:export_management.delete')}</span>
+          <span className="text-danger d-flex align-items-center">
+            <span className="material-symbols-outlined me-1">delete</span> {t('admin:export_management.delete')}
+          </span>
         </button>
       </ul>
     </div>

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx

@@ -147,7 +147,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm p-1 ms-2"
+        className="btn btn-outline-secondary btn-sm p-1 ms-2 d-flex"
         disabled={isImporting || !isConfigButtonAvailable}
         onClick={isConfigButtonAvailable ? this.configButtonClickedHandler : null}
       >

apps/app/src/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -41,12 +41,16 @@ class ImportDataPageContents extends React.Component {
               <tbody>
                 <tr>
                   <th>{t('importer_management.article')}</th>
-                  <th><span className="material-symbols-outlined text-success">arrow_circle_right</span></th>
+                  <th className="d-flex">
+                    <span className="material-symbols-outlined text-success">arrow_circle_right</span>
+                  </th>
                   <th>{t('importer_management.page')}</th>
                 </tr>
                 <tr>
                   <th>{t('importer_management.category')}</th>
-                  <th><span className="material-symbols-outlined text-success">arrow_circle_right</span></th>
+                  <th className="d-flex">
+                    <span className="material-symbols-outlined text-success">arrow_circle_right</span>
+                  </th>
                   <th>{t('importer_management.page_path')}</th>
                 </tr>
                 <tr>
@@ -143,7 +147,9 @@ class ImportDataPageContents extends React.Component {
               <tbody>
                 <tr>
                   <th>{t('importer_management.article')}</th>
-                  <th><span className="material-symbols-outlined">arrow_circle_right</span></th>
+                  <th className="d-flex">
+                    <span className="material-symbols-outlined text-success">arrow_circle_right</span>
+                  </th>
                   <th>{t('importer_management.page')}</th>
                 </tr>
                 <tr>

apps/app/src/components/Admin/LegacySlackIntegration/LegacySlackIntegration.jsx

@@ -40,16 +40,17 @@ const LegacySlackIntegration = (props) => {
 
   return (
     <div data-testid="admin-slack-integration-legacy">
-      { isDisabled && (
-        <div className="alert alert-danger">
-          <span className="material-symbols-outlined">remove</span>
+      { true && (
+        <div className="alert alert-danger d-flex">
+          {/* <span className="material-symbols-outlined">remove</span> */}
+          <span className="material-symbols-outlined me-1">do_not_disturb_on</span>
           {/* eslint-disable-next-line react/no-danger */}
           <span dangerouslySetInnerHTML={{ __html: t('admin:slack_integration_legacy.alert_disabled') }}></span>
         </div>
       ) }
 
-      <div className="alert alert-warning">
-        <span className="material-symbols-outlined">info</span>
+      <div className="alert alert-warning d-flex">
+        <span className="material-symbols-outlined me-1">info</span>
         {/* eslint-disable-next-line react/no-danger */}
         <span dangerouslySetInnerHTML={{ __html: t('admin:slack_integration_legacy.alert_deplicated') }}></span>
       </div>

apps/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -102,7 +102,9 @@ class SlackConfiguration extends React.Component {
               <h2 className="border-bottom mb-5">{t('notification_settings.slack_app_configuration')}</h2>
 
               <div className="card custom-card">
-                <span className="text-danger"><span className="material-symbols-outlined">error</span>NOT RECOMMENDED</span>
+                <span className="text-danger d-flex">
+                  <span className="material-symbols-outlined me-1">error</span>NOT RECOMMENDED
+                </span>
                 <br />
                 {/* eslint-disable-next-line react/no-danger */}
                 <span dangerouslySetInnerHTML={{ __html: t('notification_settings.slack_app_configuration_desc') }} />
@@ -140,7 +142,7 @@ class SlackConfiguration extends React.Component {
         <hr />
 
         <h3>
-          <span className="material-symbols-outlined" aria-hidden="true">help</span>{' '}
+          <span className="material-symbols-outlined me-1" aria-hidden="true">help</span>
           <a href="#collapseHelpForIwh" data-bs-toggle="collapse">{t('notification_settings.how_to.header')}</a>
         </h3>
 

apps/app/src/components/Admin/ManageExternalAccount.tsx

@@ -54,8 +54,10 @@ const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element =
           prefetch={false}
           className="btn btn-outline-secondary"
         >
-          <span className="material-symbols-outlined" aria-hidden="true">arrow_back</span>
-          {t('admin:user_management.back_to_user_management')}
+          <div className="d-flex">
+            <span className="material-symbols-outlined me-1" aria-hidden="true">arrow_back</span>
+            {t('admin:user_management.back_to_user_management')}
+          </div>
         </Link>
       </p>
       <h2>{t('admin:user_management.external_account_list')}</h2>

apps/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -98,32 +98,44 @@ class GlobalNotificationList extends React.Component {
                 <ul className="list-inline mb-0">
                   {notification.triggerEvents.includes('pageCreate') && (
                     <li className="list-inline-item badge rounded-pill bg-success">
-                      <span className=" material-symbols-outlined">description</span> CREATE
+                      <div className="d-flex align-items-center">
+                        <span className=" material-symbols-outlined me-1">description</span>CREATE
+                      </div>
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageEdit') && (
                     <li className="list-inline-item badge rounded-pill bg-warning text-dark">
-                      <span className="material-symbols-outlined">edit</span> EDIT
+                      <div className="d-flex align-items-center">
+                        <span className="material-symbols-outlined me-1">edit</span>EDIT
+                      </div>
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageMove') && (
-                    <li className="list-inline-item badge rounded-pill bg-pink">
-                      <span className="material-symbols-outlined">redo</span> MOVE
+                    <li className="list-inline-item badge rounded-pill bg-secondary">
+                      <div className="d-flex align-items-center">
+                        <span className="material-symbols-outlined me-1">redo</span>MOVE
+                      </div>
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageDelete') && (
                     <li className="list-inline-item badge rounded-pill bg-danger">
-                      <span className="material-symbols-outlined">delete_forever</span>DELETE
+                      <div className="d-flex align-items-center">
+                        <span className="material-symbols-outlined me-1">delete_forever</span>DELETE
+                      </div>
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageLike') && (
                     <li className="list-inline-item badge rounded-pill bg-info">
-                      <span className="material-symbols-outlined">favorite</span> LIKE
+                      <div className="d-flex align-items-center">
+                        <span className="material-symbols-outlined me-1">favorite</span>LIKE
+                      </div>
                     </li>
                   )}
                   {notification.triggerEvents.includes('comment') && (
                     <li className="list-inline-item badge rounded-pill bg-primary">
-                      <span className="material-symbols-outlined">bubble_chart</span> POST
+                      <div className="d-flex align-items-center">
+                        <span className="material-symbols-outlined me-1">bubble_chart</span>POST
+                      </div>
                     </li>
                   )}
                 </ul>
@@ -136,21 +148,26 @@ class GlobalNotificationList extends React.Component {
               <td className="td-abs-center">
                 <div className="dropdown">
                   <button
-                    className="btn btn-outline-secondary dropdown-toggle"
+                    className="btn btn-outline-secondary dropdown-toggle d-flex align-items-center"
                     type="button"
                     id="dropdownMenuButton"
                     data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="false"
                   >
-                    <span className="material-symbols-outlined">settings</span> <span className="caret"></span>
+                    <span className="material-symbols-outlined">settings</span>
+                    <span className="caret"></span>
                   </button>
                   <div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                     <a className="dropdown-item" href={urljoin('/admin/global-notification/', notification._id)}>
-                      <span className="material-symbols-outlined">note</span> {t('Edit')}
+                      <div className="d-flex">
+                        <span className="material-symbols-outlined me-1">note</span>{t('Edit')}
+                      </div>
                     </a>
                     <button className="dropdown-item" type="button" onClick={() => this.openConfirmationModal(notification)}>
-                      <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
+                      <div className="d-flex">
+                        <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
+                      </div>
                     </button>
                   </div>
                 </div>
@@ -169,6 +186,11 @@ class GlobalNotificationList extends React.Component {
       </React.Fragment>
     );
 
+
+  //   <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown">
+  //   <span className="material-symbols-outlined">settings</span>
+  //   <span className="caret"></span>
+  // </button>
   }
 
 }

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -113,8 +113,10 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
     <>
       <div className="my-3">
         <Link href="/admin/notification" className="btn btn-outline-secondary">
-          <span className="material-symbols-outlined" aria-hidden="true">arrow_left_alt</span>
-          {t('notification_settings.back_to_list')}
+          <div className="d-flex me-1">
+            <span className="material-symbols-outlined" aria-hidden="true">arrow_left_alt</span>
+            {t('notification_settings.back_to_list')}
+          </div>
         </Link>
       </div>
 
@@ -179,7 +181,9 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
               <>
                 <div className="input-group notify-to-option" id="mail-input">
                   <div>
-                    <span className="input-group-text" id="mail-addon"></span><span className="material-symbols-outlined">mail</span>
+                    <span className="input-group-text" id="mail-addon">
+                      <span className="material-symbols-outlined">mail</span>
+                    </span>
                   </div>
                   <input
                     className="form-control"
@@ -198,6 +202,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                   {!isMailerSetup && <span className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />}
                   <b>Hint: </b>
                   <a href="https://ifttt.com/create" target="blank">{t('notification_settings.email.ifttt_link')}
+                    {/* TODO: 137284 */}
                     <span className="material-symbols-outlined">share</span>
                   </a>
                 </p>
@@ -207,7 +212,9 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
               <>
                 <div className="input-group notify-to-option" id="slack-input">
                   <div>
-                    <span className="input-group-text" id="slack-channel-addon"></span><span className="material-symbols-outlined">tag</span>
+                    <span className="input-group-text" id="slack-channel-addon">
+                      <span className="material-symbols-outlined">tag</span>
+                    </span>
                   </div>
                   <input
                     className="form-control"
@@ -238,7 +245,9 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.CREATE)}
               >
                 <span className="badge rounded-pill bg-success">
-                  <span className="material-symbols-outlined">edit_note</span> CREATE
+                  <div className="d-flex align-items-center">
+                    <span className=" material-symbols-outlined me-1">description</span>CREATE
+                  </div>
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -250,7 +259,9 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.EDIT)}
               >
                 <span className="badge rounded-pill bg-warning text-dark">
-                  <span className="imaterial-symbols-outlined">edit</span> EDIT
+                  <div className="d-flex align-items-center">
+                    <span className="material-symbols-outlined me-1">edit</span>EDIT
+                  </div>
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -261,8 +272,10 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.MOVE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.MOVE)}
               >
-                <span className="badge rounded-pill bg-pink">
-                  <span className="material-symbols-outlined">redo</span>MOVE
+                <span className="badge rounded-pill bg-secondary">
+                  <div className="d-flex align-items-center">
+                    <span className="material-symbols-outlined me-1">redo</span>MOVE
+                  </div>
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -274,7 +287,9 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.DELETE)}
               >
                 <span className="badge rounded-pill bg-danger">
-                  <span className="material-symbols-outlined">delete_forever</span>DELETE
+                  <div className="d-flex align-items-center">
+                    <span className="material-symbols-outlined me-1">delete_forever</span>DELETE
+                  </div>
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -286,7 +301,9 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.LIKE)}
               >
                 <span className="badge rounded-pill bg-info">
-                  <span className="material-symbols-outlined">favorite</span>LIKE
+                  <div className="d-flex align-items-center">
+                    <span className="material-symbols-outlined me-1">favorite</span>LIKE
+                  </div>
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -298,7 +315,9 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.POST)}
               >
                 <span className="badge rounded-pill bg-primary">
-                  <span className="material-symbols-outlined">language</span>POST
+                  <div className="d-flex align-items-center">
+                    <span className="material-symbols-outlined me-1">bubble_chart</span>POST
+                  </div>
                 </span>
               </TriggerEventCheckBox>
             </div>

apps/app/src/components/Admin/Notification/NotificationDeleteModal.jsx

@@ -13,7 +13,9 @@ class NotificationDeleteModal extends React.PureComponent {
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
         <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-danger text-light">
-          <span className="material-symbols-outlined">delete_forever</span>Delete Global Notification Setting
+          <div className="d-flex align-items-center">
+            <span className="material-symbols-outlined me-1">delete_forever</span>Delete Global Notification Setting
+          </div>
         </ModalHeader>
         <ModalBody>
           <p>
@@ -24,8 +26,8 @@ class NotificationDeleteModal extends React.PureComponent {
           </p>
         </ModalBody>
         <ModalFooter>
-          <button type="button" className="btn btn-sm btn-danger" onClick={this.props.onClickSubmit}>
-            <span className="material-symbols-outlined">delete_forever</span> {t('Delete')}
+          <button type="button" className="btn btn-sm btn-danger d-flex align-items-center" onClick={this.props.onClickSubmit}>
+            <span className="material-symbols-outlined">delete_forever</span>{t('Delete')}
           </button>
         </ModalFooter>
       </Modal>

apps/app/src/components/Admin/Notification/NotificationSetting.jsx

@@ -124,11 +124,11 @@ function NotificationSetting(props) {
   const navTabMapping = useMemo(() => {
     return {
       user_trigger_notification: {
-        Icon: () => <span className="material-symbols-outlined">settings</span>,
+        Icon: () => <span className="material-symbols-outlined me-1">settings</span>,
         i18n: 'User trigger notification',
       },
       global_notification: {
-        Icon: () => <span className="material-symbols-outlined">settings</span>,
+        Icon: () => <span className="material-symbols-outlined me-1">settings</span>,
         i18n: 'Global notification',
       },
     };

apps/app/src/components/Admin/Notification/TriggerEventCheckBox.jsx

@@ -15,8 +15,10 @@ const TriggerEventCheckBox = (props) => {
         checked={props.checked}
         onChange={props.onChange}
       />
-      <label className="form-label form-check-label" htmlFor={`trigger-event-${props.event}`}>
-        {props.children}{' '}
+      <label className="form-label form-check-label d-flex align-items-center" htmlFor={`trigger-event-${props.event}`}>
+        <div className="me-1">
+          {props.children}
+        </div>
         {t(`notification_settings.event_${props.event}`)}
       </label>
     </div>

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

@@ -182,7 +182,14 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
                 key={key}
                 className={`p-0 ${isActive ? 'active' : inactiveClassnames.join(' ')}`}
               >
-                <NavLink type="button" key={key} innerRef={elm => registerNavLink(key, elm)} disabled={!isLinkEnabled} onClick={() => navLinkClickHandler(key)}>
+                <NavLink
+                  type="button"
+                  key={key}
+                  innerRef={elm => registerNavLink(key, elm)}
+                  disabled={!isLinkEnabled}
+                  onClick={() => navLinkClickHandler(key)}
+                  className="d-flex align-items-center"
+                >
                   { Icon != null && <Icon /> } {i18n}
                 </NavLink>
               </NavItem>