dark mode love plus other fixes
This commit is contained in:
Sean Yesmunt
parent
3b02e0c631
commit
15755c39db
18 changed files with 107 additions and 83 deletions
|
|
@ -128,8 +128,8 @@
|
|||
"husky": "^0.14.3",
|
||||
"json-loader": "^0.5.4",
|
||||
"lbry-format": "https://github.com/lbryio/lbry-format.git",
|
||||
"lbry-redux": "lbryio/lbry-redux#74f55ba9e3b81b5364788a8cbdd89bd2884d40d0",
|
||||
"lbryinc": "lbryio/lbryinc#5aba3127c879f5aaa9b1eccaf57aae97449df183",
|
||||
"lbry-redux": "lbryio/lbry-redux#b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d",
|
||||
"lbryinc": "lbryio/lbryinc#f5bee9cd300c4bdc05228e31ea15cfc430975f67",
|
||||
"lint-staged": "^7.0.2",
|
||||
"localforage": "^1.7.1",
|
||||
"lodash-es": "^4.17.14",
|
||||
|
|
|
|||
|
|
@ -188,24 +188,27 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
|
|||
<div className="claim-preview-title">
|
||||
{claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
|
||||
</div>
|
||||
{!hideActions && actions !== undefined ? (
|
||||
actions
|
||||
) : (
|
||||
<div className="card__actions--inline">
|
||||
{isChannel && !channelIsBlocked && !claimIsMine && (
|
||||
<SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
|
||||
{!pending && (
|
||||
<React.Fragment>
|
||||
{!hideActions && actions !== undefined ? (
|
||||
actions
|
||||
) : (
|
||||
<div className="card__actions--inline">
|
||||
{isChannel && !channelIsBlocked && !claimIsMine && (
|
||||
<SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
|
||||
)}
|
||||
{isChannel && !isSubscribed && !claimIsMine && (
|
||||
<BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
|
||||
)}
|
||||
{!isChannel && claim && <FileProperties uri={uri} />}
|
||||
</div>
|
||||
)}
|
||||
{isChannel && !isSubscribed && !claimIsMine && (
|
||||
<BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
|
||||
)}
|
||||
{!isChannel && claim && <FileProperties uri={uri} />}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="claim-preview-properties">
|
||||
<div className="media__subtitle">
|
||||
{pending && <div>Pending...</div>}
|
||||
{!isResolvingUri && (
|
||||
<div>
|
||||
{claim ? (
|
||||
|
|
@ -223,12 +226,16 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
|
|||
</Fragment>
|
||||
)}
|
||||
<div>
|
||||
{claim &&
|
||||
{pending ? (
|
||||
<div>Pending...</div>
|
||||
) : (
|
||||
claim &&
|
||||
(isChannel ? (
|
||||
type !== 'inline' && `${claimsInChannel} ${__('publishes')}`
|
||||
) : (
|
||||
<DateTime timeAgo uri={uri} />
|
||||
))}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ type Props = {
|
|||
function UserEmailNew(props: Props) {
|
||||
const { errorMessage, isPending, addUserEmail, syncEnabled, setSync, balance } = props;
|
||||
const [newEmail, setEmail] = useState('');
|
||||
const [ageConfirmation, setAgeConfirmation] = useState(false);
|
||||
const [ageConfirmation, setAgeConfirmation] = useState(true);
|
||||
const valid = newEmail.match(EMAIL_REGEX);
|
||||
|
||||
function handleSubmit() {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {
|
|||
selectGetSyncErrorMessage,
|
||||
selectSyncHash,
|
||||
} from 'lbryinc';
|
||||
import { selectMyChannelClaims, selectBalance, selectFetchingMyChannels } from 'lbry-redux';
|
||||
import { selectMyChannelClaims, selectBalance, selectFetchingMyChannels, selectCreatingChannel } from 'lbry-redux';
|
||||
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
||||
import UserSignIn from './view';
|
||||
|
||||
|
|
@ -36,6 +36,7 @@ const select = state => ({
|
|||
syncingWallet: selectGetSyncIsPending(state),
|
||||
getSyncError: selectGetSyncErrorMessage(state),
|
||||
hasSynced: Boolean(selectSyncHash(state)),
|
||||
creatingChannel: selectCreatingChannel(state),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ type Props = {
|
|||
hasSynced: boolean,
|
||||
syncingWallet: boolean,
|
||||
getSyncError: ?string,
|
||||
creatingChannel: boolean,
|
||||
};
|
||||
|
||||
function UserSignIn(props: Props) {
|
||||
|
|
@ -50,6 +51,7 @@ function UserSignIn(props: Props) {
|
|||
getSyncError,
|
||||
hasSynced,
|
||||
fetchingChannels,
|
||||
creatingChannel,
|
||||
} = props;
|
||||
const { search } = location;
|
||||
const urlParams = new URLSearchParams(search);
|
||||
|
|
@ -70,7 +72,7 @@ function UserSignIn(props: Props) {
|
|||
// The verbose variable names are an attempt to alleviate _some_ of the confusion from handling all edge cases that come from
|
||||
// reward claiming, channel creation, account syncing, and youtube transfer
|
||||
const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !getSyncError;
|
||||
const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet;
|
||||
const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet || creatingChannel;
|
||||
const isWaitingForSomethingToFinish =
|
||||
// If the user has claimed the email award, we need to wait until the balance updates sometime in the future
|
||||
(!hasFetchedReward && !hasClaimedEmailAward) || (syncEnabled && !hasSynced);
|
||||
|
|
@ -80,7 +82,12 @@ function UserSignIn(props: Props) {
|
|||
const showUserVerification = hasVerifiedEmail && !rewardsApproved;
|
||||
const showSyncPassword = syncEnabled && getSyncError && !hasSynced;
|
||||
const showChannelCreation =
|
||||
hasVerifiedEmail && balance && balance > DEFAULT_BID_FOR_FIRST_CHANNEL && channelCount === 0 && !hasYoutubeChannels;
|
||||
hasVerifiedEmail &&
|
||||
balance !== undefined &&
|
||||
balance !== null &&
|
||||
balance > DEFAULT_BID_FOR_FIRST_CHANNEL &&
|
||||
channelCount === 0 &&
|
||||
!hasYoutubeChannels;
|
||||
const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
|
||||
const showLoadingSpinner =
|
||||
canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);
|
||||
|
|
|
|||
|
|
@ -15,10 +15,22 @@ type Props = {
|
|||
export default function ChannelsPage(props: Props) {
|
||||
const { channels, fetchChannelListMine, fetchingChannels, youtubeChannels } = props;
|
||||
const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
|
||||
const hasPendingChannels = channels && channels.some(channel => channel.confirmations === -1);
|
||||
|
||||
useEffect(() => {
|
||||
fetchChannelListMine();
|
||||
}, [fetchChannelListMine]);
|
||||
|
||||
let interval;
|
||||
if (hasPendingChannels) {
|
||||
interval = setInterval(() => {
|
||||
fetchChannelListMine();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [fetchChannelListMine, hasPendingChannels]);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,10 @@ export const doCheckPendingPublishesApp = () => (dispatch: Dispatch, getState: G
|
|||
const onConfirmed = claim => {
|
||||
if (selectosNotificationsEnabled(getState())) {
|
||||
const notif = new window.Notification('LBRY Publish Complete', {
|
||||
body: `${claim.value.title} has been published to lbry://${claim.name}. Click here to view it`,
|
||||
body: __('%nameOrTitle% has been published to lbry://%name%. Click here to view it.', {
|
||||
nameOrTitle: claim.value_type === 'channel' ? `@${claim.name}` : claim.value.title,
|
||||
name: claim.name,
|
||||
}),
|
||||
silent: false,
|
||||
});
|
||||
notif.onclick = () => {
|
||||
|
|
|
|||
|
|
@ -70,7 +70,11 @@
|
|||
|
||||
.button--link {
|
||||
[data-mode='dark'] & {
|
||||
color: $lbry-teal-3;
|
||||
color: $lbry-teal-4;
|
||||
|
||||
&:hover {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@
|
|||
font-size: var(--font-body);
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-color: var(--dm-color-04);
|
||||
background-color: var(--color-card-actions--dark);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $border-color--dark: var(--dm-color-04);
|
|||
font-size: var(--font-body);
|
||||
border-top-left-radius: var(--card-radius);
|
||||
border-top-right-radius: var(--card-radius);
|
||||
color: $lbry-white;
|
||||
background-color: var(--color-card-actions);
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -26,22 +26,6 @@ $border-color--dark: var(--dm-color-04);
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Normal link buttons are too dark on the black file list background
|
||||
.button--link {
|
||||
color: $lbry-teal-3;
|
||||
|
||||
&:hover {
|
||||
color: $lbry-teal-1;
|
||||
}
|
||||
|
||||
[data-mode='dark'] & {
|
||||
color: $lbry-teal-4;
|
||||
&:hover {
|
||||
color: $lbry-teal-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix this in @lbry/components, we shouldn't need to be this specific
|
||||
checkbox-element input[type='checkbox']:checked + label {
|
||||
color: $lbry-white;
|
||||
|
|
@ -49,6 +33,7 @@ $border-color--dark: var(--dm-color-04);
|
|||
|
||||
[data-mode='dark'] & {
|
||||
color: var(--dm-color-01);
|
||||
background-color: var(--color-card-actions--dark);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,25 +46,12 @@ $border-color--dark: var(--dm-color-04);
|
|||
margin-bottom: 0;
|
||||
padding: 0 var(--spacing-medium);
|
||||
padding-right: var(--spacing-large);
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
border: 1px solid $lbry-white;
|
||||
color: $lbry-white;
|
||||
background-color: lighten($lbry-black, 10%);
|
||||
|
||||
[data-mode='dark'] & {
|
||||
color: var(--dm-color-01);
|
||||
}
|
||||
}
|
||||
|
||||
.claim-list__header,
|
||||
.claim-list__dropdown {
|
||||
background-color: lighten($lbry-black, 10%);
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-color: var(--dm-color-07);
|
||||
}
|
||||
}
|
||||
|
||||
.claim-list__alt-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -40,31 +40,35 @@ textarea {
|
|||
height: var(--input-height);
|
||||
padding-bottom: 0.1em;
|
||||
|
||||
&::placeholder {
|
||||
color: $lbry-gray-5;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
[data-mode='dark'] & {
|
||||
&::placeholder {
|
||||
opacity: 0.4;
|
||||
color: $lbry-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: lighten($lbry-black, 20%);
|
||||
border-radius: var(--input-border-radius);
|
||||
background-color: $lbry-white;
|
||||
border-width: 1px;
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-color: var(--dm-color-02);
|
||||
border-color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset-section {
|
||||
margin-bottom: var(--spacing-small);
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: lighten($lbry-black, 20%);
|
||||
border-radius: var(--input-border-radius);
|
||||
background-color: $lbry-white;
|
||||
border-width: 1px;
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-color: var(--dm-color-03);
|
||||
border-color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: auto;
|
||||
text-transform: none;
|
||||
|
|
@ -188,9 +192,8 @@ fieldset-group {
|
|||
background-color: $lbry-white;
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-color: var(--dm-color-02);
|
||||
border-color: $lbry-gray-2;
|
||||
color: $lbry-gray-1;
|
||||
background-color: var(--dm-color-03);
|
||||
border-color: var(--dm-color-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -211,7 +214,7 @@ fieldset-group {
|
|||
|
||||
[data-mode='dark'] & {
|
||||
&:focus {
|
||||
border-image-source: linear-gradient(to right, $lbry-gray-4, $lbry-teal-5 5%);
|
||||
border-image-source: linear-gradient(to right, var(--dm-color-02), $lbry-teal-5 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -294,7 +297,7 @@ fieldset-section {
|
|||
input:not(.form-field--copyable),
|
||||
textarea,
|
||||
select {
|
||||
border-color: var(--dm-color-01);
|
||||
border-color: $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,4 +15,8 @@
|
|||
position: absolute;
|
||||
stroke: $lbry-gray-5;
|
||||
}
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-color: var(--color-card-actions--dark);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,10 +77,10 @@
|
|||
}
|
||||
|
||||
[data-mode='dark'] & {
|
||||
color: var(--dm-color-01);
|
||||
color: darken($lbry-white, 30%);
|
||||
|
||||
svg {
|
||||
stroke: var(--dm-color-01);
|
||||
stroke: darken($lbry-white, 30%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@ $main: $lbry-teal-5;
|
|||
margin-top: -2px; // To handle the border height
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-color: var(--dm-color-02);
|
||||
border-color: $lbry-white;
|
||||
background-color: var(--dm-color-03);
|
||||
border-color: $lbry-gray-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
stroke: $lbry-gray-5;
|
||||
|
||||
[data-mode='dark'] & {
|
||||
stroke: $lbry-gray-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ $large-breakpoint: 1921px;
|
|||
--color-background: #f7f7f7;
|
||||
--color-background--splash: #270f34;
|
||||
--color-card-actions: #f7fbfe;
|
||||
--color-card-actions--dark: #545454;
|
||||
|
||||
// Dark Mode
|
||||
--dm-color-01: #ddd;
|
||||
|
|
|
|||
|
|
@ -812,5 +812,11 @@
|
|||
"Claim Your 20 LBC Invite Reward": "Claim Your 20 LBC Invite Reward",
|
||||
"Publish something totally wacky and wild.": "Publish something totally wacky and wild.",
|
||||
"LBRY names cannot contain spaces or reserved symbols": "LBRY names cannot contain spaces or reserved symbols",
|
||||
"If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.": "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid."
|
||||
"If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.": "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.",
|
||||
"Blockchain expert? %learn_more%": "Blockchain expert? %learn_more%",
|
||||
"Your Blocked Channels": "Your Blocked Channels",
|
||||
"You aren’t blocking any channels": "You aren’t blocking any channels",
|
||||
"When you block a channel, all content from that channel will be hidden.": "When you block a channel, all content from that channel will be hidden.",
|
||||
"dfsdfsdf": "dfsdfsdf",
|
||||
"Light": "Light"
|
||||
}
|
||||
|
|
@ -6850,17 +6850,17 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
|
|||
yargs "^13.2.2"
|
||||
zstd-codec "^0.1.1"
|
||||
|
||||
lbry-redux@lbryio/lbry-redux#74f55ba9e3b81b5364788a8cbdd89bd2884d40d0:
|
||||
lbry-redux@lbryio/lbry-redux#b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d:
|
||||
version "0.0.1"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/74f55ba9e3b81b5364788a8cbdd89bd2884d40d0"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d"
|
||||
dependencies:
|
||||
proxy-polyfill "0.1.6"
|
||||
reselect "^3.0.0"
|
||||
uuid "^3.3.2"
|
||||
|
||||
lbryinc@lbryio/lbryinc#5aba3127c879f5aaa9b1eccaf57aae97449df183:
|
||||
lbryinc@lbryio/lbryinc#f5bee9cd300c4bdc05228e31ea15cfc430975f67:
|
||||
version "0.0.1"
|
||||
resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/5aba3127c879f5aaa9b1eccaf57aae97449df183"
|
||||
resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/f5bee9cd300c4bdc05228e31ea15cfc430975f67"
|
||||
dependencies:
|
||||
reselect "^3.0.0"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue