From 30d396fce985bf19daf5ecb1f2ad9f96178c831e Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 27 Aug 2019 10:43:42 -0400 Subject: [PATCH] add createChannel to first run flow --- flow-typed/user.js | 24 ++ src/ui/component/app/view.jsx | 11 +- src/ui/component/common/credit-amount.jsx | 4 +- src/ui/component/header/index.js | 7 +- src/ui/component/header/view.jsx | 237 +++++++++++------- src/ui/component/page/view.jsx | 42 +++- src/ui/component/router/view.jsx | 16 +- src/ui/component/sideBar/view.jsx | 62 +++-- src/ui/component/userEmailNew/view.jsx | 88 +++---- .../component/userEmailResetButton/view.jsx | 2 +- src/ui/component/userEmailVerify/view.jsx | 7 +- src/ui/component/userFirstChannel/index.js | 28 +++ src/ui/component/userFirstChannel/view.jsx | 65 +++++ src/ui/component/userSignIn/index.js | 27 ++ src/ui/component/userSignIn/view.jsx | 32 +++ src/ui/component/userVerify/view.jsx | 9 +- src/ui/index.jsx | 6 +- src/ui/page/rewards/view.jsx | 14 +- src/ui/page/signIn/index.js | 15 ++ src/ui/page/signIn/view.jsx | 42 ++++ src/ui/scss/component/_card.scss | 12 + src/ui/scss/component/_form-field.scss | 11 + src/ui/scss/component/_header.scss | 10 + src/ui/scss/component/_main.scss | 27 +- src/ui/scss/component/menu-button.scss | 14 +- src/ui/scss/init/_gui.scss | 4 +- src/ui/util/format-credits.js | 26 -- static/app-strings.json | 1 - 28 files changed, 589 insertions(+), 254 deletions(-) create mode 100644 flow-typed/user.js create mode 100644 src/ui/component/userFirstChannel/index.js create mode 100644 src/ui/component/userFirstChannel/view.jsx create mode 100644 src/ui/component/userSignIn/index.js create mode 100644 src/ui/component/userSignIn/view.jsx create mode 100644 src/ui/page/signIn/index.js create mode 100644 src/ui/page/signIn/view.jsx delete mode 100644 src/ui/util/format-credits.js diff --git a/flow-typed/user.js b/flow-typed/user.js new file mode 100644 index 000000000..6ac74d620 --- /dev/null +++ b/flow-typed/user.js @@ -0,0 +1,24 @@ +// @flow + +// Move this to lbryinc +declare type User = { + created_at: string, + family_name: ?string, + given_name: ?string, + groups: Array, + has_verified_email: boolean, + id: number, + invite_reward_claimed: boolean, + invited_at: ?number, + invited_by_id: number, + invites_remaining: number, + is_email_enabled: boolean, + is_identity_verified: boolean, + is_reward_approved: boolean, + language: string, + manual_approval_user_id: ?number, + primary_email: string, + reward_status_change_trigger: string, + updated_at: string, + youtube_channels: ?Array, +}; diff --git a/src/ui/component/app/view.jsx b/src/ui/component/app/view.jsx index af7e4b5ca..ec69bf08c 100644 --- a/src/ui/component/app/view.jsx +++ b/src/ui/component/app/view.jsx @@ -6,9 +6,12 @@ import { Lbry, buildURI, parseURI } from 'lbry-redux'; import Router from 'component/router/index'; import ModalRouter from 'modal/modalRouter'; import ReactModal from 'react-modal'; +<<<<<<< HEAD import SideBar from 'component/sideBar'; import Header from 'component/header'; import Button from 'component/button'; +======= +>>>>>>> add createChannel to first run flow import { openContextMenu } from 'util/context-menu'; import useKonamiListener from 'util/enhanced-layout'; import Yrbl from 'component/yrbl'; @@ -111,13 +114,7 @@ function App(props: Props) { return (
openContextMenu(e)}> -
- -
- - -
- + diff --git a/src/ui/component/common/credit-amount.jsx b/src/ui/component/common/credit-amount.jsx index a8df18839..2c2fa5fdf 100644 --- a/src/ui/component/common/credit-amount.jsx +++ b/src/ui/component/common/credit-amount.jsx @@ -1,7 +1,7 @@ // @flow import React from 'react'; import classnames from 'classnames'; -import { formatCredits, formatFullPrice } from 'util/format-credits'; +import { formatCredits, formatFullPrice } from 'lbry-redux'; type Props = { amount: number, @@ -39,7 +39,7 @@ class CreditAmount extends React.PureComponent { formattedAmount = amount > 0 && amount < minimumRenderableAmount ? `<${minimumRenderableAmount}` - : formatCredits(amount, precision); + : formatCredits(amount, precision, true); } let amountText; diff --git a/src/ui/component/header/index.js b/src/ui/component/header/index.js index 4cb56f16e..172ad6e3e 100644 --- a/src/ui/component/header/index.js +++ b/src/ui/component/header/index.js @@ -1,16 +1,15 @@ import * as SETTINGS from 'constants/settings'; import { connect } from 'react-redux'; -import { selectBalance, SETTINGS as LBRY_REDUX_SETTINGS } from 'lbry-redux'; +import { selectBalance, formatCredits } from 'lbry-redux'; import { selectUserEmail } from 'lbryinc'; -import { formatCredits } from 'util/format-credits'; import { doSetClientSetting } from 'redux/actions/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings'; import Header from './view'; const select = state => ({ balance: selectBalance(state), - language: makeSelectClientSetting(LBRY_REDUX_SETTINGS.LANGUAGE)(state), // trigger redraw on language change - roundedBalance: formatCredits(selectBalance(state) || 0, 2), + language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state), // trigger redraw on language change + roundedBalance: formatCredits(selectBalance(state) || 0, 2, true), currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state), automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state), hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state), diff --git a/src/ui/component/header/view.jsx b/src/ui/component/header/view.jsx index e494fc0e1..9461cd864 100644 --- a/src/ui/component/header/view.jsx +++ b/src/ui/component/header/view.jsx @@ -4,11 +4,13 @@ import * as SETTINGS from 'constants/settings'; import * as PAGES from 'constants/pages'; import React, { Fragment } from 'react'; import { withRouter } from 'react-router'; +import classnames from 'classnames'; import Button from 'component/button'; import LbcSymbol from 'component/common/lbc-symbol'; import WunderBar from 'component/wunderbar'; import Icon from 'component/common/icon'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; +import Tooltip from 'component/common/tooltip'; // Move this into jessops password util import cookie from 'cookie'; @@ -38,6 +40,7 @@ type Props = { setClientSetting: (string, boolean | string) => void, hideBalance: boolean, email: ?string, + minimal: boolean, }; const Header = (props: Props) => { @@ -49,8 +52,12 @@ const Header = (props: Props) => { automaticDarkModeEnabled, hideBalance, email, + minimal, } = props; + const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable); const isAuthenticated = Boolean(email); + // Auth is optional in the desktop app + const showFullHeader = IS_WEB ? isAuthenticated : true; function handleThemeToggle() { if (automaticDarkModeEnabled) { @@ -64,115 +71,161 @@ const Header = (props: Props) => { } } - function getAccountTitle() { - if (roundedBalance > 0 && !hideBalance) { - return ( - - {roundedBalance} - - ); - } - - return __('Account'); - } - function signOut() { // Replace this with actual clearUser function window.store.dispatch({ type: 'USER_FETCH_FAILURE' }); deleteAuthToken(); + location.reload(); + } + + const accountMenuButtons = [ + { + path: `/$/account`, + icon: ICONS.OVERVIEW, + label: __('Overview'), + }, + { + path: `/$/rewards`, + icon: ICONS.FEATURED, + label: __('Rewards'), + }, + { + path: `/$/wallet`, + icon: ICONS.WALLET, + label: __('Wallet'), + }, + { + path: `/$/publish`, + icon: ICONS.PUBLISH, + label: __('Publish'), + }, + ]; + + if (!isAuthenticated) { + accountMenuButtons.push({ + onClick: signOut, + icon: ICONS.PUBLISH, + label: __('Publish'), + }); } return ( -
+
+ {/* @if TARGET='app' */} + {!minimal && ( +
+
+ )} + {/* @endif */} +
+ + {!minimal ? ( +
+ {showFullHeader ? ( + + + + {roundedBalance} + + + history.push(`/$/wallet`)}> + + {__('Wallet')} + + history.push(`/$/rewards`)}> + + {__('Rewards')} + + + + + + + + + history.push(isAuthenticated ? `/$/account` : `/$/auth/signup`)} + > + + {__('Overview')} + + + history.push(`/$/publish`)}> + + {__('Publish')} + + {isAuthenticated ? ( + + + {__('Sign Out')} + + ) : ( + {}} /> + )} + + + + + + + + + history.push(`/$/settings`)}> + + {__('Settings')} + + history.push(`/$/help`)}> + + {__('Help')} + + + + {currentTheme === 'light' ? 'Dark' : 'Light'} + + + + + ) : ( + + +
- {/* @endif */} - -
- -
- {isAuthenticated ? ( - - - - - {getAccountTitle()} - - - history.push(`/$/account`)}> - - {__('Overview')} - - history.push(`/$/rewards`)}> - - {__('Rewards')} - - history.push(`/$/wallet`)}> - - {__('Wallet')} - - history.push(`/$/publish`)}> - - {__('Publish')} - - - - {__('Sign Out')} - - - - - - - - - - history.push(`/$/settings`)}> - - {__('Settings')} - - history.push(`/$/help`)}> - - {__('Help')} - - - - {currentTheme === 'light' ? 'Dark' : 'Light'} - - - - - ) : ( - -
+ ) : ( +
+ +
+ )}
); diff --git a/src/ui/component/page/view.jsx b/src/ui/component/page/view.jsx index d7fe07684..c2b815005 100644 --- a/src/ui/component/page/view.jsx +++ b/src/ui/component/page/view.jsx @@ -1,16 +1,50 @@ // @flow -import * as React from 'react'; +import type { Node } from 'react'; +import * as ICONS from 'constants/icons'; +import React, { Fragment } from 'react'; import classnames from 'classnames'; +import SideBar from 'component/sideBar'; +import Header from 'component/header'; +import Button from 'component/button'; type Props = { - children: React.Node | Array, + children: Node | Array, className: ?string, + autoUpdateDownloaded: boolean, + isUpgradeAvailable: boolean, + fullscreen: boolean, + doDownloadUpgradeRequested: () => void, }; function Page(props: Props) { - const { children, className } = props; + const { + children, + className, + fullscreen = false, + autoUpdateDownloaded, + isUpgradeAvailable, + doDownloadUpgradeRequested, + } = props; + const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable); - return
{children}
; + return ( + +
+
+ {/* @if TARGET='app' */} + {showUpgradeButton && ( +
+ {__('Upgrade is ready')} +
+ )} + {/* @endif */} + +
{children}
+ {!fullscreen && } +
+ + ); } export default Page; diff --git a/src/ui/component/router/view.jsx b/src/ui/component/router/view.jsx index 5d99450de..4490bf7e1 100644 --- a/src/ui/component/router/view.jsx +++ b/src/ui/component/router/view.jsx @@ -21,10 +21,9 @@ import WalletPage from 'page/wallet'; import NavigationHistory from 'page/navigationHistory'; import TagsPage from 'page/tags'; import FollowingPage from 'page/following'; -import ListBlocked from 'page/listBlocked'; +import ListBlockedPage from 'page/listBlocked'; import FourOhFourPage from 'page/fourOhFour'; - -import UserEmail from 'component/userEmail'; +import SignInPage from 'page/signIn'; // Tell the browser we are handling scroll restoration if ('scrollRestoration' in history) { @@ -36,14 +35,6 @@ type Props = { location: { pathname: string, search: string }, }; -function SignInPage() { - return ; -} - -function SignUpPage() { - return

Sign In

; -} - function AppRouter(props: Props) { const { currentScroll } = props; @@ -57,7 +48,6 @@ function AppRouter(props: Props) { - @@ -74,7 +64,7 @@ function AppRouter(props: Props) { - + {/* Below need to go at the end to make sure we don't match any of our pages first */} diff --git a/src/ui/component/sideBar/view.jsx b/src/ui/component/sideBar/view.jsx index 38d6a271b..caa140a12 100644 --- a/src/ui/component/sideBar/view.jsx +++ b/src/ui/component/sideBar/view.jsx @@ -1,7 +1,7 @@ // @flow import * as PAGES from 'constants/pages'; import * as ICONS from 'constants/icons'; -import React from 'react'; +import React, { Fragment } from 'react'; import Button from 'component/button'; import Tag from 'component/tag'; import StickyBox from 'react-sticky-box/dist/esnext'; @@ -14,6 +14,7 @@ type Props = { function SideBar(props: Props) { const { subscriptions, followedTags, email } = props; + const showSideBar = IS_WEB ? Boolean(email) : true; function buildLink(path, label, icon, guide) { return { @@ -26,7 +27,7 @@ function SideBar(props: Props) { return ( - {email ? ( + {showSideBar ? ( ) : (
diff --git a/src/ui/component/userEmailNew/view.jsx b/src/ui/component/userEmailNew/view.jsx index 0fe2f8b62..55e0c7c40 100644 --- a/src/ui/component/userEmailNew/view.jsx +++ b/src/ui/component/userEmailNew/view.jsx @@ -1,43 +1,23 @@ // @flow -import * as React from 'react'; +import React, { useState } from 'react'; import { FormField, Form } from 'component/common/form'; import Button from 'component/button'; import { Lbryio } from 'lbryinc'; import analytics from 'analytics'; type Props = { - cancelButton: React.Node, errorMessage: ?string, isPending: boolean, addUserEmail: string => void, }; -type State = { - email: string, -}; +function UserEmailNew(props: Props) { + const { errorMessage, isPending, addUserEmail } = props; + const [newEmail, setEmail] = useState(''); + const [sync, setSync] = useState(false); -class UserEmailNew extends React.PureComponent { - constructor() { - super(); - - this.state = { - email: '', - }; - - (this: any).handleSubmit = this.handleSubmit.bind(this); - (this: any).handleEmailChanged = this.handleEmailChanged.bind(this); - } - - handleEmailChanged(event: SyntheticInputEvent<*>) { - this.setState({ - email: event.target.value, - }); - } - - handleSubmit() { - const { email } = this.state; - const { addUserEmail } = this.props; - addUserEmail(email); + function handleSubmit() { + addUserEmail(newEmail); analytics.emailProvidedEvent(); // @if TARGET='web' @@ -45,40 +25,28 @@ class UserEmailNew extends React.PureComponent { // @endif } - render() { - const { cancelButton, errorMessage, isPending } = this.props; + return ( +
+ setEmail(e.target.value)} + /> + setSync(!sync)} + /> - 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 */} -

