mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Add verification check to avatars
This commit is contained in:
parent
6f5ef9d3a7
commit
4aae5dd0c7
@ -31,7 +31,6 @@
|
||||
bottom: 0px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: var(--background-site);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -98,8 +97,6 @@
|
||||
|
||||
.iconBackground {
|
||||
@include iconBackground;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,8 +112,6 @@
|
||||
|
||||
.iconBackground {
|
||||
@include iconBackground;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,8 +127,6 @@
|
||||
|
||||
.iconBackground {
|
||||
@include iconBackground;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2,14 +2,15 @@ import { Component, createMemo, createSignal, Show } from 'solid-js';
|
||||
import defaultAvatar from '../../assets/icons/default_nostrich.svg';
|
||||
import { useMediaContext } from '../../contexts/MediaContext';
|
||||
import { getMediaUrl } from '../../lib/media';
|
||||
import { MediaSize } from '../../types/primal';
|
||||
import { MediaSize, PrimalUser } from '../../types/primal';
|
||||
import VerificationCheck from '../VerificationCheck/VerificationCheck';
|
||||
|
||||
import styles from './Avatar.module.scss';
|
||||
|
||||
const Avatar: Component<{
|
||||
src: string | undefined,
|
||||
size?: "xxs" | "xss" | "xs" | "vs" | "sm" | "md" | "lg" | "xl" | "xxl",
|
||||
verified?: string,
|
||||
user?: PrimalUser,
|
||||
highlightBorder?: boolean,
|
||||
}> = (props) => {
|
||||
|
||||
@ -109,9 +110,9 @@ const Avatar: Component<{
|
||||
<img src={imageSrc()} alt="avatar" onerror={imgError}/>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={props.verified}>
|
||||
<Show when={props.user}>
|
||||
<div class={styles.iconBackground}>
|
||||
<div class={styles.verifiedIcon}></div>
|
||||
<VerificationCheck user={props.user} />
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
@ -20,7 +20,7 @@ const NewNote: Component<{ onSuccess: (note: SendNoteResult) => void}> = (props)
|
||||
<Avatar
|
||||
src={activeUser()?.picture}
|
||||
size="md"
|
||||
verified={activeUser()?.nip05}
|
||||
user={activeUser()}
|
||||
/>
|
||||
</div>
|
||||
<div class={styles.rightSide}>
|
||||
|
@ -55,6 +55,7 @@
|
||||
overflow: hidden;
|
||||
max-width: 360px;
|
||||
color: var(--text-primary);
|
||||
margin-right: 2px;
|
||||
}
|
||||
.time{
|
||||
margin: 0px 2px;
|
||||
|
@ -23,7 +23,7 @@ const PeopleList: Component<{ people: PrimalUser[], label: string}> = (props) =>
|
||||
<Avatar
|
||||
src={person?.picture}
|
||||
size="md"
|
||||
verified={person?.nip05}
|
||||
user={person}
|
||||
/>
|
||||
</div>
|
||||
<div class={styles.content}>
|
||||
|
@ -21,7 +21,7 @@ const ProfileWidget: Component = () => {
|
||||
<Avatar
|
||||
size="vs"
|
||||
src={activeUser()?.picture}
|
||||
verified={activeUser()?.nip05}
|
||||
user={activeUser()}
|
||||
/>
|
||||
</div>
|
||||
<div class={styles.userInfo}>
|
||||
|
@ -89,7 +89,7 @@ const ReplyToNote: Component<{ note: PrimalNote, onNotePosted?: (note: SendNoteR
|
||||
<Avatar
|
||||
src={activeUser()?.picture}
|
||||
size="md"
|
||||
verified={activeUser()?.nip05}
|
||||
user={activeUser()}
|
||||
/>
|
||||
</div>
|
||||
<div class={styles.rightSideClosed}>
|
||||
@ -117,7 +117,7 @@ const ReplyToNote: Component<{ note: PrimalNote, onNotePosted?: (note: SendNoteR
|
||||
<Avatar
|
||||
src={activeUser()?.picture}
|
||||
size="md"
|
||||
verified={activeUser()?.nip05}
|
||||
user={activeUser()}
|
||||
/>
|
||||
</div>
|
||||
<div class={styles.rightSide}>
|
||||
|
@ -3,7 +3,6 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
margin-inline: 2px;
|
||||
background-color: var(--text-tertiary-2);
|
||||
-webkit-mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
|
||||
mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
|
||||
@ -12,15 +11,15 @@
|
||||
.verificationIcon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.verifiedIconPrimal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
margin-inline: 2px;
|
||||
background: var(--brand-gradient);
|
||||
-webkit-mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
|
||||
mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
|
||||
@ -31,7 +30,8 @@
|
||||
height: 11px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
left: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
}
|
||||
|
@ -32,7 +32,13 @@ const VerificationCheck: Component<{ user: PrimalUser | undefined }> = (props) =
|
||||
})
|
||||
|
||||
return (
|
||||
<Show when={isVerified()}>
|
||||
<Show
|
||||
when={isVerified()}
|
||||
fallback={
|
||||
<div class={styles.verificationIcon}>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Show
|
||||
when={isVerifiedByPrimal()}
|
||||
fallback={
|
||||
|
Loading…
Reference in New Issue
Block a user