feat: replace placeholder icons of gitlab, matrix and discourse

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

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<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', size = '1em', title }, ref) => {
+    return (
+      <svg ref={ref} xmlns='http://www.w3.org/2000/svg' width={size} height={size} fill={color} viewBox='0 0 16 16'>
+        {title ? <title>{title}</title> : null}
+        <path d='M7.994 0C3.654 0 0 3.52 0 7.86V16l7.993-.008c4.34 0 7.86-3.654 7.86-7.994S12.33 0 7.994 0Zm.022 3.03a4.867 4.867 0 0 1 3.833 1.8l.01.01v.002l.018.023.068.085a4.844 4.844 0 0 1 .119.163l.02.03a4.87 4.87 0 0 1-5.644 7.36l-.047-.018a4.875 4.875 0 0 1-.316-.128l-3.166.717.013-.004-.013.003.001-.004v.003l.88-2.835-.019-.04a4.93 4.93 0 0 1-.13-.261A4.87 4.87 0 0 1 8.016 3.03Z' />
+      </svg>
+    )
+  }
+)
+
+IconDiscourse.displayName = 'IconDiscourse'

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<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', size = '1em', title }, ref) => {
+    return (
+      <svg ref={ref} xmlns='http://www.w3.org/2000/svg' width={size} height={size} fill={color} viewBox='0 0 16 16'>
+        {title ? <title>{title}</title> : null}
+        <path d='m15.734 6.1-.023-.058L13.534.358a.567.567 0 0 0-.224-.27.583.583 0 0 0-.667.036.583.583 0 0 0-.193.294l-1.47 4.498H5.024L3.555.418A.572.572 0 0 0 3.36.124a.583.583 0 0 0-.666-.036.572.572 0 0 0-.224.27L.289 6.038l-.022.058a4.044 4.044 0 0 0 1.341 4.674l.008.006.02.014 3.317 2.484 1.642 1.243 1 .754a.672.672 0 0 0 .813 0l1-.754 1.64-1.243 3.338-2.499.009-.007a4.046 4.046 0 0 0 1.34-4.669z' />
+      </svg>
+    )
+  }
+)
+
+IconGitlab.displayName = 'IconGitlab'

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<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', size = '1em', title }, ref) => {
+    return (
+      <svg ref={ref} xmlns='http://www.w3.org/2000/svg' width={size} height={size} fill={color} viewBox='0 0 16 16'>
+        {title ? <title>{title}</title> : null}
+        <path d='M1.035 0v15.998h1.52v-.366H1.46V.384L2.55.366V0Zm12.41.002v.366h1.096v15.248l-1.096.018V16h1.52V.002ZM6.868 5.06c-.37 0-.704.08-.994.242-.299.17-.553.404-.745.686h-.023v-.77l-1.483.009v5.698h1.564V7.616c0-.28.04-.506.121-.68A1.1 1.1 0 0 1 5.6 6.54a.974.974 0 0 1 .353-.186c.095-.03.193-.047.292-.051.252 0 .441.043.57.127.125.08.22.198.274.337.057.146.089.3.094.458.007.163.01.33.01.5v3.198H8.76V7.748c0-.176.013-.35.04-.524.021-.163.073-.32.153-.464a.923.923 0 0 1 .32-.331c.137-.084.314-.127.534-.127.222 0 .397.037.525.11a.734.734 0 0 1 .292.298c.07.138.11.288.121.441.015.169.022.349.022.54v3.23h1.565V7.107a2.6 2.6 0 0 0-.154-.946 1.616 1.616 0 0 0-.429-.634 1.681 1.681 0 0 0-.66-.354 3.027 3.027 0 0 0-.835-.11c-.395 0-.74.095-1.03.287-.292.19-.521.41-.69.66-.155-.354-.382-.6-.68-.74a2.275 2.275 0 0 0-.985-.21Z' />
+      </svg>
+    )
+  }
+)
+
+IconMatrixOrg.displayName = 'IconHedgeDoc'

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'
               />
             </li>

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<SpecificSidebarMenuProps> = ({
       </SidebarButton>
       <SidebarMenu expand={expand}>
         <SidebarButton icon={IconGithub}>Gist</SidebarButton>
-        <SidebarButton icon={IconGit}>Gitlab Snippet</SidebarButton>
+        <SidebarButton icon={IconGitlab}>Gitlab Snippet</SidebarButton>
 
         <ExportMarkdownSidebarEntry />
 

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<SpecificSidebarMenuProps> = ({
       </SidebarButton>
       <SidebarMenu expand={expand}>
         <SidebarButton icon={IconGithub}>Gist</SidebarButton>
-        <SidebarButton icon={IconGit}>Gitlab Snippet</SidebarButton>
+        <SidebarButton icon={IconGitlab}>Gitlab Snippet</SidebarButton>
         <SidebarButton icon={IconClipboard}>
           <Trans i18nKey={'editor.import.clipboard'} />
         </SidebarButton>

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={[
           <ExternalLink href={links.githubOrg} icon={IconGithub} key={'github'} text='GitHub' />,
-          <ExternalLink href={links.community} icon={IconPeople} key={'users'} text='Discourse' />,
+          <ExternalLink href={links.community} icon={IconDiscourse} key={'users'} text='Discourse' />,
-          <ExternalLink href={links.chat} icon={IconChat} key={'comment'} text='Matrix' />,
+          <ExternalLink href={links.chat} icon={IconMatrixOrg} key={'comment'} text='Matrix' />,
           <ExternalLink href={links.mastodon} icon={IconMastodon} key={'mastodon'} text='Mastodon' />,
           <ExternalLink href={links.translate} icon={IconGlobe} key={'globe'} text='POEditor' />
         ]}

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)
       }