diff --git a/package.json b/package.json index 9dec23212..d645bd263 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,6 @@ "react-simplemde-editor": "^4.0.0", "react-spring": "^8.0.20", "react-sticky-box": "^0.8.0", - "react-toggle": "^4.0.2", "redux": "^3.6.0", "redux-persist": "^4.8.0", "redux-persist-transform-compress": "^4.2.0", diff --git a/src/ui/component/channelContent/view.jsx b/src/ui/component/channelContent/view.jsx index 309664b70..fb72728fd 100644 --- a/src/ui/component/channelContent/view.jsx +++ b/src/ui/component/channelContent/view.jsx @@ -29,11 +29,11 @@ function ChannelContent(props: Props) { {!fetching && !hasContent && (
-

{__("This channel hasn't uploaded anything.")}

+

{__("This channel hasn't uploaded anything.")}

)} - {!channelIsMine && } + {!channelIsMine && } {hasContent && claim.permanent_url)} />} diff --git a/src/ui/component/channelEdit/view.jsx b/src/ui/component/channelEdit/view.jsx index 77c963402..f4e528fdd 100644 --- a/src/ui/component/channelEdit/view.jsx +++ b/src/ui/component/channelEdit/view.jsx @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import { parseURI } from 'lbry-redux'; import { Form, FormField } from 'component/common/form'; -import Button from 'component/button'; import SelectAsset from 'component/selectAsset'; import TagSelect from 'component/tagsSelect'; @@ -21,12 +20,9 @@ type Props = { tags: Array, locations: Array, languages: Array, - updateChannel: any => void, - updateThumb: string => void, updateCover: string => void, - setEditing: boolean => void, }; function ChannelForm(props: Props) { @@ -43,7 +39,6 @@ function ChannelForm(props: Props) { languages, amount, updateChannel, - setEditing, updateThumb, updateCover, } = props; @@ -113,111 +108,109 @@ function ChannelForm(props: Props) {

updateChannel(channelParams)}> -
- handleThumbnailChange(v)} - currentValue={params.thumbnail} - assetName={'Thumbnail'} - recommended={'(300 x 300)'} - /> + handleThumbnailChange(v)} + currentValue={params.thumbnail} + assetName={'Thumbnail'} + recommended={'(300 x 300)'} + /> - handleCoverChange(v)} - currentValue={params.cover} - assetName={'Cover'} - recommended={'(1000 x 160)'} - /> + handleCoverChange(v)} + currentValue={params.cover} + assetName={'Cover'} + recommended={'(1000 x 160)'} + /> - setParams({ ...params, title: e.target.value })} - /> - handleBidChange(parseFloat(event.target.value))} - placeholder={0.1} - /> + setParams({ ...params, title: e.target.value })} + /> + handleBidChange(parseFloat(event.target.value))} + placeholder={0.1} + /> - setParams({ ...params, website: e.target.value })} - /> + setParams({ ...params, website: e.target.value })} + /> - setParams({ ...params, email: e.target.value })} - /> + setParams({ ...params, email: e.target.value })} + /> - setParams({ ...params, description: text })} - /> - { - if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) { - setParams({ ...params, tags: [...params.tags, newTag] }); - } else { - // If it already exists and the user types it in, remove it - setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) }); - } + setParams({ ...params, description: text })} + /> + { + if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) { + setParams({ ...params, tags: [...params.tags, newTag] }); + } else { + // If it already exists and the user types it in, remove it + setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) }); + } + }} + onRemove={clickedTag => { + const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name); + setParams({ ...params, tags: newTags }); + }} + tagsChosen={params.tags || []} + /> +
+
diff --git a/src/ui/component/claimList/view.jsx b/src/ui/component/claimList/view.jsx index 7a29d01a1..77a54f635 100644 --- a/src/ui/component/claimList/view.jsx +++ b/src/ui/component/claimList/view.jsx @@ -99,7 +99,7 @@ export default function ClaimList(props: Props) { )} {urisLength > 0 && ( -
    +
      {sortedUris.map((uri, index) => ( @@ -108,7 +108,7 @@ export default function ClaimList(props: Props) { ))}
    )} - {urisLength === 0 && !loading &&

    {empty || __('No results')}

    } + {urisLength === 0 && !loading &&

    {empty || __('No results')}

    } ); } diff --git a/src/ui/component/claimListDiscover/view.jsx b/src/ui/component/claimListDiscover/view.jsx index 7308a38ad..5f6bc07ac 100644 --- a/src/ui/component/claimListDiscover/view.jsx +++ b/src/ui/component/claimListDiscover/view.jsx @@ -1,6 +1,6 @@ // @flow import type { Node } from 'react'; -import React, { useEffect } from 'react'; +import React, { Fragment, useEffect } from 'react'; import { withRouter } from 'react-router'; import { buildClaimSearchCacheQuery, MATURE_TAGS } from 'lbry-redux'; import { FormField } from 'component/common/form'; @@ -149,7 +149,7 @@ function ClaimListDiscover(props: Props) { }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]); const header = ( -

    + )} -

    + ); return ( @@ -221,7 +221,7 @@ function ClaimListDiscover(props: Props) { pageSize={PAGE_SIZE} /> - {loading && new Array(PAGE_SIZE).fill(1).map((x, i) => )} + {loading && new Array(PAGE_SIZE).fill(1).map((x, i) => )} ); } diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx index e4bce7944..6aa2f7e96 100644 --- a/src/ui/component/claimPreview/view.jsx +++ b/src/ui/component/claimPreview/view.jsx @@ -1,5 +1,5 @@ // @flow -import React, { useEffect } from 'react'; +import React, { Fragment, useEffect } from 'react'; import classnames from 'classnames'; import { parseURI, convertToShareLink } from 'lbry-redux'; import { withRouter } from 'react-router-dom'; @@ -13,6 +13,7 @@ import FileProperties from 'component/fileProperties'; import ClaimTags from 'component/claimTags'; import SubscribeButton from 'component/subscribeButton'; import ChannelThumbnail from 'component/channelThumbnail'; +import Button from 'component/button'; type Props = { uri: string, @@ -27,7 +28,7 @@ type Props = { thumbnail: string, title: string, nsfw: boolean, - placeholder: boolean, + placeholder: string, type: string, hasVisitedUri: boolean, blackListedOutpoints: Array<{ @@ -60,8 +61,10 @@ function ClaimPreview(props: Props) { hasVisitedUri, } = props; const haventFetched = claim === undefined; - const abandoned = !isResolvingUri && !claim && !placeholder; + const abandoned = !isResolvingUri && !claim; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; + const showPublishLink = abandoned && placeholder === 'publish'; + let isValid; try { parseURI(uri); @@ -71,9 +74,8 @@ function ClaimPreview(props: Props) { } const isChannel = isValid ? parseURI(uri).isChannel : false; - const signingChannel = claim && claim.signing_channel; - - let shouldHide = abandoned || (!claimIsMine && obscureNsfw && nsfw); + let shouldHide = + placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw)); // This will be replaced once blocking is done at the wallet server level if (claim && !shouldHide && blackListedOutpoints) { @@ -113,9 +115,9 @@ function ClaimPreview(props: Props) { return null; } - if (placeholder || (isResolvingUri && !claim)) { + if (placeholder === 'loading' || (isResolvingUri && !claim)) { return ( -
  • +
  • @@ -128,10 +130,12 @@ function ClaimPreview(props: Props) { return (
  • - + {claim ? : {__('Nothing here')}}
    {type !== 'small' && (
    @@ -152,11 +156,29 @@ function ClaimPreview(props: Props) {
    - {pending &&
    Pending...
    } -
    {isChannel ? `${claimsInChannel} ${__('publishes')}` : }
    + {!isResolvingUri && ( +
    + {claim ? ( + + ) : ( + +
    {__('Publish something and claim this spot!')}
    +
    +
    +     + )} +
    + {isChannel ? ( + type !== 'inline' && `${claimsInChannel} ${__('publishes')}` + ) : ( + + )} +
    +
    + )}
    -
    diff --git a/src/ui/component/commentCreate/view.jsx b/src/ui/component/commentCreate/view.jsx index dd81e7d05..e731a9a19 100644 --- a/src/ui/component/commentCreate/view.jsx +++ b/src/ui/component/commentCreate/view.jsx @@ -39,7 +39,7 @@ export function CommentCreate(props: Props) { return (
    {commentAck !== true && ( -
    +

    {__('A few things to know before participating in the comment alpha:')}

    • @@ -66,20 +66,16 @@ export function CommentCreate(props: Props) { )} {commentAck === true && (
      -
      - -
      -
      - -
      + +
      +

      + {__('Earn')}

    ); } diff --git a/src/ui/component/navigationHistory/view.jsx b/src/ui/component/navigationHistory/view.jsx index 3a9e8d303..71a5ca174 100644 --- a/src/ui/component/navigationHistory/view.jsx +++ b/src/ui/component/navigationHistory/view.jsx @@ -78,7 +78,7 @@ class UserHistoryPage extends React.PureComponent { return historyItems.length ? ( -
    +
    {Object.keys(itemsSelected).length ? (
    {!!historyItems.length && ( -
    +
    {historyItems.map(item => ( { ) : (
    -
    -

    {__('Your history is empty, what are you doing here?')}

    -
    +

    {__('Your history is empty, what are you doing here?')}

    -
    -
    -
    +
    +
    diff --git a/src/ui/component/navigationHistoryRecent/view.jsx b/src/ui/component/navigationHistoryRecent/view.jsx index 92e5c2831..5068b8093 100644 --- a/src/ui/component/navigationHistoryRecent/view.jsx +++ b/src/ui/component/navigationHistoryRecent/view.jsx @@ -17,11 +17,9 @@ export default function NavigationHistoryRecent(props: Props) { return history.length ? (
    -
    - {history.map(({ lastViewed, uri }) => ( - - ))} -
    + {history.map(({ lastViewed, uri }) => ( + + ))}
    diff --git a/src/ui/component/previewLink/view.jsx b/src/ui/component/previewLink/view.jsx index f05b4a654..58799884d 100644 --- a/src/ui/component/previewLink/view.jsx +++ b/src/ui/component/previewLink/view.jsx @@ -38,11 +38,11 @@ class PreviewLink extends React.PureComponent { - + - + diff --git a/src/ui/component/publishAdditionalOptions/view.jsx b/src/ui/component/publishAdditionalOptions/view.jsx index d0d19869f..6f0ac6316 100644 --- a/src/ui/component/publishAdditionalOptions/view.jsx +++ b/src/ui/component/publishAdditionalOptions/view.jsx @@ -27,7 +27,7 @@ function PublishAdvanced(props: Props) { return (
    {!hideSection && ( -
    +
    -
    -

    {isStillEditing ? __('Edit') : __('Publish')}

    - {isStillEditing &&

    {__('You are currently editing a claim.')}

    } -
    +

    {isStillEditing ? __('Edit') : __('Publish')}

    + {isStillEditing &&

    {__('You are currently editing a claim.')}

    }
    diff --git a/src/ui/component/publishForm/view.jsx b/src/ui/component/publishForm/view.jsx index 9cbcf1553..8d09a44c2 100644 --- a/src/ui/component/publishForm/view.jsx +++ b/src/ui/component/publishForm/view.jsx @@ -130,7 +130,7 @@ function PublishForm(props: Props) { {/* This should probably be PublishThumbnail */}
    -
    +
    -
    - updatePublishForm({ channel })} /> -

    - {__('This is a username or handle that your content can be found under.')}{' '} - {__('Ex. @Marvel, @TheBeatles, @BooksByJoe')} -

    -
    + updatePublishForm({ channel })} /> +

    + {__('This is a username or handle that your content can be found under.')}{' '} + {__('Ex. @Marvel, @TheBeatles, @BooksByJoe')} +

    -
    +
    {!formDisabled && !formValid && }
    diff --git a/src/ui/component/publishFormErrors/view.jsx b/src/ui/component/publishFormErrors/view.jsx index 51ccd86eb..28a0b862f 100644 --- a/src/ui/component/publishFormErrors/view.jsx +++ b/src/ui/component/publishFormErrors/view.jsx @@ -18,7 +18,7 @@ function PublishFormErrors(props: Props) { // These are extra help // If there is an error it will be presented as an inline error as well return ( -
    +
    {!title &&
    {__('A title is required')}
    } {!name &&
    {__('A URL is required')}
    } {!bid &&
    {__('A deposit amount is required')}
    } diff --git a/src/ui/component/publishName/view.jsx b/src/ui/component/publishName/view.jsx index b5862dea7..387135859 100644 --- a/src/ui/component/publishName/view.jsx +++ b/src/ui/component/publishName/view.jsx @@ -74,30 +74,28 @@ function PublishName(props: Props) { return (
    -
    - - - - {`lbry://${ - !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/` - }`} - - updatePublishForm({ name: event.target.value })} - /> - -
    - -
    + + + +
    {`lbry://${ + !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/` + }`}
    +     + updatePublishForm({ name: event.target.value })} + /> +     +
    +
    -
    - updatePublishForm({ contentIsFree: true })} - /> + updatePublishForm({ contentIsFree: true })} + /> - updatePublishForm({ contentIsFree: false })} + updatePublishForm({ contentIsFree: false })} + /> + {!contentIsFree && ( + updatePublishForm({ fee: newFee })} /> - {!contentIsFree && ( - updatePublishForm({ fee: newFee })} - /> - )} - {fee && fee.currency !== 'LBC' && ( -

    - {__( - 'All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.' - )} -

    - )} -
    + )} + {fee && fee.currency !== 'LBC' && ( +

    + {__( + 'All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.' + )} +

    + )}
    ); } diff --git a/src/ui/component/publishText/view.jsx b/src/ui/component/publishText/view.jsx index b00442e8d..47f78e5e3 100644 --- a/src/ui/component/publishText/view.jsx +++ b/src/ui/component/publishText/view.jsx @@ -20,29 +20,27 @@ function PublishText(props: Props) { return (
    -
    - updatePublishForm({ title: e.target.value })} - /> + updatePublishForm({ title: e.target.value })} + /> - updatePublishForm({ description: advancedEditor ? value : value.target.value })} - /> -
    -
    + updatePublishForm({ description: advancedEditor ? value : value.target.value })} + /> +
    +
    ); diff --git a/src/ui/component/recommendedContent/view.jsx b/src/ui/component/recommendedContent/view.jsx index 55ad9713c..6763e0dd1 100644 --- a/src/ui/component/recommendedContent/view.jsx +++ b/src/ui/component/recommendedContent/view.jsx @@ -56,7 +56,7 @@ export default class RecommendedContent extends React.PureComponent { type="small" loading={isSearching} uris={recommendedContent} - header={{__('Related')}} + header={__('Related')} empty={
    {__('No related content found')}
    } />
    diff --git a/src/ui/component/rewardListClaimed/view.jsx b/src/ui/component/rewardListClaimed/view.jsx index 5e381decc..8203d1304 100644 --- a/src/ui/component/rewardListClaimed/view.jsx +++ b/src/ui/component/rewardListClaimed/view.jsx @@ -35,7 +35,7 @@ const RewardListClaimed = (props: Props) => {

    - +
    diff --git a/src/ui/component/rewardSummary/view.jsx b/src/ui/component/rewardSummary/view.jsx index d75d68656..36040df6d 100644 --- a/src/ui/component/rewardSummary/view.jsx +++ b/src/ui/component/rewardSummary/view.jsx @@ -14,9 +14,7 @@ class RewardSummary extends React.Component { const hasRewards = unclaimedRewardAmount > 0; return (
    -
    -

    {__('Rewards')}

    -
    +

    {__('Rewards')}

    {fetching && __('You have...')} @@ -34,15 +32,13 @@ class RewardSummary extends React.Component { )}

    -
    -
    -
    +
    +
    ); diff --git a/src/ui/component/rewardTile/view.jsx b/src/ui/component/rewardTile/view.jsx index 7a4ca3c4c..ca9bb4212 100644 --- a/src/ui/component/rewardTile/view.jsx +++ b/src/ui/component/rewardTile/view.jsx @@ -25,28 +25,24 @@ const RewardTile = (props: Props) => { return (
    -
    -

    {reward.reward_title}

    -

    {reward.reward_description}

    -
    +

    {reward.reward_title}

    +

    {reward.reward_description}

    -
    -
    - {reward.reward_type === rewards.TYPE_GENERATED_CODE && ( -
    +
    + {reward.reward_type === rewards.TYPE_GENERATED_CODE && ( +
    ); diff --git a/src/ui/component/rewardTotal/view.jsx b/src/ui/component/rewardTotal/view.jsx index 1b49194a2..a0a67ead4 100644 --- a/src/ui/component/rewardTotal/view.jsx +++ b/src/ui/component/rewardTotal/view.jsx @@ -16,9 +16,7 @@ function RewardTotal(props: Props) { return (
    - - {integer} LBC {__('Earned From Rewards')} - + {integer} LBC {__('Earned From Rewards')}
    ); } diff --git a/src/ui/component/searchOptions/view.jsx b/src/ui/component/searchOptions/view.jsx index 76dd883d8..5adb25b49 100644 --- a/src/ui/component/searchOptions/view.jsx +++ b/src/ui/component/searchOptions/view.jsx @@ -8,7 +8,7 @@ import Button from 'component/button'; const ExpandableOptions = posed.div({ hide: { height: 0, opacity: 0 }, - show: { height: 300, opacity: 1 }, + show: { height: 380, opacity: 1 }, }); type Props = { @@ -32,7 +32,7 @@ const SearchOptions = (props: Props) => { /> {expanded && ( - +
    {__('Search For')} {[ diff --git a/src/ui/component/selectChannel/view.jsx b/src/ui/component/selectChannel/view.jsx index 768bd5d97..0194154ff 100644 --- a/src/ui/component/selectChannel/view.jsx +++ b/src/ui/component/selectChannel/view.jsx @@ -1,5 +1,5 @@ // @flow -import React from 'react'; +import React, { Fragment } from 'react'; import { isNameValid } from 'lbry-redux'; import { FormField } from 'component/common/form'; import BusyIndicator from 'component/common/busy-indicator'; @@ -151,7 +151,7 @@ class ChannelSection extends React.PureComponent { } = this.state; return ( -
    + {createChannelError &&
    {createChannelError}
    } {fetchingChannels ? ( @@ -175,7 +175,7 @@ class ChannelSection extends React.PureComponent { )} {addingChannel && ( -
    +
    {
    )} -
    + ); } } diff --git a/src/ui/component/selectThumbnail/view.jsx b/src/ui/component/selectThumbnail/view.jsx index 687a95e98..d2020c227 100644 --- a/src/ui/component/selectThumbnail/view.jsx +++ b/src/ui/component/selectThumbnail/view.jsx @@ -83,7 +83,7 @@ class SelectThumbnail extends React.PureComponent { */ return ( -
    +
    {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
    diff --git a/src/ui/component/sideBar/view.jsx b/src/ui/component/sideBar/view.jsx index e28ecedc2..8ce448a1b 100644 --- a/src/ui/component/sideBar/view.jsx +++ b/src/ui/component/sideBar/view.jsx @@ -24,9 +24,9 @@ function SideBar(props: Props) { } return ( - +
    ) ); diff --git a/src/ui/component/transactionList/internal/transaction-list-item.jsx b/src/ui/component/transactionList/internal/transaction-list-item.jsx index 681580757..8f98aa40f 100644 --- a/src/ui/component/transactionList/internal/transaction-list-item.jsx +++ b/src/ui/component/transactionList/internal/transaction-list-item.jsx @@ -73,8 +73,7 @@ class TransactionListItem extends React.PureComponent { {this.capitalize(type)} {isRevokeable && this.getLink(type)}
    {__('Title')} - {reward && {reward.reward_title}} - {claimName && claimId ? diff --git a/src/ui/component/transactionList/view.jsx b/src/ui/component/transactionList/view.jsx index 06ce95e38..12a928540 100644 --- a/src/ui/component/transactionList/view.jsx +++ b/src/ui/component/transactionList/view.jsx @@ -69,12 +69,12 @@ class TransactionList extends React.PureComponent { return (
    -

    +

    {title} {loading && } -
    +
    {slim && (

    {!slim && !!transactions.length && ( -
    -
    +
    +
    { render() { const { transactions } = this.props; return ( -
    +
    } {email && isVerified && ( -
    -

    {__('Email')}

    -

    - {email && isVerified && __('Your email has been successfully verified')} - {!email && __('')}. -

    -
    +

    {__('Email')}

    +

    + {email && isVerified && __('Your email has been successfully verified')} + {!email && __('')}. +

    {isVerified && ( { return ( -
    -

    {__('Verify Your Email')}

    -

    - {/* @if TARGET='app' */} - {__("We'll let you know about LBRY updates, security issues, and great new content.")} - {/* @endif */} - {/* @if TARGET='web' */} - {__('Stay up to date with lbry.tv and be the first to know about the progress we make.')} - {/* @endif */} -

    -
    +

    {__('Verify Your Email')}

    +

    + {/* @if TARGET='app' */} + {__("We'll let you know about LBRY updates, security issues, and great new content.")} + {/* @endif */} + {/* @if TARGET='web' */} + {__('Stay up to date with lbry.tv and be the first to know about the progress we make.')} + {/* @endif */} +

    - + { return ( -
    -

    {__('Waiting For Verification')}

    -
    +

    {__('Waiting For Verification')}

    -
    -

    - {__('An email was sent to')} {email}.{' '} - {__('Follow the link and you will be good to go. This will update automatically.')} -

    +

    + {__('An email was sent to')} {email}.{' '} + {__('Follow the link and you will be good to go. This will update automatically.')} +

    -
    -
    - -

    - {__('Email')}

    + +

    + {__('Email')}

    - +

    + {' '} + {__(`Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `)} +

    +
    +
    +
    + {__('A $1 authorization may temporarily appear with your provider.')}{' '} +
    -
    -

    {__('3) Proof via Chat')}

    -

    - {__( - 'A moderator capable of approving you is typically available in the discord server. Check out the #rewards-approval channel for more information.' - )}{' '} - {__( - 'This process will likely involve providing proof of a stable and established online or real-life identity.' - )} -

    -
    +

    {__('3) Proof via Chat')}

    +

    + {__( + 'A moderator capable of approving you is typically available in the discord server. Check out the #rewards-approval channel for more information.' + )}{' '} + {__( + 'This process will likely involve providing proof of a stable and established online or real-life identity.' + )} +

    -
    -
    -
    +
    +
    -
    -

    {__('Or, Skip It Entirely')}

    -

    - {__('You can continue without this step, but you will not be eligible to earn rewards.')} -

    -
    +

    {__('Or, Skip It Entirely')}

    +

    + {__('You can continue without this step, but you will not be eligible to earn rewards.')} +

    -
    -
    -
    +
    +
    diff --git a/src/ui/component/walletAddress/view.jsx b/src/ui/component/walletAddress/view.jsx index ada798d42..6472e6268 100644 --- a/src/ui/component/walletAddress/view.jsx +++ b/src/ui/component/walletAddress/view.jsx @@ -47,39 +47,20 @@ class WalletAddress extends React.PureComponent { return (
    -
    -

    {__('Receive Credits')}

    -

    - {__('Use this wallet address to receive credits sent by another user (or yourself).')} -

    -
    +

    {__('Receive Credits')}

    +

    + {__( + 'Use this address to receive LBC. You can generate a new address at any time, and any previous addresses will continue to work.' + )} +

    + -
    - +
    +
    -
    -
    -
    - -

    - {__('You can generate a new address at any time, and any previous addresses will continue to work.')} -

    -
    - - {showQR && ( -
    - -
    - )} + {showQR && }
    ); } diff --git a/src/ui/component/walletBackup/view.jsx b/src/ui/component/walletBackup/view.jsx index bea8bd1df..1b9563de4 100644 --- a/src/ui/component/walletBackup/view.jsx +++ b/src/ui/component/walletBackup/view.jsx @@ -66,7 +66,7 @@ class WalletBackup extends React.PureComponent { try { zip.addLocalFolder(lbryumWalletDir); } catch (err) { - console.error(err); + console.error(err); // eslint-disable-line no-console this.showErrorMessage(__('The wallet folder could not be added to the zip archive.')); return; } @@ -74,7 +74,7 @@ class WalletBackup extends React.PureComponent { try { zip.writeZip(outputPath); } catch (err) { - console.error(err); + console.error(err); // eslint-disable-line no-console this.showErrorMessage(__('There was a problem writing the zip archive to disk.')); return; } @@ -85,68 +85,49 @@ class WalletBackup extends React.PureComponent { } render() { - const { daemonSettings } = this.props; + const { daemonSettings = {} } = this.props; const { wallet_dir: lbryumWalletDir } = daemonSettings; - const noDaemonSettings = Object.keys(daemonSettings).length === 0; - return (
    - {noDaemonSettings ? ( -
    -

    {__('Failed to load settings.')}

    -
    - ) : ( - -
    -

    {__('Backup Your LBRY Credits')}

    +

    {__('Backup Your LBRY Credits')}

    -

    - {__( - 'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.' - )} -

    -
    - -
    -

    - {__( - 'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.' - )} -

    -

    - {__( - 'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:' - )} -

    - -

    - {__( - 'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.' - )} -

    -

    - For more details on backing up and best practices,{' '} -

    -
    - - )} +
      +
    • + {__( + 'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.' + )} +
      • +
    • + {__( + 'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.' + )} +
      • +
    • + {__( + 'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:' + )} +
      • +
    + +

    + {__( + 'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.' + )}{' '} + {/* @i18fixme */} + {__('For more details on backing up and best practices')},{' '} +

    +

    + {__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '} + - + className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`} + > + {this.state.submitting ? __('Submitting...') : __('Submit Report')} +

    -
    -

    {__('Developer?')}

    -
    +

    {__('Developer?')}

    -
    -

    - {__('You can also')}{' '} -

    +

    + {__('You can also')}{' '} +

    ); diff --git a/src/ui/page/rewards/view.jsx b/src/ui/page/rewards/view.jsx index 17df9dd47..d927e10bf 100644 --- a/src/ui/page/rewards/view.jsx +++ b/src/ui/page/rewards/view.jsx @@ -34,38 +34,32 @@ class RewardsPage extends PureComponent { return ( !IS_WEB && (
    -
    -

    {__('Rewards Approval to Earn Credits (LBC)')}

    -

    - {__( - 'This step is optional. You can continue to use this app without rewards, but LBC may be needed for some tasks.' - )}{' '} -

    +

    {__('Rewards Approval to Earn Credits (LBC)')}

    +

    + {__( + 'This step is optional. You can continue to use this app without rewards, but LBC may be needed for some tasks.' + )}{' '} +

    ) ); } return (
    -
    -

    - {__('This account must undergo review before you can participate in the rewards program.')}{' '} - {__('This can take anywhere from several minutes to several days.')} -

    +

    + {__('This account must undergo review before you can participate in the rewards program.')}{' '} + {__('This can take anywhere from several minutes to several days.')} +

    -

    {__('We apologize for this inconvenience, but have added this additional step to prevent fraud.')}

    -

    - {`${__('If you continue to see this message, send us an email to help@lbry.com.')} ${__( - 'Please enjoy free content in the meantime!' - )}`} -

    -
    +

    {__('We apologize for this inconvenience, but have added this additional step to prevent fraud.')}

    +

    + {`${__('If you continue to see this message, send us an email to help@lbry.com.')} ${__( + 'Please enjoy free content in the meantime!' + )}`} +

    @@ -95,34 +89,26 @@ class RewardsPage extends PureComponent { if (daemonSettings && !daemonSettings.share_usage_data) { return (
    -
    -

    {__('Disabled')}

    -

    - {__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '} -

    +

    {__('Disabled')}

    +

    + {__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '} +

    ); } else if (fetching) { - return ( -
    - -
    - ); + return ; } else if (user === null) { return ( -
    -

    {__('This application is unable to earn rewards due to an authentication failure.')}

    -
    +

    {__('This application is unable to earn rewards due to an authentication failure.')}

    ); } else if (!rewards || rewards.length <= 0) { return (

    {__('No Rewards Available')}

    -

    +

    {claimed && claimed.length ? __( "You have claimed all available rewards! We're regularly adding more so be sure to check back later." diff --git a/src/ui/page/search/view.jsx b/src/ui/page/search/view.jsx index 186077f71..3626c5f79 100644 --- a/src/ui/page/search/view.jsx +++ b/src/ui/page/search/view.jsx @@ -41,10 +41,12 @@ export default function SearchPage(props: Props) { {isValid && (

    - - +
    + +
    )} @@ -72,7 +74,7 @@ export default function SearchPage(props: Props) { } /> -
    {__('These search results are provided by LBRY, Inc.')}
    +
    {__('These search results are provided by LBRY, Inc.')}
    )}
    diff --git a/src/ui/page/settings/view.jsx b/src/ui/page/settings/view.jsx index b269d7fec..b2b360208 100644 --- a/src/ui/page/settings/view.jsx +++ b/src/ui/page/settings/view.jsx @@ -1,5 +1,4 @@ // @flow -import * as ICONS from 'constants/icons'; import * as SETTINGS from 'constants/settings'; import * as React from 'react'; import classnames from 'classnames'; @@ -170,9 +169,7 @@ class SettingsPage extends React.PureComponent { ) : (
    -
    -

    {__('Download Directory')}

    -
    +

    {__('Download Directory')}

    {
    -
    -

    {__('Max Purchase Price')}

    -
    +

    {__('Max Purchase Price')}

    -
    + {
    -
    -

    {__('Purchase Confirmations')}

    -
    +

    {__('Purchase Confirmations')}

    - + {
    -
    -

    {__('Content Settings')}

    -
    +

    {__('Content Settings')}

    - + setClientSetting(SETTINGS.SHOW_NSFW, !showNsfw)} checked={showNsfw} @@ -287,12 +278,10 @@ class SettingsPage extends React.PureComponent {
    -
    -

    {__('Notifications')}

    -
    - +

    {__('Notifications')}

    + setClientSetting(SETTINGS.OS_NOTIFICATIONS_ENABLED, !osNotificationsEnabled)} checked={osNotificationsEnabled} @@ -303,13 +292,11 @@ class SettingsPage extends React.PureComponent {
    -
    -

    {__('Share Diagnostic Data')}

    -
    +

    {__('Share Diagnostic Data')}

    - + setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)} checked={daemonSettings.share_usage_data} @@ -325,11 +312,9 @@ class SettingsPage extends React.PureComponent {
    -
    -

    {__('Appearance')}

    -
    +

    {__('Appearance')}

    - + { this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)} checked={automaticDarkModeEnabled} @@ -360,13 +345,11 @@ class SettingsPage extends React.PureComponent {
    -
    -

    {__('Wallet Security')}

    -
    +

    {__('Wallet Security')}

    - + this.onChangeEncryptWallet()} checked={walletEncrypted} @@ -383,11 +366,9 @@ class SettingsPage extends React.PureComponent {
    -
    -

    {__('Experimental Settings')}

    -
    +

    {__('Experimental Settings')}

    - + { setClientSetting(SETTINGS.AUTO_DOWNLOAD, !autoDownload)} checked={autoDownload} @@ -417,7 +399,7 @@ class SettingsPage extends React.PureComponent { /> setClientSetting(SETTINGS.AUTOPLAY, !autoplay)} checked={autoplay} @@ -447,23 +429,18 @@ class SettingsPage extends React.PureComponent {
    -
    -

    {__('Application Cache')}

    -
    +

    {__('Application Cache')}

    -

    +

    {__('This will clear the application cache. Your wallet will not be affected.')}

    -
    -
    +
    )} diff --git a/src/ui/page/show/view.jsx b/src/ui/page/show/view.jsx index 411d172db..23d558a5c 100644 --- a/src/ui/page/show/view.jsx +++ b/src/ui/page/show/view.jsx @@ -45,7 +45,7 @@ class ShowPage extends React.PureComponent { if (claim && !claim.name) { // While testing the normalization changes, Brannon found that `name` was missing sometimes // This shouldn't happen, so hopefully this helps track it down - console.error('No name for associated claim: ', claim.claim_id); + console.error('No name for associated claim: ', claim.claim_id); // eslint-disable-line no-console } innerContent = ( @@ -72,13 +72,11 @@ class ShowPage extends React.PureComponent {
    {uri}
    -
    -

    - {__( - 'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.' - )} -

    -
    +

    + {__( + 'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.' + )} +

    diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss index a1125b590..87dda2301 100644 --- a/src/ui/scss/all.scss +++ b/src/ui/scss/all.scss @@ -16,10 +16,8 @@ @import 'component/claim-list'; @import 'component/comments'; @import 'component/content'; -@import 'component/credit'; @import 'component/dat-gui'; @import 'component/expandable'; -@import 'component/file-download'; @import 'component/file-properties'; @import 'component/file-render'; @import 'component/form-field'; @@ -45,6 +43,5 @@ @import 'component/tabs'; @import 'component/tags'; @import 'component/time'; -@import 'component/toggle'; @import 'component/wunderbar'; @import 'component/yrbl'; diff --git a/src/ui/scss/component/_badge.scss b/src/ui/scss/component/_badge.scss index 97d64ce38..82d06d6f2 100644 --- a/src/ui/scss/component/_badge.scss +++ b/src/ui/scss/component/_badge.scss @@ -2,6 +2,7 @@ .badge { vertical-align: middle; + white-space: nowrap; } .badge--tag { diff --git a/src/ui/scss/component/_button.scss b/src/ui/scss/component/_button.scss index b60075c64..b1be0a306 100644 --- a/src/ui/scss/component/_button.scss +++ b/src/ui/scss/component/_button.scss @@ -5,26 +5,22 @@ font-weight: 400; svg { - stroke-width: 1.9; - position: relative; - color: $lbry-gray-5; - // Buttons that don't have a label &:only-child { color: inherit; - width: 1.4rem; - height: 1.4rem; + width: 1.3rem; + height: 1.3rem; } } } .button--primary { &:hover { - background-color: $lbry-teal-3; + background-color: $lbry-teal-4; } svg { - color: white; + stroke: $lbry-teal-4; } } @@ -41,15 +37,15 @@ .button--primary, .button--inverse { height: var(--button-height); - line-height: var(--button-height); border-radius: var(--button-radius); - font-size: 1.1rem; - padding: 0 var(--spacing-medium); + padding-top: 0; + padding-bottom: 0; box-sizing: border-box; } .button--inverse { border-color: $lbry-teal-4; + color: $lbry-teal-5; &:hover { color: $lbry-white; @@ -64,6 +60,12 @@ padding: 0; } +.button--link { + [data-mode='dark'] & { + color: $lbry-teal-5; + } +} + .button--uri-indicator { max-width: 100%; height: 1.2em; @@ -100,6 +102,7 @@ display: flex; align-items: center; min-width: 0; + height: 100%; } .button__label { @@ -111,5 +114,5 @@ // Handle icons on the left or right side of the button label svg + .button__label, .button__label + svg { - margin-left: var(--spacing-miniscule); + margin-left: var(--spacing-small); } diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss index f20891696..395990728 100644 --- a/src/ui/scss/component/_card.scss +++ b/src/ui/scss/component/_card.scss @@ -5,7 +5,6 @@ border-radius: var(--card-radius); box-shadow: var(--card-box-shadow) $lbry-gray-1; overflow: hidden; - font-size: 1.25rem; [data-mode='dark'] & { background-color: var(--dm-color-05); @@ -41,8 +40,9 @@ .card--reward-total { background-repeat: no-repeat; background-size: cover; - // justify-content: space-between; color: $lbry-white; + font-size: var(--font-title); + font-weight: 700; } .card--modal { @@ -55,13 +55,23 @@ .card__actions { display: flex; align-items: center; - font-size: 1.15rem; + margin-top: var(--spacing-medium); + font-size: var(--font-body); + + &:only-child { + margin-top: 0; + } > *:not(:last-child) { margin-right: var(--spacing-medium); } } +.card__actions--inline { + @extend .card__actions; + margin-top: 0; +} + .card__actions--between { @include between; } @@ -92,34 +102,9 @@ padding: var(--spacing-medium); } -// C A R D -// C O N T E N T - -.card__content { - &:not(:last-of-type) { - margin-bottom: var(--spacing-medium); - } - - p:not(:last-child) { - margin-bottom: var(--spacing-medium); - } -} - .card__content--large { - font-size: 3rem; - line-height: 1.5; - font-weight: 700; -} - -// C A R D -// H E A D E R - -.card__header { - position: relative; - - &:not(.card__header--flat) { - margin-bottom: var(--spacing-medium); - } + font-size: var(--font-heading); + font-weight: 600; } // C A R D @@ -168,19 +153,25 @@ // S U B T I T L E .card__subtitle { - @extend .help; - color: darken($lbry-gray-5, 25%); - background-color: lighten($lbry-gray-1, 5%); - font-size: 1.15rem; - margin-bottom: var(--spacing-small); - flex: 1; - - p { - margin-bottom: var(--spacing-small); - } + margin: var(--spacing-small) 0; + padding: var(--spacing-small); + border-radius: var(--card-radius); + font-size: var(--font-body); + background-color: rgba($lbry-blue-1, 0.1); + color: darken($lbry-gray-5, 15%); [data-mode='dark'] & { - background-color: darken($lbry-gray-5, 20%); + background-color: var(--dm-color-04); + color: inherit; + } +} + +.card__subtitle--status { + @extend .card__subtitle; + background-color: $lbry-yellow-1; + + [data-mode='dark'] & { + background-color: rgba($lbry-yellow-1, 0.1); } } @@ -188,26 +179,17 @@ // T I T L E .card__title { - font-size: 2rem; - font-weight: 600; - margin-bottom: var(--spacing-medium); - - + .card__content { - margin-top: var(--spacing-medium); - } -} - -.card__title--flex { display: flex; align-items: center; + margin-bottom: var(--spacing-small); + font-size: var(--font-title); & > *:not(:last-child) { margin-right: var(--spacing-medium); } } -.card__title--flex-between { - display: flex; - @include between; - align-items: center; +.card__title--between { + @extend .card__title; + justify-content: space-between; } diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss index 7416ec3b0..903896165 100644 --- a/src/ui/scss/component/_channel.scss +++ b/src/ui/scss/component/_channel.scss @@ -84,11 +84,12 @@ $metadata-z-index: 1; } .channel__title { - font-size: 3rem; - font-weight: 800; margin-right: var(--spacing-small); overflow: hidden; text-overflow: ellipsis; + // line-height: var(--font-heading); + font-size: var(--font-heading); + font-weight: 800; // Quick hack to get this to work // We should have a generic style for "header with button next to it" @@ -98,8 +99,6 @@ $metadata-z-index: 1; } .channel__url { - font-size: 1.2rem; - margin-top: -0.25rem; color: rgba($lbry-white, 0.75); margin-right: var(--spacing-large); } diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index 3e6e8ed7f..584eebabe 100644 --- a/src/ui/scss/component/_claim-list.scss +++ b/src/ui/scss/component/_claim-list.scss @@ -3,23 +3,22 @@ align-items: center; min-height: 4.5rem; padding: var(--spacing-medium); - font-size: 1rem; // Ensures select & header text have same font-size - color: $lbry-white; + font-size: var(--font-body); border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); + color: $lbry-white; & > *:not(:last-child) { margin-right: 0.5rem; } fieldset-section { - margin-bottom: 0; + margin: 0; } // Normal link buttons are too dark on the black file list background .button--link { color: $lbry-teal-3; - font-size: 1.2em; &:hover { color: $lbry-teal-1; @@ -46,19 +45,13 @@ .claim-list__header--small { height: 3rem; min-height: 3rem; - font-size: 1em; } .claim-list__dropdown { - background-position: 95% center; - background-repeat: no-repeat; - background-size: 1.2rem; - 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"); - height: 2.5rem; - font-size: 1.3rem; + margin-bottom: 0; padding: 0 var(--spacing-medium); padding-right: var(--spacing-large); - margin-bottom: 0; + 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%); @@ -81,7 +74,6 @@ display: flex; align-items: center; margin-left: auto; - font-size: 1.1em; & > * { margin-left: var(--spacing-small); @@ -89,25 +81,26 @@ } .claim-preview { - @include mediaThumbHoverZoom; display: flex; position: relative; overflow: visible; - cursor: pointer; - font-size: 1.3rem; padding: var(--spacing-medium); + &:not(.claim-preview--inline) { + @include mediaThumbHoverZoom; + cursor: pointer; + } + .media__thumb { width: var(--file-list-thumbnail-width); flex-shrink: 0; margin-right: var(--spacing-medium); } +} - ul & { - &:first-of-type { - border-top: none; - } - } +.claim-preview--injected { + padding: var(--spacing-medium); + position: relative; } .claim-preview--injected, @@ -116,23 +109,45 @@ [data-mode='dark'] & { color: $lbry-white; - border-top: 1px solid var(--dm-color-04); - background-color: var(--dm-color-05); + border-color: var(--dm-color-04); } } .claim-preview--large { - font-size: 1.6rem; - border-bottom: 0; + border: none; padding: 0; - margin: var(--spacing-small) 0; + margin: var(--spacing-medium); + font-size: var(--font-multiplier-large); &:hover { background-color: transparent; } .media__thumb { - width: 20rem; + width: 14rem; + } + + .channel-thumbnail { + width: 7.5rem; + height: 7.5rem; + } + + [data-mode='dark'] & { + border: none; + } +} + +.claim-preview--small { + font-size: var(--font-multiplier-small); + padding: var(--spacing-small); + + .media__thumb { + width: 8rem; + } + + .channel-thumbnail { + width: 4rem; + height: 4rem; } } @@ -160,6 +175,25 @@ } } +.claim-preview--inline { + padding: 0; + padding-top: var(--spacing-large); + border-bottom: none; + border-top: 1px solid $lbry-gray-1; + + .channel-thumbnail { + width: var(--channel-thumbnail-width--small); + height: var(--channel-thumbnail-width--small); + } +} + +.claim-preview-title { + font-weight: 600; + margin-right: auto; + padding-right: var(--spacing-medium); + font-size: larger; +} + .claim-preview-metadata { display: flex; flex-direction: column; @@ -179,10 +213,5 @@ .claim-preview-properties { align-items: flex-end; flex: 1; -} - -.claim-preview-title { - font-weight: 600; - margin-right: auto; - padding-right: var(--spacing-medium); + font-size: var(--font-subtext); } diff --git a/src/ui/scss/component/_comments.scss b/src/ui/scss/component/_comments.scss index b750a150f..686adebb4 100644 --- a/src/ui/scss/component/_comments.scss +++ b/src/ui/scss/component/_comments.scss @@ -1,4 +1,5 @@ .comments { + @extend .ul--no-style; margin-top: var(--spacing-large); } diff --git a/src/ui/scss/component/_credit.scss b/src/ui/scss/component/_credit.scss deleted file mode 100644 index 5b2870ae5..000000000 --- a/src/ui/scss/component/_credit.scss +++ /dev/null @@ -1,17 +0,0 @@ -.credit-amount { - font-size: 0.8rem; - white-space: nowrap; -} - -.credit-amount--inherit { - background-color: inherit; - color: inherit; - font-size: inherit; - font-weight: inherit; - padding: 0; -} - -.credit-amount--large { - font-size: 36px; - font-weight: 600; -} diff --git a/src/ui/scss/component/_expandable.scss b/src/ui/scss/component/_expandable.scss index fde9977d5..b65f8ec48 100644 --- a/src/ui/scss/component/_expandable.scss +++ b/src/ui/scss/component/_expandable.scss @@ -8,10 +8,6 @@ } } -.expandable__button { - font-size: 1.25rem; -} - .expandable--closed, .expandable--open { margin-bottom: var(--spacing-small); diff --git a/src/ui/scss/component/_file-download.scss b/src/ui/scss/component/_file-download.scss deleted file mode 100644 index 45e6a8f35..000000000 --- a/src/ui/scss/component/_file-download.scss +++ /dev/null @@ -1,4 +0,0 @@ -.file-download { - align-self: center; - font-size: 0.8rem; -} diff --git a/src/ui/scss/component/_file-properties.scss b/src/ui/scss/component/_file-properties.scss index 791c19b80..b755707ff 100644 --- a/src/ui/scss/component/_file-properties.scss +++ b/src/ui/scss/component/_file-properties.scss @@ -2,6 +2,7 @@ display: flex; position: relative; align-items: center; + font-size: var(--font-label); .icon { stroke: rgba($lbry-black, 0.5); @@ -22,8 +23,7 @@ .file-properties--large { flex-wrap: wrap; - font-size: 18px; - margin: var(--spacing-medium) 0; + margin-bottom: var(--spacing-large); & > * { margin-top: var(--spacing-small); diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss index bf14a943b..9d84898d5 100644 --- a/src/ui/scss/component/_form-field.scss +++ b/src/ui/scss/component/_form-field.scss @@ -30,10 +30,13 @@ input[type='number'] { width: 8em; } +input, input[type='text'], input[type='number'], +input[type='email'], select, textarea { + height: var(--input-height); padding-bottom: 0.1em; [data-mode='dark'] & { @@ -52,16 +55,12 @@ textarea { } fieldset-section { + margin-bottom: var(--spacing-small); + label { width: auto; text-transform: none; - } - - checkbox-element, - radio-element { - label { - font-size: medium; - } + font-size: var(--font-multiplier-medium); } } @@ -80,20 +79,19 @@ fieldset-section:last-child { checkbox-element, radio-element { - input[type='checkbox']:checked + label { - color: $lbry-black; - - [data-mode='dark'] & { - color: $lbry-white; - - &:hover { - color: $lbry-teal-4; - } - } - } - label { + color: lighten($lbry-black, 20%); margin-bottom: 0; + margin-left: var(--spacing-miniscule); + } +} + +checkbox-toggle { + &:before { + background-position: center; + background-repeat: no-repeat; + background-size: 100%; + transition: all 0.2s; } } @@ -155,7 +153,8 @@ fieldset-group { fieldset-section:first-child { .form-field__prefix { white-space: nowrap; - padding: 0.2rem var(--spacing-s); + padding: var(--spacing-miniscule); + height: var(--input-height); padding-right: 0; border: 1px solid; border-right: 0; @@ -214,19 +213,13 @@ fieldset-section { input-submit { input { &:first-child { - border-right-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } } - // input-submit is connected to a button - // The input height needs to match the button height to lineup correctly - // Other inputs are fine since they are on their own and are used under different circumstances input[type='email'], input[type='text'] { - height: var(--button-height); - [data-mode='dark'] & { &:not(:focus) { border-color: $lbry-gray-5; @@ -236,17 +229,22 @@ fieldset-section { .button, // specificity needed because of @lbry/component rules - // @lbry/componentfixme - .button[type='submit']:not(:hover) { + // @lbry/componentsfixme + .button[type='submit']:not(:hover), + .button[type='submit']:hover { + border-color: $lbry-black; + border-radius: var(--button-radius); border-top-left-radius: 0; border-bottom-left-radius: 0; - border-top-right-radius: var(--input-border-radius); - border-bottom-right-radius: var(--input-border-radius); + border-color: $lbry-black; + opacity: 1; } } select { max-width: 12em; + background-position: 95% center; + background-size: 1.2rem; background-color: $lbry-white; [data-mode='dark'] & { @@ -274,7 +272,7 @@ fieldset-section { } .form-field--copyable { - background-color: rgba($lbry-gray-1, 0.3); + background-color: rgba($lbry-gray-1, 0.5); border: 1px solid $lbry-gray-1; color: $lbry-gray-5; flex: 1; @@ -290,14 +288,10 @@ fieldset-section { } } -label + .react-toggle, -.react-toggle + label { - margin-left: var(--spacing-small); -} - .form-field__help { @extend .help; - margin-top: var(--spacing-medium); + margin-top: var(--spacing-small); + margin-bottom: var(--spacing-large); } .form-field--price-amount { diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss index 95e7e663d..92c32b298 100644 --- a/src/ui/scss/component/_header.scss +++ b/src/ui/scss/component/_header.scss @@ -6,8 +6,7 @@ background-color: $lbry-white; border-bottom: 1px solid $lbry-gray-1; box-shadow: var(--card-box-shadow) $lbry-gray-1; - padding-left: var(--spacing-large); - padding-right: var(--spacing-large); + font-size: var(--font-body); [data-mode='dark'] & { background-color: var(--dm-color-05); @@ -22,9 +21,9 @@ } .header__contents { - width: 100%; - height: calc(var(--header-height) - 1px); max-width: var(--page-max-width); + height: calc(var(--header-height) - 1px); + padding: 0 var(--spacing-large); display: flex; justify-content: space-between; margin: auto; @@ -101,7 +100,6 @@ .header__navigation-item--lbry { flex: 1; font-weight: 800; - font-size: 1.2rem; margin-right: var(--spacing-medium); .lbry-icon { diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss index fd334b8b0..beb492f87 100644 --- a/src/ui/scss/component/_main.scss +++ b/src/ui/scss/component/_main.scss @@ -8,7 +8,7 @@ display: flex; align-items: flex-start; min-height: 100vh; - max-width: 1200px; + max-width: var(--page-max-width); margin-left: auto; margin-right: auto; padding-bottom: var(--spacing-main-padding); @@ -16,8 +16,8 @@ .main { min-width: 0; - width: calc(100% - var(--side-nav-width) - var(--spacing-main-padding)); position: relative; + width: calc(100% - var(--side-nav-width) - var(--spacing-main-padding)); margin-top: calc(var(--header-height) + var(--spacing-large)); margin-right: var(--spacing-main-padding); @@ -33,11 +33,11 @@ .grid-area--info { margin-right: var(--spacing-large); - width: 50%; + width: 52.5%; } .grid-area--related { - width: calc(50% - var(--spacing-large)); + width: calc(47.5% - var(--spacing-large)); } } diff --git a/src/ui/scss/component/_markdown-editor.scss b/src/ui/scss/component/_markdown-editor.scss index 690cc1ff5..93cc08bb6 100644 --- a/src/ui/scss/component/_markdown-editor.scss +++ b/src/ui/scss/component/_markdown-editor.scss @@ -123,8 +123,8 @@ .editor-statusbar { color: rgba($lbry-black, 0.5); - font-size: 1rem; - padding: var(--spacing-medium) 0; // overriding styles from elsewhere + font-size: var(--font-label); + // padding: var(--spacing-medium) 0; // overriding styles from elsewhere [data-mode='dark'] & { color: inherit; diff --git a/src/ui/scss/component/_markdown-preview.scss b/src/ui/scss/component/_markdown-preview.scss index ebc1119ee..b11338c50 100644 --- a/src/ui/scss/component/_markdown-preview.scss +++ b/src/ui/scss/component/_markdown-preview.scss @@ -86,28 +86,6 @@ } } - // Lists - ul, - ol { - margin-bottom: var(--spacing-medium); - - > li { - list-style-position: outside; - } - } - - ul { - list-style: initial; - } - - li { - margin-left: var(--spacing-large); - - p { - display: inline-block; - } - } - button { white-space: normal; text-align: left; diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss index 27cc12476..2ed757951 100644 --- a/src/ui/scss/component/_media.scss +++ b/src/ui/scss/component/_media.scss @@ -1,32 +1,10 @@ -// M E D I A -// C A R D -.media-card { - @include mediaThumbHoverZoom; - font-size: 1.2rem; - border-radius: var(--card-radius); - - .media__title { - margin-bottom: var(--spacing-small); - } -} - -// M E D I A -// P E N D I N G - -.media--pending { - opacity: 0.5; - - &:hover { - cursor: default; - } -} - // M E D I A // T H U M B .media__thumb { @include thumbnail; border-radius: var(--card-radius); + object-fit: cover; &:not(.media__thumb--nsfw) { background-color: $lbry-gray-2; @@ -51,26 +29,27 @@ .media__title { font-weight: 600; white-space: normal; - font-size: 1em; + font-size: var(--font-title); } .media__title--large { - cursor: default; overflow: hidden; width: 100%; text-overflow: ellipsis; - font-size: 2rem; - line-height: 1.33; margin-right: var(--spacing-small); } .media__uri { - font-size: 1.1rem; min-width: 0; margin-right: var(--spacing-small); max-width: 100%; } +.media__uri--large { + margin-bottom: var(--spacing-medium); + font-size: var(--font-multiplier-medium); +} + .media__insufficient-credits { padding: 10px; } @@ -83,6 +62,10 @@ flex-wrap: wrap; margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); + + &:first-child { + margin-top: var(--spacing-miniscule); + } } .media__actions--between { @@ -101,12 +84,10 @@ .media__action-group--large { display: flex; - margin-top: var(--spacing-small); - margin-bottom: var(--spacing-small); + margin-bottom: var(--spacing-medium); + font-size: var(--font-multiplier-medium); > * { - font-size: 1.15rem; - &:not(:last-child) { margin-right: var(--spacing-large); } @@ -117,30 +98,11 @@ } } -// M E D I A -// S U B T E X T -// -// Wrapper around low level media information (date, channel) -// -.media__subtext { - color: rgba($lbry-black, 0.8); - font-size: 0.9em; - - html[data-mode='dark'] & { - color: rgba($lbry-white, 0.7); - } -} - -.media__subtext--large { - font-size: 1.2em; -} - // M E D I A // S U B T I T L E .media__subtitle { align-self: flex-start; - font-size: 0.8em; color: rgba($lbry-black, 0.6); [data-mode='dark'] & { @@ -173,8 +135,8 @@ } .media__info--large { - border-top: 1px solid $lbry-gray-1; margin-top: var(--spacing-medium); + font-size: var(--font-body); [data-mode='dark'] & { border-color: rgba($lbry-gray-5, 0.2); @@ -182,7 +144,6 @@ } .media__info-text { - font-size: 1.15rem; word-break: break-word; &:not(:last-of-type) { @@ -192,40 +153,9 @@ &.media__info-text--small { max-width: 50rem; } - - &.media__info-text--center { - text-align: center; - } - - .button__label { - text-align: left; - white-space: normal; - } } .media__info-title { - font-size: 1.25rem; font-weight: 500; margin-bottom: var(--spacing-small); } - -// M E D I A -// M E S S A G E - -.media__message { - font-size: 1.1rem; - padding: var(--spacing-medium); - margin: var(--spacing-medium) var(--spacing-large); - white-space: normal; -} - -// M E D I A -// T E X T - -.media__text { - font-size: 2.5rem; - - [data-mode='dark'] & { - color: $lbry-white; - } -} diff --git a/src/ui/scss/component/_modal.scss b/src/ui/scss/component/_modal.scss index a6dbc31e3..a7f3961ed 100644 --- a/src/ui/scss/component/_modal.scss +++ b/src/ui/scss/component/_modal.scss @@ -18,7 +18,6 @@ .modal { background-color: $lbry-white; - border: 1px solid $lbry-gray-3; line-height: 1.55; max-width: var(--modal-width); overflow: auto; @@ -28,27 +27,6 @@ @media (min-width: 501px) { min-width: 500px; } - - [data-mode='dark'] & { - background-color: $lbry-black; - border-color: $lbry-gray-5; - } - - .card__content:not(:last-child) { - margin-bottom: var(--spacing-large); - } - - .button.button--alt { - background-color: $lbry-white; // Set modal buttons bg color - - [data-mode='dark'] & { - background-color: transparent; - } - } -} - -.modal__header { - font-size: 2em; } .error-modal__content { @@ -56,15 +34,6 @@ padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium); } -.error-modal__warning-symbol { - height: 28px; - margin-top: -5px; -} - -.download-started-modal__file-path { - word-break: break-all; -} - .error-modal { max-width: none; width: var(--modal-width); diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss index 96c11292c..bfe237c8f 100644 --- a/src/ui/scss/component/_navigation.scss +++ b/src/ui/scss/component/_navigation.scss @@ -1,23 +1,34 @@ .navigation { width: var(--side-nav-width); - font-size: 1.4rem; + font-size: var(--font-body); @media (max-width: 600px) { display: none; } } -.navigation__links { +.navigation-links { + @extend .ul--no-style; + flex-direction: column; + align-items: flex-start; position: relative; + list-style: none; + + &:not(:first-of-type) { + margin-left: 1.75rem; + } } -.navigation__links--small { - @extend .navigation__links; - font-size: 1.2rem; - margin-top: var(--spacing-small); +.navigation-links--small { + @extend .navigation-links; + font-size: var(--font-multiplier-small); } -.navigation__link { +.navigation-link__wrapper { + margin: var(--spacing-miniscule) 0; +} + +.navigation-link { display: block; position: relative; text-align: left; @@ -26,11 +37,7 @@ white-space: nowrap; text-overflow: ellipsis; color: lighten($lbry-black, 20%); - margin-top: var(--spacing-miniscule); - - .icon { - margin-right: var(--spacing-small); - } + margin-top: var(--spacing-small); &:hover { color: $lbry-teal-4; @@ -39,7 +46,7 @@ } } - &.navigation__link--active { + &.navigation-link--active { color: $lbry-teal-5; .icon { color: $lbry-teal-4; @@ -54,7 +61,7 @@ } &:hover, - &.navigation__link--active { + &.navigation-link--active { color: $lbry-teal-4; .icon { @@ -63,55 +70,3 @@ } } } - -.navigation__link--title { - margin-top: var(--spacing-large); - color: $lbry-gray-5; - font-size: 1.15rem; - font-weight: 700; - letter-spacing: 0.1rem; -} - -.navigation__link-items { - font-size: 1.15rem; - padding-left: var(--spacing-large); -} - -.navigation__link-item { - position: relative; - - &::before { - width: 0.25rem; - height: 0.25rem; - top: 44%; - left: -1rem; - - border-radius: 50%; - content: ''; - position: absolute; - transition: background-color 0.2s; - } - - &:not(.navigation__link-item--active) { - color: $lbry-gray-5; - - &::before { - background-color: transparent; - } - } - - &:hover, - .navigation__link-item--active { - &::before { - background-color: $lbry-black; - - [data-mode='dark'] & { - color: $lbry-gray-1; - } - } - } -} - -.navigation__link--indented { - padding-left: 2rem; -} diff --git a/src/ui/scss/component/_pagination.scss b/src/ui/scss/component/_pagination.scss index 4207849f1..08aaf4fea 100644 --- a/src/ui/scss/component/_pagination.scss +++ b/src/ui/scss/component/_pagination.scss @@ -1,4 +1,5 @@ .pagination { + @extend .ul--no-style; display: flex; align-items: center; @@ -34,6 +35,7 @@ > a { display: block; + height: 100%; } } @@ -43,9 +45,10 @@ .pagination__item--previous, .pagination__item--next { - font-size: 2.5rem; + font-size: var(--font-multiplier-xlarge); line-height: 1; position: relative; + padding-top: var(--spacing-small); } .pagination__item--selected { diff --git a/src/ui/scss/component/_search.scss b/src/ui/scss/component/_search.scss index 51fe0f897..90024c25f 100644 --- a/src/ui/scss/component/_search.scss +++ b/src/ui/scss/component/_search.scss @@ -4,19 +4,11 @@ .placeholder { background-color: rgba($lbry-white, 0.1); } - - .media__subtitle { - font-size: 0.7em; - } } .search__options { margin-top: var(--spacing-large); - .button { - font-size: 2rem; - } - legend { &.search__legend--1 { background-color: $lbry-teal-4; @@ -34,4 +26,8 @@ fieldset:not(:first-child) { margin-top: var(--spacing-large); } + + label { + color: $lbry-white; + } } diff --git a/src/ui/scss/component/_snack-bar.scss b/src/ui/scss/component/_snack-bar.scss index 4d3e24136..2bed39e7a 100644 --- a/src/ui/scss/component/_snack-bar.scss +++ b/src/ui/scss/component/_snack-bar.scss @@ -30,15 +30,12 @@ align-items: center; display: flex; flex-direction: row; + font-size: var(--font-body); div { &:nth-of-type(1) { - font-size: 1.5rem; + font-size: var(--font-multiplier-large); margin-right: var(--spacing-medium); } - - &:nth-of-type(2) { - font-size: 1.25rem; - } } } diff --git a/src/ui/scss/component/_table.scss b/src/ui/scss/component/_table.scss index df0dbab62..c06cb0791 100644 --- a/src/ui/scss/component/_table.scss +++ b/src/ui/scss/component/_table.scss @@ -2,7 +2,7 @@ table, .table { - margin-bottom: var(--spacing-small); + margin: var(--spacing-small) 0; [data-mode='dark'] & { background-color: transparent; @@ -24,10 +24,7 @@ td { .table__header { margin: var(--spacing-large); - - & + .table__header { - margin-top: 0; - } + margin-bottom: 0; } .table__item--actionable { @@ -37,7 +34,7 @@ td { } .table__item-label { - font-size: 0.9em; + font-size: var(--font-multiplier-small); font-weight: 300; } diff --git a/src/ui/scss/component/_tags.scss b/src/ui/scss/component/_tags.scss index dc3064181..68a4e4b8f 100644 --- a/src/ui/scss/component/_tags.scss +++ b/src/ui/scss/component/_tags.scss @@ -1,11 +1,13 @@ $main: $lbry-teal-5; .tags { + @extend .ul--no-style; display: flex; flex-wrap: wrap; min-width: 0; .tag { + margin-left: 0; margin-top: var(--spacing-small); margin-right: var(--spacing-small); } @@ -13,15 +15,15 @@ $main: $lbry-teal-5; .tags--remove { @extend .tags; + @extend .ul--no-style; margin-bottom: var(--spacing-large); - font-size: 18px; } .tags--vertical { @extend .tags; flex-direction: column; align-items: flex-start; - margin-top: var(--spacing-medium); + margin: 0; } .tags--selected { @@ -44,7 +46,7 @@ $main: $lbry-teal-5; text-overflow: ellipsis; white-space: nowrap; text-transform: lowercase; - font-size: 0.7em; + max-width: 10rem; min-width: 0; &:hover { @@ -62,6 +64,7 @@ $main: $lbry-teal-5; .tag--remove { max-width: 20rem; + font-size: var(--font-body); } .tag--add { diff --git a/src/ui/scss/component/_toggle.scss b/src/ui/scss/component/_toggle.scss deleted file mode 100644 index e1591af55..000000000 --- a/src/ui/scss/component/_toggle.scss +++ /dev/null @@ -1,143 +0,0 @@ -// Taken from react-toggle/style.css -.react-toggle { - background-color: transparent; - cursor: pointer; - position: relative; - - &:hover { - &:not(.react-toggle--disabled) { - .react-toggle-track { - background-color: $lbry-black; - } - } - - &.react-toggle--disabled { - .react-toggle-track { - background-color: $lbry-gray-5; - } - } - } - - &:not(.react-toggle--checked) { - .react-toggle-track:not(:hover) { - background-color: $lbry-gray-5; - } - - .react-toggle-track-check { - opacity: 0; - } - - .react-toggle-thumb { - left: 1px; - } - } - - &:not(.react-toggle--disabled):not(.react-toggle--checked) { - .react-toggle-thumb { - border-color: $lbry-gray-5; - } - } - - &.react-toggle--disabled { - .react-toggle-thumb { - border-color: $lbry-gray-5; - } - } -} - -.react-toggle--checked { - &:hover { - &:not(.react-toggle--disabled) { - .react-toggle-track { - background-color: $lbry-black; - } - - .react-toggle-thumb { - border-color: $lbry-black; - } - } - } - - &:not(:hover) { - .react-toggle-thumb { - border-color: $lbry-teal-5; - } - } - - .react-toggle-thumb { - left: 22px; - } - - .react-toggle-track { - background-color: $lbry-teal-5; - } - - .react-toggle-track-check { - opacity: 1; - } - - .react-toggle-track-x { - opacity: 0; - } -} - -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - transition: opacity 0.25s; -} - -.react-toggle-screenreader-only { - width: 1px; - height: 1px; - - border: none !important; - clip: rect(0 0 0 0); - margin: -1px !important; - overflow: hidden; - position: absolute; -} - -.react-toggle-thumb { - width: 17px; - height: 17px; - - background-color: $lbry-gray-1; - border: 1px solid; - border-radius: 50%; - position: absolute; - top: 1px; - transition: all 0.25s; -} - -.react-toggle-track { - width: 40px; - height: 19px; - border-radius: 30px; - - &:not(.react-toggle--disabled) { - transition: all 0.2s; - } -} - -.react-toggle-track-check, -.react-toggle-track-x { - align-items: center; - display: flex; - height: 19px; - justify-content: center; - line-height: 0; - position: absolute; - transition: opacity 0.25s; - top: 0; -} - -.react-toggle-track-check { - left: 6px; - width: 14px; -} - -.react-toggle-track-x { - right: 8px; - width: 10px; -} diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss index e3266c463..2cd6a3d12 100644 --- a/src/ui/scss/component/_wunderbar.scss +++ b/src/ui/scss/component/_wunderbar.scss @@ -8,6 +8,7 @@ position: relative; z-index: 1; margin-right: calc(var(--spacing-large)); + font-size: var(--font-label); @media (max-width: 600px) { margin-right: 0; @@ -23,7 +24,7 @@ } .wunderbar__active-suggestion { - background-color: $lbry-blue-2; + background-color: lighten($lbry-blue-1, 15%); color: $lbry-black; [data-mode='dark'] & { @@ -34,16 +35,16 @@ .wunderbar__input { width: 100%; - height: var(--button-height); - border-radius: var(--button-radius); - background-color: $lbry-gray-1; align-items: center; - border: none; min-width: 0; - padding-right: var(--spacing-small); overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; + text-overflow: ellipsis; + height: var(--input-height); + border-radius: var(--input-height); + background-color: $lbry-gray-1; + border: none; + padding-right: var(--spacing-small); padding-left: 2.5rem; transition: all 0.2s; @@ -62,7 +63,7 @@ color: $lbry-white; &::placeholder { - color: var(--dm-color-02); + color: var(--dm-color-01); } } } @@ -85,7 +86,7 @@ display: flex; flex-direction: row; justify-items: flex-start; - padding: var(--spacing-small) var(--spacing-medium); + padding: var(--spacing-small) var(--spacing-small); &:not(:first-of-type) { border-top: 1px solid transparent; @@ -98,17 +99,13 @@ .wunderbar__suggestion-label { overflow: hidden; - padding-left: var(--spacing-large); + padding-left: var(--spacing-small); text-overflow: ellipsis; white-space: nowrap; } .wunderbar__suggestion-label--action { - font-size: 1rem; - font-weight: 600; - line-height: 0.1; // to vertically align because the font size is smaller - margin-left: var(--spacing-small); - opacity: 0.7; - text-transform: uppercase; + margin-left: var(--spacing-medium); + opacity: 0.6; white-space: nowrap; } diff --git a/src/ui/scss/component/menu-button.scss b/src/ui/scss/component/menu-button.scss index efe6c19dc..9212de637 100644 --- a/src/ui/scss/component/menu-button.scss +++ b/src/ui/scss/component/menu-button.scss @@ -9,22 +9,22 @@ display: block; position: absolute; z-index: 2; + font-size: var(--font-body); } [data-reach-menu-list] { display: block; white-space: nowrap; outline: none; - font-size: 1.2rem; background-color: $lbry-white; - box-shadow: 0px 10px 30px 2px $lbry-gray-2; + box-shadow: var(--card-box-shadow) $lbry-gray-2; border: 1px solid $lbry-gray-1; border-top: none; [data-mode='dark'] & { background-color: var(--dm-color-05); color: $lbry-white; - box-shadow: 0 10px 30px 2px $lbry-black; + box-shadow: var(--card-box-shadow) $lbry-black; border: 1px solid $lbry-gray-5; border-top: none; } @@ -87,7 +87,6 @@ .menu__title, .menu__link { - font-size: 1.3rem; color: lighten($lbry-black, 20%); .icon { diff --git a/src/ui/scss/component/tabs.scss b/src/ui/scss/component/tabs.scss index acbb8c361..b16cae4f5 100644 --- a/src/ui/scss/component/tabs.scss +++ b/src/ui/scss/component/tabs.scss @@ -25,10 +25,10 @@ } .tab { + @extend .button--link; margin-right: var(--spacing-large); padding: 5px 0; - font-weight: 700; - font-size: var(--tab-header-size); + font-size: var(--font-title); color: $lbry-white; position: relative; @@ -39,6 +39,10 @@ width: 100%; content: ''; } + + &[data-selected] { + color: $lbry-teal-3; + } } .tab__divider { diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss index 3fbab5b03..a0db8ee2a 100644 --- a/src/ui/scss/init/_gui.scss +++ b/src/ui/scss/init/_gui.scss @@ -1,10 +1,15 @@ // Generic html styles used accross the App // component specific styling should go in the component scss file +*::selection { + background-color: $lbry-teal-3; + color: $lbry-white; +} + html { @include font-sans; - font-size: 12px; + font-size: 14px; height: 100%; min-height: 100%; overflow-x: hidden; @@ -29,9 +34,39 @@ body { } } -*::selection { - background-color: $lbry-teal-3; - color: $lbry-white; +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 1rem; +} + +p { + font-size: var(--font-body); +} + +ul, +ol { + margin-bottom: var(--spacing-large); +} + +ul { + list-style: initial; + + li { + margin: var(--spacing-medium) 0; + } +} + +.ul--no-style { + list-style: none; + margin-bottom: 0; + + li { + margin: 0; + } } blockquote { @@ -61,6 +96,7 @@ hr { .columns { display: flex; justify-content: space-between; + align-items: flex-start; > * { flex-grow: 1; @@ -137,53 +173,20 @@ hr { } .help { - font-size: 1rem; - background-color: rgba($lbry-blue-1, 0.1); - color: darken($lbry-gray-5, 15%); display: block; - padding: 1rem; - margin-top: var(--spacing-medium); - margin-bottom: var(--spacing-medium); - border-radius: 5px; + font-size: var(--font-label); + color: lighten($lbry-gray-5, 10%); + margin-top: var(--spacing-small); [data-mode='dark'] & { - background-color: var(--dm-color-06); - color: inherit; + color: $lbry-gray-5; } } .help--warning { - @extend .help; - background-color: $lbry-yellow-3; - color: $lbry-black; - - .button--link:not(:disabled) { - // The normal colors we use for .button--link are too light for the warning background - // This just darkens them a bit and adds an border-bottom so they are easier to see. - $altered-color: mix($lbry-teal-5, $lbry-black, 80%); - $altered-hover-color: mix($lbry-teal-5, $lbry-black, 60%); - - &:not(.button--disabled) { - color: $altered-color; - border-bottom: 1px solid $altered-color; - - &:hover { - color: $altered-hover-color; - } - - [data-mode='dark'] & { - color: $altered-color; - border-bottom: 1px solid $altered-color; - - &:hover { - color: $altered-hover-color; - } - } - } - } + background-color: $lbry-yellow-1; [data-mode='dark'] & { - background-color: $lbry-yellow-3; color: $lbry-black; } } diff --git a/src/ui/scss/init/_mixins.scss b/src/ui/scss/init/_mixins.scss index b00476aa7..3f57e3975 100644 --- a/src/ui/scss/init/_mixins.scss +++ b/src/ui/scss/init/_mixins.scss @@ -9,12 +9,14 @@ } @mixin mediaThumbHoverZoom { - .media__thumb { + .media__thumb, + img { transition: all 0.2s ease; } &:hover { - .media__thumb { + .media__thumb, + img { transform: scale(1.05); } } diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss index a5977a5cc..7ca84f222 100644 --- a/src/ui/scss/init/_vars.scss +++ b/src/ui/scss/init/_vars.scss @@ -7,10 +7,9 @@ $large-breakpoint: 1921px; :root { // Width & spacing - --page-max-width: 1200px; + --page-max-width: 1400px; --mobile: 600px; --side-nav-width: 170px; - --font-size-subtext-multiple: 0.92; --spacing-miniscule: calc(2rem / 5); --spacing-tiny: calc(2rem / 4); --spacing-small: calc(2rem / 3); @@ -23,6 +22,18 @@ $large-breakpoint: 1921px; --file-max-width: 1400px; --video-aspect-ratio: 56.25%; // 9 x 16 + // Font + + --font-multiplier-small: 0.9em; + --font-multiplier-medium: 1.1em; + --font-multiplier-large: 1.4em; + --font-multiplier-xlarge: 1.6rem; + --font-body: 1.2rem; + --font-label: 0.9em; + --font-subtext: 1em; + --font-title: 1.6em; + --font-heading: 3rem; + // Color --color-background: #270f34; @@ -42,26 +53,26 @@ $large-breakpoint: 1921px; // Tabs --tab-indicator-size: 0.5rem; - --tab-header-size: 1.5rem; // Needs to be static so the animated styling always works // Input --input-border-size: 1px; --input-border-radius: 2px; + --input-height: 2.6rem; // Select --select-height: 30px; // Button - --button-radius: 2.6rem; - --button-height: 2.6rem; + --button-radius: var(--input-border-radius); + --button-height: var(--input-height); // Header - --header-height: 6rem; + --header-height: 5rem; // Card --card-radius: 5px; --card-max-width: 1000px; - --card-box-shadow: 0px 0px 30px 2px; + --card-box-shadow: 0px 2px 6px 0; // Modal --modal-width: 440px; @@ -75,5 +86,6 @@ $large-breakpoint: 1921px; --thumbnail-preview-width: 177px; --cover-photo-height: 160px; --channel-thumbnail-width: 10rem; + --channel-thumbnail-width--small: 4rem; --file-list-thumbnail-width: 10rem; } diff --git a/static/locales/id.json b/static/locales/id.json index 701269910..4c558f920 100644 --- a/static/locales/id.json +++ b/static/locales/id.json @@ -283,5 +283,13 @@ "Open file": "Buka file", "Wallet": "Wallet", "Multi-language support is brand new and incomplete. Switching your language may have unintended consequences.": "Multi-language support is brand new and incomplete. Switching your language may have unintended consequences.", - "Home": "Home" + "Home": "Home", + "Account": "Account", + "Customize": "Customize", + "Customize Your Homepage": "Customize Your Homepage", + "For": "For", + "Tags You Follow": "Tags You Follow", + "Channels You Follow": "Channels You Follow", + "Everyone": "Everyone", + "View tag": "View tag" } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b0f64985b..7dfeedadb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9594,13 +9594,6 @@ react-sticky-box@^0.8.0: prop-types "^15.6.2" resize-observer-polyfill "^1.5.1" -react-toggle@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.0.2.tgz#77f487860efb87fafd197672a2db8c885be1440f" - integrity sha512-EPTWnN7gQHgEAUEmjheanZXNzY5TPnQeyyHfEs3YshaiWZf5WNjfYDrglO5F1Hl/dNveX18i4l0grTEsYH2Ccw== - dependencies: - classnames "^2.2.5" - react@^16.8.2, react@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"