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/verification_badge.js b/app/soapbox/components/verification_badge.js index d448b8664..49ef95a46 100644 --- a/app/soapbox/components/verification_badge.js +++ b/app/soapbox/components/verification_badge.js @@ -1,7 +1,8 @@ import React from 'react'; import { useIntl, defineMessages } from 'react-intl'; +import { useSelector } from 'react-redux'; -import Icon from 'soapbox/components/icon'; +import SvgIcon from 'soapbox/components/svg_icon'; const messages = defineMessages({ verified: { id: 'account.verified', defaultMessage: 'Verified Account' }, @@ -10,9 +11,16 @@ const messages = defineMessages({ 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 ( - + ); }; 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 729b0def0..c2cbc32cc 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -730,12 +730,12 @@ 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; .svg-icon svg > .bg {