Improve verified indicator

Make it clearer what it means by adding a text label.

src/intl/de.js

@@ -311,6 +311,7 @@ export default {
   fields: 'Felder',
   accountHasMoved: '{account} ist umgezogen:',
   profilePageForAccount: 'Profilseite für {account}',
+  verified: 'Verified',
   // About page
   about: 'Über',
   aboutApp: 'Über Semaphore',

src/intl/en-US.js

@@ -323,6 +323,7 @@ export default {
   fields: 'Fields',
   accountHasMoved: '{account} has moved:',
   profilePageForAccount: 'Profile page for {account}',
+  verified: 'Verified',
   // About page
   about: 'About',
   aboutApp: 'About Semaphore',

src/intl/es.js

@@ -324,6 +324,7 @@ export default {
   fields: 'Campos',
   accountHasMoved: '{account} se ha trasladado:',
   profilePageForAccount: 'Página de perfil para {account}',
+  verified: 'Verified',
   // About page
   about: 'Acerca de',
   aboutApp: 'Acerca de Semaphore',

src/intl/fr.js

@@ -313,6 +313,7 @@ export default {
   fields: 'Champs',
   accountHasMoved: '{account} a déménagé',
   profilePageForAccount: 'Page de profil pour {account}',
+  verified: 'Verified',
   // About page
   about: 'Infos',
   aboutApp: 'Infos sur Semaphore',

src/intl/ru-RU.JS

@@ -323,6 +323,7 @@ export default {
   fields: 'Поля',
   accountHasMoved: '{account} переехал:',
   profilePageForAccount: 'Страница профиля для {account}',
+  verified: 'Verified',
   // About page
   about: 'О нас',
   aboutApp: 'О Semaphore',

src/routes/_components/profile/AccountProfileMeta.html

@@ -17,9 +17,16 @@
       >
         {@html field.value}
       </div>
-      <div class="account-profile-meta-cell account-profile-meta-verified">
+      <div class="account-profile-meta-cell">
         {#if field.verified}
-          <SvgIcon className="account-profile-meta-verified-svg" href="#fa-check" />
+          <span class="account-profile-meta-verified">
+            <SvgIcon
+              ariaLabel="verified"
+              className="account-profile-meta-verified-svg"
+              href="#fa-check"
+            />
+            {intl.verified}
+          </span>
         {/if}
       </div>
     {/each}
@@ -52,12 +59,6 @@
     font-size: 1.1em;
   }
 
-  :global(.account-profile-meta-verified-svg) {
-    width: 24px;
-    height: 24px;
-    fill: var(--svg-fill);
-  }
-
   .account-profile-meta-name {
     padding: 10px 20px 10px 0;
     text-transform: uppercase;
@@ -98,6 +99,31 @@
       padding: 5px 10px 5px 10px;
     }
   }
+
+  .account-profile-meta-verified {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    gap: 0.2em;
+    margin-left: 0.5em;
+    padding: 2px 0;
+    padding-left: 4px;
+    padding-right: 5px;
+    font-size: 0.9em;
+    color: var(--verified-text-color);
+    background: var(--verified-bg-color);
+    border: 1px solid var(--verified-border-color, currentColor);
+    border-radius: 4px;
+  }
+
+  :global(.account-profile-meta-verified-svg) {
+    display: inline-block;
+    width: .9em;
+    height: .9em;
+    fill: currentColor;
+    opacity: 0.95;
+  }
 </style>
 <script>
   import SvgIcon from '../SvgIcon.html'

src/scss/themes/_base.scss

@@ -134,6 +134,9 @@
 
   --focus-bg: #{rgba(0, 0, 0, 0.1)};
 
+  --verified-text-color: #00703C;
+  --verified-bg-color: #E1EFE8;
+
   accent-color: #{$main-theme-color};
   color-scheme: light;
 }

src/scss/themes/_dark.scss

@@ -55,5 +55,9 @@
 
   --focus-bg: #{rgba(255, 255, 255, 0.1)};
 
+  --verified-text-color: #1CA665;
+  --verified-bg-color: #172B29;
+  --verified-border-color: #104c34;
+
   color-scheme: dark;
 }