LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

modal consistency cleanup

Browse source
This commit is contained in:
Sean Yesmunt 2020-05-01 13:55:42 -04:00
parent 104aa943ed
commit f873b99875
15 changed files with 83 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -69,7 +69,7 @@
"@babel/register": "^7.0.0",
"@exponent/electron-cookies": "^2.0.0",
"@hot-loader/react-dom": "^16.8",
"@lbry/components": "^4.1.2",
"@lbry/components": "^4.1.3",
"@reach/menu-button": "0.7.4",
"@reach/rect": "^0.2.1",
"@reach/tabs": "^0.1.5",

2
ui/component/channelContent/view.jsx
View file

@ -50,7 +50,7 @@ function ChannelContent(props: Props) {
'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this channel from our applications.'
)}
</p>
<div className="card__actions">
<div className="section__actions">
<Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
</div>
</section>

2
ui/component/channelCreate/view.jsx
View file

@ -122,7 +122,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))}
onWheel={e => e.stopPropagation()}
/>
<div className="card__actions">
<div className="section__actions">
<Button
type="submit"
button="primary"

2
ui/component/channelEdit/view.jsx
View file

@ -195,7 +195,7 @@ function ChannelForm(props: Props) {
});
}}
/>
<div className={'card__actions'}>
<div className={'section__actions'}>
<Button button="primary" label={__('Submit')} onClick={handleSubmit} />
<Button button="link" label={__('Cancel')} navigate={`$/${PAGES.CHANNELS}`} />
</div>

2
ui/component/walletSendTip/view.jsx
View file

@ -145,7 +145,7 @@ function WalletSendTip(props: Props) {
}
/>
</Form>
<div className="card__actions">
<div className="section__actions">
<Button button="link" label={__('Cancel')} onClick={onCancel} />
</div>
</React.Fragment>

42
ui/modal/modalConfirmSendTip/view.jsx
View file

