diff --git a/package.json b/package.json index 1322f6573..8516569ff 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/ui/component/channelContent/view.jsx b/ui/component/channelContent/view.jsx index ba2eab11d..057c015d2 100644 --- a/ui/component/channelContent/view.jsx +++ b/ui/component/channelContent/view.jsx @@ -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.' )}

-
+
diff --git a/ui/component/channelCreate/view.jsx b/ui/component/channelCreate/view.jsx index 7b5379d98..38f5f3faa 100644 --- a/ui/component/channelCreate/view.jsx +++ b/ui/component/channelCreate/view.jsx @@ -122,7 +122,7 @@ class ChannelCreate extends React.PureComponent { onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))} onWheel={e => e.stopPropagation()} /> -
+
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx index 47468fe61..50e0bb092 100644 --- a/ui/component/walletSendTip/view.jsx +++ b/ui/component/walletSendTip/view.jsx @@ -145,7 +145,7 @@ function WalletSendTip(props: Props) { } /> -
+
diff --git a/ui/modal/modalConfirmSendTip/view.jsx b/ui/modal/modalConfirmSendTip/view.jsx index 2cbf452a5..d64bbf291 100644 --- a/ui/modal/modalConfirmSendTip/view.jsx +++ b/ui/modal/modalConfirmSendTip/view.jsx @@ -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 { } 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 ( - +
this.onConfirmed()}> -

{__(isSupport ? 'Supporting: ' : 'Tipping: ')}

-
{tipAmount} LBC
-

{__('To: ')}

-
{title}
-
-
+ +
+ +
{tipAmount} LBC
+
+
+ +
{title}
+
+ + } + actions={ +
+
+ } + />
); diff --git a/ui/modal/modalConfirmTransaction/view.jsx b/ui/modal/modalConfirmTransaction/view.jsx index f323216a8..ed55d52cd 100644 --- a/ui/modal/modalConfirmTransaction/view.jsx +++ b/ui/modal/modalConfirmTransaction/view.jsx @@ -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 { render() { const { amount, address, closeModal } = this.props; + const title = __('Confirm Transaction'); return ( - +
this.onConfirmed()}> -

{__('Sending: ')}

-
{amount} LBC
-

{__('To address: ')}

-
{address}
-

{__('Once the transaction is sent, it cannot be reversed.')}

-
-
+ +
+ +
{amount} LBC
+
+
+

{__('To address: ')}

+
{address}
+
+ + } + actions={ + <> +
+
+

{__('Once the transaction is sent, it cannot be reversed.')}

+ + } + />
); diff --git a/ui/modal/modalRevokeClaim/view.jsx b/ui/modal/modalRevokeClaim/view.jsx index 834efdc0a..25a23c15e 100644 --- a/ui/modal/modalRevokeClaim/view.jsx +++ b/ui/modal/modalRevokeClaim/view.jsx @@ -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 ( -
{getMsgBody(type, name)}
+ +
+ } + /> ); } diff --git a/ui/page/show/view.jsx b/ui/page/show/view.jsx index 135c2362b..c4b9bd879 100644 --- a/ui/page/show/view.jsx +++ b/ui/page/show/view.jsx @@ -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={ -
+
} diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 2bad10590..5dc8ba006 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -154,6 +154,7 @@ .header__navigation-item--balance { margin: 0 var(--spacing-medium); + font-weight: var(--font-weight-bold); } .header__navigation-dropdown { diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss index 82595198a..649819c74 100644 --- a/ui/scss/component/section.scss +++ b/ui/scss/component/section.scss @@ -121,7 +121,6 @@ } .button--primary ~ .button--link { - font-weight: var(--font-weight-bold); margin-left: var(--spacing-small); padding: var(--spacing-xsmall); } diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index 6b9e70c0e..c67a8f64b 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -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); diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 76c057d25..6312d1007 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -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; diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 11fbc7057..aae2da987 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -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; diff --git a/yarn.lock b/yarn.lock index fe70f37ae..755ec54b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"