refactor: replace logo svgs with components

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx

@@ -1,45 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import LogoBwHorizontal from './logo_text_bw_horizontal.svg'
-import LogoColorVertical from './logo_text_color_vertical.svg'
-import LogoWbHorizontal from './logo_text_wb_horizontal.svg'
-import React from 'react'
-
-export enum HedgeDocLogoSize {
-  SMALL = 32,
-  MEDIUM = 64,
-  BIG = 256
-}
-
-export interface HedgeDocLogoProps {
-  size?: HedgeDocLogoSize | number
-  logoType: HedgeDocLogoType
-}
-
-export enum HedgeDocLogoType {
-  COLOR_VERTICAL,
-  BW_HORIZONTAL,
-  WB_HORIZONTAL
-}
-
-/**
- * Renders the HedgeDoc logo with the app name in different types.
- *
- * @param size The size the logo should have.
- * @param logoType The logo type to be used.
- */
-export const HedgeDocLogoWithText: React.FC<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM, logoType }) => {
-  switch (logoType) {
-    case HedgeDocLogoType.COLOR_VERTICAL:
-      return <LogoColorVertical className={'w-auto'} height={`${size}px`} width={'auto'} />
-    case HedgeDocLogoType.BW_HORIZONTAL:
-      return <LogoBwHorizontal className={'w-auto'} height={`${size}px`} width={'auto'} />
-    case HedgeDocLogoType.WB_HORIZONTAL:
-      return <LogoWbHorizontal className={'w-auto'} height={`${size}px`} width={'auto'} />
-    default:
-      return null
-  }
-}

frontend/src/components/common/hedge-doc-logo/logo-size.tsx

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export enum LogoSize {
+  SMALL = 32,
+  MEDIUM = 64,
+  BIG = 256
+}

frontend/src/components/common/hedge-doc-logo/styles.module.scss

@@ -0,0 +1,9 @@
+/*!
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.auto-text {
+  fill: var(--bs-emphasis-color);
+}

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

@@ -5,11 +5,8 @@
  */
 import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
 import { CustomBranding } from '../../common/custom-branding/custom-branding'
-import {
-  HedgeDocLogoSize,
-  HedgeDocLogoType,
-  HedgeDocLogoWithText
-} from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
+import { HedgeDocLogoHorizontalGrey } from '../../common/hedge-doc-logo/hedge-doc-logo-horizontal-grey'
+import { LogoSize } from '../../common/hedge-doc-logo/logo-size'
 import { BrandingSeparatorDash } from './branding-separator-dash'
 import Link from 'next/link'
 import React from 'react'
@@ -24,10 +21,7 @@ export const NavbarBranding: React.FC = () => {
   return (
     <Navbar.Brand>
       <Link href='/intro' className='text-secondary text-decoration-none d-flex align-items-center'>
-        <HedgeDocLogoWithText
-          logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
-          size={HedgeDocLogoSize.SMALL}
-        />
+        <HedgeDocLogoHorizontalGrey size={LogoSize.SMALL} color={darkModeActivated ? 'dark' : 'light'} />
         <BrandingSeparatorDash />
         <CustomBranding inline={true} />
       </Link>

frontend/src/pages/intro.tsx

@@ -4,11 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { CustomBranding } from '../components/common/custom-branding/custom-branding'
-import {
-  HedgeDocLogoSize,
-  HedgeDocLogoType,
-  HedgeDocLogoWithText
-} from '../components/common/hedge-doc-logo/hedge-doc-logo-with-text'
+import { HedgeDocLogoVertical } from '../components/common/hedge-doc-logo/hedge-doc-logo-vertical'
+import { LogoSize } from '../components/common/hedge-doc-logo/logo-size'
 import { EditorToRendererCommunicatorContextProvider } from '../components/editor-page/render-context/editor-to-renderer-communicator-context-provider'
 import { CoverButtons } from '../components/intro-page/cover-buttons/cover-buttons'
 import { IntroCustomContent } from '../components/intro-page/intro-custom-content'
@@ -26,7 +23,7 @@ const IntroPage: NextPage = () => {
       <EditorToRendererCommunicatorContextProvider>
         <div className={'flex-fill mt-3'}>
           <h1 dir='auto' className={'align-items-center d-flex justify-content-center flex-column'}>
-            <HedgeDocLogoWithText logoType={HedgeDocLogoType.COLOR_VERTICAL} size={HedgeDocLogoSize.BIG} />
+            <HedgeDocLogoVertical size={LogoSize.BIG} autoTextColor={true} />
           </h1>
           <p className='lead'>
             <Trans i18nKey='app.slogan' />