From e4492c947a283d0078e574f123c0530adea44960 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Wed, 21 Jun 2023 21:25:18 +0200 Subject: [PATCH] feat: replace placeholder icons of gitlab, matrix and discourse Signed-off-by: Tilman Vatteroth --- .../icons/additional/icon-discourse.tsx | 28 +++++++++++++++++++ .../common/icons/additional/icon-gitlab.tsx | 28 +++++++++++++++++++ .../icons/additional/icon-matrix-org.tsx | 28 +++++++++++++++++++ .../app-bar/help-button/links-tab-content.tsx | 4 +-- .../export-menu-sidebar-menu.tsx | 4 +-- .../import-menu-sidebar-menu.tsx | 4 +-- .../landing-layout/footer/social-links.tsx | 8 +++--- .../utils/get-one-click-provider-metadata.ts | 4 +-- 8 files changed, 96 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/common/icons/additional/icon-discourse.tsx create mode 100644 frontend/src/components/common/icons/additional/icon-gitlab.tsx create mode 100644 frontend/src/components/common/icons/additional/icon-matrix-org.tsx diff --git a/frontend/src/components/common/icons/additional/icon-discourse.tsx b/frontend/src/components/common/icons/additional/icon-discourse.tsx new file mode 100644 index 000000000..0a7c2cd98 --- /dev/null +++ b/frontend/src/components/common/icons/additional/icon-discourse.tsx @@ -0,0 +1,28 @@ +/* + * SPDX-FileCopyrightText: Code: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import React from 'react' +import type { IconProps } from 'react-bootstrap-icons' + +/** + * Renders the discourse logo. + * + * @see https://github.com/discourse/discourse/blob/main/LICENSE.txt for discourse license. + * @param color the icon color. Default is current text color + * @param size the size of the icon. Default is the current text size + * @param title custom title for the SVG + */ +export const IconDiscourse = React.forwardRef( + ({ color = 'currentColor', size = '1em', title }, ref) => { + return ( + + {title ? {title} : null} + + + ) + } +) + +IconDiscourse.displayName = 'IconDiscourse' diff --git a/frontend/src/components/common/icons/additional/icon-gitlab.tsx b/frontend/src/components/common/icons/additional/icon-gitlab.tsx new file mode 100644 index 000000000..55f62b264 --- /dev/null +++ b/frontend/src/components/common/icons/additional/icon-gitlab.tsx @@ -0,0 +1,28 @@ +/* + * SPDX-FileCopyrightText: Code: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import React from 'react' +import type { IconProps } from 'react-bootstrap-icons' + +/** + * Renders the gitlab logo. + * + * @see https://about.gitlab.com/handbook/marketing/brand-and-product-marketing/brand/brand-activation/trademark-guidelines/ for gitlab press kit trademark guidelines. + * @param color the icon color. Default is current text color + * @param size the size of the icon. Default is the current text size + * @param title custom title for the SVG + */ +export const IconGitlab = React.forwardRef( + ({ color = 'currentColor', size = '1em', title }, ref) => { + return ( + + {title ? {title} : null} + + + ) + } +) + +IconGitlab.displayName = 'IconGitlab' diff --git a/frontend/src/components/common/icons/additional/icon-matrix-org.tsx b/frontend/src/components/common/icons/additional/icon-matrix-org.tsx new file mode 100644 index 000000000..8aa3f037e --- /dev/null +++ b/frontend/src/components/common/icons/additional/icon-matrix-org.tsx @@ -0,0 +1,28 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import React from 'react' +import type { IconProps } from 'react-bootstrap-icons' + +/** + * Renders the matrix.org logo. + * + * @see https://matrix.org + * @param color the icon color. Default is current text color + * @param size the size of the icon. Default is the current text size + * @param title custom title for the SVG + */ +export const IconMatrixOrg = React.forwardRef( + ({ color = 'currentColor', size = '1em', title }, ref) => { + return ( + + {title ? {title} : null} + + + ) + } +) + +IconMatrixOrg.displayName = 'IconHedgeDoc' diff --git a/frontend/src/components/editor-page/app-bar/help-button/links-tab-content.tsx b/frontend/src/components/editor-page/app-bar/help-button/links-tab-content.tsx index b60bc35b2..d31c2ff54 100644 --- a/frontend/src/components/editor-page/app-bar/help-button/links-tab-content.tsx +++ b/frontend/src/components/editor-page/app-bar/help-button/links-tab-content.tsx @@ -4,13 +4,13 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import links from '../../../../links.json' +import { IconMatrixOrg } from '../../../common/icons/additional/icon-matrix-org' import { TranslatedExternalLink } from '../../../common/links/translated-external-link' import { TranslatedInternalLink } from '../../../common/links/translated-internal-link' import React from 'react' import { Col, Row } from 'react-bootstrap' import { Dot as IconDot } from 'react-bootstrap-icons' import { Flag as IconFlag } from 'react-bootstrap-icons' -import { Hash as IconHash } from 'react-bootstrap-icons' import { PeopleFill as IconPeopleFill } from 'react-bootstrap-icons' import { Tag as IconTag } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' @@ -42,7 +42,7 @@ export const LinksTabContent: React.FC = () => { i18nKey='editor.help.contacts.meetUsOn' i18nOption={{ service: 'Matrix' }} href={links.chat} - icon={IconHash} + icon={IconMatrixOrg} className='text-primary' /> diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx index 0c23c33d1..6ff4d1567 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import { cypressId } from '../../../../utils/cypress-attribute' +import { IconGitlab } from '../../../common/icons/additional/icon-gitlab' import { SidebarButton } from '../sidebar-button/sidebar-button' import { SidebarMenu } from '../sidebar-menu/sidebar-menu' import type { SpecificSidebarMenuProps } from '../types' @@ -13,7 +14,6 @@ import React, { Fragment, useCallback } from 'react' import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons' import { CloudDownload as IconCloudDownload } from 'react-bootstrap-icons' import { FileCode as IconFileCode } from 'react-bootstrap-icons' -import { Git as IconGit } from 'react-bootstrap-icons' import { Github as IconGithub } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' @@ -51,7 +51,7 @@ export const ExportMenuSidebarMenu: React.FC = ({ Gist - Gitlab Snippet + Gitlab Snippet diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx index 19b6d33e7..2fc8c3551 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx @@ -4,6 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import { cypressId } from '../../../../utils/cypress-attribute' +import { IconGitlab } from '../../../common/icons/additional/icon-gitlab' import { SidebarButton } from '../sidebar-button/sidebar-button' import { SidebarMenu } from '../sidebar-menu/sidebar-menu' import type { SpecificSidebarMenuProps } from '../types' @@ -13,7 +14,6 @@ import React, { Fragment, useCallback } from 'react' import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons' import { Clipboard as IconClipboard } from 'react-bootstrap-icons' import { CloudUpload as IconCloudUpload } from 'react-bootstrap-icons' -import { Git as IconGit } from 'react-bootstrap-icons' import { Github as IconGithub } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' @@ -51,7 +51,7 @@ export const ImportMenuSidebarMenu: React.FC = ({ Gist - Gitlab Snippet + Gitlab Snippet diff --git a/frontend/src/components/landing-layout/footer/social-links.tsx b/frontend/src/components/landing-layout/footer/social-links.tsx index f1ec43bad..7a11c78dd 100644 --- a/frontend/src/components/landing-layout/footer/social-links.tsx +++ b/frontend/src/components/landing-layout/footer/social-links.tsx @@ -4,13 +4,13 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import links from '../../../links.json' +import { IconDiscourse } from '../../common/icons/additional/icon-discourse' +import { IconMatrixOrg } from '../../common/icons/additional/icon-matrix-org' import { ExternalLink } from '../../common/links/external-link' import React from 'react' -import { Chat as IconChat } from 'react-bootstrap-icons' import { Github as IconGithub } from 'react-bootstrap-icons' import { Globe as IconGlobe } from 'react-bootstrap-icons' import { Mastodon as IconMastodon } from 'react-bootstrap-icons' -import { People as IconPeople } from 'react-bootstrap-icons' import { Trans, useTranslation } from 'react-i18next' /** @@ -24,8 +24,8 @@ export const SocialLink: React.FC = () => { i18nKey='landing.footer.followUs' components={[ , - , - , + , + , , ]} diff --git a/frontend/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts b/frontend/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts index d92bdf0a7..af2412bc8 100644 --- a/frontend/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts +++ b/frontend/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts @@ -6,12 +6,12 @@ import type { AuthProvider } from '../../../../api/config/types' import { AuthProviderType } from '../../../../api/config/types' import { Logger } from '../../../../utils/logger' +import { IconGitlab } from '../../../common/icons/additional/icon-gitlab' import styles from '../via-one-click.module.scss' import type { Icon } from 'react-bootstrap-icons' import { Dropbox as IconDropbox } from 'react-bootstrap-icons' import { Exclamation as IconExclamation } from 'react-bootstrap-icons' import { Facebook as IconFacebook } from 'react-bootstrap-icons' -import { Git as IconGit } from 'react-bootstrap-icons' import { Github as IconGithub } from 'react-bootstrap-icons' import { Google as IconGoogle } from 'react-bootstrap-icons' import { People as IconPeople } from 'react-bootstrap-icons' @@ -63,7 +63,7 @@ export const getOneClickProviderMetadata = (provider: AuthProvider): OneClickMet case AuthProviderType.GITLAB: return { name: provider.providerName, - icon: IconGit, //TODO: gitlab icon + icon: IconGitlab, className: styles['btn-social-gitlab'], url: getBackendAuthUrl(provider.identifier) }