Merge branch 'custom-verified' into 'develop'

Allow configuring a custom verified icon

See merge request soapbox-pub/soapbox-fe!1075

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/  

app/icons/verified.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon"  viewBox="0 0 20 20" width="20" height="20" fill="none">
+  <circle class="bg" cx="10" cy="10" r="10" fill="#0482d8"/>
+  <path d="M5.586 10l3.193 3.193 6.385-6.385" stroke="#fff" stroke-width="3.193" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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(),

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 (
       <div
         className={classNames('svg-icon', className)}
         {...other}
       >
-        <InlineSVG src={src} />
+        <InlineSVG src={src} title={alt} />
       </div>
     );
   }

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 = () => (
-  <span className='verified-icon'>
-    <span className='visuallyhidden'>Verified Account</span>
-  </span>
-);
+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 (
+    <span className='verified-icon'>
+      <Icon src={icon} alt={intl.formatMessage(messages.verified)} />
+    </span>
+  );
+};
 
 export default VerificationBadge;

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;

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