feat(frontend): replace forkawesome with bootstrap icons

These icon replace fork awesome. A linter informs the user about the deprecation.

See https://github.com/hedgedoc/hedgedoc/issues/2929

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry.tsx

@@ -8,6 +8,7 @@ import { AliasesModal } from '../../document-bar/aliases/aliases-modal'
 import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import React, { Fragment } from 'react'
+import { Tags as IconTags } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -22,7 +23,7 @@ export const AliasesSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={'tags'} onClick={setShowModal}>
+      <SidebarButton hide={hide} className={className} icon={IconTags} onClick={setShowModal}>
         <Trans i18nKey={'editor.modal.aliases.title'} />
       </SidebarButton>
       <AliasesModal show={showModal} onHide={setHideModal} />

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-markdown-sidebar-entry.tsx

@@ -9,6 +9,7 @@ import { cypressId } from '../../../../utils/cypress-attribute'
 import { download } from '../../../common/download/download'
 import { SidebarButton } from '../sidebar-button/sidebar-button'
 import React, { useCallback } from 'react'
+import { FileText as IconFileText } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 import sanitize from 'sanitize-filename'
 
@@ -24,7 +25,7 @@ export const ExportMarkdownSidebarEntry: React.FC = () => {
   }, [markdownContent, t])
 
   return (
-    <SidebarButton {...cypressId('menu-export-markdown')} onClick={onClick} icon={'file-text'}>
+    <SidebarButton {...cypressId('menu-export-markdown')} onClick={onClick} icon={IconFileText}>
       <Trans i18nKey={'editor.export.markdown-file'} />
     </SidebarButton>
   )

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx

@@ -10,6 +10,11 @@ import type { SpecificSidebarMenuProps } from '../types'
 import { DocumentSidebarMenuSelection } from '../types'
 import { ExportMarkdownSidebarEntry } from './export-markdown-sidebar-entry'
 import React, { Fragment, useCallback } from 'react'
+import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
+import { CloudDownload as IconCloudDownload } from 'react-bootstrap-icons'
+import { FileCode as IconFileCode } from 'react-bootstrap-icons'
+import { Git as IconGit } from 'react-bootstrap-icons'
+import { Github as IconGithub } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -33,25 +38,25 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
   const onClickHandler = useCallback(() => {
     onClick(menuId)
   }, [menuId, onClick])
