Make members-only label clickable, per feedback
This commit is contained in:
parent
40bd160748
commit
0ecbb3a73b
2 changed files with 11 additions and 4 deletions
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue