From f331fad258cf1ac40fa90ca76a2d204658f11ee4 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 12 Feb 2018 14:03:47 -0800 Subject: [PATCH] redesign cleanup --- .DS_Store | Bin 0 -> 6148 bytes flow-typed/react-transition-group.js | 3 + package.json | 1 + src/main/createWindow.js | 2 +- src/renderer/component/address/view.jsx | 3 +- .../common/form-components/form-field.jsx | 15 +- src/renderer/component/common/qr-code.jsx | 18 + src/renderer/component/fileList/view.jsx | 2 +- src/renderer/component/publishForm/view.jsx | 724 +++++++++--------- src/renderer/component/rewardSummary/view.jsx | 2 +- src/renderer/component/router/view.jsx | 2 +- .../shapeShift/internal/active-shift.jsx | 21 +- .../component/shapeShift/internal/form.jsx | 73 +- src/renderer/component/shapeShift/view.jsx | 8 +- src/renderer/component/sideBar/view.jsx | 51 +- .../component/transactionListRecent/view.jsx | 2 +- src/renderer/component/walletAddress/view.jsx | 4 +- src/renderer/component/walletBalance/view.jsx | 2 +- src/renderer/component/walletSend/view.jsx | 4 +- src/renderer/page/backup/view.jsx | 48 +- src/renderer/page/getCredits/view.jsx | 8 +- src/renderer/page/help/view.jsx | 129 ++-- src/renderer/page/settings/view.jsx | 2 - src/renderer/redux/reducers/settings.js | 1 + src/renderer/redux/selectors/navigation.js | 81 +- src/renderer/scss/_gui.scss | 4 + src/renderer/scss/_vars.scss | 2 +- src/renderer/scss/all.scss | 3 - src/renderer/scss/component/_button.scss | 7 +- src/renderer/scss/component/_card.scss | 20 +- src/renderer/scss/component/_checkbox.scss | 69 -- src/renderer/scss/component/_form-field.scss | 18 +- src/renderer/scss/component/_nav.scss | 59 +- src/renderer/scss/component/_radio.scss | 54 -- yarn.lock | 20 +- 35 files changed, 731 insertions(+), 731 deletions(-) create mode 100644 .DS_Store create mode 100644 flow-typed/react-transition-group.js create mode 100644 src/renderer/component/common/qr-code.jsx delete mode 100644 src/renderer/scss/component/_checkbox.scss delete mode 100644 src/renderer/scss/component/_radio.scss diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2a43b86b965c6735a338394c4d17e6a7a5a71078 GIT binary patch literal 6148 zcmeHKISv9b4733uB$_QL^96noA$S2F;A)VND1d$|-o?`x9|dTkg90>`oJkx{qD-+~ zi-^uHyQxScA|tq=Ty5x@?VES3mk|ZRamHS@yVLftIUWz4?AHO~4&@|gS;HUrwn3u; zRDcRl0V+TRKCVEP*wOgoC-XomKm~qX0sB4_xM59f1O3y1!CL^}0AV-Gy_WzM3jk|k z8;A%@g9;3)W{aUgN4#WSO>6^$E}G4U=FOTNiu&z1zj(T64dh4#sKB!V{a7|u{}=E# z{r@wGD=I(*{z?HI%$M^So|Lt<^Ej)u1-^n?&JAvcxl=HBIR<(;#=^?+#FHYg*c|&c Vu?=)O;!X$hXTWr!QGstOa0m456^#G@ literal 0 HcmV?d00001 diff --git a/flow-typed/react-transition-group.js b/flow-typed/react-transition-group.js new file mode 100644 index 000000000..77bc87c09 --- /dev/null +++ b/flow-typed/react-transition-group.js @@ -0,0 +1,3 @@ +declare module 'react-transition-group' { + declare module.exports: any; +} diff --git a/package.json b/package.json index d662d2b60..f0d15f29d 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react-paginate": "^5.0.0", "react-redux": "^5.0.3", "react-simplemde-editor": "^3.6.11", + "react-transition-group": "1.x", "redux": "^3.6.0", "redux-action-buffer": "^1.1.0", "redux-logger": "^3.0.1", diff --git a/src/main/createWindow.js b/src/main/createWindow.js index 6809761f3..8ad1107fb 100644 --- a/src/main/createWindow.js +++ b/src/main/createWindow.js @@ -4,7 +4,7 @@ import setupContextMenu from './menu/setupContextMenu'; export default deepLinkingURIArg => { let windowConfiguration = { - backgroundColor: '#155B4A', + backgroundColor: '#44b098', minWidth: 800, minHeight: 600, autoHideMenuBar: true, diff --git a/src/renderer/component/address/view.jsx b/src/renderer/component/address/view.jsx index 1ed47a92b..1c18d4be2 100644 --- a/src/renderer/component/address/view.jsx +++ b/src/renderer/component/address/view.jsx @@ -23,12 +23,13 @@ export default class Address extends React.PureComponent { return ( ( { diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx index ddea3f400..004980e49 100644 --- a/src/renderer/component/common/form-components/form-field.jsx +++ b/src/renderer/component/common/form-components/form-field.jsx @@ -1,5 +1,6 @@ // @flow import * as React from 'react'; +import classnames from 'classnames'; type Props = { name: string, @@ -13,22 +14,30 @@ type Props = { onChange?: any => any, defaultValue?: string | number, placeholder?: string | number, + children?: React.Node, + stretch?: boolean }; export class FormField extends React.PureComponent { render() { - const { render, label, prefix, postfix, error, helper, name, type, ...inputProps } = this.props; + const { render, label, prefix, postfix, error, helper, name, type, children, stretch, ...inputProps } = this.props; // Allow a type prop to determine the input or more customizability with a render prop let Input; if (type) { - Input = () => ; + if (type === 'select') { + Input = () => ( + + ) + } else { + Input = () => ; + } } else if (render) { Input = render; } return ( -
+
{label && (
)} @@ -115,9 +116,9 @@ class ActiveShapeShift extends React.PureComponent {

{__('Transaction complete! You should see the new LBC in your wallet.')}

)} -
+
{ } /> {shiftOrderId && ( - - )} {shiftState === statuses.NO_DEPOSITS && shiftReturnAddress && ( diff --git a/src/renderer/component/shapeShift/internal/form.jsx b/src/renderer/component/shapeShift/internal/form.jsx index 6a9cbcd4e..259a4cec3 100644 --- a/src/renderer/component/shapeShift/internal/form.jsx +++ b/src/renderer/component/shapeShift/internal/form.jsx @@ -1,7 +1,7 @@ // @flow import React from 'react'; import { getExampleAddress } from 'util/shape_shift'; -import { FormField, Submit } from 'component/common/form'; +import { FormField, FormRow, Submit } from 'component/common/form'; import type { ShapeShiftFormValues, Dispatch } from 'redux/actions/shape_shift'; import ShiftMarketInfo from './market_info'; @@ -50,59 +50,46 @@ export default (props: Props) => { ( - - )} + type="select" + name="origin_coin" + onChange={e => { + getCoinStats(e.target.value); + handleChange(e); + }}> + {shiftSupportedCoins.map(coin => ( + + ))} + + -
-
- {!updating && - originCoinDepositMax && ( - - )} -
-
+ ( - - )} + type="text" + name="return_address" + className="input--address" + placeholder={getExampleAddress(originCoin)} + onChange={handleChange} + onBlur={handleBlur} + value={values.returnAddress} /> + - ({__('optional but recommended')}) {__('We will return your')} {originCoin}{' '} + ({__('optional but recommended')})
{__('We will return your')} {originCoin}{' '} {__("to this address if the transaction doesn't go through.")} -
+
{ return (
-

{__('Convert Crypto to LBC')}

+
{__('Convert Crypto to LBC')}

{__('Powered by ShapeShift. Read our FAQ')}{' '} . @@ -75,11 +75,9 @@ class ShapeShift extends React.PureComponent { shiftState !== 'complete' && {__('This will update automatically.')}}

-
+
{error &&
{error}
} - {!loading && - !hasActiveShift && - !!shiftSupportedCoins.length && ( + {!hasActiveShift && ( { {navLinks.primary.map(({ label, path, active, icon }) => (
    • ))}
    -
      +
        {navLinks.secondary.map(({ label, path, active, icon, subLinks = [] }) => (
      • -
        • - ))} +
      + )} ))} @@ -98,4 +108,5 @@ const SideBar = (props: Props) => { ); }; + export default SideBar; diff --git a/src/renderer/component/transactionListRecent/view.jsx b/src/renderer/component/transactionListRecent/view.jsx index 564ba270f..5dd678583 100644 --- a/src/renderer/component/transactionListRecent/view.jsx +++ b/src/renderer/component/transactionListRecent/view.jsx @@ -22,7 +22,7 @@ class TransactionListRecent extends React.PureComponent { return (
      -

      {__('Recent Transactions')}

      +
      {__('Recent Transactions')}
      {fetchingTransactions && } {!fetchingTransactions && ( diff --git a/src/renderer/component/walletAddress/view.jsx b/src/renderer/component/walletAddress/view.jsx index c666e13f4..eb1001b9a 100644 --- a/src/renderer/component/walletAddress/view.jsx +++ b/src/renderer/component/walletAddress/view.jsx @@ -20,9 +20,7 @@ class WalletAddress extends React.PureComponent { return (
      -
      -

      {__('Receive Credits')}

      -
      +
      {__('Receive Credits')}

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

      diff --git a/src/renderer/component/walletBalance/view.jsx b/src/renderer/component/walletBalance/view.jsx index d3cc40c49..a76abdb44 100644 --- a/src/renderer/component/walletBalance/view.jsx +++ b/src/renderer/component/walletBalance/view.jsx @@ -10,7 +10,7 @@ const WalletBalance = (props: Props) => { const { balance } = props; return (
      -

      {__('Balance')}

      +
      {__('Balance')}
      {__('You currently have')}
      {(balance || balance === 0) && } diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx index ec1114202..43a41870f 100644 --- a/src/renderer/component/walletSend/view.jsx +++ b/src/renderer/component/walletSend/view.jsx @@ -29,9 +29,7 @@ class WalletSend extends React.PureComponent { render() { return (
      -
      -

      {__('Send Credits')}

      -
      +
      {__('Send Credits')}
      { render() { const { daemonSettings } = this.props; + const { lbryum_wallet_dir } = daemonSettings; - if (!daemonSettings || Object.keys(daemonSettings).length === 0) { - return ( -
      - - {__('Failed to load settings.')} -
      - ); - } + const noDaemonSettings = Object.keys(daemonSettings).length === 0; return (
      -
      -

      {__('Backup Your LBRY Credits')}

      + {noDaemonSettings ? ( +
      {__('Failed to load settings.')}
      + ) : ( + +
      + {__('Backup Your LBRY Credits')}
      +

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

      -

      - {__( - '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:' )}

      - {__(`${daemonSettings.lbryum_wallet_dir}`)} + {lbryum_wallet_dir}

      +
      +

      {__( @@ -50,11 +59,14 @@ class BackupPage extends React.PureComponent {

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

      +       + )}
      ); diff --git a/src/renderer/page/getCredits/view.jsx b/src/renderer/page/getCredits/view.jsx index ebc16acfe..82429c86f 100644 --- a/src/renderer/page/getCredits/view.jsx +++ b/src/renderer/page/getCredits/view.jsx @@ -9,16 +9,16 @@ const GetCreditsPage = props => (
      -
      -

      {__('From External Wallet')}

      +
      + {__('From External Wallet')}
      -
      -

      {__('More ways to get LBRY Credits')}

      +
      + {__('More ways to get LBRY Credits')}

      diff --git a/src/renderer/page/help/view.jsx b/src/renderer/page/help/view.jsx index f0b0046f7..3351981cd 100644 --- a/src/renderer/page/help/view.jsx +++ b/src/renderer/page/help/view.jsx @@ -19,7 +19,7 @@ class HelpPage extends React.PureComponent { }; } - componentWillMount() { + componentDidMount() { lbry.getAppVersionInfo().then(({ remoteVersion, localVersion, upgradeAvailable }) => { this.setState({ uiVersion: localVersion, @@ -71,76 +71,71 @@ class HelpPage extends React.PureComponent { return ( -

      -
      -

      {__('Read the FAQ')}

      +
      +
      + {__('Read the FAQ')}
      -
      -

      {__('Our FAQ answers many common questions.')}

      -

      - -

      -
      -
      -
      -
      -

      {__('Get Live Help')}

      -
      -
      -

      - {__('Live help is available most hours in the')} #help{' '} - {__('channel of our Discord chat room.')} -

      -

      - -

      -
      -
      -
      -
      -

      {__('Report a Bug')}

      -
      -
      -

      {__('Did you find something wrong?')}

      -

      - -

      -
      {__('Thanks! LBRY is made by its users.')}
      +

      {__('Our FAQ answers many common questions.')}

      + +
      +
      -
      -
      -

      {__('About')}

      +
      +
      + {__('Get Live Help')} +
      +

      + {__('Live help is available most hours in the')} #help{' '} + {__('channel of our Discord chat room.')} +

      +
      + +
      +
      + +
      +
      + {__('Report a Bug')} +
      +

      {__('Did you find something wrong?')}

      + +
      + +
      +
      {__('Thanks! LBRY is made by its users.')}
      +
      + +
      +
      + {__('About')}
      - {this.state.upgradeAvailable === null ? ( - '' - ) : this.state.upgradeAvailable ? ( -

      - {__('A newer version of LBRY is available.')}{' '} - -

      - ) : ( -

      {__('Your copy of LBRY is up to date.')}

      - )} + {this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? ( +

      + {__('A newer version of LBRY is available.')}{' '} + +

      + ) : ( +

      {__('Your LBRY app is up to date.')}

      + )} {this.state.uiVersion && ver ? ( - +
      @@ -171,9 +166,9 @@ class HelpPage extends React.PureComponent { @@ -189,7 +184,7 @@ class HelpPage extends React.PureComponent {
      {__('App')}{__('Reward Eligible')} {user && user.is_reward_approved ? ( - + __("Yes") ) : ( - + __("No") )}
      {__('Access Token')} {this.state.accessTokenHidden && ( - + )} {!this.state.accessTokenHidden && accessToken && ( diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx index 78960140c..23bc298b4 100644 --- a/src/renderer/page/settings/view.jsx +++ b/src/renderer/page/settings/view.jsx @@ -233,7 +233,6 @@ class SettingsPage extends React.PureComponent {
      {__('Content Settings')}
      -
      { 'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. ' )} /> -
      diff --git a/src/renderer/redux/reducers/settings.js b/src/renderer/redux/reducers/settings.js index 73cf69209..357236f23 100644 --- a/src/renderer/redux/reducers/settings.js +++ b/src/renderer/redux/reducers/settings.js @@ -27,6 +27,7 @@ const defaultState = { }, isNight: false, languages: {}, + daemonSettings: {} }; reducers[ACTIONS.DAEMON_SETTINGS_RECEIVED] = (state, action) => diff --git a/src/renderer/redux/selectors/navigation.js b/src/renderer/redux/selectors/navigation.js index aec05c82f..58dc75224 100644 --- a/src/renderer/redux/selectors/navigation.js +++ b/src/renderer/redux/selectors/navigation.js @@ -60,25 +60,42 @@ export const selectNavLinks = createSelector( page === 'rewards' || page === 'history'; - let walletLink; - if (isWalletPage(currentPage)) { - // If they are on a wallet page, the top level link should direct them to the overview page - walletLink = '/wallet'; - } else { - // check to see if they've recently been on a wallet sub-link - const previousStack = historyStack.slice().reverse(); + const isMyLbryPage = page => + page === 'downloaded' || + page === 'published' || + page === 'settings'; + + + const previousStack = historyStack.slice().reverse(); + + const getPreviousSubLinkPath = (checkIfValidPage) => { for (let i = 0; i < previousStack.length; i += 1) { const currentStackItem = previousStack[i]; // Trim off the "/" from the path const pageInStack = currentStackItem.path.slice(1); - if (isWalletPage(pageInStack)) { - walletLink = currentStackItem.path; - break; + if (checkIfValidPage(pageInStack)) { + return currentStackItem.path; } } } + // Gets the last active sublink in a section + const getActiveSublink = (category) => { + if (category === 'wallet') { + const previousPath = getPreviousSubLinkPath(isWalletPage); + return previousPath ? previousPath : '/wallet'; + } else if (category === 'myLbry') { + const previousPath = getPreviousSubLinkPath(isMyLbryPage); + return previousPath ? previousPath : '/downloaded'; + } + + return undefined; + } + + const isCurrentlyWalletPage = isWalletPage(currentPage); + const isCurrentlyMyLbryPage = isMyLbryPage(currentPage); + const walletSubLinks = [ { label: 'Overview', @@ -101,12 +118,30 @@ export const selectNavLinks = createSelector( active: currentPage === 'rewards', }, { - label: 'My Transactions', + label: 'Transactions', path: '/history', active: currentPage === 'history', }, ]; + const myLbrySubLinks = [ + { + label: 'Downloads', + path: '/downloaded', + active: currentPage === 'downloaded', + }, + { + label: 'Publishes', + path: '/published', + active: currentPage === 'published', + }, + { + label: 'Settings', + path: '/settings', + active: currentPage === 'settings', + }, + ] + const navLinks = { primary: [ { @@ -125,27 +160,20 @@ export const selectNavLinks = createSelector( secondary: [ { label: 'Wallet', - path: walletLink || '/wallet', // If they've never been to a wallet page, take them to the overview - active: - currentPage === 'wallet' || - !!walletSubLinks.find(({ path }) => currentPage === path.slice(1)), - subLinks: walletSubLinks, icon: 'CreditCard', + subLinks: walletSubLinks, + path: isCurrentlyWalletPage ? '/wallet' : getActiveSublink('wallet'), + active: isWalletPage(currentPage) }, { - label: 'Publish', - path: '/publish', - active: currentPage === 'publish', - icon: 'UploadCloud', - }, - { - label: 'Settings', - path: '/settings', - active: currentPage === 'settings', + label: 'My LBRY', icon: 'Settings', + subLinks: myLbrySubLinks, + path: isCurrentlyMyLbryPage ? '/downloaded' : getActiveSublink('myLbry'), + active: isMyLbryPage(currentPage) }, { - label: 'Backup Wallet', + label: 'Backup', path: '/backup', active: currentPage === 'backup', icon: 'Save', @@ -158,6 +186,7 @@ export const selectNavLinks = createSelector( }, ], }; + return navLinks; } ); diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 4a8d92c9e..c8e5c3724 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -54,6 +54,10 @@ body { overflow: hidden; } +* { + box-sizing: border-box; +} + h1, h2, h3, diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 32dac4f48..9044ab34e 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -88,7 +88,7 @@ $width-page-constrained: 800px; /* Button */ --btn-primary-color: #fff; --button-alt-color: var(--text-color); - --btn-primary-bg: var(--color-primary-dark); + --btn-primary-bg: var(--color-primary); --btn-inverse-color: var(--color-primary-dark); --btn-inverse-bg: var(--color-white); --btn-radius: 20px; diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss index 89a8fc12e..a5741d061 100644 --- a/src/renderer/scss/all.scss +++ b/src/renderer/scss/all.scss @@ -21,8 +21,5 @@ @import 'component/_markdown-editor.scss'; @import 'component/_scrollbar.scss'; @import 'component/_divider.scss'; -@import 'component/_checkbox.scss'; -@import 'component/_radio.scss'; -@import 'component/_shapeshift.scss'; @import 'component/_spinner.scss'; @import 'component/_nav.scss'; diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss index 7e0336834..04248fbbd 100644 --- a/src/renderer/scss/component/_button.scss +++ b/src/renderer/scss/component/_button.scss @@ -37,7 +37,11 @@ min-width: var(--btn-height); border-radius: var(--btn-radius); color: var(--btn-primary-color); - background-color: var(--btn-primary-bg); + + // TODO: Why does using --color-primary not work here? something is being overriden + // background-color: var(--color-primary); + background-color: #44b098; + display: flex; align-items: center; justify-content: center; @@ -111,7 +115,6 @@ &:hover { box-shadow: none; - color: var(--color-primary); } } diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index 5bf0778d7..a4457283c 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -67,8 +67,8 @@ } .card__title { - font-size: 1.5em; - font-weight: 800; + font-size: 1.2em; + font-weight: 700; padding: 0; } @@ -88,6 +88,12 @@ padding-top: 0; } +.card__meta { + color: var(--color-help); + font-size: 0.85em; + padding-top: $spacing-vertical * 2/3; +} + // .card-media__internal__links should always be inside a card .card { .card-media__internal-links { @@ -109,10 +115,6 @@ display: flex; justify-content: space-between; align-items: center; - - .card__actions .btn:not(:first-of-type) { - margin-left: $spacing-vertical / 3; - } } .card__content { @@ -137,10 +139,14 @@ .card__actions { margin-top: var(--card-margin); display: flex; + + .btn:nth-child(n + 2) { + margin-left: $spacing-vertical / 3; + } } .card__actions--no-margin { - magin-top: 0; + margin-top: 0; } .card__actions--vertical { diff --git a/src/renderer/scss/component/_checkbox.scss b/src/renderer/scss/component/_checkbox.scss deleted file mode 100644 index b72f7c896..000000000 --- a/src/renderer/scss/component/_checkbox.scss +++ /dev/null @@ -1,69 +0,0 @@ -*, -*:before, -*:after { - box-sizing: border-box; -} - -$md-checkbox-checked-color: var(--color-primary); -$md-checkbox-border-color: var(--input-border-color); -$md-checkbox-size: 20px; -$md-checkbox-padding: 4px; -$md-checkmark-width: 2px; -$md-checkmark-color: #fff; - -.form-field--checkbox { - position: relative; - - label { - cursor: pointer; - &:before, - &:after { - content: ''; - position: absolute; - left: 0; - top: 0; - } - - &:before { - // box - width: $md-checkbox-size; - height: $md-checkbox-size; - background: transparent; - border: 2px solid $md-checkbox-border-color; - border-radius: 2px; - cursor: pointer; - transition: background 0.3s; - } - - &:after { - // checkmark - } - } - - input[type='checkbox'] { - outline: 0; - visibility: hidden; - margin-right: 16px; - - &:checked { - + label:before { - background: $md-checkbox-checked-color; - border: none; - } - + label:after { - $md-checkmark-size: $md-checkbox-size - 2*$md-checkbox-padding; - - transform: rotate(-45deg); - - top: ($md-checkbox-size / 2) - ($md-checkmark-size / 4) - $md-checkbox-size/10; - left: $md-checkbox-padding; - width: $md-checkmark-size; - height: $md-checkmark-size / 2; - - border: $md-checkmark-width solid $md-checkmark-color; - border-top-style: none; - border-right-style: none; - } - } - } -} diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss index ff2e743a1..1c1420878 100644 --- a/src/renderer/scss/component/_form-field.scss +++ b/src/renderer/scss/component/_form-field.scss @@ -14,6 +14,16 @@ &.form-row--centered { align-items: center; } + + .form-field--strech { + flex: 1; + } +} + +.form-field { + label { + cursor: pointer; + } } .form-field__input { @@ -26,18 +36,12 @@ } } -.form-field { - label { - cursor: pointer; - } -} - .form-field__error { color: var(--color-error); } .form-field__label { - color: var(--color-grey-dark); + color: var(--color-black); } .form-field__help { diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss index 928d7a9f8..c347451ec 100644 --- a/src/renderer/scss/component/_nav.scss +++ b/src/renderer/scss/component/_nav.scss @@ -1,51 +1,84 @@ .nav { grid-area: nav; background-color: var(--color-nav-bg); - padding-top: 16px; hr { width: 40px; border: solid 1px var(--color-grey); - margin: $spacing-vertical $spacing-vertical * 2/3 $spacing-vertical * 2; + margin: $spacing-vertical $spacing-vertical * 2/3; } } .nav__actions-top { + height: var(--header-height); display: flex; justify-content: space-between; align-items: center; - padding: 0 5px; + padding: 0 $spacing-vertical * 1/3; } .nav__actions-history { display: flex; + + .btn { + margin-left: $spacing-vertical * 1/3; + } } +// Sidebar links .nav__primary { - padding-top: $spacing-vertical * 3; + padding-top: $spacing-vertical; } .nav__link { padding: $spacing-vertical / 3 0 $spacing-vertical / 3 $spacing-vertical * 2/3; - font-weight: bold; color: var(--color-grey-dark); - // The hover effect should be on the li - // Need to have the button grow - & .btn:hover { + .btn:hover { color: var(--color-black); } + + .btn__label { + margin-left: $spacing-vertical * 1/3; + } +} + +.nav__link--primary { + font-weight: bold; +} + +.nav__link--sub { + font-size: .9em; + font-weight: 400; + margin-left: 5px; + color: var(--color-grey-dark); + padding: 5px $spacing-vertical * 2/3; } .nav__link--active { color: var(--color-black); } +.nav__sub-links { + padding-top: $spacing-vertical * 1/3; +} + +// Sub links animations +// The -appear, -leave classes are added by 'react-transition-group' +.nav__sub-appear, +.nav__sub-leave { + max-height: 0; + opacity: 0; +} + +.nav__sub-appear.nav__sub-appear-active { + // using max-height is a hack to animate to height "auto" + // Needs to be some arbitrarily large height + max-height: 500px; + opacity: 1; + transition: max-height .5s ease-in-out, opacity .5s ease-in-out; +} + .nav__sub { padding-top: 5px; } - -.nav__sub-link { - padding: 5px $spacing-vertical * 2/3; - font-size: 0.8em; -} diff --git a/src/renderer/scss/component/_radio.scss b/src/renderer/scss/component/_radio.scss deleted file mode 100644 index 4d511816f..000000000 --- a/src/renderer/scss/component/_radio.scss +++ /dev/null @@ -1,54 +0,0 @@ -$md-radio-checked-color: var(--color-primary); -$md-radio-border-color: var(--input-border-color); -$md-radio-size: 20px; -$md-radio-checked-size: 10px; -$md-radio-ripple-size: 15px; - -.form-field--radio { - position: relative; - - label { - cursor: pointer; - - &:before, - &:after { - content: ''; - position: absolute; - left: 0; - top: 0; - border-radius: 50%; - transition: all 0.3s ease; - transition-property: transform, border-color; - } - - &:before { - width: $md-radio-size; - height: $md-radio-size; - background: transparent; - border: 2px solid $md-radio-border-color; - cursor: pointer; - } - - &:after { - top: $md-radio-size / 2 - $md-radio-checked-size / 2; - left: $md-radio-size / 2 - $md-radio-checked-size / 2; - width: $md-radio-checked-size; - height: $md-radio-checked-size; - transform: scale(0); - background: $md-radio-checked-color; - } - } - - input[type='radio'] { - visibility: hidden; - margin-right: 16px; - - &:checked + label:before { - border-color: $md-radio-checked-color; - } - - &:checked + label:after { - transform: scale(1); - } - } -} diff --git a/yarn.lock b/yarn.lock index a774567a4..a1f910fc8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1819,6 +1819,10 @@ center-align@^0.1.1: align-text "^0.1.3" lazy-cache "^1.0.3" +chain-function@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc" + chainsaw@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/chainsaw/-/chainsaw-0.1.0.tgz#5eab50b28afe58074d0d58291388828b5e5fbc98" @@ -2756,6 +2760,10 @@ dom-converter@~0.1: dependencies: utila "~0.3" +dom-helpers@^3.2.0: + version "3.3.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" + dom-scroll-into-view@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e" @@ -7342,7 +7350,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.1, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0: +prop-types@^15.5.1, prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -7613,6 +7621,16 @@ react-simplemde-editor@^3.6.11: react "^0.14.2" simplemde "^1.11.2" +react-transition-group@1.x: + version "1.2.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6" + dependencies: + chain-function "^1.0.0" + dom-helpers "^3.2.0" + loose-envify "^1.3.1" + prop-types "^15.5.6" + warning "^3.0.0" + react@^0.14.2: version "0.14.9" resolved "https://registry.yarnpkg.com/react/-/react-0.14.9.tgz#9110a6497c49d44ba1c0edd317aec29c2e0d91d1" -- 2.45.2