refactor: change branding delimiter to css

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

frontend/src/components/common/custom-branding/custom-branding.tsx

@@ -4,13 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
-import { ShowIf } from '../show-if/show-if'
 import styles from './branding.module.scss'
-import React, { useMemo } from 'react'
+import React from 'react'
 
 export interface BrandingProps {
   inline?: boolean
-  delimiter?: boolean
 }
 
 /**
@@ -20,32 +18,22 @@ export interface BrandingProps {
  * @param inline If the logo should be using the inline-size or the regular-size css class.
  * @param delimiter If the delimiter between the HedgeDoc logo and the branding should be shown.
  */
-export const CustomBranding: React.FC<BrandingProps> = ({ inline = false, delimiter = true }) => {
+export const CustomBranding: React.FC<BrandingProps> = ({ inline = false }) => {
   const branding = useFrontendConfig().branding
-  const showBranding = !!branding.name || !!branding.logo
 
-  const brandingDom = useMemo(() => {
-    if (branding.logo) {
-      return (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={branding.logo}
-          alt={branding.name}
-          title={branding.name}
-          className={inline ? styles['inline-size'] : styles['regular-size']}
-        />
-      )
-    } else {
-      return branding.name
-    }
-  }, [branding.logo, branding.name, inline])
-
-  return (
-    <ShowIf condition={showBranding}>
-      <ShowIf condition={delimiter}>
-        <strong className={`mx-1 ${inline ? styles['inline-size'] : styles['regular-size']}`}>@</strong>
-      </ShowIf>
-      {brandingDom}
-    </ShowIf>
-  )
+  if (!branding.name && !branding.logo) {
+    return null
+  } else if (branding.logo) {
+    return (
+      /* eslint-disable-next-line @next/next/no-img-element */
+      <img
+        src={branding.logo}
+        alt={branding.name}
+        title={branding.name}
+        className={inline ? styles['inline-size'] : styles['regular-size']}
+      />
+    )
+  } else {
+    return <span className={inline ? styles['inline-size'] : styles['regular-size']}>{branding.name}</span>
+  }
 }

frontend/src/components/editor-page/app-bar/branding.module.scss

@@ -0,0 +1,13 @@
+/*!
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.branding-separator:has(*) {
+  &::before {
+    content: '\2014';
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
+}

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

@@ -10,6 +10,7 @@ import {
   HedgeDocLogoType,
   HedgeDocLogoWithText
 } from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
+import styles from './branding.module.scss'
 import Link from 'next/link'
 import React from 'react'
 import { Navbar } from 'react-bootstrap'
@@ -27,7 +28,9 @@ export const NavbarBranding: React.FC = () => {
           logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
           size={HedgeDocLogoSize.SMALL}
         />
-        <CustomBranding inline={true} />
+        <span className={styles['branding-separator']}>
+          <CustomBranding inline={true} />
+        </span>
       </Link>
     </Navbar.Brand>
   )

frontend/src/pages/intro.tsx

@@ -32,7 +32,7 @@ const IntroPage: NextPage = () => {
             <Trans i18nKey='app.slogan' />
           </p>
           <div className={'mb-5'}>
-            <CustomBranding delimiter={false} />
+            <CustomBranding />
           </div>
           <CoverButtons />
           <IntroCustomContent />