Make members-only label clickable, per feedback

This commit is contained in:
infinite-persistence 2022-03-18 15:43:11 +08:00
parent 40bd160748
commit 0ecbb3a73b
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 11 additions and 4 deletions

View file

@ -2,6 +2,7 @@
import 'scss/component/_comment-badge.scss'; import 'scss/component/_comment-badge.scss';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react'; import React from 'react';
import CommentBadge from './comment-badge'; import CommentBadge from './comment-badge';
import Button from 'component/button'; import Button from 'component/button';
@ -26,9 +27,9 @@ export default function PremiumBadge(props: Props) {
return ( return (
<BadgeWrapper linkPage={linkPage}> <BadgeWrapper linkPage={linkPage}>
{badgeToShow === 'silver' ? ( {badgeToShow === 'silver' ? (
<CommentBadge label={'Premium'} icon={ICONS.PREMIUM} {...badgeProps} /> <CommentBadge label="Premium" icon={ICONS.PREMIUM} {...badgeProps} />
) : ( ) : (
badgeToShow === 'gold' && <CommentBadge label={'Premium+'} icon={ICONS.PREMIUM_PLUS} {...badgeProps} /> badgeToShow === 'gold' && <CommentBadge label="Premium+" icon={ICONS.PREMIUM_PLUS} {...badgeProps} />
)} )}
</BadgeWrapper> </BadgeWrapper>
); );
@ -42,5 +43,5 @@ type WrapperProps = {
const BadgeWrapper = (props: WrapperProps) => { const BadgeWrapper = (props: WrapperProps) => {
const { linkPage, children } = props; const { linkPage, children } = props;
return linkPage ? <Button navigate="/$/membership">{children}</Button> : children; return linkPage ? <Button navigate={`/$/${PAGES.ODYSEE_MEMBERSHIP}`}>{children}</Button> : children;
}; };

View file

@ -1,5 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import Button from 'component/button';
import * as PAGES from 'constants/pages';
import classnames from 'classnames'; import classnames from 'classnames';
type Props = { type Props = {
@ -26,7 +28,11 @@ export default function SettingsRow(props: Props) {
<div className="settings-row__title"> <div className="settings-row__title">
<span> <span>
{title} {title}
{membersOnly && <span className="settings-row__members-only">{'PREMIUM'}</span>} {membersOnly && (
<Button className="settings-row__members-only" navigate={`/$/${PAGES.ODYSEE_MEMBERSHIP}`}>
{'PREMIUM'}
</Button>
)}
</span> </span>
{subtitle && <p className="settings-row__subtitle">{subtitle}</p>} {subtitle && <p className="settings-row__subtitle">{subtitle}</p>}
</div> </div>