Minor fixes (#911)

* Replace full links

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Use dark mode hook

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Add overflow for graphviz and abc

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Cap max height of toc overlay

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Remove extension from css import

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Fix hook

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/editor/app-bar/dark-mode-button.tsx

@@ -7,14 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 import React from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../../redux'
+import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated'
 import { setDarkMode } from '../../../redux/dark-mode/methods'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 
 const DarkModeButton: React.FC = () => {
   const { t } = useTranslation()
-  const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeEnabled = useIsDarkModeActivated()
 
   return (
     <ToggleButtonGroup

src/components/editor/app-bar/navbar-branding.tsx

@@ -6,9 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react'
 import { Navbar } from 'react-bootstrap'
-import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { ApplicationState } from '../../../redux'
+import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated'
 import { Branding } from '../../common/branding/branding'
 import {
   HedgeDocLogoSize,
@@ -17,7 +16,7 @@ import {
 } from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
 
 export const NavbarBranding: React.FC = () => {
-  const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeActivated = useIsDarkModeActivated()
 
   return (
     <Navbar.Brand>

src/components/editor/document-bar/revisions/revision-modal.tsx

@@ -13,6 +13,7 @@ import { useParams } from 'react-router'
 import { getAllRevisions, getRevision } from '../../../../api/revisions'
 import { Revision, RevisionListEntry } from '../../../../api/revisions/types'
 import { UserResponse } from '../../../../api/users/types'
+import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated'
 import { ApplicationState } from '../../../../redux'
 import { CommonModal, CommonModalProps } from '../../../common/modals/common-modal'
 import { ShowIf } from '../../../common/show-if/show-if'
@@ -27,7 +28,7 @@ export const RevisionModal: React.FC<CommonModalProps> = ({ show, onHide, icon,
   const [selectedRevision, setSelectedRevision] = useState<Revision | null>(null)
   const [error, setError] = useState(false)
   const revisionAuthorListMap = useRef(new Map<number, UserResponse[]>())
-  const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeEnabled = useIsDarkModeActivated()
   const { id } = useParams<{ id: string }>()
 
   useEffect(() => {

src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx

@@ -7,9 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { Picker } from 'emoji-picker-element'
 import { CustomEmoji, EmojiClickEvent, EmojiClickEventDetail } from 'emoji-picker-element/shared'
 import React, { useEffect, useRef } from 'react'
-import { useSelector } from 'react-redux'
 import { useClickAway } from 'react-use'
-import { ApplicationState } from '../../../../../redux'
+import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated'
 import './emoji-picker.scss'
 import forkawesomeIcon from './forkawesome.png'
 import { ForkAwesomeIcons } from './icon-names'
@@ -41,7 +40,7 @@ const twemojiStyle = (): HTMLStyleElement => {
 }
 
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({ show, onEmojiSelected, onDismiss }) => {
-  const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeEnabled = useIsDarkModeActivated()
   const pickerContainerRef = useRef<HTMLDivElement>(null)
   const pickerRef = useRef<Picker>()
 

src/components/editor/table-of-contents/table-of-contents.scss

@@ -7,6 +7,7 @@
 .markdown-toc {
   width: 100%;
   max-width: 200px;
+  max-height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;