- - - - } - /> - -
{cancelButton}
-

{__('Your email address will never be sold and you can unsubscribe at any time.')}

- - ); - } +
+ + ); +} + +export default UserFirstChannel; diff --git a/src/ui/component/userSignIn/index.js b/src/ui/component/userSignIn/index.js new file mode 100644 index 000000000..6a46c1484 --- /dev/null +++ b/src/ui/component/userSignIn/index.js @@ -0,0 +1,27 @@ +import { connect } from 'react-redux'; +import { + selectEmailToVerify, + doUserResendVerificationEmail, + doUserCheckEmailVerified, + selectUser, + doFetchAccessToken, + selectAccessToken, +} from 'lbryinc'; +import UserSignUp from './view'; + +const select = state => ({ + email: selectEmailToVerify(state), + user: selectUser(state), + accessToken: selectAccessToken(state), +}); + +const perform = dispatch => ({ + resendVerificationEmail: email => dispatch(doUserResendVerificationEmail(email)), + checkEmailVerified: () => dispatch(doUserCheckEmailVerified()), + fetchAccessToken: () => dispatch(doFetchAccessToken()), +}); + +export default connect( + select, + perform +)(UserSignUp); diff --git a/src/ui/component/userSignIn/view.jsx b/src/ui/component/userSignIn/view.jsx new file mode 100644 index 000000000..9fd7903e0 --- /dev/null +++ b/src/ui/component/userSignIn/view.jsx @@ -0,0 +1,32 @@ +// @flow +import React from 'react'; +import UserEmailNew from 'component/userEmailNew'; +import UserEmailVerify from 'component/userEmailVerify'; + +type Props = { + user: ?User, + email: ?string, +}; + +function UserSignUp(props: Props) { + const { email, user } = props; + const verifiedEmail = user && email && user.has_verified_email; + + function getTitle() { + if (!email) { + return __('Get Rockin'); + } else if (email && !verifiedEmail) { + return __('We Sent You An Email'); + } + } + + return ( +
+

