Improve verified indicator

Make it clearer what it means by adding a text label.
This commit is contained in:
Nick Colley 2023-02-01 11:15:23 +00:00
parent 04ee2585b8
commit 6fac95c636
8 changed files with 46 additions and 8 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -17,9 +17,16 @@
> >
{@html field.value} {@html field.value}
</div> </div>
<div class="account-profile-meta-cell account-profile-meta-verified"> <div class="account-profile-meta-cell">
{#if field.verified} {#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} {/if}
</div> </div>
{/each} {/each}
@ -52,12 +59,6 @@
font-size: 1.1em; font-size: 1.1em;
} }
:global(.account-profile-meta-verified-svg) {
width: 24px;
height: 24px;
fill: var(--svg-fill);
}
.account-profile-meta-name { .account-profile-meta-name {
padding: 10px 20px 10px 0; padding: 10px 20px 10px 0;
text-transform: uppercase; text-transform: uppercase;
@ -98,6 +99,31 @@
padding: 5px 10px 5px 10px; 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> </style>
<script> <script>
import SvgIcon from '../SvgIcon.html' import SvgIcon from '../SvgIcon.html'

View File

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

View File

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