Compare commits
2 commits
master
...
merge-to-o
| Author | SHA1 | Date | |
|---|---|---|---|
|
2cdad0c1e3 | ||
|
|
c913fdeae9 |
16 changed files with 364 additions and 174 deletions
|
|
@ -42,7 +42,10 @@ type Props = {
|
|||
isReply: boolean,
|
||||
activeChannel: string,
|
||||
activeChannelClaim: ?ChannelClaim,
|
||||
livestream?: boolean,
|
||||
bottom: boolean,
|
||||
onSubmit: (string, string) => void,
|
||||
livestream: boolean,
|
||||
embed?: boolean,
|
||||
toast: (string) => void,
|
||||
claimIsMine: boolean,
|
||||
sendTip: ({}, (any) => void, (any) => void) => void,
|
||||
|
|
@ -63,7 +66,11 @@ export function CommentCreate(props: Props) {
|
|||
isReply,
|
||||
parentId,
|
||||
activeChannelClaim,
|
||||
onSubmit,
|
||||
bottom,
|
||||
livestream,
|
||||
embed,
|
||||
toast,
|
||||
claimIsMine,
|
||||
sendTip,
|
||||
doToast,
|
||||
|
|
@ -106,7 +113,7 @@ export function CommentCreate(props: Props) {
|
|||
|
||||
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
|
||||
const KEYCODE_ENTER = 13;
|
||||
if ((e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
|
||||
if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
|
||||
e.preventDefault();
|
||||
buttonref.current.click();
|
||||
}
|
||||
|
|
@ -256,6 +263,10 @@ export function CommentCreate(props: Props) {
|
|||
setIsSupportComment(false);
|
||||
setCommentFailure(false);
|
||||
|
||||
if (onSubmit) {
|
||||
onSubmit(commentValue, activeChannelClaim.name);
|
||||
}
|
||||
|
||||
if (onDoneReplying) {
|
||||
onDoneReplying();
|
||||
}
|
||||
|
|
@ -280,6 +291,11 @@ export function CommentCreate(props: Props) {
|
|||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
if (embed) {
|
||||
window.open(`https://odysee.com/$/${PAGES.AUTH}?redirect=/$/${PAGES.LIVESTREAM}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`;
|
||||
if (livestream) {
|
||||
window.open(pathPlusRedirect);
|
||||
|
|
@ -344,6 +360,7 @@ export function CommentCreate(props: Props) {
|
|||
className={classnames('comment__create', {
|
||||
'comment__create--reply': isReply,
|
||||
'comment__create--nested-reply': isNested,
|
||||
'comment__create--bottom': bottom,
|
||||
})}
|
||||
>
|
||||
<FormField
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// @flow
|
||||
import * as REACTION_TYPES from 'constants/reactions';
|
||||
import * as ICONS from 'constants/icons';
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
|
@ -15,18 +16,44 @@ type Props = {
|
|||
likeCount: number,
|
||||
dislikeCount: number,
|
||||
myReaction: ?string,
|
||||
livestream?: boolean,
|
||||
};
|
||||
|
||||
function FileReactions(props: Props) {
|
||||
const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props;
|
||||
const {
|
||||
claim,
|
||||
uri,
|
||||
doFetchReactions,
|
||||
doReactionLike,
|
||||
doReactionDislike,
|
||||
myReaction,
|
||||
likeCount,
|
||||
dislikeCount,
|
||||
livestream,
|
||||
} = props;
|
||||
const claimId = claim && claim.claim_id;
|
||||
const channel = claim && claim.signing_channel && claim.signing_channel.name;
|
||||
const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols.
|
||||
React.useEffect(() => {
|
||||
if (claimId) {
|
||||
function fetchReactions() {
|
||||
doFetchReactions(claimId);
|
||||
}
|
||||
}, [claimId, doFetchReactions]);
|
||||
|
||||
let fetchInterval;
|
||||
if (claimId) {
|
||||
fetchReactions();
|
||||
|
||||
if (livestream) {
|
||||
fetchInterval = setInterval(fetchReactions, 45000);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (fetchInterval) {
|
||||
clearInterval(fetchInterval);
|
||||
}
|
||||
};
|
||||
}, [claimId, doFetchReactions, livestream]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -41,20 +68,46 @@ function FileReactions(props: Props) {
|
|||
title={__('I like this')}
|
||||
requiresAuth={IS_WEB}
|
||||
authSrc="filereaction_like"
|
||||
className={classnames('button--file-action')}
|
||||
label={formatNumberWithCommas(likeCount, 0)}
|
||||
className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
|
||||
label={
|
||||
<>
|
||||
{myReaction === REACTION_TYPES.LIKE && (
|
||||
<>
|
||||
<div className="button__fire-glow" />
|
||||
<div className="button__fire-particle1" />
|
||||
<div className="button__fire-particle2" />
|
||||
<div className="button__fire-particle3" />
|
||||
<div className="button__fire-particle4" />
|
||||
<div className="button__fire-particle5" />
|
||||
<div className="button__fire-particle6" />
|
||||
</>
|
||||
)}
|
||||
{formatNumberWithCommas(likeCount, 0)}
|
||||
</>
|
||||
}
|
||||
iconSize={18}
|
||||
icon={ICONS.UPVOTE}
|
||||
icon={myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE}
|
||||
onClick={() => doReactionLike(uri)}
|
||||
/>
|
||||
<Button
|
||||
requiresAuth={IS_WEB}
|
||||
authSrc={'filereaction_dislike'}
|
||||
title={__('I dislike this')}
|
||||
className={classnames('button--file-action')}
|
||||
label={formatNumberWithCommas(dislikeCount, 0)}
|
||||
className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
|
||||
label={
|
||||
<>
|
||||
{myReaction === REACTION_TYPES.DISLIKE && (
|
||||
<>
|
||||
<div className="button__slime-stain" />
|
||||
<div className="button__slime-drop1" />
|
||||
<div className="button__slime-drop2" />
|
||||
</>
|
||||
)}
|
||||
{formatNumberWithCommas(dislikeCount, 0)}
|
||||
</>
|
||||
}
|
||||
iconSize={18}
|
||||
icon={ICONS.DOWNVOTE}
|
||||
icon={myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
|
||||
onClick={() => doReactionDislike(uri)}
|
||||
/>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import FilePrice from 'component/filePrice';
|
|||
import { formatLbryUrlForWeb } from 'util/url';
|
||||
import { withRouter } from 'react-router';
|
||||
import { URL } from 'config';
|
||||
import * as ICONS from 'constants/icons';
|
||||
import OdyseeLogo from 'component/header/odysee_logo.png';
|
||||
import OdyseeLogoWithText from 'component/header/odysee_white.png';
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
|
|
@ -36,7 +37,10 @@ function FileViewerEmbeddedTitle(props: Props) {
|
|||
{...contentLinkProps}
|
||||
/>
|
||||
<div className="file-viewer__embedded-info">
|
||||
<Button className="file-viewer__overlay-logo" icon={ICONS.LBRY} aria-label={__('Home')} {...lbryLinkProps} />
|
||||
<Button className="file-viewer__overlay-logo" aria-label={__('Home')} {...lbryLinkProps}>
|
||||
<img src={OdyseeLogo} className=" mobile-only" />
|
||||
<img src={OdyseeLogoWithText} className=" mobile-hidden" />
|
||||
</Button>
|
||||
{isInApp && <FilePrice uri={uri} />}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ import ChannelThumbnail from 'component/channelThumbnail';
|
|||
import { remote } from 'electron';
|
||||
import { IS_MAC } from 'component/app/view';
|
||||
// @endif
|
||||
import OdyseeLogoWithWhiteText from './odysee_white.png';
|
||||
import OdyseeLogoWithText from './odysee.png';
|
||||
|
||||
type Props = {
|
||||
user: ?User,
|
||||
|
|
@ -251,14 +253,7 @@ const Header = (props: Props) => {
|
|||
</span>
|
||||
)}
|
||||
<Button
|
||||
className="header__navigation-item header__navigation-item--lbry"
|
||||
// @if TARGET='app'
|
||||
label={'LBRY'}
|
||||
// @endif
|
||||
// @if TARGET='web'
|
||||
label={LOGO_TITLE} // eslint-disable-line
|
||||
// @endif
|
||||
icon={ICONS.LBRY}
|
||||
className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile"
|
||||
onClick={() => {
|
||||
if (history.location.pathname === '/') window.location.reload();
|
||||
}}
|
||||
|
|
@ -268,7 +263,12 @@ const Header = (props: Props) => {
|
|||
}}
|
||||
// @endif
|
||||
{...homeButtonNavigationProps}
|
||||
/>
|
||||
>
|
||||
<img
|
||||
src={currentTheme === 'light' ? OdyseeLogoWithText : OdyseeLogoWithWhiteText}
|
||||
className="header__odysee"
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{!authHeader && (
|
||||
<div className="header__center">
|
||||
|
|
|
|||
|
|
@ -297,7 +297,8 @@ function WalletSendTip(props: Props) {
|
|||
.catch(function(error) {
|
||||
var displayError = 'Sorry, there was an error in processing your payment!';
|
||||
|
||||
if (error.message !== 'payment intent failed to confirm') {
|
||||
// if it's not an error we're expecting then show it to frontend
|
||||
if (error.message && error.message !== 'payment intent failed to confirm') {
|
||||
displayError = error.message;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -230,13 +230,28 @@
|
|||
}
|
||||
|
||||
.file-viewer__overlay-logo {
|
||||
color: var(--color-white);
|
||||
font-weight: bold;
|
||||
height: 3.5rem;
|
||||
width: 12rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
height: 30px;
|
||||
stroke-width: 5px;
|
||||
&:hover {
|
||||
filter: drop-shadow(1px 2px 10px var(--color-gray-3));
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-right: var(--spacing-m);
|
||||
width: 2.5rem;
|
||||
|
||||
.button__label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-viewer__overlay-logo--videoend {
|
||||
height: 3.5rem;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
|
||||
|
|
@ -246,11 +261,15 @@
|
|||
.file-viewer__embedded-header {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
height: 4rem;
|
||||
padding-left: var(--spacing-m);
|
||||
padding-right: var(--spacing-s);
|
||||
font-size: var(--font-large);
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -260,7 +279,6 @@
|
|||
border-top-right-radius: var(--border-radius);
|
||||
|
||||
.button {
|
||||
padding: var(--spacing-s);
|
||||
color: var(--color-white);
|
||||
z-index: 2;
|
||||
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ input-submit {
|
|||
height: var(--height-checkbox);
|
||||
width: var(--height-checkbox);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: 3px;
|
||||
left: 0px;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
:root {
|
||||
// Generic colors
|
||||
--color-primary: #257761;
|
||||
--color-primary-alt: #e4f4ef;
|
||||
--color-primary-alt-2: #4b8576;
|
||||
--color-secondary: #295284;
|
||||
--color-secondary-alt: #d9eaff;
|
||||
--color-tertiary: #552470;
|
||||
--color-tertiary-alt: #f7e8ff;
|
||||
--color-danger: #9b2023;
|
||||
--color-danger-alt: #fccdce;
|
||||
--color-warning: #fff58c;
|
||||
--color-cost: #ffd580;
|
||||
--color-focus: #93cff2;
|
||||
--color-notification: #f02849;
|
||||
--color-live: #cc190f;
|
||||
|
||||
--color-black: #111;
|
||||
--color-white: #fdfdfd;
|
||||
--color-white-alt: #fafafa;
|
||||
--color-gray-1: #eff1f4;
|
||||
--color-gray-2: #d8dde1;
|
||||
--color-gray-3: #ced4da;
|
||||
--color-gray-4: #abb1b7;
|
||||
--color-gray-5: #666a6d;
|
||||
|
||||
// Text
|
||||
--color-text: var(--color-black);
|
||||
--color-text-subtitle: var(--color-gray-5);
|
||||
--color-text-inverse: #fdfdfd;
|
||||
|
||||
// Components
|
||||
|
||||
// Button
|
||||
--color-button-primary-bg: var(--color-primary);
|
||||
--color-button-primary-text: var(--color-primary-alt);
|
||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
||||
--color-button-primary-hover-text: var(--color-primary-alt);
|
||||
--color-button-secondary-bg: var(--color-secondary-alt);
|
||||
--color-button-secondary-border: var(--color-secondary-alt);
|
||||
--color-button-secondary-text: var(--color-secondary);
|
||||
--color-button-secondary-bg-hover: #b9d0e9;
|
||||
--color-button-alt-bg: var(--color-gray-1);
|
||||
--color-button-alt-text: var(--color-text);
|
||||
--color-button-alt-bg-hover: var(--color-gray-2);
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-hover: var(--color-black);
|
||||
|
||||
// Table
|
||||
--color-table-highlight: var(--color-white-alt);
|
||||
|
||||
// Tag
|
||||
--color-tag: var(--color-gray-5);
|
||||
--color-tag-bg: var(--color-button-alt-bg);
|
||||
--color-tag-hover: var(--color-button-alt-text);
|
||||
--color-tag-bg-hover: var(--color-button-alt-bg-hover);
|
||||
}
|
||||
|
|
@ -60,8 +60,12 @@ ol {
|
|||
position: relative;
|
||||
list-style-position: outside;
|
||||
margin: var(--spacing-xs) 0;
|
||||
margin-left: var(--spacing-xl);
|
||||
margin-left: var(--spacing-s);
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (min-width: $breakpoint-small) {
|
||||
margin-left: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -267,10 +271,10 @@ textarea {
|
|||
margin-top: var(--spacing-s);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
.button--link ~ .button--link {
|
||||
.button--link + .button--link {
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
|
|
@ -282,7 +286,6 @@ textarea {
|
|||
.help--warning {
|
||||
@extend .help;
|
||||
padding: var(--spacing-s);
|
||||
color: var(--color-black);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-help-warning-bg);
|
||||
color: var(--color-help-warning-text);
|
||||
|
|
@ -499,3 +502,16 @@ textarea {
|
|||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home__meme {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
@media (min-width: $breakpoint-small) {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ $breakpoint-medium: 1150px;
|
|||
$breakpoint-large: 1600px;
|
||||
|
||||
:root {
|
||||
--border-radius: 5px;
|
||||
--border-radius: 10px;
|
||||
--height-input: 2.5rem;
|
||||
--height-button: 2.5rem;
|
||||
--height-checkbox: 24px;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
[theme='dark'] {
|
||||
// Color overrides
|
||||
--color-primary: #2bbb90;
|
||||
--color-primary-alt: #3e675d;
|
||||
--color-primary-alt-2: #065f46;
|
||||
--color-primary-alt-3: #34e5b0;
|
||||
--color-secondary: #204166;
|
||||
--color-secondary-alt: #dbeafe;
|
||||
--color-secondary-alt-2: #bfdbfe;
|
||||
--color-secondary-alt-3: #2c5c8c;
|
||||
--color-primary: #e50054;
|
||||
--color-primary-alt: #66001880;
|
||||
--color-fire: #ff6635;
|
||||
--color-fire-outside: #ff9b20;
|
||||
|
||||
// Structure
|
||||
--color-background: var(--color-gray-9);
|
||||
--color-background-overlay: #21252999;
|
||||
--color-border: #333338;
|
||||
--color-card-background: var(--color-gray-8);
|
||||
--color-card-background-highlighted: var(--color-gray-7);
|
||||
--color-background: #140e1b;
|
||||
--color-background-overlay: #0c0d0e95;
|
||||
--color-border: #30243d;
|
||||
--color-card-background: #181021;
|
||||
--color-card-background-highlighted: #241c30;
|
||||
|
||||
// Text
|
||||
--color-text: var(--color-white);
|
||||
--color-text: var(--color-gray-1);
|
||||
--color-text-subtitle: var(--color-gray-4);
|
||||
--color-text-empty: var(--color-text-subtitle);
|
||||
--color-text-help: #bbbbbb;
|
||||
--color-text-warning: #212529;
|
||||
--color-text-warning--background: var(--lbry-yellow-1);
|
||||
--color-text-error: #f87171;
|
||||
--color-error: #61373f;
|
||||
--color-text-error: var(--color-danger);
|
||||
--color-error: var(--color-danger-alt);
|
||||
--color-blockquote: var(--color-gray-5);
|
||||
--color-blockquote-bg: var(--color-card-background-highlighted);
|
||||
--color-help-warning-text: var(--color-white-alt);
|
||||
--color-help-warning-bg: #fbbf2450;
|
||||
|
||||
// Tags (words)
|
||||
--color-tag-words: var(--color-text);
|
||||
|
|
@ -33,87 +33,73 @@
|
|||
--color-tag-words-bg-hover: var(--color-gray-4);
|
||||
|
||||
// Header
|
||||
--color-header-background: var(--color-gray-8);
|
||||
--color-header-button: var(--color-gray-6);
|
||||
--color-header-button-hover: var(--color-gray-6);
|
||||
--color-header-button-active: var(--color-gray-6);
|
||||
--color-header-button: #38274c;
|
||||
--color-header-background: #231830;
|
||||
|
||||
// Button
|
||||
--color-button-primary-bg: var(--color-primary-alt);
|
||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
||||
--color-button-primary-text: var(--color-gray-2);
|
||||
--color-button-primary-text: white;
|
||||
--color-button-primary-hover-text: var(--color-primary-alt);
|
||||
--color-button-secondary-bg: var(--color-secondary);
|
||||
--color-button-secondary-border: var(--color-secondary);
|
||||
--color-button-secondary-bg-hover: var(--color-secondary-alt-3);
|
||||
--color-button-secondary-text: var(--color-gray-2);
|
||||
--color-button-alt-bg: var(--color-gray-7);
|
||||
--color-button-alt-bg-hover: var(--color-gray-6);
|
||||
--color-button-alt-text: var(--color-gray-1);
|
||||
--color-button-border: var(--color-gray-5);
|
||||
--color-button-toggle-text: var(--color-gray-1);
|
||||
--color-link: var(--color-primary-alt-3);
|
||||
--color-link-hover: var(--color-text);
|
||||
--color-link-focus-bg: var(--color-gray-7);
|
||||
--color-button-secondary-bg: #2c1543;
|
||||
--color-button-secondary-border: #4f1c82;
|
||||
--color-button-secondary-bg-hover: #3b1c5b;
|
||||
--color-button-secondary-text: #efefef;
|
||||
--color-button-alt-bg: var(--color-header-button);
|
||||
--color-button-alt-bg-hover: #2b2037;
|
||||
--color-button-toggle-text: var(--color-text);
|
||||
--color-button-toggle-bg: var(--color-primary-alt);
|
||||
--color-button-toggle-bg-hover: var(--color-primary-alt);
|
||||
--color-button-alt-text: #e2e9f0;
|
||||
--color-button-border: #5b4475;
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-hover: #d75673;
|
||||
--color-link-active: #ec1d4c;
|
||||
--color-link-focus-bg: #3d2d4e;
|
||||
|
||||
// Input
|
||||
--color-input: var(--color-white);
|
||||
--color-input-label: var(--color-gray-3);
|
||||
--color-input-placeholder: var(--color-gray-1);
|
||||
--color-input: #f4f4f5;
|
||||
--color-input-label: #a7a7a7;
|
||||
--color-input-placeholder: #f4f4f5;
|
||||
--color-input-bg: var(--color-header-button);
|
||||
--color-input-bg-copyable: var(--color-gray-6);
|
||||
--color-input-bg-copyable: #4c3861;
|
||||
--color-input-border: var(--color-border);
|
||||
--color-input-border-active: var(--color-secondary);
|
||||
--color-input-toggle: var(--color-primary-alt-3);
|
||||
--color-input-toggle-bg: var(--color-input-bg);
|
||||
--color-input-toggle-bg-hover: var(--color-secondary);
|
||||
--color-input-bg-selected: var(--color-primary-alt);
|
||||
--color-input-prefix-bg: var(--color-gray-5);
|
||||
--color-input-prefix-bg: var(--color-input-bg-copyable);
|
||||
--color-input-prefix-border: var(--color-gray-4);
|
||||
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
|
||||
// Navigation
|
||||
--color-navigation-icon: var(--color-gray-4);
|
||||
--color-navigation-link: var(--color-gray-4);
|
||||
--color-navigation-active: var(--color-gray-7);
|
||||
--color-navigation-active-text: var(--color-gray-3);
|
||||
--color-navigation-hover: var(--color-gray-6);
|
||||
--color-navigation-hover-text: var(--color-gray-3);
|
||||
--color-navigation-icon: #76808a;
|
||||
--color-navigation-link: #b9c3ce;
|
||||
--color-navigation-active: #2b2037;
|
||||
--color-navigation-active-text: #c6bcd2;
|
||||
--color-navigation-hover: #21182a;
|
||||
--color-navigation-hover-text: #c6bcd2;
|
||||
|
||||
// Tags
|
||||
--color-tag: var(--color-primary-alt-3);
|
||||
--color-tag-bg: var(--color-gray-7);
|
||||
--color-tag: #ff85b1;
|
||||
--color-tag-bg: var(--color-navigation-hover);
|
||||
--color-tag-hover: var(--color-white);
|
||||
--color-tag-bg-hover: var(--color-primary-alt);
|
||||
--color-tag-bg-hover: var(--color-primary-alt-2);
|
||||
--color-tag-mature-bg: var(--color-primary-alt-2);
|
||||
|
||||
// Menu
|
||||
--color-menu-background: var(--color-header-background);
|
||||
--color-menu-background--active: var(--color-gray-7);
|
||||
--color-menu-icon: var(--color-gray-4);
|
||||
--color-menu-background--active: var(--color-primary-alt);
|
||||
--color-menu-icon: #928b9b;
|
||||
--color-menu-icon-active: #d6d6d6;
|
||||
|
||||
// Comments
|
||||
--color-comment-menu: var(--color-gray-5);
|
||||
--color-comment-menu-hovering: var(--color-gray-2);
|
||||
--color-comment-threadline: #434b54;
|
||||
--color-comment-threadline-hover: var(--color-gray-4);
|
||||
--color-comment-menu: #6a6a6a;
|
||||
--color-comment-menu-hovering: #e0e0e0;
|
||||
--color-comment-highlighted: #484734;
|
||||
|
||||
// Snack
|
||||
--color-snack-bg: var(--color-secondary);
|
||||
|
||||
// Superchat
|
||||
--color-superchat-text: var(--color-black);
|
||||
--color-superchat-text__light: var(--color-text);
|
||||
--color-superchat: #fcd34d;
|
||||
--color-superchat__light: #ef4e1647;
|
||||
--color-superchat-2: #fde68a;
|
||||
--color-superchat-3: #fef3c7;
|
||||
--color-superchat-3__light: #58066087;
|
||||
--color-superchat-4: #fffbeb;
|
||||
--color-comment-threadline: #24192f;
|
||||
--color-comment-threadline-hover: var(--color-gray-4);
|
||||
|
||||
// Other
|
||||
--color-focus: #93c5fd50;
|
||||
--color-nag: var(--color-orange);
|
||||
--color-tab-text: var(--color-white);
|
||||
--color-tabs-background: var(--color-card-background);
|
||||
--color-tab-divider: var(--color-white);
|
||||
|
|
@ -121,14 +107,12 @@
|
|||
--color-notice: #58563b;
|
||||
--color-purchased: #ffd580;
|
||||
--color-purchased-alt: var(--color-purchased);
|
||||
--color-purchased-text: var(--color-gray-5);
|
||||
--color-purchased-text: black;
|
||||
--color-thumbnail-background: var(--color-gray-5);
|
||||
--color-tooltip-bg: #2f3337;
|
||||
--color-help-warning-bg: #d97706;
|
||||
--color-help-warning-text: white;
|
||||
--color-blockquote: var(--color-gray-5);
|
||||
--color-placeholder-background: #4e5862;
|
||||
--color-spinner-light: #5a6570;
|
||||
--color-focus: #e91e6329;
|
||||
--color-placeholder-background: #261a35;
|
||||
--color-spinner-light: white;
|
||||
--color-spinner-dark: #212529;
|
||||
--color-login-graphic-background: var(--color-background);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,155 @@
|
|||
:root {
|
||||
// Color overrides
|
||||
--color-primary: #fa6165;
|
||||
--color-primary-alt: #fef1f6;
|
||||
--color-primary-alt-2: #fb7e82;
|
||||
--color-primary-alt-3: #fbcbdd;
|
||||
--color-secondary: #f9902a;
|
||||
--color-secondary-alt: #fee8d2;
|
||||
--color-secondary-alt-2: #fefcf6;
|
||||
|
||||
// Structure
|
||||
--color-border: #ededed;
|
||||
--color-background: #fafafa;
|
||||
--color-background-overlay: #21252980;
|
||||
--color-card-background: #ffffff;
|
||||
--color-card-background-highlighted: #fff5f5;
|
||||
|
||||
// Text
|
||||
--color-text-selection-bg: var(--color-primary-alt);
|
||||
--color-text-selection: var(--color-primary);
|
||||
--color-text-error: var(--color-danger);
|
||||
--color-text-empty: #999999;
|
||||
--color-text-help: #999999;
|
||||
--color-text-subtitle: #767676;
|
||||
--color-text-warning: #212529;
|
||||
--color-help-warning-bg: #fef3c7;
|
||||
--color-text-warning--background: var(--lbry-yellow-1);
|
||||
--color-blockquote: var(--color-gray-3);
|
||||
--color-blockquote-bg: var(--color-gray-1);
|
||||
--color-tooltip-bg: #222;
|
||||
--color-tooltip-text: #fafafa;
|
||||
|
||||
// Header
|
||||
--color-header-button: var(--color-button-alt-bg);
|
||||
--color-header-background: #ffffff;
|
||||
|
||||
// Button
|
||||
--color-button-alt-bg: var(--color-gray-1);
|
||||
--color-button-alt-bg-hover: var(--color-gray-2);
|
||||
--color-button-alt-text: black;
|
||||
--color-button-primary-bg: var(--color-primary);
|
||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
||||
--color-button-primary-text: var(--color-primary-alt);
|
||||
--color-button-primary-hover-text: var(--color-white);
|
||||
--color-button-secondary-bg: var(--color-primary-alt);
|
||||
--color-button-secondary-border: var(--color-primary-alt-3);
|
||||
--color-button-secondary-text: var(--color-primary);
|
||||
--color-button-secondary-bg-hover: var(--color-primary-alt-3);
|
||||
--color-button-toggle-text: var(--color-primary);
|
||||
--color-button-toggle-bg: var(--color-primary-alt);
|
||||
--color-button-toggle-bg-hover: var(--color-primary-alt);
|
||||
--color-button-border: var(--color-gray-3);
|
||||
--color-link-active: var(--color-primary);
|
||||
--color-link-focus-bg: #f1f1f1;
|
||||
--color-link: var(--color-primary);
|
||||
|
||||
// Input
|
||||
--color-input-bg-selected: var(--color-primary-alt);
|
||||
--color-input-color: #111111;
|
||||
--color-input-label: var(--color-gray-5);
|
||||
--color-input-placeholder: #212529;
|
||||
--color-input-bg: var(--color-gray-1);
|
||||
--color-input-border: var(--color-border);
|
||||
--color-input-border-active: var(--color-secondary);
|
||||
--color-input-toggle: var(--color-secondary);
|
||||
--color-input-toggle-bg: var(--color-gray-1);
|
||||
--color-input-toggle-bg-hover: var(--color-secondary-alt);
|
||||
--color-input-prefix-bg: var(--color-gray-2);
|
||||
--color-input-prefix-border: var(--color-gray-5);
|
||||
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
|
||||
// Navigation
|
||||
--color-navigation-icon: var(--color-gray-5);
|
||||
--color-navigation-link: var(--color-gray-5);
|
||||
--color-navigation-active: var(--color-primary-alt);
|
||||
--color-navigation-active-text: var(--color-primary);
|
||||
--color-navigation-hover: var(--color-gray-1);
|
||||
--color-navigation-hover-text: #3f3f3f;
|
||||
|
||||
// Tags
|
||||
--color-tag: var(--color-primary-alt-2);
|
||||
--color-tag-bg: #f9f6f7;
|
||||
--color-tag-hover: var(--color-button-alt-text);
|
||||
--color-tag-bg-hover: var(--color-button-alt-bg-hover);
|
||||
|
||||
// Menu
|
||||
--color-menu-background: var(--color-header-background);
|
||||
--color-menu-icon: var(--color-navigation-link);
|
||||
--color-menu-icon-active: var(--color-navigation-link);
|
||||
--color-menu-background--selected: var(--color-secondary-alt);
|
||||
--color-menu-background--active: var(--color-primary-alt);
|
||||
|
||||
// Comments
|
||||
--color-comment-menu: #e0e0e0;
|
||||
--color-comment-menu-hovering: #6a6a6a;
|
||||
--color-comment-highlighted: #fff2d9;
|
||||
--color-comment-threadline: var(--color-gray-1);
|
||||
--color-comment-threadline-hover: var(--color-gray-4);
|
||||
|
||||
// Superchat
|
||||
--color-superchat-text: var(--color-black);
|
||||
--color-superchat: #fcd34d;
|
||||
--color-superchat__light: #fcd34d50;
|
||||
--color-superchat-2: #fde68a;
|
||||
--color-superchat-3: #fef3c7;
|
||||
--color-superchat-3__light: #fef3c750;
|
||||
--color-superchat-4: #fffbeb;
|
||||
|
||||
// Color
|
||||
--color-focus: #8dbff0;
|
||||
--color-nag: #fa8700;
|
||||
--color-error: #fcafca;
|
||||
--color-notice: #fef3ca;
|
||||
--color-purchased: var(--color-cost);
|
||||
--color-purchased-alt: #ffebc2;
|
||||
--color-purchased-text: black;
|
||||
--color-thumbnail-background: var(--color-gray-1);
|
||||
--color-spinner-light: #ffffff;
|
||||
--color-spinner-dark: #212529;
|
||||
--color-placeholder-background: #f0f0f0;
|
||||
--color-file-viewer-background: var(--color-card-background);
|
||||
--color-tabs-background: var(--color-card-background);
|
||||
--color-tab-divider: var(--color-primary);
|
||||
--color-modal-background: var(--color-card-background);
|
||||
|
||||
// Icons
|
||||
--color-follow-bg: #ffd4da;
|
||||
--color-follow-icon: #e2495e;
|
||||
--color-view-bg: var(--color-secondary-alt);
|
||||
--color-view-icon: var(--color-secondary);
|
||||
|
||||
// Editor
|
||||
--color-editor-cursor: var(--color-text);
|
||||
--color-editor-quote: #707070;
|
||||
--color-editor-tag: #ea9400;
|
||||
--color-editor-attr: #04b0f4;
|
||||
--color-editor-string: #ff7451;
|
||||
--color-editor-inline-code-fg: var(--color-text);
|
||||
--color-editor-inline-code-fg-preview: #2e3439;
|
||||
--color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
|
||||
--color-editor-inline-code-bg-preview: #d0e8ff;
|
||||
--color-editor-selected: #add6ff;
|
||||
--color-editor-link: var(--color-link);
|
||||
--color-editor-url: var(--color-editor-string);
|
||||
--color-editor-hr: var(--color-editor-tag);
|
||||
--color-editor-hr-preview: #cccccc;
|
||||
|
||||
// Ads
|
||||
--color-ads-background: #fae5ff;
|
||||
--color-ads-link: var(--color-link);
|
||||
|
||||
// Scrollbar
|
||||
--color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
|
||||
--color-scrollbar-track-bg: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Button from 'component/button';
|
|||
import { formatLbryUrlForWeb } from 'util/url';
|
||||
import { withRouter } from 'react-router';
|
||||
import { URL, SITE_NAME } from 'config';
|
||||
import * as ICONS from 'constants/icons';
|
||||
import OdyseeLogoWithText from 'component/header/odysee_white.png';
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
|
|
@ -37,7 +37,9 @@ function FileViewerEmbeddedEnded(props: Props) {
|
|||
return (
|
||||
<div className="file-viewer__overlay">
|
||||
<div className="file-viewer__overlay-secondary">
|
||||
<Button className="file-viewer__overlay-logo" label="LBRY" icon={ICONS.LBRY} href={URL} />
|
||||
<Button className="file-viewer__overlay-logo--videoend" href={URL}>
|
||||
<img src={OdyseeLogoWithText} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="file-viewer__overlay-title">{prompt}</div>
|
||||
<div className="file-viewer__overlay-actions">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
"koa-logger": "^3.2.1",
|
||||
"koa-send": "^5.0.0",
|
||||
"koa-static": "^5.0.0",
|
||||
"lbry-redux": "lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264",
|
||||
"lbry-redux": "lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da",
|
||||
"lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
|
||||
"mysql": "^2.17.1",
|
||||
"node-fetch": "^2.6.1",
|
||||
|
|
|
|||
|
|
@ -3331,9 +3331,9 @@ latest-version@^3.0.0:
|
|||
dependencies:
|
||||
package-json "^4.0.0"
|
||||
|
||||
lbry-redux@lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264:
|
||||
lbry-redux@lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da:
|
||||
version "0.0.1"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/508e8d36fd91106beb7d6b4edb9f726dae0e6264"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b075c103445a9355d617116fbb491496ecb473da"
|
||||
dependencies:
|
||||
proxy-polyfill "0.1.6"
|
||||
reselect "^3.0.0"
|
||||
|
|
|
|||
Loading…
Reference in a new issue