LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

MAKE ODYSEE EVEN MORE BEAUTIFUL (#539)

Browse source 
WE LOVE YOU RAPHAEL FOR MAKING THIS HAPPEN!
This commit is contained in:
mayeaux 2022-02-11 19:50:55 +01:00 committed by GitHub
parent 0cdf6e1970
commit 0c4f85fe53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
152 changed files with 8830 additions and 1322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.js
View file

@ -63,7 +63,7 @@ const config = {
CHANNEL_STAKED_LEVEL_LIVESTREAM: process.env.CHANNEL_STAKED_LEVEL_LIVESTREAM,
WEB_PUBLISH_SIZE_LIMIT_GB: process.env.WEB_PUBLISH_SIZE_LIMIT_GB,
LOADING_BAR_COLOR: process.env.LOADING_BAR_COLOR,
SIMPLE_SITE: process.env.SIMPLE_SITE === 'true',
SIMPLE_SITE: process.env.SIMPLE_SITE === 'true',
SHOW_ADS: process.env.SHOW_ADS === 'true',
PINNED_URI_1: process.env.PINNED_URI_1,
PINNED_LABEL_1: process.env.PINNED_LABEL_1,

3
package.json
View file

@ -68,6 +68,7 @@
"proxy-polyfill": "0.1.6",
"re-reselect": "^4.0.0",
"react-beautiful-dnd": "^13.1.0",
"react-color": "^2.19.3",
"react-datetime-picker": "^3.4.3",
"react-plastic": "^1.1.1",
"react-top-loading-bar": "^2.0.1",
@ -99,7 +100,7 @@
"@hot-loader/react-dom": "^16.13",
"@reach/auto-id": "^0.13.0",
"@reach/combobox": "^0.12.1",
"@reach/menu-button": "0.7.4",
"@reach/menu-button": "0.8.6",
"@reach/rect": "^0.16.0",
"@reach/tabs": "^0.1.5",
"@reach/tooltip": "^0.12.1",

2
static/index-web.html
View file

@ -17,7 +17,7 @@
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Expires" content="0" />

2
ui/component/blockList/view.jsx
View file

@ -118,7 +118,7 @@ export default function BlockList(props: Props) {
return (
<>
<div className="help--notice">{help}</div>
<div className="section">
<div className="section" style={{ zIndex: '4' }}>
<SearchList
list={localList}
placeholder={__('e.g. odysee')}

25
ui/component/channelEdit/view.jsx
View file

@ -6,6 +6,7 @@ import classnames from 'classnames';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import TagsSearch from 'component/tagsSearch';
import ColorPicker from 'component/colorPicker';
import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
import ErrorText from 'component/common/error-text';
import ChannelThumbnail from 'component/channelThumbnail';
@ -25,6 +26,8 @@ import { sortLanguageMap } from 'util/default-languages';
import ThumbnailBrokenImage from 'component/selectThumbnail/thumbnail-broken.png';
import Gerbil from 'component/channelThumbnail/gerbil.png';
const NEKODEV = false; // Temporary flag to hide unfinished progress
const LANG_NONE = 'none';
const MAX_TAG_SELECT = 5;
@ -121,6 +124,9 @@ function ChannelForm(props: Props) {
);
}, [isClaimingInitialRewards, creatingChannel, updatingChannel, nameError, bidError, isNewChannel, params.name]);
// const channelColor = 'ff0000';
const [overrideColor, toggleColorOverride] = React.useState(false);
function getChannelParams() {
// fill this in with sdk data
const channelParams: {
@ -213,6 +219,7 @@ function ChannelForm(props: Props) {
function handleSubmit() {
if (uri) {
console.log('Params A: ', params);
updateChannel(params).then((success) => {
if (success) {
onDone();
@ -270,9 +277,10 @@ function ChannelForm(props: Props) {
}
// TODO clear and bail after submit
// <div className={classnames('main--contained', { 'card--disabled': disabled })}></div>
return (
<>
<div className={classnames('main--contained', { 'card--disabled': disabled })}>
<div className={classnames({ 'card--disabled': disabled })}>
<header className="channel-cover">
<div className="channel__quick-actions">
<Button
@ -336,7 +344,7 @@ function ChannelForm(props: Props) {
<div className="channel-cover__gradient" />
</header>
<Tabs>
<Tabs className="channelPage-wrapper">
<TabList className="tabs__list--channel-page">
<Tab>{__('General')}</Tab>
<Tab>{__('Credit Details')}</Tab>
@ -445,6 +453,19 @@ function ChannelForm(props: Props) {
<Card
body={
<>
{NEKODEV && (
<fieldset-section class>
<label htmlFor="channel-color">{__('Channel color')}</label>
<FormField
name="manual-channel-color"
type="checkbox"
label="Pick color manually"
checked={overrideColor}
onChange={() => toggleColorOverride(!overrideColor)}
/>
<ColorPicker disabled={!overrideColor} />
</fieldset-section>
)}
<FormField
type="text"
name="channel_website2"

65
ui/component/channelStakedIndicator/view.jsx
View file

@ -14,6 +14,7 @@ type Props = {
level: number,
large?: boolean,
inline?: boolean,
hideTooltip?: Boolean,
};
function getChannelIcon(level: number): string {
@ -28,8 +29,20 @@ function getChannelIcon(level: number): string {
return icons[level] || ICONS.CHANNEL_LEVEL_1;
}
function getChannelIconB(level: number): string {
const icons = {
'1': ICONS.CHANNEL_LEVEL_1_B,
'2': ICONS.CHANNEL_LEVEL_2_B,
'3': ICONS.CHANNEL_LEVEL_3_B,
'4': ICONS.CHANNEL_LEVEL_4_B,
'5': ICONS.CHANNEL_LEVEL_5_B,
};
return icons[level] || ICONS.CHANNEL_LEVEL_1_B;
}
function ChannelStakedIndicator(props: Props) {
const { channelClaim, amount, level, large = false, inline = false } = props;
const { channelClaim, amount, level, large = false, inline = false, hideTooltip = false } = props;
if (!channelClaim || !channelClaim.meta) {
return null;
@ -37,25 +50,41 @@ function ChannelStakedIndicator(props: Props) {
const isControlling = channelClaim && channelClaim.meta.is_controlling;
const icon = getChannelIcon(level);
const icon_b = getChannelIconB(level);
return (
SIMPLE_SITE && (
<Tooltip
title={
<div className="channel-staked__tooltip">
<div className="channel-staked__tooltip-icons">
<LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
</div>
if (!hideTooltip) {
return (
SIMPLE_SITE && (
<Tooltip
title={
<div className="channel-staked__tooltip">
<div className="channel-staked__tooltip-icons">
<LevelIcon icon={icon_b} isControlling={isControlling} size={isControlling ? 14 : 10} />
</div>
<div className="channel-staked__tooltip-text">
<span>{__('Level %current_level%', { current_level: level })}</span>
<div className="channel-staked__amount">
<LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
<div className="channel-staked__tooltip-text">
<span>{__('Level %current_level%', { current_level: level })}</span>
<div className="channel-staked__amount">
<LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
</div>
</div>
</div>
}
>
<div
className={classnames('channel-staked__wrapper', {
'channel-staked__wrapper--large': large,
'channel-staked__wrapper--inline': inline,
})}
>
<LevelIcon icon={icon} large={large} isControlling={isControlling} />
</div>
}
>
</Tooltip>
)
);
} else {
return (
SIMPLE_SITE && (
<div
className={classnames('channel-staked__wrapper', {
'channel-staked__wrapper--large': large,
@ -64,9 +93,9 @@ function ChannelStakedIndicator(props: Props) {
>
<LevelIcon icon={icon} large={large} isControlling={isControlling} />
</div>
</Tooltip>
)
);
)
);
}
}
type LevelIconProps = {

6
ui/component/channelThumbnail/view.jsx
View file

@ -22,6 +22,7 @@ type Props = {
isResolving: boolean,
noLazyLoad?: boolean,
hideStakedIndicator?: boolean,
hideTooltip?: boolean,
noOptimization?: boolean,
setThumbUploadError: (boolean) => void,
ThumbUploadError: boolean,
@ -42,6 +43,7 @@ function ChannelThumbnail(props: Props) {
isResolving,
noLazyLoad,
hideStakedIndicator = false,
hideTooltip,
setThumbUploadError,
ThumbUploadError,
} = props;
@ -74,7 +76,7 @@ function ChannelThumbnail(props: Props) {
if (isGif && !allowGifs) {
return (
<FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} hideTooltip={hideTooltip} />}
</FreezeframeWrapper>
);
}
@ -101,7 +103,7 @@ function ChannelThumbnail(props: Props) {
}
}}
/>
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} hideTooltip={hideTooltip} />}
</div>
);
}

1
ui/component/claimList/view.jsx
View file

@ -103,6 +103,7 @@ export default function ClaimList(props: Props) {
let tileUris = (prefixUris || []).concat(uris || []);
tileUris = tileUris.filter((uri) => !excludeUris.includes(uri));
if (prefixUris && prefixUris.length) tileUris.splice(prefixUris.length * -1, prefixUris.length);
const totalLength = tileUris.length;

1
ui/component/claimMenuList/view.jsx
View file

@ -391,7 +391,6 @@ function ClaimMenuList(props: Props) {
{(!claimIsMine || channelIsBlocked) && contentChannelUri ? (
!incognitoClaim && (
<>
<hr className="menu__separator" />
<MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />

15
ui/component/claimPreview/claim-preview-loading.jsx
View file

@ -11,17 +11,24 @@ function ClaimPreviewLoading(props: Props) {
const { isChannel, type } = props;
return (
<li
className={classnames('claim-preview__wrapper', {
className={classnames('placeholder claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
'claim-preview__wrapper--small': type === 'small',
})}
>
<div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
<div className="placeholder media__thumb" />
<div className="media__thumb" />
<div className="placeholder__wrapper">
<div className="placeholder claim-preview__title" />
<div className="placeholder media__subtitle" />
<div className="claim-preview__title" />
<div className="claim-preview__title_b" />
<div className="claim-tile__info">
<div className="channel-thumbnail" />
<div className="claim-tile__about">
<div className="media__subtitle" />
<div className="media__subtitle_b" />
</div>
</div>
</div>
</div>
</li>

33
ui/component/claimPreview/view.jsx
View file

@ -175,11 +175,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
const formattedSubCount = toCompactNotation(channelSubCount, lang, 10000);
const formattedSubCountLocale = Number(channelSubCount).toLocaleString();
return (
<Tooltip title={formattedSubCountLocale} followCursor placement="top">
<span className="claim-preview__channel-sub-count">
{channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })}
</span>
</Tooltip>
<div className="media__subtitle">
<Tooltip title={formattedSubCountLocale} followCursor placement="top">
<span className="claim-preview__channel-sub-count">
{channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })}
</span>
</Tooltip>
</div>
);
}, [channelSubCount]);
const isValid = uri && isURIValid(uri, false);
@ -405,9 +407,18 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
</NavLink>
)}
</div>
<ClaimPreviewSubtitle uri={uri} type={type} />
{(pending || !!reflectingProgress) && <PublishPending uri={uri} />}
{channelSubscribers}
<div className="claim-tile__info" uri={uri}>
{!isChannelUri && signingChannel && (
<div className="claim-preview__channel-staked">
<UriIndicator focusable={false} uri={uri} link hideAnonymous>
<ChannelThumbnail uri={signingChannel.permanent_url} xsmall />
</UriIndicator>
</div>
)}
<ClaimPreviewSubtitle uri={uri} type={type} />
{(pending || !!reflectingProgress) && <PublishPending uri={uri} />}
{channelSubscribers}
</div>
</div>
{type !== 'small' && (
<div className="claim-preview__actions">
@ -418,12 +429,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
actions
) : (
<div className="claim-preview__primary-actions">
{!isChannelUri && signingChannel && (
<div className="claim-preview__channel-staked">
<ChannelThumbnail uri={signingChannel.permanent_url} xsmall />
</div>
)}
{isChannelUri && !banState.muted && !claimIsMine && (
<SubscribeButton
uri={repostedChannelUri || (uri.startsWith('lbry://') ? uri : `lbry://${uri}`)}

28
ui/component/claimPreviewTile/view.jsx
View file

@ -9,7 +9,7 @@ import DateTime from 'component/dateTime';
import LivestreamDateTime from 'component/livestreamDateTime';
import ChannelThumbnail from 'component/channelThumbnail';
import FileViewCountInline from 'component/fileViewCountInline';
import SubscribeButton from 'component/subscribeButton';
// import SubscribeButton from 'component/subscribeButton';
import useGetThumbnail from 'effects/use-get-thumbnail';
import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
@ -92,7 +92,6 @@ function ClaimPreviewTile(props: Props) {
const shouldFetch = claim === undefined;
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
const canonicalUrl = claim && claim.canonical_url;
const permanentUrl = claim && claim.permanent_url;
const repostedContentUri = claim && (claim.reposted_claim ? claim.reposted_claim.permanent_url : claim.permanent_url);
const listId = collectionId || collectionClaimId;
const navigateUrl =
@ -116,7 +115,6 @@ function ClaimPreviewTile(props: Props) {
const isChannel = claim && claim.value_type === 'channel';
const channelUri = !isChannel ? signingChannel && signingChannel.permanent_url : claim && claim.permanent_url;
const channelTitle = signingChannel && ((signingChannel.value && signingChannel.value.title) || signingChannel.name);
const repostedChannelUri = isRepost && isChannel ? permanentUrl || canonicalUrl : undefined;
// Aria-label value for claim preview
let ariaLabelData = isChannel ? title : formatClaimPreviewTitle(title, channelTitle, date, mediaDuration);
@ -154,17 +152,24 @@ function ClaimPreviewTile(props: Props) {
if (placeholder || (!claim && isResolvingUri)) {
return (
<li className={classnames('claim-preview--tile', {})}>
<div className="placeholder media__thumb">
<li className={classnames('placeholder claim-preview--tile', {})}>
<div className="media__thumb">
<img src={PlaceholderTx} alt="Placeholder" />
</div>
<div className="placeholder__wrapper">
<div className="placeholder claim-tile__title" />
<div className="claim-tile__title" />
<div className="claim-tile__title_b" />
<div
className={classnames('claim-tile__info placeholder', {
className={classnames('claim-tile__info', {
contains_view_count: shouldShowViewCount,
})}
/>
>
<div className="channel-thumbnail" />
<div className="claim-tile__about">
<div className="button__content" />
<div className="claim-tile__about--counts" />
</div>
</div>
</div>
</li>
);
@ -231,9 +236,10 @@ function ClaimPreviewTile(props: Props) {
})}
>
{isChannel ? (
<div className="claim-tile__about--channel">
<SubscribeButton uri={repostedChannelUri || uri} />
</div>
// <div className="claim-tile__about--channel">
// <SubscribeButton uri={repostedChannelUri || uri} />
// </div>
<></>
) : (
<React.Fragment>
<UriIndicator focusable={false} uri={uri} link hideAnonymous>

18
ui/component/claimRepostAuthor/view.jsx
View file

@ -19,8 +19,11 @@ function ClaimRepostAuthor(props: Props) {
if (short && repostUrl) {
return (
<span className="claim-preview__repost-author">
<Icon icon={ICONS.REPOST} size={12} />
<span>{repostUrl}</span>
<div className="claim-preview__repost-ribbon">
<Icon icon={ICONS.REPOST} size={12} />
<br />
<span>{repostUrl}</span>
</div>
</span>
);
}
@ -47,10 +50,13 @@ function ClaimRepostAuthor(props: Props) {
return (
<div className="claim-preview__repost-author">
<Icon icon={ICONS.REPOST} size={10} className="claim-preview__repost-icon" />
<I18nMessage tokens={{ repost_channel_link: <UriIndicator link uri={repostChannelUrl} /> }}>
%repost_channel_link% reposted
</I18nMessage>
<div className="claim-preview__repost-ribbon">
<Icon icon={ICONS.REPOST} size={10} className="claim-preview__repost-icon" />
<br />
<I18nMessage tokens={{ repost_channel_link: <UriIndicator link uri={repostChannelUrl} /> }}>
%repost_channel_link%
</I18nMessage>
</div>
</div>
);
}

1
ui/component/claimTilesDiscover/view.jsx
View file

@ -81,6 +81,7 @@ function ClaimTilesDiscover(props: Props) {
const shouldPerformSearch = !fetchingClaimSearch && claimSearchUris.length === 0;
const uris = (prefixUris || []).concat(claimSearchUris);
if (prefixUris && prefixUris.length) uris.splice(prefixUris.length * -1, prefixUris.length);
if (pinUrls && uris && uris.length > 2 && window.location.pathname === '/') {
pinUrls.forEach((pin) => {

2
ui/component/collectionActions/view.jsx
View file

@ -177,7 +177,7 @@ function CollectionActions(props: Props) {
if (isMobile) {
return (
<div className="media__actions">
<div className="media__actions stretch">
{lhsSection}
{rhsSection}
{infoButtons}

51
ui/component/collectionContentSidebar/view.jsx
View file

@ -58,21 +58,23 @@ export default function CollectionContent(props: Props) {
return (
<Card
isBodyList
className="file-page__recommended-collection"
className="file-page__playlist-collection"
title={
<>
<span className="file-page__recommended-collection__row">
<Icon
icon={
(id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
(id === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) ||
ICONS.STACK
}
className="icon--margin-right"
/>
{collectionName}
</span>
<span className="file-page__recommended-collection__row">
<a href={`/$/${PAGES.LIST}/${id}`}>
<span className="file-page__playlist-collection__row">
<Icon
icon={
(id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
(id === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) ||
ICONS.STACK
}
className="icon--margin-right"
/>
{collectionName}
</span>
</a>
<span className="file-page__playlist-collection__row">
<Button
button="alt"
title={__('Loop')}
@ -93,21 +95,14 @@ export default function CollectionContent(props: Props) {
</>
}
titleActions={
<>
<div className="card__title-actions--link">
{/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
<Button label={__('View List')} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
</div>
{isMyCollection && (
<Button
title={__('Edit')}
className={classnames('button-toggle', { 'button-toggle--active': showEdit })}
icon={ICONS.EDIT}
onClick={() => setShowEdit(!showEdit)}
/>
)}
</>
isMyCollection && (
<Button
title={__('Edit')}
className={classnames('button-toggle', { 'button-toggle--active': showEdit })}
icon={ICONS.EDIT}
onClick={() => setShowEdit(!showEdit)}
/>
)
}
body={
<DragDropContext onDragEnd={handleOnDragEnd}>

6
ui/component/colorPicker/index.js Normal file
View file

@ -0,0 +1,6 @@
import { connect } from 'react-redux';
import ColorPicker from './view';
const select = (state) => ({});
export default connect(select)(ColorPicker);

63
ui/component/colorPicker/view.jsx Normal file
View file

@ -0,0 +1,63 @@
// @flow
'use strict';
import React, { useState } from 'react';
import reactCSS from 'reactcss';
import { SketchPicker } from 'react-color';
import classNames from 'classnames';
import { changeColor, getPrimaryColor } from 'util/theme';
type Props = {
disabled?: boolean,
};
function ColorPicker(props: Props) {
const { disabled } = props;
const [displayColorPicker, toggleDisplayColorPicker] = useState(false);
let dynamic = getPrimaryColor();
var rgb = dynamic.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
var hex = rgb
? (rgb[1] | (1 << 8)).toString(16).slice(1) +
(rgb[2] | (1 << 8)).toString(16).slice(1) +
(rgb[3] | (1 << 8)).toString(16).slice(1)
: dynamic;
const [color, setColor] = useState({
hex: '#' + hex,
rgb: { r: parseInt(rgb[1]), g: parseInt(rgb[2]), b: parseInt(rgb[3]), a: 1 },
});
const styles = reactCSS({
default: {
color: {
background: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
},
},
});
function handleChange(color) {
console.log('Color: ', color);
changeColor(color.rgb);
setColor(color);
}
return (
<div
className={classNames('color-picker', {
disabled: disabled,
})}
>
<input value={color.hex} />
<div className="swatch" onClick={() => toggleDisplayColorPicker(!displayColorPicker)}>
<div className="color" style={styles.color} />
</div>
{displayColorPicker ? (
<div className="popover">
<div className="cover" onClick={() => toggleDisplayColorPicker(false)} />
<SketchPicker color={color} onChange={handleChange} disableAlpha />
</div>
) : null}
</div>
);
}
export default ColorPicker;

4
ui/component/commentReactions/view.jsx
View file

@ -114,7 +114,7 @@ export default function CommentReactions(props: Props) {
title={__('Upvote')}
icon={likeIcon}
iconSize={isMobile && 12}
className={classnames('comment__action', {
className={classnames('comment__action button-like', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
})}
onClick={handleCommentLike}
@ -125,7 +125,7 @@ export default function CommentReactions(props: Props) {
title={__('Downvote')}
icon={dislikeIcon}
iconSize={isMobile && 12}
className={classnames('comment__action', {
className={classnames('comment__action button-dislike', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
})}
onClick={handleCommentDislike}

2
ui/component/common/card.jsx
View file

@ -73,7 +73,7 @@ export default function Card(props: Props) {
<div
className={classnames('card__title-section', {
'card__title-section--body-list': isBodyList,
'card__title-section--small': smallTitle,
'card__title-section--smallx': smallTitle,
})}
>
{icon && <Icon sectionIcon icon={icon} />}

367
ui/component/common/icon-custom.jsx
View file

@ -218,19 +218,17 @@ export const icons = {
viewBox="0 0 24 24"
width={size}
height={size}
fill="none"
// fill={color}
fill="black"
stroke={color}
strokeWidth="0"
strokeLinecap="round"
strokeLinejoin="round"
{...rest}
>
<path d="M1.03125 14.1562V9.84375L12 0L22.9688 9.84375V14.1562L12 24L1.03125 14.1562Z" fill="black" />
<path d="M8.925 10.3688L3.99375 14.8125L7.70625 18.15L12.6375 13.7063L8.925 10.3688Z" fill="black" />
<path
d="M8.925 10.3688L15.1312 4.80005L12 1.98755L2.60625 10.425V13.575L3.99375 14.8125L8.925 10.3688Z"
fill="black"
/>
<path d="M1.03125 14.1562V9.84375L12 0L22.9688 9.84375V14.1562L12 24L1.03125 14.1562Z" />
<path d="M8.925 10.3688L3.99375 14.8125L7.70625 18.15L12.6375 13.7063L8.925 10.3688Z" />
<path d="M8.925 10.3688L15.1312 4.80005L12 1.98755L2.60625 10.425V13.575L3.99375 14.8125L8.925 10.3688Z" />
<path
d="M8.925 10.3688L3.99375 14.8125L7.70625 18.15L12.6375 13.7063L8.925 10.3688Z"
fill={`url(#paint0_linear${randomId})`}
@ -323,7 +321,7 @@ export const icons = {
</g>
),
[ICONS.HOME]: buildIcon(
<g strokeWidth="2" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<g fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
<path d="M1, 11 L12, 2 C12, 2 22.9999989, 11.0000005 23, 11" />
<path d="M3, 10 C3, 10 3, 10.4453982 3, 10.9968336 L3, 20.0170446 C3, 20.5675806 3.43788135, 21.0138782 4.00292933, 21.0138781 L8.99707067, 21.0138779 C9.55097324, 21.0138779 10, 20.5751284 10, 20.0089602 L10, 15.0049177 C10, 14.449917 10.4433532, 14 11.0093689, 14 L12.9906311, 14 C13.5480902, 14 14, 14.4387495 14, 15.0049177 L14, 20.0089602 C14, 20.5639609 14.4378817, 21.0138779 15.0029302, 21.0138779 L19.9970758, 21.0138781 C20.5509789, 21.0138782 21.000006, 20.56848 21.000006, 20.0170446 L21.0000057, 10" />
</g>
@ -349,9 +347,25 @@ export const icons = {
<path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29" />
</g>
),
[ICONS.SUBSCRIBE]: buildIcon(
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
),
[ICONS.SUBSCRIBE]: (props: IconProps) => {
const { size = 24, color = 'currentColor', ...otherProps } = props;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={size}
height={size}
fill={color}
stroke={'#FFFFFF'}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...otherProps}
>
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>
);
},
[ICONS.SUBSCRIBED]: (props: IconProps) => {
const { size = 24, color = 'currentColor', ...otherProps } = props;
return (
@ -361,8 +375,8 @@ export const icons = {
width={size}
height={size}
fill={color}
stroke={color}
strokeWidth="1"
stroke={'#FFFFFF'}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...otherProps}
@ -372,9 +386,25 @@ export const icons = {
);
},
[ICONS.UNSUBSCRIBE]: buildIcon(
<path d="M 12,5.67 10.94,4.61 C 5.7533356,-0.57666427 -2.0266644,7.2033357 3.16,12.39 l 1.06,1.06 7.78,7.78 7.78,-7.78 1.06,-1.06 c 2.149101,-2.148092 2.149101,-5.6319078 0,-7.78 -2.148092,-2.1491008 -5.631908,-2.1491008 -7.78,0 L 9.4481298,8.2303201 15.320603,9.2419066 11.772427,13.723825" />
),
[ICONS.UNSUBSCRIBE]: (props: IconProps) => {
const { size = 24, color = 'currentColor', ...otherProps } = props;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={size}
height={size}
fill={color}
stroke={'#FFFFFF'}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...otherProps}
>
<path d="M 12,5.67 10.94,4.61 C 5.7533356,-0.57666427 -2.0266644,7.2033357 3.16,12.39 l 1.06,1.06 7.78,7.78 7.78,-7.78 1.06,-1.06 c 2.149101,-2.148092 2.149101,-5.6319078 0,-7.78 -2.148092,-2.1491008 -5.631908,-2.1491008 -7.78,0 L 9.4481298,8.2303201 15.320603,9.2419066 11.772427,13.723825" />
</svg>
);
},
[ICONS.SETTINGS]: buildIcon(
<g>
<circle cx="12" cy="12" r="3" />
@ -737,12 +767,24 @@ export const icons = {
<path d="M21 13v2a4 4 0 0 1-4 4H3" />
</g>
),
[ICONS.MORE_VERTICAL]: buildIcon(
<g>
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="19" r="1" />
</g>
[ICONS.MORE_VERTICAL]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20"
height="20"
fill="none"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<g>
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="19" r="1" />
</g>
</svg>
),
[ICONS.MORE]: buildIcon(
<g transform="rotate(90 12 12)">
@ -1125,7 +1167,6 @@ export const icons = {
width={props.size || '16'}
height={props.size || '18'}
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
@ -1275,13 +1316,6 @@ export const icons = {
[ICONS.DOWNVOTE]: buildIcon(
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
),
[ICONS.FIRE_ACTIVE]: buildIcon(
<path
d="M11.3969 23.04C11.3969 23.04 18.4903 21.8396 18.9753 16.2795C19.3997 9.89148 14.2161 7.86333 13.2915 4.56586C13.1861 4.2261 13.1051 3.88045 13.049 3.53109C12.9174 2.68094 12.8516 1.82342 12.852 0.964865C12.852 0.964865 5.607 0.426785 4.87947 10.6227C4.34858 10.1469 3.92655 9.57999 3.63777 8.9548C3.349 8.32962 3.19921 7.65853 3.19706 6.98033C3.19706 6.98033 -4.32074 18.7767 8.45649 23.04C7.94555 22.1623 7.67841 21.1842 7.67841 20.1909C7.67841 19.1976 7.94555 18.2195 8.45649 17.3418C9.54778 15.0653 9.97218 13.8788 9.97218 13.8788C9.97218 13.8788 15.5044 18.6525 11.3969 23.04Z"
fill="#FF6635"
strokeWidth="0"
/>
),
[ICONS.SLIME_ACTIVE]: buildIcon(
<path
d="M13.065 4.18508C12.5638 4.47334 11.9699 4.5547 11.4096 4.41183C10.8494 4.26896 10.367 3.91315 10.065 3.42008C9.70126 2.96799 9.52899 2.39146 9.58506 1.81392C9.64113 1.23639 9.92109 0.703759 10.365 0.330081C10.8662 0.0418164 11.4601 -0.0395341 12.0204 0.103332C12.5806 0.246199 13.063 0.602008 13.365 1.09508C13.7287 1.54717 13.901 2.12371 13.8449 2.70124C13.7889 3.27877 13.5089 3.8114 13.065 4.18508ZM2.565 6.76508C1.98518 6.6732 1.39241 6.81157 0.913189 7.15066C0.433971 7.48976 0.106262 8.00272 0 8.58008C0.0118186 9.17159 0.256137 9.73464 0.680058 10.1473C1.10398 10.56 1.67339 10.7891 2.265 10.7851C2.84509 10.8863 3.44175 10.7561 3.92691 10.4224C4.41207 10.0886 4.74707 9.57801 4.86 9.00008C4.85804 8.7046 4.79789 8.41241 4.683 8.14018C4.56811 7.86794 4.40072 7.62101 4.1904 7.41347C3.98007 7.20593 3.73093 7.04185 3.45719 6.9306C3.18345 6.81935 2.89048 6.7631 2.595 6.76508H2.565ZM22.2 15.1951C21.9286 15.0703 21.635 15.0008 21.3364 14.9907C21.0379 14.9806 20.7403 15.0301 20.461 15.1362C20.1818 15.2423 19.9264 15.403 19.7099 15.6088C19.4934 15.8146 19.3201 16.0615 19.2 16.3351C19.1369 16.6299 19.1337 16.9345 19.1906 17.2306C19.2475 17.5267 19.3634 17.8084 19.5313 18.0588C19.6992 18.3093 19.9157 18.5235 20.168 18.6886C20.4203 18.8537 20.7033 18.9665 21 19.0201C21.2714 19.1449 21.565 19.2143 21.8636 19.2244C22.1621 19.2346 22.4597 19.1851 22.739 19.079C23.0182 18.9729 23.2736 18.8122 23.4901 18.6064C23.7066 18.4005 23.8799 18.1536 24 17.8801C24.0634 17.5873 24.0677 17.2849 24.0127 16.9904C23.9577 16.696 23.8444 16.4155 23.6795 16.1654C23.5147 15.9153 23.3015 15.7007 23.0526 15.5341C22.8037 15.3674 22.524 15.2522 22.23 15.1951H22.2ZM20.34 10.2451C20.0073 9.99542 19.6009 9.86349 19.185 9.87008C18.4572 9.93018 17.7485 10.1341 17.1 10.4701C16.7447 10.6341 16.3789 10.7744 16.005 10.8901H15.69C15.5961 10.9108 15.4989 10.9108 15.405 10.8901C15 9.97508 16.5 9.00008 18.285 7.93508C18.8914 7.60883 19.4599 7.21644 19.98 6.76508C20.3961 6.30667 20.646 5.72169 20.6895 5.10413C20.733 4.48658 20.5677 3.87232 20.22 3.36008C19.9329 2.89588 19.5307 2.51381 19.0523 2.25098C18.574 1.98815 18.0358 1.85349 17.49 1.86008C17.2067 1.85969 16.9245 1.89496 16.65 1.96508C16.1585 2.08101 15.7042 2.31914 15.3293 2.65739C14.9543 2.99565 14.6708 3.42308 14.505 3.90008C14.16 4.75508 13.14 7.30508 12.135 7.71008C12.0359 7.72949 11.9341 7.72949 11.835 7.71008C11.6138 7.70259 11.3956 7.65692 11.19 7.57508C9.96 7.12508 9.6 5.62508 9.225 4.03508C9.06457 3.15891 8.79234 2.30695 8.415 1.50008C8.17043 1.04181 7.80465 0.659541 7.3576 0.395014C6.91055 0.130487 6.39941 -0.00612938 5.88 8.05856e-05C5.30686 0.011692 4.74338 0.149999 4.23 0.405081C3.872 0.589131 3.5547 0.843345 3.297 1.15258C3.03931 1.46182 2.84648 1.81976 2.73 2.20508C2.58357 2.66415 2.532 3.1482 2.57841 3.62781C2.62483 4.10743 2.76826 4.57261 3 4.99508C3.63898 5.99088 4.39988 6.90294 5.265 7.71008C5.59239 8.0233 5.90283 8.35377 6.195 8.70008C6.41249 8.94283 6.57687 9.22833 6.67761 9.5383C6.77835 9.84826 6.81322 10.1759 6.78 10.5001C6.68279 10.762 6.52008 10.9947 6.30737 11.1759C6.09467 11.3571 5.83908 11.4808 5.565 11.5351H5.19C4.89755 11.5247 4.60651 11.4896 4.32 11.4301C3.94485 11.3508 3.56329 11.3056 3.18 11.2951H3C2.50224 11.3269 2.02675 11.513 1.63964 11.8275C1.25253 12.142 0.973032 12.5694 0.84 13.0501C0.685221 13.5092 0.678705 14.0053 0.821373 14.4683C0.964041 14.9313 1.24867 15.3377 1.635 15.6301C1.97288 15.8809 2.38429 16.0127 2.805 16.0051C3.4891 15.9504 4.15377 15.751 4.755 15.4201C5.18104 15.1991 5.64344 15.0568 6.12 15.0001H6.285C6.32317 15.0086 6.35846 15.0269 6.38739 15.0532C6.41632 15.0795 6.4379 15.1129 6.45 15.1501C6.52858 15.4213 6.49621 15.7127 6.36 15.9601C5.80418 16.8088 4.95508 17.4229 3.975 17.6851C3.38444 17.8608 2.85799 18.205 2.46025 18.6756C2.06252 19.1462 1.81078 19.7226 1.73592 20.3342C1.66107 20.9458 1.76635 21.5659 2.03886 22.1185C2.31136 22.6711 2.73924 23.1321 3.27 23.4451C3.81477 23.8292 4.46349 24.0384 5.13 24.0451C6.1389 23.9485 7.08103 23.4979 7.7894 22.773C8.49778 22.0482 8.92665 21.0959 9 20.0851V19.9501C9.135 19.0351 9.33 17.7751 10.05 17.3401C10.2442 17.2216 10.4675 17.1593 10.695 17.1601C11.0828 17.1781 11.4558 17.3142 11.7641 17.5501C12.0724 17.786 12.3012 18.1105 12.42 18.4801C13.155 21.2251 13.725 23.4001 16.14 23.4001C16.4527 23.3961 16.7643 23.361 17.07 23.2951C17.8256 23.2158 18.5231 22.8527 19.0214 22.2792C19.5198 21.7057 19.7819 20.9644 19.755 20.2051C19.6664 19.6213 19.4389 19.0673 19.0918 18.5896C18.7446 18.112 18.2879 17.7246 17.76 17.4601C17.4534 17.2574 17.1625 17.0317 16.89 16.7851C16.005 15.9301 15.855 15.4051 15.885 15.1051C15.9198 14.8698 16.0313 14.6526 16.2021 14.4871C16.373 14.3217 16.5937 14.2173 16.83 14.1901H17.055C17.31 14.1901 17.61 14.1901 17.895 14.1901C18.18 14.1901 18.57 14.1901 18.84 14.1901H19.14C19.6172 14.1642 20.0748 13.9919 20.4505 13.6967C20.8263 13.4014 21.102 12.9976 21.24 12.5401C21.3316 12.1166 21.2981 11.6757 21.1436 11.2709C20.9892 10.8661 20.7204 10.5149 20.37 10.2601L20.34 10.2451Z"
@ -1295,6 +1329,13 @@ export const icons = {
strokeMiterlimit="10"
/>
),
[ICONS.FIRE_ACTIVE]: buildIcon(
<path
d="M11.3969 23.04C11.3969 23.04 18.4903 21.8396 18.9753 16.2795C19.3997 9.89148 14.2161 7.86333 13.2915 4.56586C13.1861 4.2261 13.1051 3.88045 13.049 3.53109C12.9174 2.68094 12.8516 1.82342 12.852 0.964865C12.852 0.964865 5.607 0.426785 4.87947 10.6227C4.34858 10.1469 3.92655 9.57999 3.63777 8.9548C3.349 8.32962 3.19921 7.65853 3.19706 6.98033C3.19706 6.98033 -4.32074 18.7767 8.45649 23.04C7.94555 22.1623 7.67841 21.1842 7.67841 20.1909C7.67841 19.1976 7.94555 18.2195 8.45649 17.3418C9.54778 15.0653 9.97218 13.8788 9.97218 13.8788C9.97218 13.8788 15.5044 18.6525 11.3969 23.04Z"
fill="#d62912"
strokeWidth="0"
/>
),
[ICONS.SLIME]: buildIcon(
<path
d="M5.09998 23.25C2.84998 23.25 1.64998 20.55 3.14998 18.9C4.19998 17.85 8.24998 17.1 7.04998 14.7C6.14998 12.9 3.59998 15.75 2.09998 15C1.34998 14.7 1.19998 13.5 1.79998 12.75C2.39998 11.85 3.29998 12 4.19998 12.15C5.84998 12.45 7.94998 11.7 7.49998 9.60003C6.89998 7.35003 4.34998 6.45003 3.44998 4.35003C2.69998 2.25003 4.64998 -0.299968 6.89998 1.05003C8.69998 2.10003 8.39997 5.25003 9.29997 6.90003C10.2 8.40003 12 9.00003 13.2 7.65003C14.55 6.30003 14.55 3.15003 16.65 2.70003C18.45 2.25003 20.4 4.05003 19.5 5.85003C18.45 7.80003 15.15 7.80003 14.55 10.05C14.1 11.7 15.45 11.85 16.65 11.4C17.4 11.1 18.6 10.35 19.5 10.65C20.55 11.1 20.7 12.45 19.95 13.2C18.6 14.25 16.65 12.6 15.45 14.25C13.95 16.35 17.1 17.7 18.15 18.9C19.8 20.7 18.3 22.8 16.05 22.8C14.1 22.8 13.65 20.7 13.2 19.05C12.6 16.95 9.89997 15.3 8.54997 18C7.79997 19.8 8.24998 23.25 5.09998 23.25Z"
@ -1462,6 +1503,26 @@ export const icons = {
</g>
),
[ICONS.CHANNEL_LEVEL_1]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500"
width={props.size || '18'}
height={props.size || '18'}
fill="currentColor"
stroke="currentColor"
strokeWidth="0"
strokeLinecap="round"
strokeLinejoin="round"
>
<path
d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z m 26.50858,-21.17718 c 2.98054,-4.64871 7.22092,-7.8939 17.93686,-13.72718 l 5.54336,-3.01756 -8.18544,-4.48244 c -11.40473,-6.24535 -13.1144,-7.91052 -19.05225,-18.55628 l -5.23365,-9.38323 -3.00873,5.5275 c -7.72372,14.18964 -9.74931,16.21463 -23.95417,23.94713 l -5.54336,3.01756 8.18544,4.48244 c 11.40473,6.24535 13.1144,7.91052 19.05225,18.55628 l 5.23365,9.38323 3.00873,-5.5275 c 1.6548,-3.04012 4.36259,-7.6391 6.01731,-10.21995 z"
fill="black"
/>
<path d="m 248.38046,427.36081 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />
</svg>
),
[ICONS.CHANNEL_LEVEL_1_B]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
@ -1478,6 +1539,26 @@ export const icons = {
</svg>
),
[ICONS.CHANNEL_LEVEL_2]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500"
width={props.size || '18'}
height={props.size || '18'}
fill="currentColor"
stroke="currentColor"
strokeWidth="0"
strokeLinecap="round"
strokeLinejoin="round"
>
<path
d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z"
fill="black"
/>
<path d="m 309.09964,416.68506 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m -121.39736,0.20649 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />
</svg>
),
[ICONS.CHANNEL_LEVEL_2_B]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
@ -1494,6 +1575,27 @@ export const icons = {
</svg>
),
[ICONS.CHANNEL_LEVEL_3]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500"
width={props.size || '18'}
height={props.size || '18'}
fill="currentColor"
stroke="currentColor"
strokeWidth="0"
strokeLinecap="round"
strokeLinejoin="round"
>
<path
d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z m 26.50858,-21.17718 c 2.98054,-4.64871 7.22092,-7.8939 17.93686,-13.72718 l 5.54336,-3.01756 -8.18544,-4.48244 c -11.40473,-6.24535 -13.1144,-7.91052 -19.05225,-18.55628 l -5.23365,-9.38323 -3.00873,5.5275 c -7.72372,14.18964 -9.74931,16.21463 -23.95417,23.94713 l -5.54336,3.01756 8.18544,4.48244 c 11.40473,6.24535 13.1144,7.91052 19.05225,18.55628 l 5.23365,9.38323 3.00873,-5.5275 c 1.6548,-3.04012 4.36259,-7.6391 6.01731,-10.21995 z"
fill="black"
/>
<path d="m 128.30012,386.71637 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m 240.07855,0.16317 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m -119.99821,40.48127 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />{' '}
/>
</svg>
),
[ICONS.CHANNEL_LEVEL_3_B]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
@ -1510,6 +1612,26 @@ export const icons = {
</svg>
),
[ICONS.CHANNEL_LEVEL_4]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500"
width={props.size || '18'}
height={props.size || '18'}
fill="currentColor"
stroke="currentColor"
strokeWidth="0"
strokeLinecap="round"
strokeLinejoin="round"
>
<path
d="M 232,499.3868 C 186.62953,495.26229 146.60393,481.40357 110.87554,457.44789 75.93172,434.01827 47.746027,402.50834 28.180712,365 22.200647,353.53572 13.455374,332.52687 12.338353,326.94176 L 11.75,324 h 41.608154 41.608154 l 2.639952,5.25 c 3.94886,7.85299 12.89682,21.29836 19.78405,29.72785 32.10409,39.29323 82.01238,63.00574 132.60969,63.00574 50.59731,0 100.5056,-23.71251 132.60969,-63.00574 6.88723,-8.42949 15.83519,-21.87486 19.78405,-29.72785 L 405.03369,324 H 446.64185 488.25 l -0.58835,2.94176 C 486.54463,332.52687 477.79935,353.53572 471.81929,365 434.6056,436.34174 366.2652,485.12552 286.79214,497.07887 273.99026,499.00437 242.4208,500.33413 232,499.3868 Z m 41.80336,-42.40436 c -182.535573,-304.65496 -91.26779,-152.32748 0,0 z"
fill="black"
/>
<path d="m 404.52581,356.68506 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m -95.42617,60 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z M 91.67587,356.2841 l 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z m 96.02641,60.60745 9.3071,17.02861 c 2.08022,3.81577 5.21569,6.95126 9.03138,9.03139 l 16.95965,9.23812 -17.02861,9.30711 c -3.81569,2.08022 -6.95117,5.21569 -9.03131,9.03138 l -9.23821,16.95965 -9.3071,-17.02861 c -2.07202,-3.78077 -5.18165,-6.89048 -8.96242,-8.96242 l -17.02861,-9.30711 17.02861,-9.30709 c 3.78077,-2.07203 6.8904,-5.18165 8.96242,-8.96242 z" />
</svg>
),
[ICONS.CHANNEL_LEVEL_4_B]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
@ -1526,6 +1648,26 @@ export const icons = {
</svg>
),
[ICONS.CHANNEL_LEVEL_5]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500"
width={props.size || '500'}
height={props.size || '500'}
fill="currentColor"
stroke="currentColor"
strokeWidth="0"
strokeLinecap="round"
strokeLinejoin="round"
>
<path
d="M 235.55276,499.26997 C 186.79685,496.32795 137.66046,478.0957 98.932161,448.57638 64.375487,422.23673 36.705872,386.50219 19.8707,346.4707 c -3.556715,-8.45733 -7.621956,-19.74033 -7.621956,-21.15461 0,-0.7476 6.270129,-0.88029 41.300251,-0.87397 l 41.300251,0.007 2.826633,5.44767 c 9.504211,18.31713 27.376381,40.30105 42.713571,52.54042 15.17627,12.11096 34.44228,23.37235 48.55956,28.38409 l 4.87744,1.73153 5.62399,-5.99232 c 11.69896,-12.46515 22.77425,-18.22547 40.18524,-20.90053 9.81701,-1.50831 18.32619,-1.03426 28.59982,1.59329 11.83833,3.02773 20.56915,8.22721 30.9194,18.41348 l 7.06948,6.95746 2.35263,-0.82029 c 21.03111,-7.33293 46.88768,-23.94389 63.59636,-40.85601 10.80627,-10.93785 23.47767,-28.19032 30.15075,-41.05112 l 2.82663,-5.44767 41.30026,-0.007 c 35.03011,-0.006 41.30025,0.12637 41.30025,0.87397 0,1.53331 -4.32078,13.36898 -8.24488,22.58476 -19.04024,44.71617 -51.80276,83.94394 -92.25764,110.46347 -29.87833,19.58624 -62.91601,32.35663 -98.61809,38.11986 -13.56762,2.19016 -39.97761,3.57628 -53.07789,2.78579 z m 23.30406,-18.29848 c 7.82251,-13.66418 10.63782,-17.67091 14.26371,-20.29998 1.44828,-1.05012 8.31478,-5.12929 15.25889,-9.06481 6.94411,-3.93553 12.96327,-7.5623 13.37591,-8.05951 0.80132,-0.96552 -2.17464,-2.95232 -15.63724,-10.43973 -10.5445,-5.86446 -15.55499,-9.36922 -17.81266,-12.45968 -1.17894,-1.61382 -5.23587,-8.30482 -9.0154,-14.86889 -8.45664,-14.68699 -8.5034,-14.7613 -9.29003,-14.7613 -0.78663,0 -0.83339,0.0743 -9.29003,14.7613 -3.77953,6.56407 -7.83646,13.25507 -9.0154,14.86889 -2.25767,3.09046 -7.26816,6.59522 -17.81266,12.45968 -13.30771,7.40126 -16.43411,9.47956 -15.66118,10.4109 0.39949,0.48134 6.84264,4.33667 14.31813,8.56737 17.17652,9.72095 18.2701,10.7699 26.73966,25.64867 3.43107,6.02749 7.21068,12.50218 8.39912,14.38821 l 2.1608,3.42914 1.14574,-1.41493 c 0.63016,-0.77821 4.17284,-6.70261 7.87264,-13.16533 z M 141.64573,454.30242 c 5.26232,-9.917 9.51419,-14.32892 18.84422,-19.55353 6.51053,-3.64575 8.79397,-5.21077 8.79397,-6.02722 0,-0.22979 -3.43603,-2.37661 -7.63562,-4.77073 -10.94139,-6.23752 -13.74639,-9.03723 -19.42106,-19.38447 -2.56543,-4.67784 -5.02127,-8.50935 -5.4574,-8.51446 -0.8487,-0.01 -3.2361,3.56545 -7.72183,11.56434 -4.1715,7.43854 -7.24318,10.34223 -16.61082,15.70239 -4.49121,2.56986 -8.25296,5.09382 -8.35945,5.60881 -0.1299,0.62822 2.3496,2.34774 7.53506,5.2255 9.2275,5.12096 13.4496,9.04972 17.43521,16.22383 4.38458,7.8923 6.86212,11.62064 7.72183,11.62027 0.43613,-1.8e-4 2.63029,-3.46281 4.87589,-7.69473 z m 226.50331,-0.78837 c 5.29481,-9.58656 8.63331,-13.24858 15.71277,-17.23543 2.72651,-1.53544 6.48172,-3.74845 8.34491,-4.91778 3.30684,-2.07536 3.35927,-2.15343 2.19849,-3.27353 -0.65402,-0.63112 -3.86414,-2.62054 -7.13358,-4.42095 -10.92588,-6.01664 -13.32662,-8.45065 -19.43098,-19.70024 -2.21025,-4.07324 -4.41448,-7.55778 -4.89827,-7.74343 -1.11219,-0.42679 -1.67137,0.35245 -6.85397,9.55118 -4.73849,8.41046 -8.03573,12.04225 -13.97637,15.39447 -8.05336,4.54439 -12.33817,7.27709 -12.33817,7.86885 0,0.33608 2.26131,1.92366 5.02512,3.52795 14.06126,8.16206 15.95811,9.8607 20.72122,18.55594 4.70964,8.59763 6.26112,10.91338 7.19156,10.73419 0.51101,-0.0984 2.95778,-3.85196 5.43727,-8.34122 z M 78.366087,391.08177 c 5.333574,-9.82537 8.104849,-12.69077 17.262123,-17.84841 4.108197,-2.31385 8.01619,-4.62977 8.68443,-5.14648 1.19017,-0.92028 1.18439,-0.96539 -0.28277,-2.20738 -0.82378,-0.69734 -4.222251,-2.79704 -7.552175,-4.66599 -10.538989,-5.91511 -12.793329,-8.29983 -19.216388,-20.32782 -2.523964,-4.72645 -4.080064,-6.99936 -4.711056,-6.8812 -0.518216,0.097 -2.920854,3.70747 -5.339196,8.02316 -5.70866,10.1875 -10.069436,14.63742 -19.077328,19.46732 -6.784252,3.63763 -8.86763,5.29014 -7.886473,6.25545 0.320041,0.31488 4.115183,2.59983 8.433651,5.07768 9.553212,5.48145 12.203234,8.14845 17.545587,17.65799 2.202117,3.91984 4.589264,7.77804 5.30477,8.57379 1.602601,1.78233 1.422161,1.99295 6.834825,-7.97811 z m 353.928603,-0.54279 c 2.69018,-4.69098 5.80923,-9.42753 6.93122,-10.52568 1.12199,-1.09815 5.49052,-3.94008 9.70784,-6.31539 4.21732,-2.37532 8.35376,-4.90874 9.19207,-5.62983 l 1.52421,-1.31107 -3.06622,-1.93688 c -1.68642,-1.06528 -5.67998,-3.3974 -8.87458,-5.18249 -3.19459,-1.78509 -6.62863,-3.93584 -7.63119,-4.77944 -1.81295,-1.52549 -5.356,-6.92464 -9.65962,-14.72001 -3.4162,-6.18793 -3.88789,-6.71497 -5.10547,-5.70446 -0.55906,0.46397 -2.46309,3.42127 -4.23118,6.57176 -7.46181,13.29591 -7.85141,13.6858 -21.03105,21.04659 -3.15049,1.75954 -6.10779,3.65658 -6.57176,4.21564 -1.05734,1.27401 -0.92363,1.37766 9.42627,7.30739 4.2926,2.45935 8.81522,5.49339 10.05025,6.74232 1.23504,1.24892 3.91584,5.22737 5.95733,8.84099 6.0577,10.72264 6.59891,11.4796 7.60862,10.64161 0.48512,-0.40261 3.08309,-4.57009 5.77326,-9.26105 z"
fill="black"
/>
<path d="m 425.07108,330.57589 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.47385,9.51823 -17.54489,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m -351.999998,0 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.473848,9.51823 -17.544888,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m 64.340978,61.52813 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.47385,9.51823 -17.54489,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m 225.19765,0.21238 9.58928,17.5449 c 2.14329,3.93147 5.37384,7.16201 9.30521,9.30522 l 17.47385,9.51823 -17.54489,9.58927 c -3.93139,2.14329 -7.16194,5.37385 -9.30514,9.30523 l -9.51831,17.47384 -9.58928,-17.54491 c -2.13485,-3.8954 -5.33876,-7.09939 -9.23417,-9.23416 l -17.54489,-9.58927 17.54489,-9.58928 c 3.89541,-2.13486 7.09932,-5.33876 9.23417,-9.23417 z m -112.77127,-4.51352 14.4688,26.47266 c 3.23391,5.932 8.10833,10.8064 14.04019,14.04019 l 26.36544,14.36159 -26.47265,14.46879 c -5.93187,3.23391 -10.80629,8.10833 -14.04007,14.0402 l -14.36171,26.36544 -14.4688,-26.47266 c -3.22117,-5.87758 -8.05539,-10.71194 -13.93298,-13.93298 l -26.47265,-14.46879 26.47265,-14.4688 c 5.87759,-3.22118 10.71181,-8.05539 13.93298,-13.93298 z" />
</svg>
),
[ICONS.CHANNEL_LEVEL_5_B]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
@ -1548,150 +1690,29 @@ export const icons = {
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12,19.875a.375.375,0,0,1,.375.375"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M11.625,20.25A.375.375,0,0,1,12,19.875"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12,20.625a.375.375,0,0,1-.375-.375"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M12.375,20.25a.375.375,0,0,1-.375.375"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.813,17.313a.375.375,0,0,1,.529-.024"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M17.836,17.843a.376.376,0,0,1-.023-.53"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M18.366,17.819a.375.375,0,0,1-.53.024"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M18.342,17.289a.375.375,0,0,1,.024.53"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M19.843,11.294a.376.376,0,0,1,.34-.407"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M20.25,11.634a.375.375,0,0,1-.407-.34"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M20.59,11.227a.374.374,0,0,1-.34.407"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M20.183,10.887a.375.375,0,0,1,.407.34"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.187,17.313a.375.375,0,0,0-.529-.024"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M6.164,17.843a.376.376,0,0,0,.023-.53"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M5.634,17.819a.375.375,0,0,0,.53.024"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M5.658,17.289a.375.375,0,0,0-.024.53"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M4.157,11.294a.376.376,0,0,0-.34-.407"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M3.75,11.634a.375.375,0,0,0,.407-.34"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M3.41,11.227a.374.374,0,0,0,.34.407"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path
d="M3.817,10.887a.375.375,0,0,0-.407.34"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<path d="M20.25 4.5L18 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
<path d="M6 4.5L3.75 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
<path d="M12,19.875a.375.375,0,0,1,.375.375" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M11.625,20.25A.375.375,0,0,1,12,19.875" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12,20.625a.375.375,0,0,1-.375-.375" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12.375,20.25a.375.375,0,0,1-.375.375" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17.813,17.313a.375.375,0,0,1,.529-.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17.836,17.843a.376.376,0,0,1-.023-.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18.366,17.819a.375.375,0,0,1-.53.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18.342,17.289a.375.375,0,0,1,.024.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M19.843,11.294a.376.376,0,0,1,.34-.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M20.25,11.634a.375.375,0,0,1-.407-.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M20.59,11.227a.374.374,0,0,1-.34.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M20.183,10.887a.375.375,0,0,1,.407.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6.187,17.313a.375.375,0,0,0-.529-.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6.164,17.843a.376.376,0,0,0,.023-.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.634,17.819a.375.375,0,0,0,.53.024" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.658,17.289a.375.375,0,0,0-.024.53" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.157,11.294a.376.376,0,0,0-.34-.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M3.75,11.634a.375.375,0,0,0,.407-.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M3.41,11.227a.374.374,0,0,0,.34.407" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M3.817,10.887a.375.375,0,0,0-.407.34" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M20.25 4.5L18 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6 4.5L3.75 4.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
</g>
),
[ICONS.PEACE]: (props: CustomProps) => (

2
ui/component/fileActions/view.jsx
View file

@ -112,7 +112,7 @@ export default function FileActions(props: Props) {
}
}
return (
<div className="media__actions section__actions--no-margin">
<div className="media__actions">
{ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}
<ClaimSupportButton uri={uri} fileAction />

49
ui/component/fileReactions/view.jsx
View file

@ -4,9 +4,10 @@ import * as ICONS from 'constants/icons';
import React from 'react';
import classnames from 'classnames';
import Button from 'component/button';
import RatioBar from 'component/ratioBar';
import { formatNumberWithCommas } from 'util/number';
import NudgeFloating from 'component/nudgeFloating';
import Tooltip from 'component/common/tooltip';
// import Tooltip from 'component/common/tooltip';
const LIVE_REACTION_FETCH_MS = 1000 * 45;
@ -103,27 +104,38 @@ export default function FileReactions(props: Props) {
/>
)}
<FileReaction
title={__('I like this')}
label={likeLabel}
icon={likeIcon}
isActive={myReaction === REACTION_TYPES.LIKE}
activeClassName="button--fire"
onClick={() => doReactionLike(uri)}
/>
<FileReaction
title={__('I dislike this')}
label={dislikeLabel}
icon={dislikeIcon}
isActive={myReaction === REACTION_TYPES.DISLIKE}
activeClassName="button--slime"
onClick={() => doReactionDislike(uri)}
/>
<div className={'ratio-wrapper'}>
<Button
title={__('I like this')}
requiresAuth={IS_WEB}
authSrc="filereaction_like"
className={classnames('button--file-action button-like', {
'button--fire': myReaction === REACTION_TYPES.LIKE,
})}
label={likeLabel}
iconSize={18}
icon={likeIcon}
onClick={() => doReactionLike(uri)}
/>
<Button
requiresAuth={IS_WEB}
authSrc={'filereaction_dislike'}
title={__('I dislike this')}
className={classnames('button--file-action button-dislike', {
'button--slime': myReaction === REACTION_TYPES.DISLIKE,
})}
label={dislikeLabel}
iconSize={18}
icon={dislikeIcon}
onClick={() => doReactionDislike(uri)}
/>
<RatioBar likeCount={likeCount} dislikeCount={dislikeCount} />
</div>
</>
);
}
/*
type ReactionProps = {
title: string,
label: any,
@ -152,3 +164,4 @@ const FileReaction = (reactionProps: ReactionProps) => {
</Tooltip>
);
};
*/

6
ui/component/fileRenderFloating/view.jsx
View file

@ -20,8 +20,8 @@ import AutoplayCountdown from 'component/autoplayCountdown';
// scss/init/vars.scss
// --header-height
const HEADER_HEIGHT = 64;
const HEADER_HEIGHT_MOBILE = 56;
const HEADER_HEIGHT = 60;
const HEADER_HEIGHT_MOBILE = 60;
const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100;
@ -335,7 +335,7 @@ export default function FileRenderFloating(props: Props) {
'content__viewer--floating': isFloating,
'content__viewer--inline': !isFloating,
'content__viewer--secondary': isComment,
'content__viewer--theater-mode': !isFloating && videoTheaterMode,
'content__viewer--theater-mode': !isFloating && videoTheaterMode && playingUri?.uri === primaryUri,
'content__viewer--disable-click': wasDragging,
})}
style={

2
ui/component/fileThumbnail/FreezeframeLite/styles.scss
View file

@ -57,7 +57,7 @@ $transition-duration: 300ms;
}
&.ff-responsive {
width: 100%;
max-width: 100%;
.ff-image,
.ff-canvas {

7
ui/component/header/view.jsx
View file

@ -198,13 +198,12 @@ const Header = (props: Props) => {
<span style={{ position: 'relative' }}>
<Button
aria-label={sidebarLabel}
className="header__navigationItem--icon"
className="header__navigationItem--icon button-rotate"
icon={ICONS.MENU}
aria-expanded={sidebarOpen}
onClick={() => setSidebarOpen(!sidebarOpen)}
>
{isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
</Button>
/>
{isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
</span>
)}

2
ui/component/headerProfileMenuButton/view.jsx
View file

@ -38,7 +38,7 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
})}
>
{activeChannelUrl ? (
<ChannelThumbnail uri={activeChannelUrl} small noLazyLoad />
<ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad />
) : (
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
)}

2
ui/component/livestreamChatLayout/view.jsx
View file

@ -290,7 +290,7 @@ export default function LivestreamChatLayout(props: Props) {
{chatContentToggle(
VIEW_MODES.SUPERCHAT,
<>
<CreditAmount amount={superChatsLBCAmount || 0} size={8} /> /
<CreditAmount amount={superChatsLBCAmount || 0} size={8} /> /&nbsp;
<CreditAmount amount={superChatsFiatAmount || 0} size={8} isFiat /> {__('Tipped')}
</>
)}

1
ui/component/livestreamComment/view.jsx
View file

@ -90,7 +90,6 @@ export default function LivestreamComment(props: Props) {
>
{supportAmount > 0 && (
<div className="livestreamComment__superchatBanner">
<div className="livestreamComment__superchatBanner--corner" />
<CreditAmount isFiat={isFiat} amount={supportAmount} superChat />
</div>
)}

4
ui/component/notification/view.jsx
View file

@ -79,9 +79,9 @@ export default function Notification(props: Props) {
channelUrl = notification_parameters.dynamic.channel_url;
icon = creatorIcon(channelUrl, notification_parameters?.dynamic?.channel_thumbnail);
break;
case RULE.WEEKLY_WATCH_REMINDER:
case RULE.DAILY_WATCH_AVAILABLE:
case RULE.DAILY_WATCH_REMIND:
case RULE.WEEKLY_WATCH_REMINDER:
case RULE.MISSED_OUT:
case RULE.REWARDS_APPROVAL_PROMPT:
icon = <Icon icon={ICONS.LBC} sectionIcon />;
@ -138,9 +138,9 @@ export default function Notification(props: Props) {
function getNotificationTarget() {
switch (notification_rule) {
case RULE.WEEKLY_WATCH_REMINDER:
case RULE.DAILY_WATCH_AVAILABLE:
case RULE.DAILY_WATCH_REMIND:
case RULE.WEEKLY_WATCH_REMINDER:
return `/$/${PAGES.CHANNELS_FOLLOWING}`;
case RULE.MISSED_OUT:
case RULE.REWARDS_APPROVAL_PROMPT:

5
ui/component/page/view.jsx
View file

@ -7,6 +7,7 @@ import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import classnames from 'classnames';
import Header from 'component/header';
import React from 'react';
import Wallpaper from 'component/wallpaper';
import SettingsSideNavigation from 'component/settingsSideNavigation';
import SideNavigation from 'component/sideNavigation';
import type { Node } from 'react';
@ -66,6 +67,7 @@ function Page(props: Props) {
const isMobile = useIsMobile();
const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', false);
const url = pathname.slice(1).replace(/:/g, '#');
let isOnFilePage = false;
try {
const url = pathname.slice(1).replace(/:/g, '#');
@ -85,6 +87,7 @@ function Page(props: Props) {
return (
<>
<Wallpaper uri={url} />
{!noHeader && (
<Header
authHeader={authPage}
@ -132,7 +135,7 @@ function Page(props: Props) {
'main--file-page': filePage,
'main--settings-page': settingsPage,
'main--markdown': isMarkdown,
'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream,
'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream && !isMarkdown,
'main--livestream': livestream && !chatDisabled,
'main--popout-chat': isPopoutWindow,
})}

12
ui/component/postViewer/view.jsx
View file

@ -52,17 +52,16 @@ function PostViewer(props: Props) {
return (
<div className="post">
<FileTitle uri={uri} className="post__title">
<span className="post__date">
<DateTime uri={uri} type="date" />
</span>
</FileTitle>
<FileTitle uri={uri} className="post__title" />
<div
className={classnames('post__info', {
'post__info--expanded': expand !== EXPAND.NONE,
})}
>
<span className="post__date">
<DateTime uri={uri} type="date" />
<FileViewCount uri={uri} />
</span>
<div className="post__info--grouped">
<Button
button="link"
@ -86,7 +85,6 @@ function PostViewer(props: Props) {
/>
)}
</div>
<FileViewCount uri={uri} />
</div>
{expand === EXPAND.CREDIT_DETAILS && (

3
ui/component/publishForm/view.jsx
View file

@ -583,7 +583,7 @@ function PublishForm(props: Props) {
// Editing claim uri
return (
<div className="card-stack">
<div className="card-stack uploadPage-wraper">
<ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} />
<PublishFile
@ -633,6 +633,7 @@ function PublishForm(props: Props) {
<Card actions={<SelectThumbnail livestreamdData={livestreamData} />} />
<label>{__('Tags')}</label>
<TagsSelect
suggestMature={!SIMPLE_SITE}
disableAutoFocus

4
ui/component/publishPending/view.jsx
View file

@ -27,9 +27,9 @@ const PublishPending = (props: Props) => {
return <span>{__('Uploading (%progress%%) ', { progress: progress })}</span>;
} else {
return (
<span>
<div className="confirming-change">
{__('Confirming...')} <Spinner type="small" />
</span>
</div>
);
}
};

77
ui/component/publishPrice/view.jsx
View file

@ -14,44 +14,47 @@ function PublishPrice(props: Props) {
const { contentIsFree, fee, updatePublishForm, disabled } = props;
return (
<Card
actions={
<React.Fragment>
<FormField
type="radio"
name="content_free"
label={__('Free')}
checked={contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: true })}
/>
<FormField
type="radio"
name="content_cost"
label={__('Add a price to this file')}
checked={!contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: false })}
/>
{!contentIsFree && (
<FormFieldPrice
name="content_cost_amount"
min={0}
price={fee}
onChange={newFee => updatePublishForm({ fee: newFee })}
<>
<label>{__('Price')}</label>
<Card
actions={
<React.Fragment>
<FormField
type="radio"
name="content_free"
label={__('Free')}
checked={contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: true })}
/>
)}
{fee && fee.currency !== 'LBC' && (
<p className="form-field__help">
{__(
'All content fees are charged in LBRY Credits. For alternative payment methods, the number of LBRY Credits charged will be adjusted based on the value of LBRY Credits at the time of purchase.'
)}
</p>
)}
</React.Fragment>
}
/>
<FormField
type="radio"
name="content_cost"
label={__('Add a price to this file')}
checked={!contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: false })}
/>
{!contentIsFree && (
<FormFieldPrice
name="content_cost_amount"
min={0}
price={fee}
onChange={(newFee) => updatePublishForm({ fee: newFee })}
/>
)}
{fee && fee.currency !== 'LBC' && (
<p className="form-field__help">
{__(
'All content fees are charged in LBRY Credits. For alternative payment methods, the number of LBRY Credits charged will be adjusted based on the value of LBRY Credits at the time of purchase.'
)}
</p>
)}
</React.Fragment>
}
/>
</>
);
}

6
ui/component/ratioBar/index.js Normal file
View file

@ -0,0 +1,6 @@
import { connect } from 'react-redux';
import RatioBar from './view';
const select = (state, props) => ({});
export default connect(select)(RatioBar);

25
ui/component/ratioBar/view.jsx Normal file
View file

@ -0,0 +1,25 @@
// @flow
import React from 'react';
type Props = {
likeCount: number,
dislikeCount: number,
};
const RatioBar = (props: Props) => {
const { likeCount, dislikeCount } = props;
const like = (1 / (likeCount + dislikeCount)) * likeCount;
if (like || dislikeCount) {
return (
<div className={'ratio-bar'}>
<div className={'ratio-bar-like'} style={{ flex: like }} />
<div className={'ratio-bar-dislike'} style={{ flex: 1 - like }} />
</div>
);
} else {
return <div className={'ratio-bar'} />;
}
};
export default RatioBar;

2
ui/component/recommendedContent/index.js
View file

@ -10,7 +10,7 @@ const select = (state, props) => {
const { claim_id: claimId } = claim;
const recommendedContentUris = selectRecommendedContentForUri(state, props.uri);
const nextRecommendedUri = recommendedContentUris && recommendedContentUris[0];
const metadata = makeSelectMetadataForUri(props.uri)(state);
const metadata = makeSelectMetadataForUri(props.uri)(state);
return {
claim,

18
ui/component/recommendedContent/view.jsx
View file

@ -112,18 +112,18 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
title={__('Related')}
titleActions={
signingChannel && (
<div className="recommended-content__toggles">
<div className="recommended-content__bubble">
<Button
className={classnames('button-toggle', {
'button-toggle--active': viewMode === VIEW_ALL_RELATED,
className={classnames('button-bubble', {
'button-bubble--active': viewMode === VIEW_ALL_RELATED,
})}
label={__('All')}
label={__('Related')}
onClick={() => setViewMode(VIEW_ALL_RELATED)}
/>
<Button
className={classnames('button-toggle', {
'button-toggle--active': viewMode === VIEW_MORE_FROM,
className={classnames('button-bubble', {
'button-bubble--active': viewMode === VIEW_MORE_FROM,
})}
label={__('More from %claim_name%', { claim_name: channelName })}
onClick={() => setViewMode(VIEW_MORE_FROM)}
@ -139,7 +139,11 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
loading={isSearching}
uris={recommendedContentUris}
hideMenu={isMobile}
injectedItem={SHOW_ADS && IS_WEB && !isAuthenticated && <Ads small type={'video'} triggerBlacklist={triggerBlacklist} />}
injectedItem={
SHOW_ADS &&
IS_WEB &&
!isAuthenticated && <Ads small type={'video'} triggerBlacklist={triggerBlacklist} />
}
empty={__('No related content found')}
onClick={handleRecommendationClicked}
/>

1
ui/component/repostCreate/view.jsx
View file

@ -315,6 +315,7 @@ function RepostCreate(props: Props) {
<ChannelSelector />
<Card
className="repost-wrapper"
actions={
<div>
{uri && (

1
ui/component/scheduledStreams/view.jsx
View file

@ -91,6 +91,7 @@ const ScheduledStreams = (props: Props) => {
infiniteScroll={false}
showNoSourceClaims
hideLayoutButton
// header={__('🔴 Upcoming Livestreams')}
header={<Header />}
maxClaimRender={upcomingMax}
excludeUris={liveUris}

111
ui/component/selectThumbnail/view.jsx
View file

@ -123,64 +123,67 @@ function SelectThumbnail(props: Props) {
return (
<>
{status !== THUMBNAIL_STATUSES.IN_PROGRESS && (
<div className="column">
{thumbPreview}
{publishForm && thumbUploaded ? (
<div className="column__item">
<p>{__('Upload complete.')}</p>
<div className="section__actions">
<Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
<>
<label>{__('Thumbnail')}</label>
<div className="column">
{thumbPreview}
{publishForm && thumbUploaded ? (
<div className="column__item">
<p>{__('Upload complete.')}</p>
<div className="section__actions">
<Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
</div>
</div>
</div>
) : (
<div className="column__item">
{manualInput ? (
<FormField
type="text"
name="content_thumbnail"
label="URL"
placeholder="https://images.fbi.gov/alien"
value={thumbnail}
disabled={formDisabled}
onChange={handleThumbnailChange}
/>
) : (
<FileSelector
currentPath={thumbnailPath}
label={__('Thumbnail')}
placeholder={__('Choose an enticing thumbnail')}
accept={accept}
onFileChosen={(file) =>
openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, {
file,
cb: (url) => !publishForm && updateThumbnailParams({ thumbnail_url: url }),
})
}
/>
)}
<div className="card__actions">
<Button
button="link"
label={manualInput ? __('Use thumbnail upload tool') : __('Enter a thumbnail URL')}
onClick={() =>
updatePublishForm({
uploadThumbnailStatus: manualInput ? THUMBNAIL_STATUSES.READY : THUMBNAIL_STATUSES.MANUAL,
})
}
/>
{status === THUMBNAIL_STATUSES.READY && isSupportedVideo && IS_WEB && (
// Disabled on desktop until this is resolved
// https://github.com/electron/electron/issues/20750#issuecomment-709505902
<Button
button="link"
label={__('Take a snapshot from your video')}
onClick={() => openModal(MODALS.AUTO_GENERATE_THUMBNAIL, { filePath: actualFilePath })}
) : (
<div className="column__item">
{manualInput ? (
<FormField
type="text"
name="content_thumbnail"
label="URL"
placeholder="https://images.fbi.gov/alien"
value={thumbnail}
disabled={formDisabled}
onChange={handleThumbnailChange}
/>
) : (
<FileSelector
currentPath={thumbnailPath}
label={__('Thumbnail')}
placeholder={__('Choose an enticing thumbnail')}
accept={accept}
onFileChosen={(file) =>
openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, {
file,
cb: (url) => !publishForm && updateThumbnailParams({ thumbnail_url: url }),
})
}
/>
)}
<div className="card__actions">
<Button
button="link"
label={manualInput ? __('Use thumbnail upload tool') : __('Enter a thumbnail URL')}
onClick={() =>
updatePublishForm({
uploadThumbnailStatus: manualInput ? THUMBNAIL_STATUSES.READY : THUMBNAIL_STATUSES.MANUAL,
})
}
/>
{status === THUMBNAIL_STATUSES.READY && isSupportedVideo && IS_WEB && (
// Disabled on desktop until this is resolved
// https://github.com/electron/electron/issues/20750#issuecomment-709505902
<Button
button="link"
label={__('Take a snapshot from your video')}
onClick={() => openModal(MODALS.AUTO_GENERATE_THUMBNAIL, { filePath: actualFilePath })}
/>
)}
</div>
</div>
</div>
)}
</div>
)}
</div>
</>
)}
{status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}

2
ui/component/settingsRow/view.jsx
View file

@ -17,7 +17,7 @@ export default function SettingsRow(props: Props) {
<div
className={classnames('card__main-actions settings__row', {
'section__actions--between': !multirow,
'opacity-40': disabled,
'opacity-30': disabled,
})}
>
<div className="settings__row--title">

4
ui/component/sideNavigation/view.jsx
View file

@ -11,11 +11,12 @@ import NotificationBubble from 'component/notificationBubble';
import DebouncedInput from 'component/common/debounced-input';
import I18nMessage from 'component/i18nMessage';
import ChannelThumbnail from 'component/channelThumbnail';
import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
import { useIsMobile, useIsLargeScreen, isTouch } from 'effects/use-screensize';
import { GetLinksData } from 'util/buildHomepage';
import { DOMAIN, ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
const FOLLOWED_ITEM_INITIAL_LIMIT = 10;
const touch = isTouch();
type SideNavLink = {
title: string,
@ -448,6 +449,7 @@ function SideNavigation(props: Props) {
'navigation--micro': showMicroMenu,
'navigation--push': showPushMenu,
'navigation-file-page-and-mobile': hideMenuFromView,
'navigation-touch': touch,
})}
>
{(!canDisposeMenu || sidebarOpen) && (

4
ui/component/subscribeButton/view.jsx
View file

@ -73,7 +73,7 @@ export default function SubscribeButton(props: Props) {
if (isSubscribed && !permanentUrl && rawChannelName) {
return (
<div className="button-group">
<div className="button-group button-group-subscribed">
<Button
ref={buttonRef}
iconColor="red"
@ -105,6 +105,7 @@ export default function SubscribeButton(props: Props) {
<Button
ref={buttonRef}
iconColor="red"
className={isSubscribed ? 'button-following' : ''}
largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : isSubscribed ? ICONS.SUBSCRIBED : ICONS.SUBSCRIBE}
button={'alt'}
@ -129,6 +130,7 @@ export default function SubscribeButton(props: Props) {
<Button
button="alt"
icon={notificationsDisabled ? ICONS.BELL : ICONS.BELL_ON}
className={isSubscribed ? 'button-following' : ''}
aria-label={notificationsDisabled ? __('Turn on notifications') : __('Turn off notifications')}
onClick={() => {
const newNotificationsDisabled = !notificationsDisabled;

6
ui/component/transactionListTable/view.jsx
View file

@ -33,10 +33,10 @@ function TransactionListTable(props: Props) {
<table className="table table--transactions">
<thead>
<tr>
<th>{__('Date')}</th>
<th>{<>{__('Type')}</>}</th>
<th className="table-column-lbc-date">{__('Date')}</th>
<th className="table-column-lbc-type">{<>{__('Type')}</>}</th>
<th>{__('Details')} </th>
<th>{__('Transaction')}</th>
<th className="table-column-lbc-transaction">{__('Transaction')}</th>
<th className="table__item--align-right">
<LbcSymbol size={18} />
</th>

8
ui/component/userVerify/view.jsx
View file

@ -151,7 +151,13 @@ class UserVerify extends React.PureComponent<Props> {
<p>{__('You will be asked to provide proof of identity.')}</p>
</>
}
actions={<Button href="https://verification.odysee.com" button="primary" label={__('Join the Odysee Rewards Discord')} />}
actions={
<Button
href="https://verification.odysee.com"
button="primary"
label={__('Join the Odysee Rewards Discord')}
/>
}
/>
<div className="section__divider">

4
ui/component/viewers/videoViewer/internal/ads.js
View file

@ -83,8 +83,8 @@ function runAds(internalFeatureEnabled, allowPreRoll, player, embedded) {
`&hidecontrols=false`;
// always have ads on if internal feature is on,
// otherwise if not authed, roll for 20% to see an ad
// allowPreRoll currently means unauthenticated (don't show to logged in users)
// otherwise if not authed, roll for 20% to see an ad
// allowPreRoll currently means unauthenticated (don't show to logged in users)
const shouldShowAnAd = internalFeatureEnabled || (!embedded && allowPreRoll && hitsAtFiftyPercentChance);
if (shouldShowAnAd && browserIsChrome && !IS_MOBILE) {

2109
ui/component/viewers/videoViewer/internal/plugins/canAutoplay.js
View file

File diff suppressed because it is too large Load diff

8
ui/component/viewers/videoViewer/internal/videojs-events.jsx
View file

@ -50,7 +50,7 @@ const VideoJsEvents = ({
uri: string,
doAnalyticsView: (string, number) => any,
claimRewards: () => void,
playerServerRef: any
playerServerRef: any,
}) => {
/**
* Analytics functionality that is run on first video start
@ -288,14 +288,14 @@ const VideoJsEvents = ({
// custom tracking plugin, event used for watchman data, and marking view/getting rewards
player.on('tracking:firstplay', doTrackingFirstPlay);
// hide forcing control bar show
player.on('canplaythrough', function() {
setTimeout(function() {
player.on('canplaythrough', function () {
setTimeout(function () {
// $FlowFixMe
const vjsControlBar = document.querySelector('.vjs-control-bar');
if (vjsControlBar) vjsControlBar.style.removeProperty('opacity');
}, 1000 * 3); // wait 3 seconds to hit control bar
});
player.on('playing', function() {
player.on('playing', function () {
// $FlowFixMe
document.querySelector('.vjs-big-play-button').style.setProperty('display', 'none', 'important');
});

6
ui/component/viewers/videoViewer/internal/videojs-functions.jsx
View file

@ -1,9 +1,5 @@
// @flow
const VideoJsFunctions = ({
isAudio,
}: {
isAudio: boolean,
}) => {
const VideoJsFunctions = ({ isAudio }: { isAudio: boolean }) => {
// TODO: can remove this function as well
// Create the video DOM element and wrapper
function createVideoPlayerDOM(container: any) {

12
ui/component/walletFiatAccountHistory/view.jsx
View file

@ -30,12 +30,12 @@ const WalletBalance = (props: Props) => {
<thead>
<tr>
<th className="date-header">{__('Date')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th>
<th>{__('Tip Location')}</th>
<th>{__('Amount (USD)')} </th>
<th>{__('Processing Fee')}</th>
<th>{__('Odysee Fee')}</th>
<th>{__('Received Amount')}</th>
<th className="channelName-header">{<>{__('Receiving Channel Name')}</>}</th>
<th className="location-header">{__('Tip Location')}</th>
<th className="amount-header">{__('Amount (USD)')} </th>
<th className="processingFee-header">{__('Processing Fee')}</th>
<th className="odyseeFee-header">{__('Odysee Fee')}</th>
<th className="receivedAmount-header">{__('Received Amount')}</th>
</tr>
</thead>
<tbody>

10
ui/component/walletFiatPaymentHistory/view.jsx
View file

@ -51,11 +51,11 @@ const WalletBalance = (props: Props) => {
<thead>
<tr>
<th className="date-header">{__('Date')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th>
<th>{__('Tip Location')}</th>
<th>{__('Amount (USD)')} </th>
<th>{__('Card Last 4')}</th>
<th>{__('Anonymous')}</th>
<th className="channelName-header">{<>{__('Receiving Channel Name')}</>}</th>
<th className="location-header">{__('Tip Location')}</th>
<th className="amount-header">{__('Amount (USD)')} </th>
<th className="card-header">{__('Card Last 4')}</th>
<th className="anonymous-header">{__('Anonymous')}</th>
</tr>
</thead>
{/* list data for transactions */}

16
ui/component/wallpaper/index.js Normal file
View file

@ -0,0 +1,16 @@
import { connect } from 'react-redux';
// import { makeSelectCoverForUri, makeSelectAvatarForUri } from 'redux/selectors/claims';
import Wallpaper from './view';
/*
const select = (state, props) => {
if (props.uri && (props.uri.indexOf('@') !== -1 || props.uri.indexOf('#') !== -1)) {
return {
cover: makeSelectCoverForUri(props.uri)(state),
avatar: makeSelectAvatarForUri(props.uri)(state),
};
} else return {};
};
*/
export default connect()(Wallpaper);

235
ui/component/wallpaper/view.jsx Normal file
View file

@ -0,0 +1,235 @@
// @flow
import React from 'react';
// import { resetColors } from 'util/theme';
type Props = {
// uri: ?string,
// cover: ?string,
// avatar: ?string,
reset: ?boolean,
};
const Wallpaper = (props: Props) => {
// const { cover, avatar } = props;
/*
if (avatar) {
toDataUrl(avatar, function (image) {
if (image) {
let threshold = 155;
getAverageRGB(image, function (rgb) {
let brightness = Math.round((parseInt(rgb.r) * 299 + parseInt(rgb.g) * 587 + parseInt(rgb.b) * 114) / 1000);
if (colorCompare(rgb) < 15) {
rgb = colorMixer(rgb, brightness > threshold ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 }, 0.7);
}
// Tune link color in light theme
if (document.documentElement !== null) {
if (getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000') {
let link = colorMixer(
rgb,
brightness > threshold ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 },
0.8
);
document.documentElement !== null &&
document.documentElement.style.setProperty(
'--color-link',
'rgba(' + link.r + ',' + link.g + ',' + link.b + ', 1)'
);
} else {
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-link', 'var(--color-primary)');
}
}
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-primary-dynamic', rgb.r + ',' + rgb.g + ',' + rgb.b);
document.documentElement !== null &&
document.documentElement.style.setProperty(
'--color-primary-contrast',
brightness > 155 ? 'black' : 'white'
);
if (document.documentElement !== null) {
threshold =
getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000' ? 70 : 155;
}
let rgbs = colorMixer(rgb, brightness > threshold ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 }, 0.6);
let brightnesss = Math.round(
(parseInt(rgbs.r) * 299 + parseInt(rgbs.g) * 587 + parseInt(rgbs.b) * 114) / 1000
);
document.documentElement !== null &&
document.documentElement.style.setProperty(
'--color-secondary-dynamic',
rgbs.r + ',' + rgbs.g + ',' + rgbs.b
);
document.documentElement !== null &&
document.documentElement.style.setProperty(
'--color-secondary-contrast',
brightnesss > 155 ? 'black' : 'white'
);
});
}
});
} else {
resetColors(true);
}
function toDataUrl(url, callback) {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
const reader = new FileReader();
reader.onloadend = function () {
const image = new Image();
image.src = reader.result.toString();
image.onload = () => callback(image);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
function getAverageRGB(img, callback) {
const blockSize = 5;
const defaultRGB = { r: 0, g: 0, b: 0 };
const canvas = document.createElement('canvas');
const context = canvas.getContext && canvas.getContext('2d');
const rgb = { r: 0, g: 0, b: 0 };
const rgb_gray = { r: 0, g: 0, b: 0 };
const blackwhite = { r: 0, g: 0, b: 0 };
let count = 0;
let count_gray = 0;
let count_off = 0;
let i = -4;
let data;
let length;
if (!context) {
return defaultRGB;
}
const height = (canvas.height = img.naturalHeight || img.offsetHeight || img.height);
const width = (canvas.width = img.naturalWidth || img.offsetWidth || img.width);
context.drawImage(img, 0, 0);
try {
data = context.getImageData(0, 0, width, height);
} catch (e) {
return defaultRGB;
}
length = data.data.length;
while ((i += blockSize * 4) < length) {
if (shadeCheck(data.data, i, 75)) {
++count;
rgb.r += data.data[i];
rgb.g += data.data[i + 1];
rgb.b += data.data[i + 2];
} else if (shadeCheck(data.data, i, 25)) {
++count_gray;
rgb_gray.r += data.data[i];
rgb_gray.g += data.data[i + 1];
rgb_gray.b += data.data[i + 2];
} else {
++count_off;
blackwhite.r += data.data[i];
blackwhite.g += data.data[i + 1];
blackwhite.b += data.data[i + 2];
}
}
if ((100 / (count + count_gray + count_off)) * count > 3) {
rgb.r = ~~(rgb.r / count);
rgb.g = ~~(rgb.g / count);
rgb.b = ~~(rgb.b / count);
} else if (count_gray > count_off) {
rgb.r = ~~(rgb_gray.r / count_gray);
rgb.g = ~~(rgb_gray.g / count_gray);
rgb.b = ~~(rgb_gray.b / count_gray);
} else {
let shade = 255;
if (document.documentElement !== null) {
shade = getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000' ? 0 : 255;
}
rgb.r = shade;
rgb.g = shade;
rgb.b = shade;
}
callback(rgb);
}
function shadeCheck(data, i, threshold) {
let white = 0;
if (data[i] > 255 - threshold) white = white + 1;
if (data[i + 1] > 255 - threshold) white = white + 1;
if (data[i + 2] > 255 - threshold) white = white + 1;
let black = 0;
if (data[i] < threshold) black = black + 1;
if (data[i + 1] < threshold) black = black + 1;
if (data[i + 2] < threshold) black = black + 1;
if (white > 2 || black > 2) return false;
else return true;
}
function colorChannelMixer(a, b, mix) {
let channelA = a * mix;
let channelB = b * (1 - mix);
return parseInt(channelA + channelB);
}
function colorMixer(rgbA, rgbB, mix) {
let r = colorChannelMixer(rgbA.r, rgbB.r, mix);
let g = colorChannelMixer(rgbA.g, rgbB.g, mix);
let b = colorChannelMixer(rgbA.b, rgbB.b, mix);
return { r: r, g: g, b: b };
}
function colorCompare(rgb) {
let bg = 0;
if (document.documentElement !== null) {
bg = getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000' ? 221 : 32;
}
let r = Math.abs(rgb.r - bg);
let g = Math.abs(rgb.g - bg);
let b = Math.abs(rgb.b - bg);
r = r / 255;
g = g / 255;
b = b / 255;
return ((r + g + b) / 3) * 100;
}
*/
/*
if (cover) {
return (
cover && (
<>
<div className={'background-image'} style={{ backgroundImage: 'url("' + cover + '")' }} />
<div className={'theme'} />
</>
)
);
} else { */
return (
<>
<div
className={'background-image'}
style={{
backgroundImage:
'url("https://thumbnails.odysee.com/optimize/plain/https://cdn.lbryplayer.xyz/speech/2e9a7dc6c99f0fb9.jpg")',
}}
/>
<div className={'theme'} />
</>
);
// }
};
export default Wallpaper;

2
ui/component/webUploadList/internal/web-upload-item.jsx
View file

@ -167,7 +167,7 @@ export default function WebUploadItem(props: Props) {
}, [locked, showFileSelector]);
return (
<li className={'web-upload-item claim-preview claim-preview--padded claim-preview--inactive card--inline'}>
<li className={'web-upload-item claim-preview claim-preview--inactive card--inline'}>
<FileThumbnail thumbnail={params.thumbnail_url} />
<div className={'claim-preview-metadata'}>
<div className="claim-preview-info">

2
ui/component/wunderbarSuggestions/view.jsx
View file

@ -309,7 +309,7 @@ export default function WunderBarSuggestions(props: Props) {
className={classnames('wunderbar__wrapper', { 'wunderbar__wrapper--mobile': isMobile })}
onSubmit={() => handleSelect(term)}
>
<Combobox className="wunderbar" onSelect={handleSelect}>
<Combobox className="wunderbar" onSelect={handleSelect} openOnFocus>
<Icon icon={ICONS.SEARCH} />
<ComboboxInput
ref={inputRef}

2
ui/constants/claim_search.js
View file

@ -40,7 +40,7 @@ export const ORDER_BY_NEW_ASC = 'new_asc';
export const ORDER_BY_NEW_ASC_VALUE = ['^release_time'];
// @note: These are used to build the default controls available on claim listings.
export const ORDER_BY_TYPES = [ORDER_BY_TRENDING, ORDER_BY_NEW, ORDER_BY_TOP];
export const ORDER_BY_TYPES = [ORDER_BY_NEW, ORDER_BY_TRENDING, ORDER_BY_TOP];
export const DURATION_SHORT = 'short';
export const DURATION_LONG = 'long';

5
ui/constants/icons.js
View file

@ -150,10 +150,15 @@ export const CREATOR_LIKE = 'CreatorLike';
export const CHEF = 'Chef';
export const ANONYMOUS = 'Anonymous';
export const CHANNEL_LEVEL_1 = 'ChannelLevel1';
export const CHANNEL_LEVEL_1_B = 'ChannelLevel1B';
export const CHANNEL_LEVEL_2 = 'ChannelLevel2';
export const CHANNEL_LEVEL_2_B = 'ChannelLevel2B';
export const CHANNEL_LEVEL_3 = 'ChannelLevel3';
export const CHANNEL_LEVEL_3_B = 'ChannelLevel3B';
export const CHANNEL_LEVEL_4 = 'ChannelLevel4';
export const CHANNEL_LEVEL_4_B = 'ChannelLevel4B';
export const CHANNEL_LEVEL_5 = 'ChannelLevel5';
export const CHANNEL_LEVEL_5_B = 'ChannelLevel5B';
export const MOVIES = 'Movies';
export const WILD_WEST = 'WildWest';
export const UNIVERSE = 'Universe';

2
ui/constants/notifications.js
View file

@ -5,9 +5,9 @@ export const RULE = {
FIAT_TIP: 'fiat_tip',
NEW_CONTENT: 'new_content',
NEW_LIVESTREAM: 'new_livestream',
WEEKLY_WATCH_REMINDER: 'weekly_watch_reminder',
DAILY_WATCH_AVAILABLE: 'daily_watch_available',
DAILY_WATCH_REMIND: 'daily_watch_remind',
WEEKLY_WATCH_REMINDER: 'weekly_watch_reminder',
MISSED_OUT: 'missed_out',
REWARDS_APPROVAL_PROMPT: 'rewards_approval_prompt',
CREATOR_SUBSCRIBER: 'creator_subscriber',

1
ui/constants/tags.js
View file

@ -15,6 +15,7 @@ export const DEFAULT_FOLLOWED_TAGS = [
export const INTERNAL_TAG_PREFIX = 'c:';
// export const CHANNEL_COLOR_TAG = 'c:color';
export const DISABLE_COMMENTS_TAG = 'c:disable-comments';
export const DISABLE_SUPPORT_TAG = 'disable-support';
export const PREFERENCE_EMBED = 'c:preference-embed';

4
ui/effects/use-persisted-state.js
View file

@ -7,7 +7,7 @@ function getSetAllValues(key, setValue) {
// If no key just return the normal setValue function
return setValue;
}
return value => listeners[key].forEach(fn => fn(value));
return (value) => listeners[key].forEach((fn) => fn(value));
}
export default function usePersistedState(key, firstTimeDefault) {
@ -58,7 +58,7 @@ export default function usePersistedState(key, firstTimeDefault) {
return () => {
if (key) {
// remove hook on unmount
listeners[key] = listeners[key].filter(listener => listener !== setValue);
listeners[key] = listeners[key].filter((listener) => listener !== setValue);
}
};
}, [key, value, localStorageAvailable]);

4
ui/effects/use-screensize.js
View file

@ -58,3 +58,7 @@ export function useIsMediumScreen() {
export function useIsLargeScreen() {
return useHasWindowWidthChangedEnough((windowSize) => windowSize > 1600);
}
export function isTouch() {
return 'ontouchstart' in window || 'onmsgesturechange' in window;
}

6
ui/page/channel/view.jsx
View file

@ -19,7 +19,6 @@ import ChannelEdit from 'component/channelEdit';
import classnames from 'classnames';
import HelpLink from 'component/common/help-link';
import ClaimSupportButton from 'component/claimSupportButton';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
import ClaimMenuList from 'component/claimMenuList';
import OptimizedImage from 'component/optimizedImage';
import Yrbl from 'component/yrbl';
@ -208,7 +207,7 @@ function ChannelPage(props: Props) {
}
return (
<Page noFooter>
<Page className="channelPage-wrapper" noFooter>
<header className="channel-cover">
<div className="channel__quick-actions">
{isMyYouTubeChannel && (
@ -228,12 +227,11 @@ function ChannelPage(props: Props) {
{cover && <img className={classnames('channel-cover__custom')} src={PlaceholderTx} />}
{cover && <OptimizedImage className={classnames('channel-cover__custom')} src={cover} objectFit="cover" />}
<div className="channel__primary-info">
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs hideStakedIndicator />
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs />
<h1 className="channel__title">
<TruncatedText lines={2} showTooltip>
{title || (channelName && '@' + channelName)}
</TruncatedText>
<ChannelStakedIndicator uri={uri} large />
</h1>
<div className="channel__meta">
<Tooltip title={formattedSubCount} followCursor placement="top">

2
ui/page/channels/view.jsx
View file

@ -45,7 +45,7 @@ export default function ChannelsPage(props: Props) {
}, [setRewardData]);
return (
<Page>
<Page className="channelsPage-wrapper">
<div className="card-stack">
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}

2
ui/page/channelsFollowingDiscover/view.jsx
View file

@ -98,7 +98,7 @@ function ChannelsFollowingDiscover(props: Props) {
});
return (
<Page>
<Page className="discoverPage-wrapper">
{!SIMPLE_SITE &&
rowDataWithGenericOptions.map(({ title, link, help, options = {} }) => (
<div key={title} className="claim-grid__wrapper">

3
ui/page/collection/view.jsx
View file

@ -221,7 +221,8 @@ export default function CollectionPage(props: Props) {
if (urlsReady) {
return (
<Page>
<Page className="playlistPage-wrapper">
{editing}
<div className={classnames('section card-stack')}>
{info}

2
ui/page/fileListPublished/view.jsx
View file

@ -117,7 +117,7 @@ function FileListPublished(props: Props) {
)}
<Button
icon={ICONS.PUBLISH}
button="secondary"
button="primary"
label={__('Upload')}
navigate={`/$/${PAGES.UPLOAD}`}
onClick={() => clearPublish()}

2
ui/page/home/view.jsx
View file

@ -143,7 +143,7 @@ function HomePage(props: Props) {
const scheduledStreamsLoaded = (total) => setHasScheduledStreams(total > 0);
return (
<Page fullWidthPage>
<Page className="homePage-wrapper" fullWidthPage>
{!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (
<div className="notice-message">
<h1 className="section__title">

2
ui/page/lists/view.jsx
View file

@ -7,7 +7,7 @@ import Icon from 'component/common/icon';
function ListsPage() {
return (
<Page>
<Page className="playlistPage-wrapper">
<label className="claim-list__header-label">
<span>
<Icon icon={ICONS.STACK} size={10} />

2
ui/page/livestream/view.jsx
View file

@ -155,7 +155,7 @@ export default function LivestreamPage(props: Props) {
return (
<Page
className="file-page"
className="file-page scheduledLivestream-wrapper"
noFooter
livestream
chatDisabled={hideComments}

2
ui/page/search/view.jsx
View file

@ -82,7 +82,7 @@ export default function SearchPage(props: Props) {
}
return (
<Page>
<Page className="searchPage-wrapper">
<section className="search">
{urlQuery && (
<>

2
ui/page/signIn/view.jsx
View file

@ -5,7 +5,7 @@ import Page from 'component/page';
export default function SignInPage() {
return (
<Page authPage>
<Page authPage noFooter>
<UserSignIn />
</Page>
);

2
ui/page/signInVerify/view.jsx
View file

@ -88,7 +88,7 @@ function SignInVerifyPage(props: Props) {
}
return (
<Page authPage>
<Page authPage noFooter>
<div className="main__sign-up">
<Card
title={isAuthenticationSuccess ? __('Log in success!') : __('Log in')}

2
ui/page/signUp/view.jsx
View file

@ -5,7 +5,7 @@ import Page from 'component/page';
export default function SignUpPage() {
return (
<Page authPage>
<Page authPage noFooter>
<UserSignUp />
</Page>
);

2
ui/page/top/view.jsx
View file

@ -22,7 +22,7 @@ function TopPage(props: Props) {
// if the query was actually '@name', still offer repost for 'name'
const queryName = name[0] === '@' ? name.slice(1) : name;
return (
<Page>
<Page className="topPage-wrapper">
<SearchTopClaim query={name} hideLink setChannelActive={setChannelActive} />
<ClaimListDiscover
name={channelActive ? `@${queryName}` : queryName}

2
ui/page/wallet/view.jsx
View file

@ -74,7 +74,7 @@ const WalletPage = (props: Props) => {
return (
<>
{/* @if TARGET='web' */}
<Page>
<Page className="transactionsPage-wrapper">
<Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page">
<Tab>{__('Balance')}</Tab>

4
ui/redux/reducers/settings.js
View file

@ -40,8 +40,8 @@ const defaultState = {
// UI
[SETTINGS.LANGUAGE]: null,
[SETTINGS.SEARCH_IN_LANGUAGE]: false,
[SETTINGS.THEME]: __('light'),
[SETTINGS.THEMES]: [__('light'), __('dark')],
[SETTINGS.THEME]: __('dark'),
[SETTINGS.THEMES]: [__('dark'), __('light')],
[SETTINGS.HOMEPAGE]: null,
[SETTINGS.HIDE_SPLASH_ANIMATION]: false,
[SETTINGS.HIDE_BALANCE]: false,

25
ui/redux/selectors/claims.js
View file

@ -392,8 +392,29 @@ export const selectThumbnailForUri = createCachedSelector(selectClaimForUri, (cl
export const makeSelectCoverForUri = (uri: string) =>
createSelector(makeSelectClaimForUri(uri), (claim) => {
const cover = claim && claim.value && claim.value.cover;
return cover && cover.url ? cover.url.trim().replace(/^http:\/\//i, 'https://') : undefined;
if (claim && claim.value.cover) {
const cover = claim && claim.value && claim.value.cover;
return cover && cover.url ? cover.url.trim().replace(/^http:\/\//i, 'https://') : undefined;
} else {
const cover = claim && claim.signing_channel && claim.signing_channel.value && claim.signing_channel.value.cover;
return cover && cover.url ? cover.url.trim().replace(/^http:\/\//i, 'https://') : undefined;
}
});
export const makeSelectAvatarForUri = (uri: string) =>
createSelector(makeSelectClaimForUri(uri), (claim) => {
if (claim && claim.value.cover) {
const avatar = claim && claim.value && claim.value.thumbnail && claim.value.thumbnail;
return avatar && avatar.url ? avatar.url.trim().replace(/^http:\/\//i, 'https://') : undefined;
} else {
const avatar =
claim &&
claim.signing_channel &&
claim.signing_channel.value &&
claim.signing_channel.value.thumbnail &&
claim.signing_channel.value.thumbnail;
return avatar && avatar.url ? avatar.url.trim().replace(/^http:\/\//i, 'https://') : false;
}
});
export const selectIsFetchingClaimListMine = (state: State) => selectState(state).isFetchingClaimListMine;

1
ui/scss/all.scss
View file

@ -18,6 +18,7 @@
@import 'component/_textarea-suggestions';
@import 'component/claim-list';
@import 'component/collection';
@import 'component/color-picker';
@import 'component/comments';
@import 'component/content';
@import 'component/dat-gui';

5
ui/scss/component/_ads.scss
View file

@ -18,15 +18,16 @@
// Inline Video Ads
.ads__claim-item {
border-bottom: 1px solid var(--color-border);
margin-top: var(--spacing-m);
padding: var(--spacing-m);
background-color: var(--color-ads-background);
//display: flex;
border-radius: var(--border-radius);
flex-direction: row;
flex-wrap: wrap;
width: 100%;
.ad__container {
width: 358px;
width: 314px;
height: 201px;
}

8
ui/scss/component/_animation.scss
View file

@ -70,11 +70,13 @@
@keyframes menu-animate-in {
0% {
transform: scaleY(0);
opacity: 0;
//transform: scaleZ(0);
transform: scale(1, 0);
opacity: 1;
}
100% {
transform: scaleY(1);
// transform: scaleZ(1);
transform: scaleZ(1, 1);
opacity: 1;
}
}

21
ui/scss/component/_block-list.scss
View file

@ -1,6 +1,18 @@
.block-list {
.claim-preview__wrapper--channel {
.button--no-style {
.button__content {
align-items: unset;
}
}
}
}
.block-list--moderator {
.button__content {
align-items: flex-start;
.button--no-style {
.button__content {
align-items: flex-start;
}
}
.section__actions {
@ -10,6 +22,9 @@
.block-list--delegator {
padding: var(--spacing-s);
background-color: rgba(var(--color-background-base), 0.6);
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
.button--alt,
.button--secondary {
@ -36,7 +51,7 @@
}
.section {
margin-left: var(--spacing-m);
// margin-left: var(--spacing-m);
}
label {

465
ui/scss/component/_button.scss
View file

@ -10,10 +10,7 @@
.button--secondary,
.button--alt,
.button--link {
border-radius: var(--border-radius);
&:focus {
@include focus;
z-index: 2; // Ensure focus box-shadow is always visible on every button side
}
}
@ -23,64 +20,111 @@
.button--alt {
height: var(--height-button);
border-radius: var(--border-radius);
padding: var(--spacing-s) var(--spacing-m);
line-height: 1.2;
// padding: var(--spacing-s) var(--spacing-m);
padding: 0 var(--spacing-m);
line-height: 1.2em;
font-weight: var(--font-weight-bold);
.button__label {
// height:1em;
margin-top: 2px;
}
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
}
}
.button--primary {
background-color: var(--color-button-primary-bg);
top: -1px;
background-color: var(--color-primary) !important;
.button__label {
color: var(--color-button-primary-text);
color: var(--color-primary-contrast);
}
.icon {
stroke: var(--color-button-primary-text);
}
&:hover {
color: var(--color-button-primary-hover-text);
background-color: var(--color-button-primary-bg-hover);
color: var(--color-primary-contrast);
}
.credit-amount {
color: var(--color-button-primary-text);
color: var(--color-primary-contrast);
.icon {
margin-left: 3px;
margin-right: 2px;
margin-right: 3px;
}
}
&:hover {
.icon {
stroke: var(--color-primary-contrast) !important;
}
}
&:focus-visible {
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
.button__label {
color: var(--color-text) !important;
}
.icon {
stroke: var(--color-text) !important;
}
}
}
.button--secondary {
background-color: var(--color-button-secondary-bg);
border: 1px solid var(--color-button-secondary-border);
background-color: var(--color-button-secondary-bg) !important;
.button__label {
color: var(--color-button-secondary-text);
color: var(--color-button-secondary-text) !important;
}
.icon {
stroke: var(--color-button-secondary-text);
stroke: var(--color-button-secondary-text) !important;
}
&:hover {
background-color: var(--color-button-secondary-bg-hover);
background-color: var(--color-button-secondary-bg-hover) !important;
.button__label {
color: var(--color-button-secondary-text-hover) !important;
}
.icon {
stroke: var(--color-button-secondary-text-hover) !important;
}
}
&:focus-visible {
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
.button__label {
color: var(--color-text) !important;
}
.icon {
stroke: var(--color-text) !important;
}
}
}
.button--alt {
background-color: var(--color-button-alt-bg);
color: var(--color-button-alt-text);
&:hover {
background-color: var(--color-button-alt-bg-hover);
color: var(--color-button-alt-text-hover);
}
}
a.button--alt {
@media (max-width: $breakpoint-small) {
.button__label {
div:first-of-type {
top: 23% !important;
}
}
}
}
@ -94,12 +138,25 @@
background-color: var(--color-primary);
&:hover {
background-color: var(--color-button-primary-bg-hover);
background-color: var(--color-button-secondary-bg-hover);
&.button--play {
background-color: var(--color-primary);
opacity: 1;
}
}
&.button--play {
// border: 2px solid black;
// background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='black' stroke-width='1' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
background-position: calc(50% + 0.1rem) center;
opacity: 0.95;
transition: opacity 0.2s;
&:hover {
opacity: 1;
transition: opacity 0s;
}
}
&.button--view {
@ -180,7 +237,7 @@
order: 1;
width: 24px;
height: 14px;
border-radius: var(--border-radius);
border-radius: 8px;
background: var(--color-gray-4);
transition: background 0.2s;
}
@ -198,7 +255,7 @@
width: 14px;
background: var(--color-white);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
border-radius: var(--border-radius);
border-radius: 50%;
transition: transform 0.2s;
}
@ -208,12 +265,10 @@
.button--link {
color: var(--color-link);
transition: color 0.2s;
word-break: break-word;
font-weight: var(--font-weight-bold);
&:hover {
text-decoration: underline;
color: var(--color-link-hover);
}
}
@ -225,21 +280,30 @@
.button--uri-indicator {
@extend .button--link;
color: var(--color-text-subtitle);
color: var(--color-text);
max-width: 100%;
text-align: left;
transition: color 0.2s;
.channel-name {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: var(--font-xsmall);
color: rgba(var(--color-text-base), 0.6);
}
.markdown-preview & {
height: initial;
vertical-align: initial;
}
&:hover {
color: var(--color-primary);
.channel-name {
color: var(--color-text);
}
}
}
.button--close {
@ -259,21 +323,22 @@
}
&:hover {
color: var(--color-button-primary-text);
background-color: var(--color-button-primary-bg);
}
&:focus {
@include focus;
color: var(--color-primary-contrast);
background-color: var(--color-primary);
}
@media (max-width: $breakpoint-small) {
padding: 0.8rem 0.8rem;
padding: 0.7rem 0.2rem;
top: var(--spacing-s);
right: var(--spacing-xxs);
&:hover {
background-color: unset;
}
}
}
.button--header-close {
background-color: var(--color-primary-alt);
background-color: var(--color-secondary);
padding: var(--spacing-s);
}
@ -286,13 +351,18 @@
.button--file-action {
@extend .button--alt;
color: var(--color-text);
background-color: transparent;
margin-right: var(--spacing-m);
padding: 0 var(--spacing-xxs);
@media (max-width: $breakpoint-small) {
padding: 0 0;
}
.icon {
&:not(.color-override) {
stroke: #777;
stroke: var(--color-text);
}
}
@ -305,23 +375,36 @@
}
&:hover {
background-color: var(--color-button-alt-bg);
.icon {
stroke: var(--color-link);
}
.button__label {
color: var(--color-link);
}
}
}
&:focus {
box-shadow: none;
background-color: var(--color-button-alt-bg);
[aria-expanded='true'].button--file-action {
background-color: var(--color-header-background);
.icon {
stroke: var(--color-primary);
}
}
.button--file-action--menu {
@extend .button--file-action;
}
[aria-expanded='true'].button--file-action--menu {
background-color: var(--color-header-background) !important;
}
.button--fire {
color: var(--color-fire);
position: relative;
.button__content {
.button__label {
color: var(--color-fire) !important;
}
}
path {
stroke: var(--color-fire-outside);
}
@ -476,7 +559,11 @@
}
.button--slime {
color: var(--color-slime);
.button__content {
.button__label {
color: var(--color-slime) !important;
}
}
}
.button__slime-drop {
@ -583,12 +670,31 @@ svg + .button__label {
padding: 0 var(--spacing-m);
height: var(--height-button);
font-size: var(--font-base);
border: 1px solid var(--color-border);
border-left-width: 0;
border-radius: 0;
margin: 0;
background-color: var(--color-card-background);
color: var(--color-text);
color: var(--color-button-toggle-text) !important;
background-color: var(--color-button-toggle-bg) !important;
// box-shadow: 0px 0px 0px 2px rgba(var(--color-header-background-base), 1) inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.icon {
// margin-bottom:-4px;
}
&:hover:not(.button-toggle--active) {
background-color: var(--color-button-toggle-bg-hover) !important;
.button__label {
color: var(--color-button-toggle-text-hover);
}
.icon {
stroke: var(--color-button-toggle-text-hover) !important;
}
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-m) var(--spacing-s);
@ -600,12 +706,94 @@ svg + .button__label {
border-bottom-left-radius: var(--border-radius);
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5) {
// margin-left: 2px;
}
&:last-of-type {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
}
.button-toggle--expandformobile {
@media (max-width: $breakpoint-small) {
display: block;
width: 100%;
text-align: center;
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
&:not(:first-of-type) {
margin-top: var(--spacing-s);
}
}
}
.button-toggle--active {
// color: var(--color-button-toggle-text) !important;
//box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
color: var(--color-button-toggle-text-active) !important;
background-color: var(--color-button-toggle-bg-active) !important;
.icon {
opacity: 1;
stroke: var(--color-button-toggle-text-active) !important;
}
&:hover {
cursor: default;
text-decoration: none;
background-color: var(--color-button-toggle-bg-active);
.icon {
stroke: var(--color-button-toggle-text-active) !important;
}
}
&:focus-visible {
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
box-shadow: 0px 0px 0px 2px var(--color-primary) inset !important;
.icon {
stroke: var(--color-button-toggle-text) !important;
}
}
}
.button-toggle--custom {
color: var(--color-primary) !important;
.button__content {
.icon {
stroke: var(--color-primary) !important;
}
}
svg {
opacity: 1;
}
}
.button-toggle__label {
@extend label;
display: inline-block;
margin-top: -4px;
}
.button-toggle-group-action {
position: absolute; // Centers the button along toggle buttons
margin-left: var(--spacing-xs);
@media (max-width: $breakpoint-small) {
position: relative;
top: var(--spacing-s);
margin-bottom: var(--spacing-s);
margin-left: unset;
}
}
.button-collection-manage {
font-size: var(--font-base);
border-left-width: 0;
@ -626,7 +814,11 @@ svg + .button__label {
text-align: center;
&:hover {
background-color: var(--color-button-alt-bg-hover);
background-color: var(--color-primary);
color: var(--color-primary-contrast);
.icon {
stroke: var(--color-primary-contrast);
}
}
@media (max-width: $breakpoint-small) {
@ -668,48 +860,6 @@ svg + .button__label {
}
}
.button-toggle--expandformobile {
@media (max-width: $breakpoint-small) {
display: block;
width: 100%;
text-align: center;
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
&:not(:first-of-type) {
margin-top: var(--spacing-s);
}
}
}
.button-toggle--active {
color: var(--color-button-toggle-text);
background-color: var(--color-button-toggle-bg);
svg {
opacity: 1;
}
&:hover {
cursor: default;
text-decoration: none;
background-color: var(--color-button-toggle-bg);
}
}
.button-toggle--custom {
color: var(--color-primary);
svg {
opacity: 1;
}
}
.button-toggle__label {
@extend label;
display: inline-block;
margin-top: -4px;
}
.button-tab-group {
margin-bottom: var(--spacing-l);
}
@ -721,12 +871,17 @@ svg + .button__label {
.button:first-child:not(:only-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 1px solid var(--color-button-border);
margin-right: 1px;
// border-right: 1px solid var(--color-button-border);
}
.button:nth-child(2) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: 1px;
&:hover {
fill: var(--color-text) !important;
}
}
.button--file-action {
@ -742,19 +897,125 @@ svg + .button__label {
}
}
.button-toggle-group-action {
position: absolute; // Centers the button along toggle buttons
margin-left: var(--spacing-xs);
.button--hash-id {
@include font-mono;
}
@media (max-width: $breakpoint-small) {
position: relative;
top: var(--spacing-s);
margin-left: unset;
.button-rotate {
transform: rotate(90deg);
transition: transform 0.2s;
margin-right: var(--spacing-s) !important;
}
.button-like {
&:hover {
.button__label {
color: var(--color-fire) !important;
}
.icon {
stroke: var(--color-fire) !important;
}
}
&:focus-visible {
box-shadow: 0px 0px 0px 2px var(--color-fire) inset !important;
.button__content {
.button__label {
color: var(--color-fire) !important;
}
.icon {
stroke: var(--color-fire) !important;
}
}
}
}
.button--hash-id {
@include font-mono;
.button-like.comment__action--active {
.comment__reaction-count {
color: var(--color-fire) !important;
}
}
.button-dislike {
&:hover {
.button__label {
color: var(--color-slime) !important;
}
.icon {
stroke: var(--color-slime) !important;
}
}
&:focus-visible {
box-shadow: 0px 0px 0px 2px var(--color-slime) inset !important;
.button__content {
.button__label {
color: var(--color-slime) !important;
}
.icon {
stroke: var(--color-slime) !important;
}
}
}
}
.button-dislike.comment__action--active {
.comment__reaction-count {
color: var(--color-slime);
}
}
.button-following {
color: var(--color-primary-contrast) !important;
//background-color: rgba(var(--color-primary-dynamic),0.5) !important;
background-color: rgba(125, 125, 125, 0.5) !important;
.icon {
stroke: var(--color-primary-contrast) !important;
}
}
.recommended-content__bubble {
// margin-top: var(--spacing-xs);
display: flex;
.button-toggle:nth-child(2) {
margin-left: 2px;
@media (min-width: $breakpoint-small) {
margin-right: var(--spacing-xs);
}
}
.button-bubble {
border-radius: 1rem;
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
margin-right: var(--spacing-xxs);
background-color: var(--color-button-toggle-bg) !important;
color: var(--color-button-toggle-text);
font-size: var(--font-base);
padding: 0 var(--spacing-xs);
height: 2rem;
max-width: 15rem;
.button__content {
height: unset;
}
&:hover:not(.button-bubble--active) {
background-color: var(--color-button-toggle-bg-hover) !important;
.button__label {
color: var(--color-button-toggle-text-hover) !important;
}
}
}
.button-bubble:first-of-type {
margin-left: 0;
}
.button-bubble--active {
color: var(--color-button-toggle-text-active) !important;
background-color: var(--color-button-toggle-bg-active) !important;
box-shadow: unset;
&:hover {
cursor: default;
}
}
}
.file-reaction__tooltip-inner {

28
ui/scss/component/_calendar.scss Normal file
View file

@ -0,0 +1,28 @@
.schedule-counter {
position: absolute;
top: 19px;
left: 15px;
width: 10px;
height: 10px;
color: var(--color-text);
z-index: 99999;
font-size: 7px;
}
.test {
svg {
stroke: var(--color-text);
fill: var(--color-text);
}
&:hover {
svg {
stroke: var(--color-primary-contrast);
fill: var(--color-primary-contrast);
}
.schedule-counter {
color: var(--color-primary-contrast);
}
}
}

178
ui/scss/component/_card.scss
View file

@ -1,9 +1,5 @@
.card {
background-color: var(--color-card-background);
position: relative;
border-radius: var(--card-radius);
overflow: hidden;
border: 1px solid var(--color-border);
~ .card {
margin-bottom: var(--spacing-m);
@ -17,6 +13,8 @@
@media (max-width: $breakpoint-small) {
overflow-y: scroll;
height: 100%;
border-top: 1px solid var(--color-border);
// background-color:var(--color-background);
.card__main-actions {
margin-top: 0px !important;
@ -69,7 +67,6 @@
.card--section {
position: relative;
padding: var(--spacing-m);
}
.card--reward-total {
@ -81,13 +78,19 @@
}
.card--inline {
border: 1px solid var(--color-border);
border-radius: var(--card-radius);
margin-bottom: var(--spacing-m);
&:last-of-type {
margin-bottom: 0;
}
.claim-preview__wrapper {
background: rgba(var(--color-header-background-base), 0.6);
&:hover {
background: rgba(var(--color-header-background-base), 0.9);
}
}
}
.card-collection-selector {
@ -134,9 +137,10 @@
}
@media (max-width: $breakpoint-small) {
> * {
padding-bottom: var(--spacing-m);
> *:not(:last-child) {
margin-right: var(--spacing-s);
}
flex-flow: wrap;
justify-content: space-between;
}
@ -146,20 +150,13 @@
@extend .section__flex;
@media (min-width: $breakpoint-small) {
padding: var(--spacing-s) var(--spacing-m);
}
}
.card__title-section--body-list {
padding-left: var(--spacing-s);
@media (min-width: $breakpoint-small) {
padding: var(--spacing-m);
padding: var(--spacing-s) 0px;
}
}
.card__title-section--small {
padding: var(--spacing-s);
padding-left: 0px;
}
.card__actions--inline {
@ -167,6 +164,13 @@
margin-top: 0;
@media (max-width: $breakpoint-small) {
padding-bottom: 0;
&:last-of-type {
.button--alt {
padding-bottom: 0;
margin-top: 6px;
}
}
.button__content {
svg + .button__label {
display: none;
@ -189,7 +193,11 @@
.card-stack {
.card:not(:last-of-type) {
margin-bottom: var(--spacing-l);
margin-bottom: var(--spacing-xxl);
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-l);
}
}
}
@ -219,7 +227,7 @@
.card__message {
border-left: 0.5rem solid;
padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-l);
background-color: var(--color-primary-alt);
background-color: var(--color-secondary);
border-color: var(--color-primary);
}
@ -237,7 +245,7 @@
display: block;
align-items: center;
font-size: var(--font-large);
font-weight: var(--font-weight-light);
font-weight: var(--font-weight-bold);
& > *:not(:last-child) {
margin-right: var(--spacing-m);
@ -263,19 +271,68 @@
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.card--enable-overflow {
.card__header--between {
@media (max-width: $breakpoint-small) {
margin-bottom: 0;
.card__title-section {
width: 60%;
}
}
}
.card__title-actions-container {
@media (max-width: $breakpoint-small) {
flex-grow: 1;
min-height: 47px;
.card__title-actions {
width: 100%;
flex-grow: 1;
margin-right: auto;
.button--alt {
flex-grow: 1;
}
.button-toggle {
padding: 0 var(--spacing-s) 0 var(--spacing-xxxs);
}
}
.comment__sort {
.button {
float: left;
}
}
.button {
float: right;
}
}
}
}
.card__title-actions {
align-self: flex-start;
.button--alt {
padding-top: 2px;
.icon {
// margin-top: -2px;
}
}
.comment__sort {
.button--alt {
padding-top: 0;
}
}
@media (min-width: $breakpoint-small) {
padding: var(--spacing-s);
// padding: var(--spacing-s);
// padding-right: 0px;
}
}
.card__title-actions--link {
margin-top: var(--spacing-xs);
margin-right: var(--spacing-xs);
}
.card__title-actions--small {
@ -323,11 +380,11 @@
.card__header--between {
@extend .card__header;
justify-content: space-between;
align-items: flex-start;
align-items: center;
flex-wrap: wrap;
@media (max-width: $breakpoint-small) {
padding: var(--spacing-xxs);
// padding: var(--spacing-xxs);
padding-bottom: 0;
margin: 0;
@ -362,21 +419,58 @@
}
}
}
.button--alt {
color: var(--color-button-alt-text);
background-color: var(--color-button-alt-bg);
// color: var(--color-primary-contrast);
// background-color: var(--color-primary);
&:hover {
color: var(--color-primary-contrast);
background-color: var(--color-primary);
.icon {
stroke: var(--color-primary-contrast);
}
}
}
}
.card__header--nowrap {
@extend .card__header--between;
flex-wrap: nowrap;
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-s);
.card__title-section {
.card__title {
// margin-top: calc(var(--spacing-s) - 2px);
margin-bottom: calc(var(--spacing-s) * -1);
}
}
.card__title-actions-container {
.card__title-actions {
.filePrice {
padding: 0;
.credit-amount {
margin-top: var(--spacing-xs);
padding: var(--spacing-xxxs);
}
}
}
}
}
}
.card__subtitle {
color: var(--color-text-subtitle);
margin: var(--spacing-s) 0;
margin-top: var(--spacing-s);
margin-bottom: var(--spacing-s) 0;
font-size: var(--font-body);
}
.card__body {
padding: var(--spacing-m);
padding-left: 0px;
&:not(.card__body--no-title) {
padding-top: 0;
@ -389,14 +483,19 @@
}
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-s) !important;
padding: var(--spacing-l);
padding-left: 0px;
padding-right: 0px;
// margin-bottom: var(--spacing-s) !important;
padding: 0 !important;
.file__viewdate {
padding-left: var(--spacing-xxs);
.date_time {
font-size: var(--font-small);
}
span {
font-size: var(--font-xxsmall);
font-size: var(--font-small);
margin: 0;
}
@ -423,13 +522,29 @@
&:only-child {
border-top: none;
}
.form-field__help {
color: var(--color-text);
}
.help {
color: var(--color-text);
}
}
.card__body-actions {
padding: var(--spacing-s);
padding-left: 0px;
padding-right: 0px;
h3 {
padding-left: var(--spacing-s);
}
@media (min-width: $breakpoint-small) {
padding: var(--spacing-m);
padding-left: 0px;
padding-right: 0px;
}
}
@ -456,9 +571,11 @@
.card__body,
.card__main-actions {
padding: var(--spacing-m);
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
margin: 0;
margin-bottom: var(--spacing-m);
margin-bottom: 0px;
@media (max-width: $breakpoint-small) {
margin-bottom: 0px;
@ -492,6 +609,7 @@
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);

126
ui/scss/component/_channel-mention.scss Normal file
View file

@ -0,0 +1,126 @@
.channel-mention {
display: flex;
align-items: center;
position: absolute;
bottom: calc(100% - 1.8rem);
z-index: 3;
font-size: var(--font-small);
padding-left: var(--spacing-s);
> .icon {
top: 0;
left: var(--spacing-m);
height: 100%;
position: absolute;
z-index: 1;
stroke: var(--color-input-placeholder);
}
@media (min-width: $breakpoint-small) {
padding: 0;
}
}
.channel-mention__suggestions {
@extend .card;
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: 30vh;
position: absolute;
text-overflow: ellipsis;
width: 22rem;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
box-shadow: var(--card-box-shadow);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom: none;
background-color: var(--color-background);
.channel-mention__label:first-of-type {
margin-top: var(--spacing-xs);
}
}
.channel-mention__suggestions[flow-bottom] {
top: 4rem;
bottom: auto;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top: none;
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
border-bottom: auto;
}
.channel-mention__input--none {
opacity: 0;
width: 0;
height: 0;
}
.channel-mention__label {
@extend .wunderbar__label;
}
.channel-mention__top-separator {
@extend .wunderbar__top-separator;
}
.channel-mention__suggestion {
display: flex;
align-items: center;
padding: 0 var(--spacing-xxs);
//margin-left: var(--spacing-xxs);
overflow: hidden;
text-overflow: ellipsis;
.channel-thumbnail {
@include handleChannelGif(2.1rem);
position: absolute;
@media (min-width: $breakpoint-small) {
@include handleChannelGif(2.1rem);
}
}
}
.channel-mention__suggestion-label {
@extend .wunderbar__suggestion-label;
margin-left: var(--spacing-m);
display: block;
position: relative;
}
.channel-mention__suggestion-name {
@extend .wunderbar__suggestion-name;
margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
}
.channel-mention__suggestion-title {
@extend .wunderbar__suggestion-title;
margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
}
.channel-mention__placeholder-suggestion {
@extend .wunderbar__placeholder-suggestion;
padding: 0 var(--spacing-xxs);
margin-left: var(--spacing-xxs);
}
.channel-mention__placeholder-label {
@extend .wunderbar__placeholder-label;
margin-left: var(--spacing-m);
}
.channel-mention__placeholder-thumbnail {
@extend .wunderbar__placeholder-thumbnail;
margin-left: var(--spacing-m);
}
.channel-mention__placeholder-info {
@extend .wunderbar__placeholder-info;
margin-left: var(--spacing-m);
}

331
ui/scss/component/_channel.scss
View file

@ -2,6 +2,115 @@ $cover-z-index: 0;
$metadata-z-index: 1;
$actions-z-index: 2;
.channelPage-wrapper {
.button-group {
.button__content {
.icon {
stroke: var(--color-text);
}
}
.button-following {
color: var(--color-text) !important;
background-color: var(--color-button-alt-bg) !important;
.icon {
stroke: var(--color-text) !important;
}
&:hover {
color: var(--color-primary) !important;
}
}
.button-following:last-of-type {
margin-left: 2px;
&:hover {
color: var(--color-text) !important;
}
}
}
.claim-preview__live {
margin-bottom: 0;
.card__title-section {
padding-top: 0;
padding-bottom: 0;
}
}
fieldset-group {
fieldset-section:last-of-type {
label {
text-align: right;
margin-left: unset !important;
}
}
}
.claim-preview__wrapper--channel {
.menu__button {
right: var(--spacing-s);
}
.claim-tile__info {
margin-top: 0;
padding-bottom: var(--spacing-xxxs);
.claim-preview-metadata-sub-upload {
margin-top: 3px;
}
}
}
.mb-xl {
// Temporary fix for upcoming livestreams on channel page
margin-bottom: 0px;
background: rgba(var(--color-primary-dynamic), 0.1);
border-radius: var(--border-radius);
padding: var(--spacing-m);
.section__header--actions {
margin-top: 0px !important;
padding-top: 0px !important;
}
.claim-preview--tile {
margin-bottom: 0px;
}
.claim-tile__title {
margin-bottom: 0px;
min-height: unset;
}
.claim-tile__info {
padding-bottom: var(--spacing-s);
}
}
.media__info-text {
.claim__tags {
.tag {
margin-top: var(--spacing-xxxs);
display: inline-block;
}
}
}
label {
margin-top: var(--spacing-s);
font-size: var(--font-medium);
font-weight: var(--font-weight-bold);
}
.media__info-text,
.media__info-text--constrained {
font-size: var(--font-base) !important;
opacity: 0.8;
.date_time {
font-size: var(--font-base);
opacity: 0.8;
}
}
.media__info-text:first-of-type {
opacity: 1;
}
}
.channel-cover {
position: relative;
background-image: linear-gradient(to right, #637ad2, #318794 80%);
@ -9,6 +118,14 @@ $actions-z-index: 2;
align-items: flex-end;
box-sizing: content-box;
color: #fff;
.channel-cover__customm,
.channel__quick-actions {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
.channel-cover__custom {
@ -33,6 +150,11 @@ $actions-z-index: 2;
// I, Sean Yesmunt, take full responsibility for this monster
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
}
.menu__button {
opacity: 1;
justify-content: center;
}
}
.channel-cover__custom--waiting {
@ -126,7 +248,14 @@ $actions-z-index: 2;
.channel-thumbnail,
.channel-thumbnail__custom {
border-radius: var(--card-radius);
border-radius: 50%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.channel-thumbnail__default--0 {
@ -151,7 +280,8 @@ $actions-z-index: 2;
.channel__primary-info {
// Ensure the profile pic/title sit ontop of the default cover background
z-index: $metadata-z-index;
//z-index: $metadata-z-index;
z-index: 5;
// Jump over the thumbnail photo because it is absolutely positioned
// Then add normal page spacing, _then_ add the actual padding
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-xl));
@ -161,6 +291,17 @@ $actions-z-index: 2;
min-width: 0;
width: 100%;
.channel__edit-thumb {
z-index: 5;
.button--alt {
border: 1px solid rgba(var(--color-primary-dynamic), 0.1);
&:hover {
background-color: var(--color-button-alt-bg);
color: var(--color-primary);
}
}
}
@media (max-width: $breakpoint-small) {
padding-left: var(--spacing-m);
margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));
@ -192,7 +333,7 @@ $actions-z-index: 2;
align-items: flex-end;
.button {
height: auto;
// height: auto;
}
}
@ -208,6 +349,11 @@ $actions-z-index: 2;
flex-wrap: wrap;
font-size: var(--font-base);
.button,
.menu__button {
border: 1px solid rgba(var(--color-primary-dynamic), 0.1);
}
> .button,
> .button-group .button {
padding: 0 var(--spacing-s);
@ -240,6 +386,26 @@ $actions-z-index: 2;
margin-right: 0;
}
}
.claim__menu-button--inline {
z-index: 10;
.icon {
padding: 1rem;
margin: -1rem;
}
}
}
.button,
.menu__button {
&:hover {
color: var(--color-link);
background-color: rgba(var(--color-header-background-base), 0.95);
.icon {
stroke: var(--color-link);
}
}
}
}
@ -272,30 +438,24 @@ $actions-z-index: 2;
}
.menu__list.channel__list {
margin-top: var(--spacing-xs);
margin-left: 0;
padding: 0;
border-radius: var(--border-radius);
background: transparent;
max-height: 15rem;
overflow-y: scroll;
overflow-y: auto;
[role='menuitem'] {
margin: 0;
&[data-selected] {
background: transparent;
// background: transparent;
.channel__list-item,
.channel-staked__wrapper {
background-color: var(--color-card-background-highlighted);
}
}
&:first-child {
.channel__list-item {
border-top: 1px solid var(--color-border);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
background-color: var(--color-primary);
.claim-preview__title {
color: var(--color-primary-contrast);
}
}
}
@ -308,8 +468,21 @@ $actions-z-index: 2;
.channel__list-item {
padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
.icon__wrapper {
background-color: var(--color-primary);
.icon {
stroke: var(--color-primary-contrast);
}
}
&:hover {
.icon__wrapper {
.icon {
stroke: var(--color-primary-contrast);
}
}
}
}
}
}
@ -317,9 +490,8 @@ $actions-z-index: 2;
.channel__list-item {
display: flex;
align-items: center;
background-color: var(--color-card-background);
background-color: var(--color-header-background);
padding: var(--spacing-s);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
.channel-thumbnail {
@ -339,23 +511,43 @@ $actions-z-index: 2;
border-radius: var(--border-radius);
}
.ff-container {
canvas {
border-radius: 50%;
}
.freezeframe-img {
width: 2rem !important;
height: 2rem !important;
border-radius: 50%;
}
}
&:hover {
background-color: var(--color-card-background-highlighted);
background-color: var(--color-primary);
.channel__list-text {
color: var(--color-menu-icon-active);
}
}
}
.channel__list-item--selected {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
.icon--ChevronDown {
margin-left: var(--spacing-l);
}
&:hover {
.claim-preview__title {
color: white;
}
}
}
.channel__list-text {
font-weight: var(--font-weight-bold);
color: var(--color-text);
color: var(--color-menu-icon);
}
.channel__selector {
@ -364,16 +556,32 @@ $actions-z-index: 2;
@media (min-width: $breakpoint-small) {
margin-bottom: var(--spacing-l);
}
.ff-container {
canvas {
border-radius: 50%;
}
.freezeframe-img {
width: 2rem !important;
height: 2rem !important;
border-radius: 50%;
}
}
}
.channel-staked__wrapper {
display: flex;
position: absolute;
padding: 0.2rem;
bottom: -0.75rem;
left: -0.8rem;
background-color: var(--color-card-background);
border-radius: 50%;
text-align: center;
width: 116%;
left: -8%;
bottom: -14%;
svg {
overflow: visible;
width: 100%;
height: 100%;
}
}
.channel-staked__wrapper--large {
@ -382,6 +590,7 @@ $actions-z-index: 2;
display: inline-block;
bottom: auto;
left: auto;
width: auto;
top: var(--spacing-xs);
margin-left: var(--spacing-s);
padding: 0;
@ -398,13 +607,13 @@ $actions-z-index: 2;
}
.channel-staked__indicator {
margin-left: 1px;
//margin-left: 1px;
z-index: 3;
fill: var(--color-gray-3);
}
.channel-staked__indicator--controlling {
fill: #00eaff;
fill: #ff853c;
}
.channel-staked__amount {
@ -416,3 +625,67 @@ $actions-z-index: 2;
color: var(--color-gray-3);
}
}
.channelsPage-wrapper {
.claim-preview__wrapper--channel {
position: relative;
border-radius: var(--border-radius);
background: rgba(var(--color-header-background-base), 0.6);
padding: var(--spacing-m) !important;
.claim__menu-button {
right: calc(var(--spacing-m) - 8px) !important;
margin-top: var(--spacing-xxs);
.icon {
stroke: var(--color-text);
}
&:hover {
.icon {
stroke: var(--color-primary);
}
}
}
.help--inline {
color: var(--color-text);
}
.claim-tile__info {
display: unset;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.media__subtitle {
.claim-preview-metadata-sub-upload {
margin-top: 2px;
font-size: var(--font-small) !important;
}
}
@media (max-width: $breakpoint-small) {
.claim-preview--channel {
a:first-of-type {
.button__content {
align-items: unset;
}
}
.claim-preview__actions {
flex-flow: row;
.section__actions {
.button--alt {
margin-bottom: 0;
}
}
.claim-preview__custom-properties {
justify-content: unset;
}
}
}
.claim-preview__actions {
margin-top: var(--spacing-s) !important;
}
}
}
}

664
ui/scss/component/_claim-list.scss
View file

File diff suppressed because it is too large Load diff

31
ui/scss/component/_claim-search.scss
View file

@ -13,6 +13,7 @@
justify-content: flex-start;
align-items: center;
padding: var(--spacing-m);
padding-left: 0px;
padding-bottom: var(--spacing-s);
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
@ -22,6 +23,9 @@
@media (min-width: $breakpoint-small) {
flex-direction: row;
}
@media (max-width: $breakpoint-small) {
padding: unset;
}
}
.claim-search__dropdown {
@ -33,7 +37,8 @@
}
.claim-search__dropdown--selected {
background-color: var(--color-input-bg-selected);
// color: var(--color-primary-contrast);
// background-color: var(--color-input-bg-selected);
}
.claim-search__input-container {
@ -56,6 +61,15 @@
}
}
.claim-search__dropdown,
.claim-search__input-container {
padding-left: 0;
padding-right: var(--spacing-m);
@media (max-width: $breakpoint-small) {
padding-right: 0;
}
}
.claim-search__filter-button {
display: flex;
justify-content: center;
@ -80,6 +94,10 @@
@media (min-width: $breakpoint-small) {
justify-content: flex-start;
}
.claim-search__menu-group:last-of-type {
margin-right: unset;
}
}
.claim-search__top > div {
@ -92,6 +110,17 @@
display: flex;
flex-wrap: nowrap;
margin-right: var(--spacing-s);
.button:nth-child(2):not(:last-child) {
// margin-left: 2px;
}
@media (max-width: $breakpoint-small) {
margin-right: 0;
.button-toggle {
padding: 0 var(--spacing-s) 0 var(--spacing-xs);
}
}
}
.claim-search__menu-group--between {

15
ui/scss/component/_collection.scss
View file

@ -88,14 +88,19 @@
.collection-preview__edit-buttons {
position: absolute;
left: 0;
top: calc(-1 * var(--spacing-m));
bottom: calc(-1 * var(--spacing-m));
top: calc(var(--spacing-m) * -1);
bottom: calc(var(--spacing-m) * -1);
padding-left: 0;
padding-top: var(--spacing-m);
padding-bottom: var(--spacing-m);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-items: center;
@media (max-width: $breakpoint-small) {
margin-right: var(--spacing-s);
}
}
.collection-preview__edit-group {
@ -103,13 +108,17 @@
display: flex;
flex-direction: column;
width: 2rem;
align-items: center;
justify-content: center;
align-items: stretch;
flex-grow: 4;
@media (max-width: $breakpoint-small) {
width: 1.5rem;
margin-right: 0;
button {
padding: var(--spacing-xs) var(--spacing-xs);
}
}
}

70
ui/scss/component/_color-picker.scss Normal file
View file

@ -0,0 +1,70 @@
.color-picker {
position: relative;
height: var(--height-input);
//background-color:#ff0000;
border-radius: var(--border-radius);
max-width: 220px;
margin-top: var(--spacing-s);
.swatch {
position: absolute;
left: 0;
margin: 5px;
background: var(--color-header-background);
border-radius: var(--border-radius);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
display: inline-block;
cursor: pointer;
width: calc(var(--height-input) - (2 * 5px));
height: calc(var(--height-input) - (2 * 5px));
box-sizing: border-box;
}
.color {
width: 100%;
height: 100%;
border-radius: calc(var(--border-radius) - 2px);
}
.popover {
position: absolute;
z-index: 2;
}
.cover {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.sketch-picker {
background-color: var(--color-header-background) !important;
margin-bottom: var(--spacing-l);
.flexbox-fix {
input {
box-shadow: unset !important;
background-color: var(--color-header-button) !important;
text-align: center;
}
label {
color: var(--color-text) !important;
}
}
.flexbox-fix:nth-child(3) {
display: none !important;
}
.flexbox-fix:last-of-type {
display: none !important;
}
}
input {
width: 220px;
display: inline-block;
padding-left: calc(var(--height-input) + var(--spacing-xxs));
}
}

4
ui/scss/component/_comment-badge.scss
View file

@ -2,7 +2,9 @@
padding-right: var(--spacing-xxs);
.icon {
margin-bottom: -5px;
margin-bottom: -4px;
height: 1rem;
width: 1rem;
}
}

101
ui/scss/component/_comment-create.scss
View file

@ -3,7 +3,7 @@
$thumbnailWidth: 1.5rem;
$thumbnailWidthSmall: 1rem;
.create__comment {
.content_comment {
position: relative;
}
@ -11,6 +11,59 @@ $thumbnailWidthSmall: 1rem;
font-size: var(--font-small);
position: relative;
.section {
margin-top: var(--spacing-xs);
}
.button--file-action {
&:hover {
background-color: var(--color-primary) !important;
color: var(--color-primary-contrast);
}
}
.section__actions {
.button,
.button--link {
background-color: var(--color-header-background);
color: var(--color-text);
border-radius: var(--border-radius);
&:hover {
background-color: var(--color-primary);
color: var(--color-primary-contrast);
}
}
.button--link {
// flex: auto;
margin-top: -2px;
height: var(--height-button);
.button__content {
justify-content: center;
}
.button__label {
margin-top: 1px;
line-height: 18px;
}
}
.button--alt {
margin-top: -2px;
}
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-s);
.button--alt {
flex: auto;
.button__content {
justify-content: center;
}
}
.button--link {
flex: auto;
height: 2rem;
}
}
}
fieldset-section,
.form-field--SimpleMDE {
margin-top: 0;
@ -20,6 +73,43 @@ $thumbnailWidthSmall: 1rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
.comment__char-count-mde {
margin-left: auto;
min-width: 40px;
text-align: center;
margin-bottom: 8px;
// margin-right: var(--spacing-s);
padding-left: 4px;
padding-right: 4px;
padding-top: 5px;
border-radius: var(--border-radius);
height: var(--height-input-slim);
}
.button--file-action {
padding: 0px;
height: var(--height-input-slim);
background: var(--color-header-background);
margin-bottom: 8px;
.button__content {
.icon {
width: var(--height-input-slim);
height: var(--height-input-slim);
padding: 4px;
border-radius: var(--border-radius);
}
}
&:hover {
background-color: var(--color-primary) !important;
.button__content {
.icon {
stroke: var(--color-primary-contrast);
}
}
}
}
}
@media (min-width: $breakpoint-small) {
@ -40,7 +130,7 @@ $thumbnailWidthSmall: 1rem;
.comment-create--drawer {
.MuiPaper-root {
background-color: var(--color-background) !important;
//background-color: var(--color-background) !important;
span {
color: var(--color-text);
@ -122,12 +212,16 @@ $thumbnailWidthSmall: 1rem;
}
.comment-create__min-amount-notice {
margin-top: calc(var(--spacing-xxs) - 2px);
padding-top: calc(var(--spacing-xs) + 1px);
height: var(--height-button);
.icon {
margin-bottom: -3px; // TODO fix few instances of these (find "-2px")
}
@media (max-width: $breakpoint-small) {
margin: 0px;
padding-top: calc(var(--spacing-xs) + 3px);
font-size: var(--font-xsmall);
}
}
@ -135,7 +229,8 @@ $thumbnailWidthSmall: 1rem;
.commentCreate__stickerPreview {
@extend .commentCreate;
display: flex;
border: 1px solid var(--color-border);
//border: 1px solid var(--color-border);
background-color: var(--color-header-background);
border-radius: var(--border-radius);
padding: var(--spacing-s);
margin: var(--spacing-s) 0;

6
ui/scss/component/_comment-selectors.scss
View file

@ -91,6 +91,9 @@ $sticker-item-size: 5rem;
position: absolute;
display: inline;
bottom: 0;
.credit-amount {
color: var(--color-primary-contrast) !important;
}
}
}
@ -104,9 +107,12 @@ $sticker-item-size: 5rem;
font-size: var(--font-small);
padding-left: var(--spacing-xxs);
width: 100%;
text-align: center;
position: sticky;
top: 0px;
background-color: var(--color-tabs-background);
border-radius: var(--border-radius);
font-weight: 900;
z-index: 1;
@media (min-width: $breakpoint-small) {

148
ui/scss/component/_comments.scss
View file

@ -1,5 +1,5 @@
$thumbnailWidth: 1.5rem;
$thumbnailWidthSmall: 1.8rem;
$thumbnailWidth: 2.5rem;
$thumbnailWidthSmall: 1rem;
.comments {
list-style-type: none;
@ -38,14 +38,16 @@ $thumbnailWidthSmall: 1.8rem;
}
.comment__sort {
margin: var(--spacing-s) 0;
margin-right: var(--spacing-s);
display: block;
display: inline-block;
@media (min-width: $breakpoint-small) {
margin-top: 0;
display: inline;
}
@media (max-width: $breakpoint-small) {
margin-right: 0;
}
}
.comment {
@ -72,13 +74,6 @@ $thumbnailWidthSmall: 1.8rem;
@include handleChannelGif($thumbnailWidth);
}
.channel-staked__wrapper {
padding: 0;
left: calc(#{$thumbnailWidthSmall} / 4);
bottom: -1rem;
padding: -1rem;
margin-left: 0;
}
.channel-staked__indicator {
@media (max-width: $breakpoint-small) {
margin-left: 0.1rem;
@ -95,6 +90,16 @@ $thumbnailWidthSmall: 1.8rem;
.comment__content {
display: flex;
flex-direction: row;
&:hover {
.ff-canvas {
opacity: 0 !important;
transition: opacity 1s !important;
}
.ff-image {
opacity: 1 !important;
}
}
}
.comment__replies-container {
@ -147,7 +152,6 @@ $thumbnailWidthSmall: 1.8rem;
background-color: var(--color-comment-threadline);
&:hover {
box-shadow: 0 0 0 1px var(--color-comment-threadline-hover);
background-color: var(--color-comment-threadline-hover);
border-color: var(--color-comment-threadline-hover);
}
@ -160,7 +164,7 @@ $thumbnailWidthSmall: 1.8rem;
.comment--highlighted {
background: var(--color-comment-highlighted);
box-shadow: 0 0 0 5px var(--color-comment-highlighted);
border-radius: 4px;
border-radius: 2px;
}
.comment__body-container {
@ -173,6 +177,21 @@ $thumbnailWidthSmall: 1.8rem;
@media (min-width: $breakpoint-small) {
margin-left: var(--spacing-s);
}
&:hover {
.menu__button {
opacity: 1;
}
}
[aria-expanded='true'].menu__button {
opacity: 1;
background: var(--color-header-background);
border-radius: var(--border-radius);
.icon {
stroke: var(--color-primary);
}
}
}
.comment__dead {
@ -194,20 +213,38 @@ $thumbnailWidthSmall: 1.8rem;
justify-content: flex-start;
align-items: center;
height: 100%;
width: calc(100% - var(--spacing-m) - var(--spacing-s));
.channel-name {
color: var(--color-link);
&:hover {
color: rgba(var(--color-secondary-dynamic), 1);
}
}
}
.comment__pin {
display: inline-block;
margin: 0 var(--spacing-s);
margin-right: 0;
font-size: var(--font-xsmall);
.icon {
padding-top: 1px;
}
@media (max-width: $breakpoint-small) {
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.comment__message {
word-break: break-word;
max-width: 35rem;
padding-right: var(--spacing-xl);
color: var(--color-text);
ul li {
@ -242,17 +279,24 @@ $thumbnailWidthSmall: 1.8rem;
.comment__author--creator {
padding: 0 3px;
background-color: var(--color-primary-alt);
background-color: var(--color-primary);
border-radius: var(--border-radius);
.button__content {
color: var(--color-primary-contrast);
}
.channel-name {
color: var(--color-primary-contrast);
}
&.button--uri-indicator {
color: var(--color-link);
color: var(--color-primary-contrast);
}
}
.comment__time {
@extend .button--uri-indicator;
opacity: 0.5;
opacity: 0.6;
white-space: nowrap;
height: 100%;
margin-right: var(--spacing-xs);
@ -265,6 +309,12 @@ $thumbnailWidthSmall: 1.8rem;
.comment__menu {
align-self: flex-end;
line-height: 1;
@media (max-width: $breakpoint-small) {
.menu__button {
opacity: 1;
}
}
}
.comment__char-count {
@ -286,8 +336,21 @@ $thumbnailWidthSmall: 1.8rem;
font-size: var(--font-xsmall);
.menu__link {
color: var(--color-text);
padding: 0;
color: var(--color-text);
}
.comment__menu-help {
color: var(--color-text);
.icon--ExternalLink {
margin-top: unset;
}
}
&:hover {
.comment__menu-help {
color: var(--color-primary-contrast);
}
}
}
@ -362,18 +425,23 @@ $thumbnailWidthSmall: 1.8rem;
&:disabled {
opacity: 1;
}
}
.comment__action,
.comment__author {
&:focus {
@include linkFocus;
.button__content {
.icon {
stroke: var(--color-text);
fill: transparent;
}
}
&:hover {
.button__content {
.icon {
fill: var(--color-primary);
}
}
}
}
.comment__action--active {
.icon {
fill: var(--color-primary-alt);
stroke: var(--color-primary);
}
}
@ -427,6 +495,7 @@ $thumbnailWidthSmall: 1.8rem;
max-width: 10rem;
white-space: pre-line;
margin-right: var(--spacing-s);
color: var(--color-text);
}
.comment--blocked {
@ -450,11 +519,17 @@ $thumbnailWidthSmall: 1.8rem;
.media__thumb {
flex-shrink: 0;
overflow: hidden;
$width: 5rem;
$width: 6rem;
@include handleClaimListGifThumbnail($width);
width: $width;
width: $width !important;
height: calc(#{$width} * (9 / 16));
margin-right: var(--spacing-s);
@media (max-width: $breakpoint-small) {
$width: 10rem;
width: $width !important;
height: calc(#{$width} * (9 / 16));
}
}
.channel-thumbnail {
@ -472,9 +547,19 @@ $thumbnailWidthSmall: 1.8rem;
margin: 0 0;
padding: 0;
&:hover {
.claim-preview__hover-actions {
display: none;
}
}
@media (min-width: $breakpoint-medium) {
margin: 0 var(--spacing-xs);
}
@media (max-width: $breakpoint-medium) {
padding-bottom: 0 !important;
}
}
.comment {
@ -487,12 +572,19 @@ $thumbnailWidthSmall: 1.8rem;
margin-top: 0;
margin-left: var(--spacing-s);
}
@media (max-width: $breakpoint-medium) {
margin-left: var(--spacing-s);
}
}
@media (max-width: $breakpoint-small) {
border-bottom: 1px solid var(--color-border);
}
}
.sticker__comment {
margin-left: var(--spacing-m);
height: 7rem;
height: 6rem;
overflow: hidden;
img {

74
ui/scss/component/_content.scss
View file

@ -2,6 +2,11 @@
@extend .card;
position: absolute;
top: var(--spacing-s);
border-radius: var(--border-radius);
@media (max-width: $breakpoint-small) {
// margin-top: calc(var(--header-height) - var(--header-height-mobile));
}
}
.content__viewer--mobile {
@ -37,7 +42,17 @@
left: calc(var(--spacing-l) + var(--spacing-s));
z-index: 9999;
border: 2px solid black;
// file-viewer__overlay-secondary autoplay-countdown__counter
.file-render--video {
border-radius: unset;
}
&:hover {
.video-js--tap-to-unmute {
max-width: calc(var(--floating-viewer-width) - (var(--spacing-xs) * 3) - 42px);
}
.content__floating-close {
visibility: visible;
z-index: 9999;
@ -49,6 +64,12 @@
top: 0;
border-radius: 0;
border: none;
right: 0;
// Next line is fixing the player width
width: unset !important;
.file-render--video {
border-radius: 0;
}
}
.content__wrapper {
@ -56,6 +77,7 @@
width: 100%;
height: 100%;
background-color: black;
border-radius: var(--border-radius);
}
.content__wrapper--floating {
@ -65,6 +87,30 @@
.vjs-button--theater-mode {
display: none;
}
.video-js--tap-to-unmute {
max-width: calc(var(--floating-viewer-width) - (var(--spacing-xs) * 2));
.icon {
width: 24px;
height: 24px;
min-width: 24px;
}
}
.content__info {
.claim-preview__title {
.button {
width: 100%;
.button__label {
display: inline-block;
}
&:hover {
color: var(--color-primary);
}
}
}
}
}
.content__actions {
@ -87,10 +133,21 @@
.content__floating-close {
visibility: hidden;
position: absolute;
top: var(--spacing-s);
right: var(--spacing-s);
width: 3rem;
height: 3rem;
top: 8px;
right: 8px;
width: 42px;
height: 42px;
padding: 10px;
background-color: rgba(var(--color-primary-dynamic), 0.95) !important;
.icon {
width: 24px;
height: 24px;
}
&:hover {
background-color: rgba(var(--color-primary-dynamic), 1) !important;
}
}
.content__floating-link {
@ -103,12 +160,14 @@
.content__info {
cursor: grab;
height: var(--floating-viewer-info-height);
padding: var(--spacing-m);
padding: var(--spacing-s);
display: flex;
flex-direction: column;
align-items: flex-start;
white-space: nowrap;
background-color: var(--color-header-background-transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.content__cover {
@ -116,8 +175,7 @@
position: relative;
display: flex;
align-items: center;
border-radius: var(--card-radius);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
justify-content: center;
background-position: 50% 50%;
background-repeat: no-repeat;

49
ui/scss/component/_emote-selector.scss Normal file
View file

@ -0,0 +1,49 @@
@import '../init/breakpoints';
.emoteSelector {
animation: menu-animate-in var(--animation-duration) var(--animation-style);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
margin-bottom: var(--spacing-m);
}
.emoteSelector__list {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
overflow-x: hidden;
max-height: 25vh;
padding: var(--spacing-s);
background-color: rgba(var(--color-primary-dynamic), 0.01);
border-radius: var(--border-radius);
.emoteSelector__listRowItems {
display: flex;
flex-wrap: wrap;
.button--file-action {
margin: var(--spacing-xxs);
padding: var(--spacing-xs);
.button__content {
justify-content: center;
align-items: center;
align-content: center;
width: 1.5rem;
height: 1.5rem;
.button__label {
line-height: normal;
}
span {
margin: auto;
font-size: var(--font-large);
}
}
&:hover {
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
}
}
}
}

10
ui/scss/component/_file-price.scss
View file

@ -11,7 +11,7 @@
position: relative;
margin-left: var(--spacing-m);
white-space: nowrap;
color: var(--color-purchased-text);
color: var(--color-primary-contrast);
}
&::before {
@ -21,9 +21,7 @@
width: 250%;
height: 160%;
transform: skew(15deg);
border-radius: var(--border-radius);
background-color: var(--color-purchased-alt);
border: 2px solid var(--color-purchased);
background-color: rgba(var(--color-primary-dynamic), 1);
}
}
@ -31,10 +29,12 @@
font-size: var(--font-body);
top: calc(var(--spacing-xxs) * -1);
margin-left: var(--spacing-m);
margin-right: var(--spacing-m);
height: 2.4rem;
.credit-amount {
margin: 0 var(--spacing-m);
margin-bottom: -0.5rem;
margin-bottom: -0.9rem;
}
&::before {

86
ui/scss/component/_file-render.scss
View file

@ -1,4 +1,29 @@
.file-page {
.card-stack {
.claim-preview {
&:hover {
.claim-preview__title {
color: var(--color-text);
}
}
.claim-preview__title {
&:hover {
color: var(--color-link);
}
}
}
}
.file-page__recommended {
.claim-preview__wrapper {
&:hover {
.claim-preview__title {
color: var(--color-link);
}
}
}
}
.file-page__video-container + .card,
.file-render + .card,
.content__cover + .card,
@ -16,10 +41,6 @@
.file-viewer--document {
margin-top: var(--spacing-l);
@media (min-width: $breakpoint-small) {
margin-top: var(--spacing-xl);
}
.button {
display: inline;
@ -50,6 +71,24 @@
}
}
// Temporary fix
.card__main-actions {
.claim-tile__info {
display: unset;
margin-top: -2px;
padding-bottom: 0;
.media__subtitle {
padding-bottom: 3px;
.claim-preview__channel-sub-count {
font-size: var(--font-xsmall) !important;
@media (max-width: $breakpoint-small) {
font-size: var(--font-xxsmall) !important;
}
}
}
}
}
> * {
width: 100%;
}
@ -60,7 +99,7 @@
@media (max-width: $breakpoint-small) {
.card__main-actions {
padding: var(--spacing-s) var(--spacing-xxs) !important;
// padding: var(--spacing-s) var(--spacing-xxs) !important;
}
.claim-preview--inline {
@ -114,7 +153,7 @@
.claim-preview__actions {
margin: 0;
align-self: center;
align-self: flex-start;
.button-group {
margin: 0;
@ -148,6 +187,7 @@
.file-render--video {
background-color: black;
border-radius: var(--border-radius);
&:after {
content: '';
@ -162,6 +202,18 @@
opacity: 0;
pointer-events: none;
}
@media (max-width: $breakpoint-small) {
border-radius: unset;
.autoplay-countdown {
.file-viewer__overlay-secondary {
margin-bottom: 0 !important;
}
.autoplay-countdown__counter {
margin-top: var(--spacing-xxs) !important;
}
}
}
}
.file-render--scheduledLivestream {
@ -716,10 +768,12 @@ $control-bar-icon-size: 0.8rem;
background: black;
border: 1px solid var(--color-gray-4);
opacity: 0.9;
border-radius: var(--border-radius);
&:hover {
opacity: 1;
color: var(--color-white);
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
}
@ -822,6 +876,7 @@ $control-bar-icon-size: 0.8rem;
}
.autoplay-countdown__counter {
margin-top: var(--spacing-m);
color: #fff !important;
}
.autoplay-countdown__button {
@ -865,22 +920,13 @@ $control-bar-icon-size: 0.8rem;
.file__viewdate {
display: flex;
justify-content: space-between;
flex-direction: column;
justify-content: start;
flex-direction: row;
margin-bottom: var(--spacing-s);
> :first-child {
margin-bottom: var(--spacing-s);
}
@media (max-width: $breakpoint-medium) {
flex-direction: row;
justify-content: start;
> :first-child {
margin-bottom: 0;
margin-right: 1rem;
}
margin-bottom: 0;
margin-right: var(--spacing-s);
}
}

Some files were not shown because too many files have changed in this diff Show more