{getTitle()}

+ {!email && } + {email && !verifiedEmail && } +
+ ); +} + +export default UserSignUp; diff --git a/src/ui/component/userVerify/view.jsx b/src/ui/component/userVerify/view.jsx index 6ef3c5d80..f8a1a8f0f 100644 --- a/src/ui/component/userVerify/view.jsx +++ b/src/ui/component/userVerify/view.jsx @@ -50,11 +50,10 @@ class UserVerify extends React.PureComponent { button="inverse" label={__('Submit Phone Number')} /> - -
- {__('Standard messaging rates apply. LBRY will not text or call you otherwise. Having trouble?')}{' '} -
+ +
+ {__('Standard messaging rates apply. LBRY will not text or call you otherwise. Having trouble?')}{' '} +
diff --git a/src/ui/index.jsx b/src/ui/index.jsx index 3a96dc8bf..55d33d435 100644 --- a/src/ui/index.jsx +++ b/src/ui/index.jsx @@ -8,7 +8,7 @@ import * as ACTIONS from 'constants/action_types'; import { ipcRenderer, remote, shell } from 'electron'; import moment from 'moment'; import * as MODALS from 'constants/modal_types'; -import React, { useState, useEffect } from 'react'; +import React, { Fragment, useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { doConditionalAuthNavigate, doDaemonReady, doAutoUpdate, doOpenModal, doHideModal } from 'redux/actions/app'; @@ -237,7 +237,7 @@ function AppWrapper() { return ( }> -
+ {readyToLaunch ? ( @@ -251,7 +251,7 @@ function AppWrapper() { onReadyToLaunch={() => setReadyToLaunch(true)} /> )} -
+ ); diff --git a/src/ui/page/rewards/view.jsx b/src/ui/page/rewards/view.jsx index f445ceb1c..a9ca3957f 100644 --- a/src/ui/page/rewards/view.jsx +++ b/src/ui/page/rewards/view.jsx @@ -1,4 +1,5 @@ // @flow +import * as PAGES from 'constants/pages'; import React, { PureComponent, Fragment } from 'react'; import BusyIndicator from 'component/common/busy-indicator'; import RewardListClaimed from 'component/rewardListClaimed'; @@ -39,15 +40,18 @@ class RewardsPage extends PureComponent { return ( !IS_WEB && (
-

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

+

{__('Sign In To Unlock Rewards')}

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

) ); diff --git a/src/ui/page/signIn/index.js b/src/ui/page/signIn/index.js new file mode 100644 index 000000000..a15647c04 --- /dev/null +++ b/src/ui/page/signIn/index.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import { selectEmailToVerify, selectUser } from 'lbryinc'; +import { selectMyChannelClaims } from 'lbry-redux'; +import SignUpPage from './view'; + +const select = state => ({ + email: selectEmailToVerify(state), + user: selectUser(state), + channels: selectMyChannelClaims(state), +}); + +export default connect( + select, + null +)(SignUpPage); diff --git a/src/ui/page/signIn/view.jsx b/src/ui/page/signIn/view.jsx new file mode 100644 index 000000000..74fc51d24 --- /dev/null +++ b/src/ui/page/signIn/view.jsx @@ -0,0 +1,42 @@ +// @flow +import React from 'react'; +import UserSignIn from 'component/userSignIn'; +import UserFirstChannel from 'component/userFirstChannel'; +import UserVerify from 'component/userVerify'; +import Page from 'component/page'; + +type Props = { + user: ?User, + channels: ?Array, + location: { search: string }, + history: { replace: string => void }, +}; + +export default function SignInPage(props: Props) { + const { user, channels, location, history } = props; + const { search } = location; + const urlParams = new URLSearchParams(search); + const redirect = urlParams.get('redirect'); + const hasVerifiedEmail = user && user.has_verified_email; + const rewardsApproved = user && user.is_reward_approved; + const channelCount = channels ? channels.length : 0; + const showWelcome = !hasVerifiedEmail || channelCount === 0; + + if (rewardsApproved && channelCount > 0) { + history.replace(redirect ? `/$/${redirect}` : '/'); + } + + return ( + + {showWelcome && ( +
+ {!hasVerifiedEmail && } + {hasVerifiedEmail && channelCount === 0 && } +
+
+ )} + + {hasVerifiedEmail && channelCount > 0 && } + + ); +} diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss index f82ed30d0..69627e8e6 100644 --- a/src/ui/scss/component/_card.scss +++ b/src/ui/scss/component/_card.scss @@ -49,6 +49,12 @@ box-shadow: none; } +.card--fill { + min-width: 25rem; + margin-left: auto; + margin-right: auto; +} + // C A R D // A C T I O N S @@ -189,6 +195,12 @@ } } +.card__title--large { + @extend .card__title; + font-weight: 700; + font-size: var(--font-heading); +} + .card__title--between { @extend .card__title; justify-content: space-between; diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss index b75324386..9e4b6e2ed 100644 --- a/src/ui/scss/component/_form-field.scss +++ b/src/ui/scss/component/_form-field.scss @@ -85,6 +85,10 @@ fieldset-section:last-child { checkbox-element, radio-element { + &:hover { + cursor: pointer !important; + } + label { color: lighten($lbry-black, 20%); margin-bottom: 0; @@ -102,6 +106,9 @@ radio-element { } checkbox-toggle { + border-width: 1px; + border-radius: var(--input-border-radius); + &:before { background-position: center; background-repeat: no-repeat; @@ -155,6 +162,10 @@ fieldset-group { label { min-height: 18px; + white-space: nowrap; + // Set width 0 and overflow visible so the label can act as if it's the input label and not a random text node in a side by side div + overflow: visible; + width: 0; } fieldset-section:first-child .form-field__prefix, diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss index 9ae8fff98..e6b9348a4 100644 --- a/src/ui/scss/component/_header.scss +++ b/src/ui/scss/component/_header.scss @@ -20,6 +20,12 @@ } } +.header--minimal { + box-shadow: none; + background-color: transparent; + border-bottom: none; +} + .header__contents { max-width: var(--page-max-width); height: calc(var(--header-height) - 1px); @@ -47,6 +53,10 @@ display: flex; justify-content: space-between; align-items: center; + + .button { + margin-left: auto; + } } .header__navigation-arrows { diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss index f10ae918c..97886a865 100644 --- a/src/ui/scss/component/_main.scss +++ b/src/ui/scss/component/_main.scss @@ -1,6 +1,6 @@ .main-wrapper { position: relative; - min-height: 100vh; + min-height: 80vh; [data-mode='dark'] & { background-color: var(--dm-color-08); @@ -41,6 +41,13 @@ } } +.main--auth-page { + max-width: 60rem; + margin-top: calc(var(--spacing-main-padding) * 2); + margin-left: auto; + margin-right: auto; +} + .main--empty { align-items: center; display: flex; @@ -56,6 +63,24 @@ background-color: var(--color-background); } +.main--fullscreen { + width: 100vw; + height: 100vh; + z-index: 9999; + background-color: $lbry-white; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: 0; + margin-top: 0; + + * { + z-index: 10000; + } +} + .main__status { @extend .card__subtitle; display: flex; diff --git a/src/ui/scss/component/menu-button.scss b/src/ui/scss/component/menu-button.scss index c53ed8bfd..119b5e848 100644 --- a/src/ui/scss/component/menu-button.scss +++ b/src/ui/scss/component/menu-button.scss @@ -89,7 +89,6 @@ color: lighten($lbry-black, 20%); .icon { - margin-right: var(--spacing-small); stroke: $lbry-gray-5; } @@ -101,3 +100,16 @@ } } } + +.menu__link { + .icon { + margin-right: var(--spacing-small); + stroke: $lbry-gray-5; + } +} + +.menu__title { + span { + margin-left: var(--spacing-miniscule); + } +} diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss index 018172e55..0013171ea 100644 --- a/src/ui/scss/init/_gui.scss +++ b/src/ui/scss/init/_gui.scss @@ -24,7 +24,6 @@ body { cursor: default; font-size: 1rem; font-weight: 400; - height: 100%; line-height: 1.5; background-color: mix($lbry-white, $lbry-gray-1, 70%); @@ -107,10 +106,13 @@ a { display: flex; justify-content: space-between; align-items: flex-start; + flex-wrap: wrap; > * { flex-grow: 1; flex-basis: 0; + min-width: 15rem; + margin-bottom: var(--spacing-large); &:first-child { margin-right: 1.5rem; diff --git a/src/ui/util/format-credits.js b/src/ui/util/format-credits.js deleted file mode 100644 index 0f36c8b82..000000000 --- a/src/ui/util/format-credits.js +++ /dev/null @@ -1,26 +0,0 @@ -export function formatCredits(amount, precision = 1) { - return parseFloat(amount) - .toFixed(precision || 1) - .replace(/\.?0+$/, ''); -} - -export function formatFullPrice(amount, precision = 1) { - if (!amount) { - return 0; - } - - let formated = ''; - const quantity = amount.toString().split('.'); - const fraction = quantity[1]; - - if (fraction) { - const decimals = fraction.split(''); - const first = decimals.filter(number => number !== '0')[0]; - const index = decimals.indexOf(first); - - // Set format fraction - formated = `.${fraction.substring(0, index + precision)}`; - } - - return parseFloat(quantity[0] + formated); -} diff --git a/static/app-strings.json b/static/app-strings.json index 7552f1792..40c38b1cd 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -638,7 +638,6 @@ "Refreshed!": "Refreshed!", "Starting...": "Starting...", "Spin Spin Sugar": "Spin Spin Sugar", - "URI does not include name.": "URI does not include name.", "You're not following any channels.": "You're not following any channels.", "Look what's trending for everyone": "Look what's trending for everyone", "or": "or",