diff --git a/frontend/app/components/comment/__verification/_active/comment__verification_active.css b/frontend/app/components/comment/__verification/_active/comment__verification_active.css deleted file mode 100644 index 8f800338..00000000 --- a/frontend/app/components/comment/__verification/_active/comment__verification_active.css +++ /dev/null @@ -1,3 +0,0 @@ -.comment__verification_active { - background-image: url('./comment__verification_active.svg'); -} diff --git a/frontend/app/components/comment/__verification/_active/comment__verification_active.svg b/frontend/app/components/comment/__verification/_active/comment__verification_active.svg deleted file mode 100644 index aa745e2a..00000000 --- a/frontend/app/components/comment/__verification/_active/comment__verification_active.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/app/components/comment/__verification/_clickable/comment__verification_clickable.css b/frontend/app/components/comment/__verification/_clickable/comment__verification_clickable.css deleted file mode 100644 index c406abfc..00000000 --- a/frontend/app/components/comment/__verification/_clickable/comment__verification_clickable.css +++ /dev/null @@ -1,3 +0,0 @@ -.comment__verification_clickable { - cursor: pointer; -} diff --git a/frontend/app/components/comment/__verification/comment__verification.css b/frontend/app/components/comment/__verification/comment__verification.css deleted file mode 100644 index 54e41e76..00000000 --- a/frontend/app/components/comment/__verification/comment__verification.css +++ /dev/null @@ -1,13 +0,0 @@ -.comment__verification { - display: inline-block; - width: 12px; - height: 12px; - margin-left: 4px; - vertical-align: middle; - background: url('./comment__verification.svg') center no-repeat; - background-size: cover; - - &:hover { - opacity: 0.75; - } -} diff --git a/frontend/app/components/comment/__verification/comment__verification.svg b/frontend/app/components/comment/__verification/comment__verification.svg deleted file mode 100644 index aafbd798..00000000 --- a/frontend/app/components/comment/__verification/comment__verification.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/frontend/app/components/comment/comment.module.css b/frontend/app/components/comment/comment.module.css index 9648eabd..1ed65bac 100644 --- a/frontend/app/components/comment/comment.module.css +++ b/frontend/app/components/comment/comment.module.css @@ -6,3 +6,24 @@ .user > * + * { margin-left: 4px; } + +.verificationButton { + display:flex; + align-items: center; + padding: 2px; + width: 16px; + height: 16px; +} + +.verificationIcon { + color: var(--color29); +} + +.verificationIconInactive { + color: var(--color1); + transition: opacity 0.15s; + + &:hover { + opacity: 0.75; + } +} diff --git a/frontend/app/components/comment/comment.test.tsx b/frontend/app/components/comment/comment.test.tsx index c0425dcd..2605bc84 100644 --- a/frontend/app/components/comment/comment.test.tsx +++ b/frontend/app/components/comment/comment.test.tsx @@ -37,8 +37,9 @@ function getDefaultProps() { vote: 0, user: { id: 'someone', + name: 'username', picture: 'somepicture-url', - } as User, + }, time: new Date().toString(), locator: { url: 'somelocatorurl', @@ -50,7 +51,7 @@ function getDefaultProps() { id: 'testuser', picture: 'somepicture-url', } as User, - } as CommentProps; + } as CommentProps & { user: User }; } const DefaultProps = getDefaultProps(); @@ -65,6 +66,36 @@ describe('', () => { expect(patreonSubscriberIcon.tagName).toBe('IMG'); }); + describe('verification', () => { + it('should render active verification icon', () => { + const props = getDefaultProps(); + props.data.user.verified = true; + render(); + expect(screen.getByTitle('Verified user')).toBeVisible(); + }); + + it('should not render verification icon', () => { + const props = getDefaultProps(); + render(); + expect(screen.queryByTitle('Verified user')).not.toBeInTheDocument(); + }); + + it('should render verification button for admin', () => { + const props = getDefaultProps(); + props.user.admin = true; + render(); + expect(screen.getByTitle('Toggle verification')).toBeVisible(); + }); + + it('should render active verification icon for admin', () => { + const props = getDefaultProps(); + props.user.admin = true; + props.data.user.verified = true; + render(); + expect(screen.queryByTitle('Verified user')).toBeVisible(); + }); + }); + describe('voting', () => { it('should be disabled for an anonymous user', () => { const wrapper = mountComment({ ...DefaultProps, user: { id: 'anonymous_1' } } as CommentProps); @@ -230,23 +261,6 @@ describe('', () => { expect(controls.at(0).text()).toEqual('Hide'); }); - it('verification badge clickable for admin', () => { - const element = mountComment({ ...DefaultProps, user: { ...DefaultProps.user, admin: true } } as CommentProps); - - const controls = element.find('.comment__verification').first(); - expect(controls.hasClass('comment__verification_clickable')).toEqual(true); - }); - - it('verification badge not clickable for regular user', () => { - const element = mountComment({ - ...DefaultProps, - data: { ...DefaultProps.data, user: { ...DefaultProps.data!.user, verified: true } }, - } as CommentProps); - - const controls = element.find('.comment__verification').first(); - expect(controls.hasClass('comment__verification_clickable')).toEqual(false); - }); - it('should be editable', async () => { StaticStore.config.edit_duration = 300; diff --git a/frontend/app/components/comment/comment.tsx b/frontend/app/components/comment/comment.tsx index d83dc63e..7903cf30 100644 --- a/frontend/app/components/comment/comment.tsx +++ b/frontend/app/components/comment/comment.tsx @@ -1,5 +1,7 @@ import { h, JSX, Component, createRef, ComponentType } from 'preact'; +import { FormattedMessage, IntlShape, defineMessages } from 'react-intl'; import b from 'bem-react-helper'; +import clsx from 'clsx'; import { getHandleClickProps } from 'common/accessibility'; import { COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants'; @@ -15,14 +17,14 @@ import { CommentFormProps } from 'components/comment-form'; import { Avatar } from 'components/avatar'; import { Button } from 'components/button'; import { Countdown } from 'components/countdown'; +import { VerificationIcon } from 'components/icons/verification'; import { getPreview, uploadImage } from 'common/api'; import { postMessageToParent } from 'utils/post-message'; -import { FormattedMessage, IntlShape, defineMessages } from 'react-intl'; import { getVoteMessage, VoteMessagesTypes } from './getVoteMessage'; import { getBlockingDurations } from './getBlockingDurations'; import { boundActions } from './connected-comment'; -import style from './comment.module.css'; +import styles from './comment.module.css'; import './styles'; export type CommentProps = { @@ -596,12 +598,28 @@ export class Comment extends Component { )} -
+ +
{props.view !== 'user' && ( )} + {isAdmin && props.view !== 'user' && ( + + )} + {!isAdmin && !!o.user.verified && props.view !== 'user' && ( + + )} {o.user.paid_sub && ( { alt={intl.formatMessage(messages.paidPatreon)} /> )} - {isAdmin && props.view !== 'user' && ( - - )} - {!isAdmin && !!o.user.verified && props.view !== 'user' && ( - - )}
diff --git a/frontend/app/components/comment/styles.ts b/frontend/app/components/comment/styles.ts index decdbbf4..215ec592 100644 --- a/frontend/app/components/comment/styles.ts +++ b/frontend/app/components/comment/styles.ts @@ -26,10 +26,6 @@ import './__time/comment__time.css'; import './__user-id/comment__user-id.css'; import './__username/comment__username.css'; -import './__verification/comment__verification.css'; -import './__verification/_active/comment__verification_active.css'; -import './__verification/_clickable/comment__verification_clickable.css'; - import './__vote/comment__vote.css'; import './__vote/_disabled/comment__vote_disabled.css'; import './__vote/_selected/comment__vote_selected.css'; diff --git a/frontend/app/components/icons/verification.spec.tsx b/frontend/app/components/icons/verification.spec.tsx new file mode 100644 index 00000000..b07c260a --- /dev/null +++ b/frontend/app/components/icons/verification.spec.tsx @@ -0,0 +1,18 @@ +import { h } from 'preact'; +import '@testing-library/jest-dom'; +import { screen } from '@testing-library/preact'; +import { render } from 'tests/utils'; +import { VerificationIcon } from './verification'; + +describe('', () => { + it('should be rendered with default size', async () => { + render(); + expect(await screen.findByTitle('icon')).toHaveAttribute('width', '12'); + expect(await screen.findByTitle('icon')).toHaveAttribute('height', '12'); + }); + it('should be rendered with provided size', async () => { + render(); + expect(await screen.findByTitle('icon')).toHaveAttribute('width', '16'); + expect(await screen.findByTitle('icon')).toHaveAttribute('height', '16'); + }); +}); diff --git a/frontend/app/components/icons/verification.tsx b/frontend/app/components/icons/verification.tsx new file mode 100644 index 00000000..f7a52f30 --- /dev/null +++ b/frontend/app/components/icons/verification.tsx @@ -0,0 +1,22 @@ +import { h, JSX } from 'preact'; + +type Props = JSX.SVGAttributes & { size?: number }; + +export function VerificationIcon({ size = 12, ...props }: Props) { + return ( + + + + + ); +} diff --git a/frontend/app/components/verified.tsx b/frontend/app/components/verified.tsx deleted file mode 100644 index 7c9d265a..00000000 --- a/frontend/app/components/verified.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export function Verified() { - return ( - - - - - ); -} diff --git a/frontend/app/styles/global.css b/frontend/app/styles/global.css index 1ab849bb..102f2984 100644 --- a/frontend/app/styles/global.css +++ b/frontend/app/styles/global.css @@ -27,6 +27,7 @@ button { transition-timing-function: linear; transition-duration: 150ms; appearance: none; + cursor: pointer; } #remark42 {