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