diff --git a/app/icons/COPYING.md b/app/icons/COPYING.md index de5c4fcf8..bec84979f 100644 --- a/app/icons/COPYING.md +++ b/app/icons/COPYING.md @@ -4,6 +4,7 @@ - fediverse.svg - Modified from Wikipedia, CC0 - home-squared.svg - Modified from Tabler icons, MIT - pen-plus.svg - Modified from Tabler icons, MIT +- verified.svg - Created by Alex Gleason. CC0 Tabler: https://tabler-icons.io/ Feather: https://feathericons.com/ diff --git a/app/icons/verified.svg b/app/icons/verified.svg new file mode 100644 index 000000000..856cd6eeb --- /dev/null +++ b/app/icons/verified.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js index 03814cf7c..35a32c840 100644 --- a/app/soapbox/actions/soapbox.js +++ b/app/soapbox/actions/soapbox.js @@ -52,6 +52,7 @@ export const makeDefaultConfig = features => { homeFooter: ImmutableList(), }), allowedEmoji: features.emojiReactsRGI ? allowedEmojiRGI : allowedEmoji, + verifiedIcon: '', verifiedCanEditName: false, displayFqn: Boolean(features.federating), cryptoAddresses: ImmutableList(), diff --git a/app/soapbox/components/svg_icon.js b/app/soapbox/components/svg_icon.js index ded55c50d..2e02a1585 100644 --- a/app/soapbox/components/svg_icon.js +++ b/app/soapbox/components/svg_icon.js @@ -13,18 +13,19 @@ export default class SvgIcon extends React.PureComponent { static propTypes = { src: PropTypes.string.isRequired, + alt: PropTypes.string, className: PropTypes.string, }; render() { - const { src, className, ...other } = this.props; + const { src, className, alt, ...other } = this.props; return (
- +
); } diff --git a/app/soapbox/components/verification_badge.js b/app/soapbox/components/verification_badge.js index 5fee48a34..49ef95a46 100644 --- a/app/soapbox/components/verification_badge.js +++ b/app/soapbox/components/verification_badge.js @@ -1,9 +1,28 @@ import React from 'react'; +import { useIntl, defineMessages } from 'react-intl'; +import { useSelector } from 'react-redux'; -const VerificationBadge = () => ( - - Verified Account - -); +import SvgIcon from 'soapbox/components/svg_icon'; + +const messages = defineMessages({ + verified: { id: 'account.verified', defaultMessage: 'Verified Account' }, +}); + +const VerificationBadge = () => { + const intl = useIntl(); + + // Prefer a custom icon if found + const customIcon = useSelector(state => state.getIn(['soapbox', 'verifiedIcon'])); + const icon = customIcon || require('icons/verified.svg'); + + // Render component based on file extension + const Icon = icon.endsWith('.svg') ? SvgIcon : 'img'; + + return ( + + + + ); +}; export default VerificationBadge; diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index 5c705db81..9d6c13038 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -84,7 +84,7 @@ } } - .svg-icon:first-child { + > .svg-icon:first-child { height: 20px; width: 20px; min-width: 20px; diff --git a/app/styles/ui.scss b/app/styles/ui.scss index de2ce5e3b..c2cbc32cc 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -730,40 +730,16 @@ article:last-child > .domain { } .verified-icon { - display: inline-block; + display: inline-flex; margin: 0 4px 0 1px; vertical-align: top; position: relative; - width: 15px; - height: 15px; + width: 20px; + height: 20px; flex-shrink: 0; - &::before { - display: block; - content: ""; - position: absolute; - background-color: #00a3ed; - top: 0; - right: 0; - left: 0; - bottom: 0; - border-radius: 50%; - } - - &::after { - display: block; - position: absolute; - content: '\f00c'; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - font-size: 0.6em; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - color: #fff; - line-height: 15px; - width: 15px; - height: 15px; - text-align: center; + .svg-icon svg > .bg { + fill: var(--brand-color); } }