fix(editor): remove changing color from pin sidebar entry

Instead of a changing color, we now use a chaning icon.

Signed-off-by: Philip Molares <philip.molares@udo.edu>

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

@@ -1,9 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-.highlighted {
-  color: #b51f08 !important;
-}

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

@@ -8,9 +8,8 @@ import { useIsNotePinned } from '../../../../../hooks/common/use-is-note-pinned'
 import { concatCssClasses } from '../../../../../utils/concat-css-classes'
 import { SidebarButton } from '../../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../../types'
-import styles from './pin-note-sidebar-entry.module.css'
 import React, { useCallback, useState } from 'react'
-import { Pin as IconPin } from 'react-bootstrap-icons'
+import { Pin as IconPin, PinFill as IconPinFill } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 import { WaitSpinner } from '../../../../common/wait-spinner/wait-spinner'
 import { useUiNotifications } from '../../../../notifications/ui-notification-boundary'
@@ -49,11 +48,7 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
   }
 
   return (
-    <SidebarButton
-      icon={IconPin}
-      hide={hide}
-      onClick={onPinClicked}
-      className={concatCssClasses(className, { [styles['highlighted']]: isPinned })}>
+    <SidebarButton icon={isPinned ? IconPinFill : IconPin} hide={hide} onClick={onPinClicked} className={className}>
       <Trans i18nKey={`explore.pinnedNotes.is${isPinned ? 'Pinned' : 'Unpinned'}`} />
     </SidebarButton>
   )