From 15755c39db897bfe848f2499942f4fce94229d30 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 3 Oct 2019 01:27:06 -0400 Subject: [PATCH] dark mode love plus other fixes --- package.json | 4 +-- src/ui/component/claimPreview/view.jsx | 35 ++++++++++++--------- src/ui/component/userEmailNew/view.jsx | 2 +- src/ui/component/userSignIn/index.js | 3 +- src/ui/component/userSignIn/view.jsx | 11 +++++-- src/ui/page/channels/view.jsx | 14 ++++++++- src/ui/redux/actions/publish.js | 5 ++- src/ui/scss/component/_button.scss | 6 +++- src/ui/scss/component/_card.scss | 2 +- src/ui/scss/component/_claim-list.scss | 32 ++----------------- src/ui/scss/component/_form-field.scss | 43 ++++++++++++++------------ src/ui/scss/component/_icon.scss | 4 +++ src/ui/scss/component/_navigation.scss | 4 +-- src/ui/scss/component/_tags.scss | 4 +-- src/ui/scss/component/_wunderbar.scss | 4 +++ src/ui/scss/init/_vars.scss | 1 + static/app-strings.json | 8 ++++- yarn.lock | 8 ++--- 18 files changed, 107 insertions(+), 83 deletions(-) diff --git a/package.json b/package.json index b2661fbfd..6ce985e77 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx index 4021aec90..a5578547f 100644 --- a/src/ui/component/claimPreview/view.jsx +++ b/src/ui/component/claimPreview/view.jsx @@ -188,24 +188,27 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => {
{claim ? : {__('Nothing here')}}
- {!hideActions && actions !== undefined ? ( - actions - ) : ( -
- {isChannel && !channelIsBlocked && !claimIsMine && ( - + {!pending && ( + + {!hideActions && actions !== undefined ? ( + actions + ) : ( +
+ {isChannel && !channelIsBlocked && !claimIsMine && ( + + )} + {isChannel && !isSubscribed && !claimIsMine && ( + + )} + {!isChannel && claim && } +
)} - {isChannel && !isSubscribed && !claimIsMine && ( - - )} - {!isChannel && claim && } -
+ )}
- {pending &&
Pending...
} {!isResolvingUri && (
{claim ? ( @@ -223,12 +226,16 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { )}
- {claim && + {pending ? ( +
Pending...
+ ) : ( + claim && (isChannel ? ( type !== 'inline' && `${claimsInChannel} ${__('publishes')}` ) : ( - ))} + )) + )}
)} diff --git a/src/ui/component/userEmailNew/view.jsx b/src/ui/component/userEmailNew/view.jsx index c2d6e80bb..b1bd4f185 100644 --- a/src/ui/component/userEmailNew/view.jsx +++ b/src/ui/component/userEmailNew/view.jsx @@ -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() { diff --git a/src/ui/component/userSignIn/index.js b/src/ui/component/userSignIn/index.js index db127e51e..76be35dcf 100644 --- a/src/ui/component/userSignIn/index.js +++ b/src/ui/component/userSignIn/index.js @@ -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 => ({ diff --git a/src/ui/component/userSignIn/view.jsx b/src/ui/component/userSignIn/view.jsx index 8aef76b51..23831cced 100644 --- a/src/ui/component/userSignIn/view.jsx +++ b/src/ui/component/userSignIn/view.jsx @@ -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); diff --git a/src/ui/page/channels/view.jsx b/src/ui/page/channels/view.jsx index cf5e05748..e56f1e448 100644 --- a/src/ui/page/channels/view.jsx +++ b/src/ui/page/channels/view.jsx @@ -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 ( diff --git a/src/ui/redux/actions/publish.js b/src/ui/redux/actions/publish.js index d130d822a..b825f5ddc 100644 --- a/src/ui/redux/actions/publish.js +++ b/src/ui/redux/actions/publish.js @@ -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 = () => { diff --git a/src/ui/scss/component/_button.scss b/src/ui/scss/component/_button.scss index 50ae033b8..43231d628 100644 --- a/src/ui/scss/component/_button.scss +++ b/src/ui/scss/component/_button.scss @@ -70,7 +70,11 @@ .button--link { [data-mode='dark'] & { - color: $lbry-teal-3; + color: $lbry-teal-4; + + &:hover { + color: $lbry-teal-3; + } } } diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss index 384fb0d6d..c52cfc1f6 100644 --- a/src/ui/scss/component/_card.scss +++ b/src/ui/scss/component/_card.scss @@ -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; } } diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index 079fa266f..b9d00f965 100644 --- a/src/ui/scss/component/_claim-list.scss +++ b/src/ui/scss/component/_claim-list.scss @@ -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; diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss index 566eb50fc..4c3c4e04c 100644 --- a/src/ui/scss/component/_form-field.scss +++ b/src/ui/scss/component/_form-field.scss @@ -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; } } } diff --git a/src/ui/scss/component/_icon.scss b/src/ui/scss/component/_icon.scss index db7da0e2d..7b973b7a0 100644 --- a/src/ui/scss/component/_icon.scss +++ b/src/ui/scss/component/_icon.scss @@ -15,4 +15,8 @@ position: absolute; stroke: $lbry-gray-5; } + + [data-mode='dark'] & { + background-color: var(--color-card-actions--dark); + } } diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss index 2dde70268..fc806772b 100644 --- a/src/ui/scss/component/_navigation.scss +++ b/src/ui/scss/component/_navigation.scss @@ -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, diff --git a/src/ui/scss/component/_tags.scss b/src/ui/scss/component/_tags.scss index da6f20e6d..9f4633a55 100644 --- a/src/ui/scss/component/_tags.scss +++ b/src/ui/scss/component/_tags.scss @@ -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; } } } diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss index 14c5ab443..c0f14696e 100644 --- a/src/ui/scss/component/_wunderbar.scss +++ b/src/ui/scss/component/_wunderbar.scss @@ -20,6 +20,10 @@ position: absolute; z-index: 1; stroke: $lbry-gray-5; + + [data-mode='dark'] & { + stroke: $lbry-gray-3; + } } } diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss index 5855bfe32..8097fef4e 100644 --- a/src/ui/scss/init/_vars.scss +++ b/src/ui/scss/init/_vars.scss @@ -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; diff --git a/static/app-strings.json b/static/app-strings.json index 54fd0600e..887025ecd 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -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" } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index fe3a5a89a..5b0164f96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"