github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 17:26:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat: replace placeholder icons of gitlab, matrix and discourse

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-06-21 21:25:18 +02:00
parent cf860d86fe
commit e4492c947a
8 changed files with 96 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/components/common/icons/additional/icon-discourse.tsx Normal file
View file

@ -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'

28
frontend/src/components/common/icons/additional/icon-gitlab.tsx Normal file
View file

@ -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'

28
frontend/src/components/common/icons/additional/icon-matrix-org.tsx Normal file
View file

@ -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'

4
frontend/src/components/editor-page/app-bar/help-button/links-tab-content.tsx
View file

@ -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>

4
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx
View file

@ -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 />

4
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx
View file

@ -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>

8
frontend/src/components/landing-layout/footer/social-links.tsx
View file

@ -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.chat} icon={IconChat} key={'comment'} text='Matrix' />,
<ExternalLink href={links.community} icon={IconDiscourse} key={'users'} text='Discourse' />,
<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' />
]}

4
frontend/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts
View file

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