diff --git a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx new file mode 100644 index 000000000..e2ead59a6 --- /dev/null +++ b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx @@ -0,0 +1,71 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { LogoSize } from './logo-size' +import React from 'react' + +interface HedgeDocLogoHorizontalGreyProps { + color: 'dark' | 'light' + size?: LogoSize | number +} + +export const HedgeDocLogoHorizontalGrey: React.FC = ({ + color, + size = LogoSize.MEDIUM +}) => { + return ( + + + + + + + + + + + + + ) +} diff --git a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-vertical.tsx b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-vertical.tsx new file mode 100644 index 000000000..e2e34fa3c --- /dev/null +++ b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-vertical.tsx @@ -0,0 +1,92 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { concatCssClasses } from '../../../utils/concat-css-classes' +import { LogoSize } from './logo-size' +import styles from './styles.module.scss' +import React from 'react' + +interface HedgeDocLogoVerticalProps { + autoTextColor?: boolean + size?: LogoSize | number +} + +export const HedgeDocLogoVertical: React.FC = ({ + autoTextColor, + size = LogoSize.MEDIUM +}) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx deleted file mode 100644 index 844c41ec4..000000000 --- a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx +++ /dev/null @@ -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 = ({ size = HedgeDocLogoSize.MEDIUM, logoType }) => { - switch (logoType) { - case HedgeDocLogoType.COLOR_VERTICAL: - return - case HedgeDocLogoType.BW_HORIZONTAL: - return - case HedgeDocLogoType.WB_HORIZONTAL: - return - default: - return null - } -} diff --git a/frontend/src/components/common/hedge-doc-logo/logo-size.tsx b/frontend/src/components/common/hedge-doc-logo/logo-size.tsx new file mode 100644 index 000000000..42f4375d6 --- /dev/null +++ b/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 +} diff --git a/frontend/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg b/frontend/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg deleted file mode 100644 index 803649fbe..000000000 --- a/frontend/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - diff --git a/frontend/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg b/frontend/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg deleted file mode 100644 index d003bc0bf..000000000 --- a/frontend/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg b/frontend/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg deleted file mode 100644 index 24677d74a..000000000 --- a/frontend/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/frontend/src/components/common/hedge-doc-logo/styles.module.scss b/frontend/src/components/common/hedge-doc-logo/styles.module.scss new file mode 100644 index 000000000..c67865431 --- /dev/null +++ b/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); +} 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 d72064f9a..f518455c8 100644 --- a/frontend/src/components/editor-page/app-bar/navbar-branding.tsx +++ b/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 ( - + diff --git a/frontend/src/pages/intro.tsx b/frontend/src/pages/intro.tsx index 653f38ce6..ac4a26d54 100644 --- a/frontend/src/pages/intro.tsx +++ b/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 = () => {

- +