-
+  //todo: replace git with gitlab icon
   return (
     <Fragment>
       <SidebarButton
         {...cypressId('menu-export')}
         hide={hide}
-        icon={expand ? 'arrow-left' : 'cloud-download'}
+        icon={expand ? IconArrowLeft : IconCloudDownload}
         className={className}
         onClick={onClickHandler}>
         <Trans i18nKey={'editor.documentBar.export'} />
       </SidebarButton>
       <SidebarMenu expand={expand}>
-        <SidebarButton icon={'github'}>Gist</SidebarButton>
-        <SidebarButton icon={'gitlab'}>Gitlab Snippet</SidebarButton>
+        <SidebarButton icon={IconGithub}>Gist</SidebarButton>
+        <SidebarButton icon={IconGit}>Gitlab Snippet</SidebarButton>
 
         <ExportMarkdownSidebarEntry />
 
-        <SidebarButton icon={'file-code-o'}>HTML</SidebarButton>
-        <SidebarButton icon={'file-code-o'}>
+        <SidebarButton icon={IconFileCode}>HTML</SidebarButton>
+        <SidebarButton icon={IconFileCode}>
           <Trans i18nKey='editor.export.rawHtml' />
         </SidebarButton>
       </SidebarMenu>

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx

@@ -10,6 +10,7 @@ import { useChangeEditorContentCallback } from '../../change-content-context/use
 import { SidebarButton } from '../sidebar-button/sidebar-button'
 import { UploadInput } from '../upload-input'
 import React, { Fragment, useCallback, useRef } from 'react'
+import { FileText as IconFileText } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -48,7 +49,7 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
     <Fragment>
       <SidebarButton
         {...cypressId('menu-import-markdown-button')}
-        icon={'file-text-o'}
+        icon={IconFileText}
         onClick={buttonClick}
         disabled={!changeEditorContent}>
         <Trans i18nKey={'editor.import.file'} />

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx

@@ -10,6 +10,11 @@ import type { SpecificSidebarMenuProps } from '../types'
 import { DocumentSidebarMenuSelection } from '../types'
 import { ImportMarkdownSidebarEntry } from './import-markdown-sidebar-entry'
 import React, { Fragment, useCallback } from 'react'
+import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
+import { Clipboard as IconClipboard } from 'react-bootstrap-icons'
+import { CloudUpload as IconCloudUpload } from 'react-bootstrap-icons'
+import { Git as IconGit } from 'react-bootstrap-icons'
+import { Github as IconGithub } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -33,21 +38,21 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
   const onClickHandler = useCallback(() => {
     onClick(menuId)
   }, [menuId, onClick])
-
+  //todo: replace git with gitlab
   return (
     <Fragment>
       <SidebarButton
         {...cypressId('menu-import')}
         hide={hide}
-        icon={expand ? 'arrow-left' : 'cloud-upload'}
+        icon={expand ? IconArrowLeft : IconCloudUpload}
         className={className}
         onClick={onClickHandler}>
         <Trans i18nKey={'editor.documentBar.import'} />
       </SidebarButton>
       <SidebarMenu expand={expand}>
-        <SidebarButton icon={'github'}>Gist</SidebarButton>
-        <SidebarButton icon={'gitlab'}>Gitlab Snippet</SidebarButton>
-        <SidebarButton icon={'clipboard'}>
+        <SidebarButton icon={IconGithub}>Gist</SidebarButton>
+        <SidebarButton icon={IconGit}>Gitlab Snippet</SidebarButton>
+        <SidebarButton icon={IconClipboard}>
           <Trans i18nKey={'editor.import.clipboard'} />
         </SidebarButton>
         <ImportMarkdownSidebarEntry />

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-entry.tsx

@@ -9,6 +9,7 @@ import { NoteInfoModal } from '../../document-bar/note-info/note-info-modal'
 import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import React, { Fragment } from 'react'
+import { GraphUp as IconGraphUp } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -26,7 +27,7 @@ export const NoteInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ clas
       <SidebarButton
         hide={hide}
         className={className}
-        icon={'line-chart'}
+        icon={IconGraphUp}
         onClick={showModal}
         {...cypressId('sidebar-btn-document-info')}>
         <Trans i18nKey={'editor.modal.documentInfo.title'} />

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry.tsx

@@ -8,6 +8,7 @@ import { PermissionModal } from '../../document-bar/permissions/permission-modal
 import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import React, { Fragment } from 'react'
+import { Lock as IconLock } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -22,7 +23,7 @@ export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ c
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={'lock'} onClick={showModal}>
+      <SidebarButton hide={hide} className={className} icon={IconLock} onClick={showModal}>
         <Trans i18nKey={'editor.modal.permissions.title'} />
       </SidebarButton>
       <PermissionModal show={modalVisibility} onHide={closeModal} />

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.tsx

@@ -10,6 +10,7 @@ import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import styles from './pin-note-sidebar-entry.module.css'
 import React, { useCallback, useMemo } from 'react'
+import { Pin as IconPin } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -38,7 +39,7 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
 
   return (
     <SidebarButton
-      icon={'thumb-tack'}
+      icon={IconPin}
       hide={hide}
       onClick={onPinClicked}
       className={`${className ?? ''} ${isPinned ? styles['highlighted'] : ''}`}>

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revision-sidebar-entry.tsx

@@ -8,6 +8,7 @@ import { RevisionModal } from '../../document-bar/revisions/revision-modal'
 import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import React, { Fragment } from 'react'
+import { ClockHistory as IconClockHistory } from 'react-bootstrap-icons'
 import { Trans } from 'react-i18next'
 
 /**
@@ -21,7 +22,7 @@ export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ clas
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={'history'} onClick={showModal}>
+      <SidebarButton hide={hide} className={className} icon={IconClockHistory} onClick={showModal}>
         <Trans i18nKey={'editor.modal.revision.title'} />
       </SidebarButton>
       <RevisionModal show={modalVisibility} onHide={closeModal} />

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-sidebar-entry.tsx

@@ -8,6 +8,7 @@ import { ShareModal } from '../../document-bar/share/share-modal'
 import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import React, { Fragment } from 'react'
+import { Share as IconShare } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -22,7 +23,7 @@ export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ classNa
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={'share'} onClick={showModal}>
+      <SidebarButton hide={hide} className={className} icon={IconShare} onClick={showModal}>
         <Trans i18nKey={'editor.modal.shareLink.title'} />
       </SidebarButton>
       <ShareModal show={modalVisibility} onHide={closeModal} />