fix styles

apps/app/src/components/Common/PagePathHierarchicalLink/PagePathHierarchicalLink.tsx

@@ -51,7 +51,7 @@ export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkPro
         <RootElm>
           <span className="path-segment">
             <Link href="/" prefetch={false}>
-              <i className="icon-home"></i>
+              <span className="material-symbols-outlined">home</span>
               <span className={`separator ${styles.separator}`}>/</span>
             </Link>
           </span>
@@ -78,11 +78,12 @@ export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkPro
           isInnerElem
         />
       ) }
+
       { isSeparatorRequired && (
         <span className={`separator ${styles.separator}`}>/</span>
       ) }
 
-      <Link href={href} prefetch={false} legacyBehavior>
+      <Link href={href} prefetch={false} legacyBehavior className="">
         {
           shouldDangerouslySetInnerHTML
             // eslint-disable-next-line react/no-danger

apps/app/src/components/ContentLinkButtons.tsx

@@ -13,9 +13,9 @@ const BookMarkLinkButton = React.memo(() => {
     <ScrollLink to="bookmarks-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm px-2"
+        className="btn btn-outline-secondary btn-sm d-flex align-items-center me-2"
       >
-        <span className="material-symbols-outlined">bookmark</span>
+        <span className="material-symbols-outlined me-1">bookmark</span>
         <span>Bookmarks</span>
       </button>
     </ScrollLink>
@@ -30,10 +30,10 @@ const RecentlyCreatedLinkButton = React.memo(() => {
     <ScrollLink to="recently-created-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm px-3"
+        className="btn btn-outline-secondary btn-sm d-flex align-items-center"
       >
-        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created me-2`}><RecentlyCreatedIcon /></i>
-        <span>Recently Created</span>
+        <span className="material-symbols-outlined me-1">edit</span>
+        <span className="text-nowrap">Recently Created</span>
       </button>
     </ScrollLink>
   );

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -42,8 +42,10 @@ const DeleteBookmarkFolderModal: FC = () => {
   return (
     <Modal size="md" isOpen={isOpened} toggle={closeBookmarkFolderDeleteModal} data-testid="page-delete-modal" className="grw-create-page">
       <ModalHeader tag="h4" toggle={closeBookmarkFolderDeleteModal} className="bg-danger text-light">
-        <span className="material-symbols-outlined">delete</span>
-        {t('bookmark_folder.delete_modal.modal_header_label')}
+        <div className="d-flex align-items-center">
+          <span className="material-symbols-outlined me-1">delete</span>
+          {t('bookmark_folder.delete_modal.modal_header_label')}
+        </div>
       </ModalHeader>
       <ModalBody>
         <div className="pb-1">
@@ -55,7 +57,7 @@ const DeleteBookmarkFolderModal: FC = () => {
       <ModalFooter>
         <button
           type="button"
-          className="btn btn-danger"
+          className="btn btn-danger d-flex align-items-center"
           onClick={onClickDeleteButton}
         >
           <span className="material-symbols-outlined" aria-hidden="true">delete</span>

apps/app/src/components/EmptyTrashButton.tsx

@@ -24,7 +24,7 @@ const EmptyTrashButton = (props: EmptyTrashButtonProps): JSX.Element => {
         disabled={disableEmptyButton}
         onClick={emptyTrashButtonHandler}
       >
-        <span className="material-symbols-outlined">delete</span>
+        <span className="material-symbols-outlined me-1">delete</span>
         <div>{t('modal_empty.empty_the_trash')}</div>
       </button>
     </div>

apps/app/src/components/EmptyTrashModal.tsx

@@ -61,8 +61,10 @@ const EmptyTrashModal: FC = () => {
   return (
     <Modal size="lg" isOpen={isOpened} toggle={closeEmptyTrashModal} data-testid="page-delete-modal">
       <ModalHeader tag="h4" toggle={closeEmptyTrashModal} className="bg-danger text-light">
-        <span className="material-symbols-outlined">delete_forever</span>
-        {t('modal_empty.empty_the_trash')}
+        <div className="d-flex align-items-center">
+          <span className="material-symbols-outlined me-1">delete_forever</span>
+          {t('modal_empty.empty_the_trash')}
+        </div>
       </ModalHeader>
       <ModalBody>
         <div className="grw-scrollable-modal-body pb-1">
@@ -77,7 +79,7 @@ const EmptyTrashModal: FC = () => {
         <ApiErrorMessageList errs={errs} />
         <button
           type="button"
-          className="btn btn-danger"
+          className="btn btn-danger d-flex align-items-center"
           onClick={emptyTrashButtonHandler}
         >
           <span className="material-symbols-outlined" aria-hidden="true">delete_forever</span>

apps/app/src/components/ForbiddenPage.tsx

@@ -14,7 +14,7 @@ const ForbiddenPage = React.memo((props: Props): JSX.Element => {
       <div className="row not-found-message-row mb-4">
         <div className="col-lg-12">
           <h2 className="text-muted">
-            <span className="material-symbols-outlined" aria-hidden="true">block</span>
+            <span className="material-symbols-outlined me-1" aria-hidden="true">block</span>
             Forbidden
           </h2>
         </div>
@@ -22,8 +22,8 @@ const ForbiddenPage = React.memo((props: Props): JSX.Element => {
 
       <div className="row row-alerts d-edit-none">
         <div className="col-sm-12">
-          <p className="alert alert-primary py-3 px-4">
-            <span className="material-symbols-outlined" aria-hidden="true">lock</span>
+          <p className="alert alert-primary py-3 px-4 d-flex align-items-center">
+            <span className="material-symbols-outlined me-1" aria-hidden="true">lock</span>
             { props.isLinkSharingDisabled ? t('share_links.link_sharing_is_disabled') : t('Browsing of this page is restricted')}
           </p>
         </div>

apps/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -84,7 +84,9 @@ export const InAppNotificationDropdown = (): JSX.Element => {
   return (
     <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler} direction="end">
       <DropdownToggle className="px-3" color="primary" innerRef={buttonRef}>
-        <span className="material-symbols-outlined">notifications</span> {badge}
+        <div className="d-flex align-items-center justify-content-center">
+          <span className="material-symbols-outlined">notifications</span> {badge}
+        </div>
       </DropdownToggle>
       <DropdownMenu end>
         { inAppNotificationData != null && inAppNotificationData.docs.length === 0

apps/app/src/components/InstallerForm.tsx

@@ -100,7 +100,9 @@ const InstallerForm = memo((): JSX.Element => {
         <form role="form" id="register-form" className="col-md-12" onSubmit={submitHandler}>
           <div className="dropdown mb-3">
             <div className="input-group dropdown-with-icon">
-              <span className="input-group-text"></span><span className="material-symbols-outlined">language</span>
+              <span className="input-group-text">
+                <span className="material-symbols-outlined">language</span>
+              </span>
               <button
                 type="button"
                 className="btn btn-secondary dropdown-toggle form-control text-end rounded-end"
@@ -145,7 +147,9 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className={`input-group mb-3${hasErrorClass}`}>
-            <span className="input-group-text"></span><span className="material-symbols-outlined">person</span>
+            <span className="input-group-text">
+              <span className="material-symbols-outlined">person</span>
+            </span>
             <input
               data-testid="tiUsername"
               type="text"
@@ -159,7 +163,9 @@ const InstallerForm = memo((): JSX.Element => {
           <p className="form-text">{ unavailableUserId }</p>
 
           <div className="input-group mb-3">
-            <span className="input-group-text"></span><span className="material-symbols-outlined">sell</span>
+            <span className="input-group-text">
+              <span className="material-symbols-outlined">sell</span>
+            </span>
             <input
               data-testid="tiName"
               type="text"
@@ -171,7 +177,9 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <span className="input-group-text"></span><span className="material-symbols-outlined">mail</span>
+            <span className="input-group-text">
+              <span className="material-symbols-outlined">mail</span>
+            </span>
             <input
               data-testid="tiEmail"
               type="email"
@@ -183,7 +191,9 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <span className="input-group-text"></span> <span className="material-symbols-outlined">lock</span>
+            <span className="input-group-text">
+              <span className="material-symbols-outlined">lock</span>
+            </span>
             <input
               data-testid="tiPassword"
               type="password"
@@ -203,7 +213,9 @@ const InstallerForm = memo((): JSX.Element => {
               disabled={isLoading}
             >
               <div className="eff"></div>
-              <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-user-follow'} /></span>
+              <span className="btn-label d-flex align-items-center">
+                <span className="material-symbols-outlined">{ isLoading ? 'sync' : 'person'}</span>
+              </span>
               <span className="btn-label-text">{ t('Create') }</span>
             </button>
           </div>

apps/app/src/components/InvitedForm.tsx

@@ -141,7 +141,9 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         <div className="input-group justify-content-center d-flex mt-4">
           <button type="submit" className="btn btn-fill" id="register" disabled={isLoading}>
             <div className="eff"></div>
-            <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-user-follow'} /></span>
+            <span className="btn-label d-flex align-items-center">
+              <span className="material-symbols-outlined">{isLoading ? 'sync' : 'person'}</span>
+            </span>
             <span className="btn-label-text">{t('Create')}</span>
           </button>
         </div>

apps/app/src/components/LoginForm.tsx

@@ -237,9 +237,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               disabled={isLoading}
             >
               <div className="eff"></div>
-              <span className="btn-label">
+              <span className="btn-label d-flex align-items-center">
                 {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
+                <span className="material-symbols-outlined">{isLoading ? 'sync' : 'login'}</span>
               </span>
               <span className="btn-label-text">{t('Sign in')}</span>
             </button>
@@ -512,9 +512,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               disabled={(!isMailerSetup && isEmailAuthenticationEnabled) || isLoading}
             >
               <div className="eff"></div>
-              <span className="btn-label">
+              <span className="btn-label d-flex align-items-center">
                 {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
+                <span className="material-symbols-outlined">{isLoading ? 'sync' : 'login'}</span>
               </span>
               <span className="btn-label-text">{submitText}</span>
             </button>
@@ -528,7 +528,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             <a
               href="#login"
               id="login"
-              className="link-switch"
+              className="link-switch d-flex align-items-center pull-right"
               style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
               onClick={switchForm}
             >
@@ -557,9 +557,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 {isLocalOrLdapStrategiesEnabled && renderLocalOrLdapLoginForm()}
                 {isSomeExternalAuthEnabled && renderExternalAuthLoginForm()}
                 {isLocalOrLdapStrategiesEnabled && isPasswordResetEnabled && (
-                  <div className="text-end mb-2">
-                    <a href="/forgot-password" className="d-block link-switch">
-                      <span className="material-symbols-outlined">vpn_key</span>{t('forgot_password.forgot_password')}
+                  <div className="text-end">
+                    <a href="/forgot-password" className="d-block link-switch d-flex align-items-center pull-right mb-2">
+                      <span className="material-symbols-outlined">key</span>{t('forgot_password.forgot_password')}
                     </a>
                   </div>
                 )}
@@ -569,7 +569,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                     <a
                       href="#register"
                       id="register"
-                      className="link-switch"
+                      className="link-switch d-flex align-items-center pull-right mb-2"
                       style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
                       onClick={switchForm}
                     >

apps/app/src/components/NotCreatablePage.tsx

@@ -9,7 +9,7 @@ export const NotCreatablePage: FC = () => {
     <div className="row not-found-message-row">
       <div className="col-md-12">
         <h2 className="text-muted">
-          <span className="material-symbols-outlined" aria-hidden="true">block</span>
+          <span className="material-symbols-outlined me-1" aria-hidden="true">block</span>
           { t('not_creatable_page.message') }
         </h2>
       </div>

apps/app/src/components/PageAccessoriesModal/ShareLink/ShareLinkList.tsx

@@ -52,8 +52,8 @@ const ShareLinkTr = (props: ShareLinkTrProps): JSX.Element => {
       <td style={{ verticalAlign: 'middle' }}>
         {shareLink.expiredAt && <span>{dateFnsFormat(new Date(shareLink.expiredAt), 'yyyy-MM-dd HH:mm')}</span>}
       </td>
-      <td style={{ maxWidth: '0', textAlign: 'center' }}>
-        <button className="btn btn-outline-warning" type="button" onClick={onDelete}>
+      <td style={{ maxWidth: '25px', textAlign: 'center' }}>
+        <button className="btn btn-outline-warning d-flex align-items-center" type="button" onClick={onDelete}>
           <span className="material-symbols-outlined">delete</span>{t('Delete')}
         </button>
       </td>

apps/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -86,16 +86,16 @@ export const TrashPageAlert = (): JSX.Element => {
       <>
         <button
           type="button"
-          className="btn btn-info rounded-pill btn-sm ms-auto me-2"
+          className="btn btn-info rounded-pill btn-sm ms-auto me-2 d-flex align-items-center"
           onClick={openPutbackPageModalHandler}
           data-bs-toggle="modal"
           data-testid="put-back-button"
         >
-          <i className="icon-action-undo" aria-hidden="true"></i> {t('Put Back')}
+          <span className="material-symbols-outlined">undo</span>{t('Put Back')}
         </button>
         <button
           type="button"
-          className="btn btn-danger rounded-pill btn-sm"
+          className="btn btn-danger rounded-pill btn-sm d-flex align-items-center"
           disabled={!(pageInfo?.isAbleToDeleteCompletely ?? false)}
           onClick={openPageDeleteModalHandler}
         >
@@ -114,8 +114,9 @@ export const TrashPageAlert = (): JSX.Element => {
     <>
       <div className="alert alert-warning py-3 ps-4 d-flex flex-column flex-lg-row" data-testid="trash-page-alert">
         <div className="flex-grow-1">
-          This page is in the trash <span className="material-symbols-outlined" aria-hidden="true">delete</span>.
-          <br />
+          <div className="d-flex align-items-center">
+            This page is in the trash <span className="material-symbols-outlined" aria-hidden="true">delete</span>.
+          </div>
           <UserPicture user={deleteUser} />
           <span className="ms-2">
             Deleted by {deleteUser?.name} at <span data-vrt-blackout-datetime>{deletedAt ?? pageData?.updatedAt}</span>

apps/app/src/components/PageComment.tsx

@@ -175,10 +175,10 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
                           outline
                           color="secondary"
                           size="sm"
-                          className="btn-comment-reply"
+                          className="btn-comment-reply d-flex align-items-center"
                           onClick={() => onReplyButtonClickHandler(comment._id)}
                         >
-                          <span className="material-symbols-outlined">replay</span> Reply
+                          <span className="material-symbols-outlined fs-5 me-1">reply</span> Reply
                         </Button>
                       </NotAvailableForReadOnlyUser>
                     </NotAvailableForGuest>

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

@@ -31,8 +31,8 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
       return <></>;
     }
     return (
-      <span>
-        <span className="material-symbols-outlined">delete_forever</span>
+      <span className="d-flex align-items-center">
+        <span className="material-symbols-outlined me-1">delete_forever</span>
         Delete comment?
       </span>
     );
@@ -72,7 +72,7 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
       <>
         <span className="text-danger">{errorMessage}</span>&nbsp;
         <Button onClick={cancelToDelete}>Cancel</Button>
-        <Button color="danger" onClick={confirmToDelete}>
+        <Button color="danger" onClick={confirmToDelete} className="d-flex align-items-center">
           <span className="material-symbols-outlined">delete_forever</span>
           Delete
         </Button>

apps/app/src/components/PageCreateModal.jsx

@@ -194,7 +194,9 @@ const PageCreateModal = () => {
                 className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ms-3"
                 onClick={createTodayPage}
               >
-                <span className="material-symbols-outlined">description</span>{t('Create')}
+                <div className="d-flex align-items-center">
+                  <span className="material-symbols-outlined me-1">description</span>{t('Create')}
+                </div>
               </button>
             </div>
 
@@ -248,7 +250,9 @@ const PageCreateModal = () => {
                 onClick={createInputPage}
                 disabled={isMatchedWithUserHomepagePath}
               >
-                <span className="material-symbols-outlined">description</span>{t('Create')}
+                <div className="d-flex align-items-center">
+                  <span className="material-symbols-outlined me-1">description</span>{t('Create')}
+                </div>
               </button>
             </div>
 
@@ -303,7 +307,9 @@ const PageCreateModal = () => {
                 onClick={createTemplatePage}
                 disabled={template == null}
               >
-                <span className="material-symbols-outlined">description</span>{t('Edit')}
+                <div className="d-flex align-items-center">
+                  <span className="material-symbols-outlined me-1">description</span>{t('Edit')}
+                </div>
               </button>
             </div>
 

apps/app/src/components/PageDeleteModal.tsx

@@ -217,8 +217,8 @@ const PageDeleteModal: FC = () => {
         </label>
         {!isAbleToDeleteCompletely
         && (
-          <p className="alert alert-warning p-2 my-0">
-            <span className="material-symbols-outlined">block</span>{ t('modal_delete.delete_completely_restriction') }
+          <p className="alert alert-warning p-2 my-0 d-flex align-items-center">
+            <span className="material-symbols-outlined me-1 fs-5">block</span>{ t('modal_delete.delete_completely_restriction') }
           </p>
         )}
       </div>

apps/app/src/components/PageStatusAlert.tsx

@@ -75,15 +75,17 @@ export const PageStatusAlert = (): JSX.Element => {
     return {
       additionalClasses: ['bg-warning text-dark'],
       label:
-  <>
-    <span className="material-symbols-outlined">lightbulb</span>
+  <div className="d-flex">
+    <span className="material-symbols-outlined me-1">lightbulb</span>
     {label1}
-  </>,
+  </div>,
       btn:
   <>
-    <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white me-4">
-      <span className="material-symbols-outlined">refresh</span>
-      {t('Load latest')}
+    <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white">
+      <div className="d-flex">
+        <span className="material-symbols-outlined me-1">refresh</span>
+        {t('Load latest')}
+      </div>
     </button>
     { isConflict && (
       <button
@@ -91,8 +93,10 @@ export const PageStatusAlert = (): JSX.Element => {
         onClick={onClickResolveConflict}
         className="btn btn-outline-white"
       >
-        <span className="material-symbols-outlined">description</span>
-        {t('modal_resolve_conflict.resolve_conflict')}
+        <div className="d-flex">
+          <span className="material-symbols-outlined me-1">description</span>
+          {t('modal_resolve_conflict.resolve_conflict')}
+        </div>
       </button>
     )}
   </>,
@@ -105,6 +109,7 @@ export const PageStatusAlert = (): JSX.Element => {
     // 'revision?._id' and 'remoteRevisionId' are can not be undefined
     if (revision?._id == null || remoteRevisionId == null) { return }
 
+
     // when remote revision is newer than both
     if (isRevisionOutdated) {
       return getContentsForUpdatedAlert();