From 1254135455b94b60d14fc8430b398974f3e9677a Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 3 Oct 2019 14:24:45 -0400 Subject: [PATCH] Revert "dark mode love plus other fixes" This reverts commit 15755c39db897bfe848f2499942f4fce94229d30. --- 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, 83 insertions(+), 107 deletions(-) diff --git a/package.json b/package.json index 6ce985e77..b2661fbfd 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#b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d", - "lbryinc": "lbryio/lbryinc#f5bee9cd300c4bdc05228e31ea15cfc430975f67", + "lbry-redux": "lbryio/lbry-redux#74f55ba9e3b81b5364788a8cbdd89bd2884d40d0", + "lbryinc": "lbryio/lbryinc#5aba3127c879f5aaa9b1eccaf57aae97449df183", "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 a5578547f..4021aec90 100644 --- a/src/ui/component/claimPreview/view.jsx +++ b/src/ui/component/claimPreview/view.jsx @@ -188,27 +188,24 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => {
{claim ? : {__('Nothing here')}}
- {!pending && ( - - {!hideActions && actions !== undefined ? ( - actions - ) : ( -
- {isChannel && !channelIsBlocked && !claimIsMine && ( - - )} - {isChannel && !isSubscribed && !claimIsMine && ( - - )} - {!isChannel && claim && } -
+ {!hideActions && actions !== undefined ? ( + actions + ) : ( +
+ {isChannel && !channelIsBlocked && !claimIsMine && ( + )} - + {isChannel && !isSubscribed && !claimIsMine && ( + + )} + {!isChannel && claim && } +
)}
+ {pending &&
Pending...
} {!isResolvingUri && (
{claim ? ( @@ -226,16 +223,12 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { )}
- {pending ? ( -
Pending...
- ) : ( - claim && + {claim && (isChannel ? ( type !== 'inline' && `${claimsInChannel} ${__('publishes')}` ) : ( - )) - )} + ))}
)} diff --git a/src/ui/component/userEmailNew/view.jsx b/src/ui/component/userEmailNew/view.jsx index b1bd4f185..c2d6e80bb 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(true); + const [ageConfirmation, setAgeConfirmation] = useState(false); 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 76be35dcf..db127e51e 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, selectCreatingChannel } from 'lbry-redux'; +import { selectMyChannelClaims, selectBalance, selectFetchingMyChannels } from 'lbry-redux'; import { makeSelectClientSetting } from 'redux/selectors/settings'; import UserSignIn from './view'; @@ -36,7 +36,6 @@ 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 23831cced..8aef76b51 100644 --- a/src/ui/component/userSignIn/view.jsx +++ b/src/ui/component/userSignIn/view.jsx @@ -30,7 +30,6 @@ type Props = { hasSynced: boolean, syncingWallet: boolean, getSyncError: ?string, - creatingChannel: boolean, }; function UserSignIn(props: Props) { @@ -51,7 +50,6 @@ function UserSignIn(props: Props) { getSyncError, hasSynced, fetchingChannels, - creatingChannel, } = props; const { search } = location; const urlParams = new URLSearchParams(search); @@ -72,7 +70,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 || creatingChannel; + const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet; 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); @@ -82,12 +80,7 @@ function UserSignIn(props: Props) { const showUserVerification = hasVerifiedEmail && !rewardsApproved; const showSyncPassword = syncEnabled && getSyncError && !hasSynced; const showChannelCreation = - hasVerifiedEmail && - balance !== undefined && - balance !== null && - balance > DEFAULT_BID_FOR_FIRST_CHANNEL && - channelCount === 0 && - !hasYoutubeChannels; + hasVerifiedEmail && balance && 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 e56f1e448..cf5e05748 100644 --- a/src/ui/page/channels/view.jsx +++ b/src/ui/page/channels/view.jsx @@ -15,22 +15,10 @@ 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(); - - let interval; - if (hasPendingChannels) { - interval = setInterval(() => { - fetchChannelListMine(); - }, 5000); - } - - return () => { - clearInterval(interval); - }; - }, [fetchChannelListMine, hasPendingChannels]); + }, [fetchChannelListMine]); return ( diff --git a/src/ui/redux/actions/publish.js b/src/ui/redux/actions/publish.js index b825f5ddc..d130d822a 100644 --- a/src/ui/redux/actions/publish.js +++ b/src/ui/redux/actions/publish.js @@ -54,10 +54,7 @@ export const doCheckPendingPublishesApp = () => (dispatch: Dispatch, getState: G const onConfirmed = claim => { if (selectosNotificationsEnabled(getState())) { const notif = new window.Notification('LBRY Publish Complete', { - 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, - }), + body: `${claim.value.title} has been published to lbry://${claim.name}. Click here to view it`, silent: false, }); notif.onclick = () => { diff --git a/src/ui/scss/component/_button.scss b/src/ui/scss/component/_button.scss index 43231d628..50ae033b8 100644 --- a/src/ui/scss/component/_button.scss +++ b/src/ui/scss/component/_button.scss @@ -70,11 +70,7 @@ .button--link { [data-mode='dark'] & { - color: $lbry-teal-4; - - &:hover { - color: $lbry-teal-3; - } + color: $lbry-teal-3; } } diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss index c52cfc1f6..384fb0d6d 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(--color-card-actions--dark); + background-color: var(--dm-color-04); color: inherit; } } diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index b9d00f965..079fa266f 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); - background-color: var(--color-card-actions); + color: $lbry-white; & > *:not(:last-child) { margin-right: 0.5rem; @@ -26,6 +26,22 @@ $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; @@ -33,7 +49,6 @@ $border-color--dark: var(--dm-color-04); [data-mode='dark'] & { color: var(--dm-color-01); - background-color: var(--color-card-actions--dark); } } @@ -46,12 +61,25 @@ $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 4c3c4e04c..566eb50fc 100644 --- a/src/ui/scss/component/_form-field.scss +++ b/src/ui/scss/component/_form-field.scss @@ -40,35 +40,31 @@ 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; @@ -192,8 +188,9 @@ fieldset-group { background-color: $lbry-white; [data-mode='dark'] & { - background-color: var(--dm-color-03); - border-color: var(--dm-color-02); + background-color: var(--dm-color-02); + border-color: $lbry-gray-2; + color: $lbry-gray-1; } } } @@ -214,7 +211,7 @@ fieldset-group { [data-mode='dark'] & { &:focus { - border-image-source: linear-gradient(to right, var(--dm-color-02), $lbry-teal-5 5%); + border-image-source: linear-gradient(to right, $lbry-gray-4, $lbry-teal-5 5%); } } } @@ -297,7 +294,7 @@ fieldset-section { input:not(.form-field--copyable), textarea, select { - border-color: $lbry-gray-5; + border-color: var(--dm-color-01); } } } diff --git a/src/ui/scss/component/_icon.scss b/src/ui/scss/component/_icon.scss index 7b973b7a0..db7da0e2d 100644 --- a/src/ui/scss/component/_icon.scss +++ b/src/ui/scss/component/_icon.scss @@ -15,8 +15,4 @@ 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 fc806772b..2dde70268 100644 --- a/src/ui/scss/component/_navigation.scss +++ b/src/ui/scss/component/_navigation.scss @@ -77,10 +77,10 @@ } [data-mode='dark'] & { - color: darken($lbry-white, 30%); + color: var(--dm-color-01); svg { - stroke: darken($lbry-white, 30%); + stroke: var(--dm-color-01); } &:hover, diff --git a/src/ui/scss/component/_tags.scss b/src/ui/scss/component/_tags.scss index 9f4633a55..da6f20e6d 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-03); - border-color: $lbry-gray-4; + background-color: var(--dm-color-02); + border-color: $lbry-white; } } } diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss index c0f14696e..14c5ab443 100644 --- a/src/ui/scss/component/_wunderbar.scss +++ b/src/ui/scss/component/_wunderbar.scss @@ -20,10 +20,6 @@ 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 8097fef4e..5855bfe32 100644 --- a/src/ui/scss/init/_vars.scss +++ b/src/ui/scss/init/_vars.scss @@ -41,7 +41,6 @@ $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 887025ecd..54fd0600e 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -812,11 +812,5 @@ "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.", - "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" + "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." } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 5b0164f96..fe3a5a89a 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#b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d: +lbry-redux@lbryio/lbry-redux#74f55ba9e3b81b5364788a8cbdd89bd2884d40d0: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b6a7dd0d99f0f8cfc204d3734b6cfc6eb7f8303d" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/74f55ba9e3b81b5364788a8cbdd89bd2884d40d0" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0" uuid "^3.3.2" -lbryinc@lbryio/lbryinc#f5bee9cd300c4bdc05228e31ea15cfc430975f67: +lbryinc@lbryio/lbryinc#5aba3127c879f5aaa9b1eccaf57aae97449df183: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/f5bee9cd300c4bdc05228e31ea15cfc430975f67" + resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/5aba3127c879f5aaa9b1eccaf57aae97449df183" dependencies: reselect "^3.0.0"