@ -3,6 +3,7 @@ import React from 'react';
import Button from 'component/button';
import { Form } from 'component/common/form';
import { Modal } from 'modal/modal';
import Card from 'component/common/card';
type Props = {
claimId: string,
@ -21,24 +22,33 @@ class ModalConfirmSendTip extends React.PureComponent<Props> {
}
render() {
const { tipAmount, title, isSupport, closeModal } = this.props;
const { tipAmount = 5.5, title = 'This is a random title name', isSupport, closeModal } = this.props;
const cardTitle = __(isSupport ? 'Confirm Support' : 'Confirm Tip');
return (
<Modal
isOpen
title={__(isSupport ? 'Support LBC' : 'Tip LBC')}
contentLabel={__(isSupport ? 'Confirm Support' : 'Confirm Tip')}
type="custom"
onAborted={closeModal}
>
<Modal isOpen type="card" onAborted={closeModal} contentLabel={cardTitle}>
<Form onSubmit={() => this.onConfirmed()}>
<p>{__(isSupport ? 'Supporting: ' : 'Tipping: ')}</p>
<blockquote>{tipAmount} LBC</blockquote>
<p>{__('To: ')}</p>
<blockquote>{title}</blockquote>
<div className="card__actions">
<Button autoFocus button="primary" label={__('Send')} onClick={() => this.onConfirmed()} />
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
<Card
title={cardTitle}
body={
<>
<div className="section">
<label>{__(isSupport ? 'Supporting: ' : 'Tipping: ')}</label>
<blockquote>{tipAmount} LBC</blockquote>
</div>
<div className="section">
<label>{__('To: ')}</label>
<blockquote>{title}</blockquote>
</div>
</>
}
actions={
<div className="section__actions">
<Button autoFocus button="primary" type="submit" label={__('Send')} />
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
}
/>
</Form>
</Modal>
);

43
ui/modal/modalConfirmTransaction/view.jsx
View file

@ -3,6 +3,7 @@ import React from 'react';
import Button from 'component/button';
import { Form } from 'component/common/form';
import { Modal } from 'modal/modal';
import Card from 'component/common/card';
type Props = {
address: string,
@ -20,24 +21,34 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
render() {
const { amount, address, closeModal } = this.props;
const title = __('Confirm Transaction');
return (
<Modal
isOpen
title={__('Send LBC')}
contentLabel={__('Confirm Transaction')}
type="custom"
onAborted={closeModal}
>
<Modal isOpen contentLabel={title} type="card" onAborted={closeModal}>
<Form onSubmit={() => this.onConfirmed()}>
<p>{__('Sending: ')}</p>
<blockquote>{amount} LBC</blockquote>
<p>{__('To address: ')}</p>
<blockquote>{address}</blockquote>
<p>{__('Once the transaction is sent, it cannot be reversed.')}</p>
<div className="card__actions">
<Button autoFocus button="primary" label={__('Send')} onClick={() => this.onConfirmed()} />
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
<Card
title={title}
body={
<>
<div className="section">
<label>{__('Sending: ')}</label>
<blockquote>{amount} LBC</blockquote>
</div>
<div className="section">
<p>{__('To address: ')}</p>
<blockquote>{address}</blockquote>
</div>
</>
}
actions={
<>
<div className="section__actions">
<Button autoFocus button="primary" label={__('Send')} onClick={() => this.onConfirmed()} />
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
<p className="help">{__('Once the transaction is sent, it cannot be reversed.')}</p>
</>
}
/>
</Form>
</Modal>
);

22
ui/modal/modalRevokeClaim/view.jsx
View file

@ -3,6 +3,8 @@ import React, { useState } from 'react';
import { Modal } from 'modal/modal';
import { FormField } from 'component/common/form';
import * as txnTypes from 'constants/transaction_types';
import Card from 'component/common/card';
import Button from 'component/button';
type Props = {
closeModal: () => void,
@ -86,18 +88,28 @@ export default function ModalRevokeClaim(props: Props) {
closeModal();
}
const label = getButtonLabel(type);
return (
<Modal
isOpen
title={getButtonLabel(type)}
contentLabel={getButtonLabel(type)}
type="confirm"
confirmButtonLabel={getButtonLabel(type)}
contentLabel={label}
type="card"
confirmButtonLabel={label}
onConfirmed={revokeClaim}
onAborted={closeModal}
confirmButtonDisabled={valueType === txnTypes.CHANNEL && name !== channelName}
>
<section>{getMsgBody(type, name)}</section>
<Card
title={label}
body={getMsgBody(type, name)}
actions={
<div className="section__actions">
<Button button="primary" label={label} onClick={revokeClaim} />
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
}
/>
</Modal>
);
}

2
ui/page/show/view.jsx
View file

@ -87,7 +87,7 @@ function ShowPage(props: Props) {
'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
)}
actions={
<div className="card__actions">
<div className="section__actions">
<Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
</div>
}

1
ui/scss/component/_header.scss
View file

@ -154,6 +154,7 @@
.header__navigation-item--balance {
margin: 0 var(--spacing-medium);
font-weight: var(--font-weight-bold);
}
.header__navigation-dropdown {

1
ui/scss/component/section.scss
View file

@ -121,7 +121,6 @@
}
.button--primary ~ .button--link {
font-weight: var(--font-weight-bold);
margin-left: var(--spacing-small);
padding: var(--spacing-xsmall);
}

1
ui/scss/init/_gui.scss
View file

@ -93,7 +93,6 @@ dd {
}
blockquote {
margin-bottom: 1rem;
padding: 0.8rem;
background-color: var(--color-blockquote-bg);
border-left: 0.3rem solid var(--color-blockquote);

1
ui/scss/themes/dark.scss
View file

@ -54,6 +54,7 @@
--color-text-warning: #212529;
--color-text-warning--background: var(--lbry-yellow-1);
--color-blockquote: var(--color-gray-5);
--color-blockquote-bg: var(--color-card-background-highlighted);
// Input
--color-input: #f4f4f5;

1
ui/scss/themes/light.scss
View file

@ -33,6 +33,7 @@
--color-text-help-warning: #989b20;
--color-text-warning--background: var(--lbry-yellow-1);
--color-blockquote: var(--color-gray-3);
--color-blockquote-bg: var(--color-gray-1);
--color-spinner-light: #ffffff;
--color-spinner-dark: #212529;

8
yarn.lock
View file

@ -826,10 +826,10 @@
prop-types "^15.6.2"
scheduler "^0.18.0"
"@lbry/components@^4.1.2":
version "4.1.2"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.1.2.tgz#18eda2f1a73a6241e9a96594ccab8fffb9ef3ae9"
integrity sha512-GJx4BTdEtOlm5/JsKUVXBzYeepXTbZ4GjGFrKxzXh6jWw40aFOh8OrHwYM/LHRl1fuKRmB5xpZNWsjw6EKyEeQ==
"@lbry/components@^4.1.3":
version "4.1.3"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.1.3.tgz#ff637a3017f8fb5bd3fa9ea27ba760a08e77ae5d"
integrity sha512-VQlruDidsk4gpcN14XjfVx5TeD4ajrF2kk4sJQinPFuFrM5P6kdyzbd9FvksPLss8rujnGCgnjvBj4F14KEOOg==
"@mapbox/hast-util-table-cell-style@^0.1.3":
version "0.1.3"