From 6a772d851b291c353578d5959589bac455eff775 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Sun, 30 Apr 2023 21:35:45 +0200
Subject: [PATCH] refactor: change branding delimiter to css

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../custom-branding/custom-branding.tsx       | 46 +++++++------------
 .../editor-page/app-bar/branding.module.scss  | 13 ++++++
 .../editor-page/app-bar/navbar-branding.tsx   |  5 +-
 frontend/src/pages/intro.tsx                  |  2 +-
 4 files changed, 35 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/components/editor-page/app-bar/branding.module.scss

diff --git a/frontend/src/components/common/custom-branding/custom-branding.tsx b/frontend/src/components/common/custom-branding/custom-branding.tsx
index 8d5c2b1b0..f1f028fea 100644
--- a/frontend/src/components/common/custom-branding/custom-branding.tsx
+++ b/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>
+  }
 }
diff --git a/frontend/src/components/editor-page/app-bar/branding.module.scss b/frontend/src/components/editor-page/app-bar/branding.module.scss
new file mode 100644
index 000000000..f227ba438
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/frontend/src/components/editor-page/app-bar/navbar-branding.tsx b/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
index ec2588f38..c802b5bbc 100644
--- a/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
+++ b/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>
   )
diff --git a/frontend/src/pages/intro.tsx b/frontend/src/pages/intro.tsx
index 87a25de9d..653f38ce6 100644
--- a/frontend/src/pages/intro.tsx
+++ b/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 />