From 21b712f7863542292767b7417014255d1f3942f1 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt <sean@lbry.io> Date: Mon, 9 Dec 2019 12:25:13 -0500 Subject: [PATCH] cleanup css --- package.json | 2 +- static/app-strings.json | 11 +++++++- ui/component/navigationHistoryItem/view.jsx | 2 +- ui/component/spinner/view.jsx | 1 - ui/component/walletBackup/view.jsx | 2 +- ui/page/file/view.jsx | 7 ++--- ui/scss/all.scss | 1 - ui/scss/component/_card.scss | 29 +++++---------------- ui/scss/component/_content.scss | 2 +- ui/scss/component/_dat-gui.scss | 2 +- ui/scss/component/_file-render.scss | 6 ++--- ui/scss/component/_markdown-editor.scss | 20 -------------- ui/scss/component/_media.scss | 18 ++++--------- ui/scss/component/_modal.scss | 6 ++--- ui/scss/component/_navigation.scss | 2 +- ui/scss/component/_notice.scss | 18 ------------- ui/scss/component/_spinner.scss | 8 ------ ui/scss/component/_splash.scss | 11 -------- ui/scss/component/_syntax-highlighter.scss | 5 ---- ui/scss/component/_table.scss | 11 ++++++++ ui/scss/component/_time.scss | 9 ------- ui/scss/component/_wunderbar.scss | 1 - ui/scss/init/_gui.scss | 8 +----- ui/scss/init/_mixins.scss | 4 --- ui/scss/init/_reset.scss | 1 - ui/scss/themes/light.scss | 3 ++- yarn.lock | 8 +++--- 27 files changed, 56 insertions(+), 142 deletions(-) delete mode 100644 ui/scss/component/_notice.scss delete mode 100644 ui/scss/component/_time.scss diff --git a/package.json b/package.json index 360ed00cf..7a9142c4d 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@babel/register": "^7.0.0", "@exponent/electron-cookies": "^2.0.0", "@hot-loader/react-dom": "^16.8", - "@lbry/components": "^3.0.2", + "@lbry/components": "^3.0.3", "@reach/menu-button": "^0.1.18", "@reach/rect": "^0.2.1", "@reach/tabs": "^0.1.5", diff --git a/static/app-strings.json b/static/app-strings.json index fa41d9183..44c8539c4 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -906,5 +906,14 @@ "You're not following any tags. Add tags above or smash that %customize% button!": "You're not following any tags. Add tags above or smash that %customize% button!", "New Channel": "New Channel", "ChannelName": "ChannelName", - "Pending...": "Pending..." + "Pending...": "Pending...", + "If you continue to have issues, please %contact_support%.": "If you continue to have issues, please %contact_support%.", + "Hide QR code": "Hide QR code", + "Selected Tags": "Selected Tags", + "Add a tag...": "Add a tag...", + "Simple Editor": "Simple Editor", + "Recommended size is 16:9": "Recommended size is 16:9", + "Any amount will give you the highest bid, but larger amounts help your content be trusted and discovered.": "Any amount will give you the highest bid, but larger amounts help your content be trusted and discovered.", + "Loading 3D model.": "Loading 3D model.", + "Saved zip archive to /Users/sean/Downloads/.lbryum-2019-12-09T17-21-28.429Z.zip": "Saved zip archive to /Users/sean/Downloads/.lbryum-2019-12-09T17-21-28.429Z.zip" } \ No newline at end of file diff --git a/ui/component/navigationHistoryItem/view.jsx b/ui/component/navigationHistoryItem/view.jsx index b9851857b..8a262f7ff 100644 --- a/ui/component/navigationHistoryItem/view.jsx +++ b/ui/component/navigationHistoryItem/view.jsx @@ -55,7 +55,7 @@ class NavigationHistoryItem extends React.PureComponent<Props> { })} > {!slim && <FormField checked={selected} type="checkbox" onChange={onSelect} />} - <span className="time time--ago">{moment(lastViewed).from(moment())}</span> + <span className="">{moment(lastViewed).from(moment())}</span> <Button className="item-list__element" button="link" label={uri} navigate={uri} /> <span className="item-list__element">{title}</span> </div> diff --git a/ui/component/spinner/view.jsx b/ui/component/spinner/view.jsx index f420369f4..75f50d261 100644 --- a/ui/component/spinner/view.jsx +++ b/ui/component/spinner/view.jsx @@ -67,7 +67,6 @@ class Spinner extends PureComponent<Props, State> { 'spinner--dark': !light && (dark || theme === LIGHT_THEME), 'spinner--light': !dark && (light || theme === DARK_THEME), 'spinner--small': type === 'small', - 'spinner--splash': type === 'splash', })} > <div className="rect rect1" /> diff --git a/ui/component/walletBackup/view.jsx b/ui/component/walletBackup/view.jsx index 12606e7ae..0bc2b2331 100644 --- a/ui/component/walletBackup/view.jsx +++ b/ui/component/walletBackup/view.jsx @@ -139,7 +139,7 @@ class WalletBackup extends React.PureComponent<Props, State> { </p> <div className="card__actions"> <Button - button="inverse" + button="primary" label={__('Create Backup')} onClick={() => this.backupWalletDir(lbryumWalletDir)} /> diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx index 5820ec65b..bf9bf7802 100644 --- a/ui/page/file/view.jsx +++ b/ui/page/file/view.jsx @@ -156,7 +156,10 @@ class FilePage extends React.Component<Props> { </div> <div className="media__title"> - <span className="media__title-price"> + <span className="media__title-badge"> + {nsfw && <span className="badge badge--tag-mature">{__('Mature')}</span>} + </span> + <span className="media__title-badge"> <FilePrice badge uri={normalizeURI(uri)} /> </span> <h1 className="media__title-text">{title}</h1> @@ -244,8 +247,6 @@ class FilePage extends React.Component<Props> { </section> </div> <div className="grid-area--related"> - {nsfw && <div className="badge badge--mature">{__('Mature')}</div>} - <RecommendedContent uri={uri} /> </div> </div> diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 94c5dad6d..9443f586c 100644 --- a/ui/scss/all.scss +++ b/ui/scss/all.scss @@ -41,6 +41,5 @@ @import 'component/table'; @import 'component/tabs'; @import 'component/tags'; -@import 'component/time'; @import 'component/wunderbar'; @import 'component/yrbl'; diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index ed03010dd..5090d9c9b 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -17,13 +17,6 @@ padding: var(--spacing-large); } -.card--wallet-balance { - background-repeat: no-repeat; - background-size: cover; - color: black; //white; - justify-content: space-between; -} - .card--reward-total { background-repeat: no-repeat; background-size: cover; @@ -91,26 +84,18 @@ .card__message { border-left: 0.5rem solid; padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large); - - &:not(&--error):not(&--failure):not(&--success) { - background-color: black; //black; //teal-1, 0.1); - border-color: black; //teal-3; - } + background-color: var(--color-primary-alt); + border-color: var(--color-primary); } .card__message--error { - background-color: black; //black; //orange-1, 0.1); - border-color: black; //orange-3; + background-color: var(--color-error); + border-color: var(--color-text-error); } .card__message--failure { - background-color: black; //black; //red-1, 0.1); - border-color: black; //red-3; -} - -.card__message--success { - background-color: black; //black; //green-1, 0.1); - border-color: black; //green-3; + background-color: var(--color-error); + border-color: var(--color-text-error); } .card__title { @@ -134,7 +119,7 @@ } .card__media--nsfw { - background-color: black; //grape-3; + background-color: black; } .card__media--disabled { diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss index 5d3575949..f0df8ba28 100644 --- a/ui/scss/component/_content.scss +++ b/ui/scss/component/_content.scss @@ -113,5 +113,5 @@ } .content__loading-text { - color: black; //white; + color: black; } diff --git a/ui/scss/component/_dat-gui.scss b/ui/scss/component/_dat-gui.scss index b52e57687..557a54e99 100644 --- a/ui/scss/component/_dat-gui.scss +++ b/ui/scss/component/_dat-gui.scss @@ -65,7 +65,7 @@ .cr { &.function:hover, &.boolean:hover { - background-color: black; //white; + background-color: white; } } diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index d5b0c27f5..e34b799c1 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -73,8 +73,8 @@ } .CodeMirror-gutters { - background-color: black; //gray-1; - border-right: 1px solid black; //gray-2; + background-color: var(--color-gray-1); + border-right: 1px solid var(--color-gray-4); padding-right: var(--spacing-medium); } @@ -83,7 +83,7 @@ } .CodeMirror-linenumber { - color: black; //gray-5; + color: var(--color-gray-5); } } diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss index c7e729c58..2f4562149 100644 --- a/ui/scss/component/_markdown-editor.scss +++ b/ui/scss/component/_markdown-editor.scss @@ -8,26 +8,9 @@ background: var(--color-input-bg); color: var(--color-input); - .CodeMirror-cursor { - border-color: black; //teal-3; - } - .CodeMirror-placeholder { opacity: 0.5; } - - .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { - text-decoration: underline; - text-decoration-color: black; //red-3; - text-decoration-style: dotted; - } -} - -// Fix selection -.CodeMirror-line::selection, -.CodeMirror-line > span::selection, -.CodeMirror-line > span > span::selection { - background-color: black; //teal-1; } .editor-toolbar { @@ -46,14 +29,11 @@ } &.disabled-for-preview a:not(.no-disable) { - background-color: black; //gray-1; border-color: transparent; opacity: 0.3; } &.fullscreen { - background-color: black; //gray-1; - &::before, &::after { display: none; diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss index 543a667a5..35536e56a 100644 --- a/ui/scss/component/_media.scss +++ b/ui/scss/component/_media.scss @@ -5,18 +5,10 @@ @include thumbnail; border-radius: var(--card-radius); object-fit: cover; - - &:not(.media__thumb--nsfw) { - background-color: var(--color-placeholder-background); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - } -} - -.media__thumb--nsfw { - background-color: black; //grape-5; - // background-image: linear-gradient(to bottom right, black; //teal-3, black; //grape-5 100%); + background-color: var(--color-placeholder-background); + background-position: center; + background-repeat: no-repeat; + background-size: cover; } // M E D I A @@ -35,7 +27,7 @@ display: inline; } -.media__title-price { +.media__title-badge { float: right; margin-left: var(--spacing-small); margin-top: 5px; diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss index 0846de0fb..e4113f251 100644 --- a/ui/scss/component/_modal.scss +++ b/ui/scss/component/_modal.scss @@ -54,9 +54,9 @@ margin-top: var(--spacing-small); padding: var(--spacing-small); - background-color: black; //red-1; - border-left: 2px solid black; //red-5; - color: black; //red-5; + background-color: var(--color-error); + border-left: 2px solid var(--color-text-error); + color: var(--color-text-error); list-style: none; overflow-y: scroll; white-space: pre-wrap; diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss index 6b125cb1d..2d43371b2 100644 --- a/ui/scss/component/_navigation.scss +++ b/ui/scss/component/_navigation.scss @@ -14,7 +14,7 @@ font-weight: var(--font-weight-bold); color: #fff; position: relative; - background-color: black; //black; + background-color: black; h2 { font-size: 2rem; diff --git a/ui/scss/component/_notice.scss b/ui/scss/component/_notice.scss deleted file mode 100644 index 06e123c1b..000000000 --- a/ui/scss/component/_notice.scss +++ /dev/null @@ -1,18 +0,0 @@ -.notice { - border: 1px solid; - border-radius: 5px; - padding: var(--spacing-medium) var(--spacing-large); - text-shadow: 0 1px 0 black; //black; //white, 0.5); - - &:not(.notice--error) { - background-color: black; //green-1; - border-color: black; //green-2; - color: black; //green-3; - } -} - -.notice--error { - background-color: black; //red-1; - border-color: black; //red-2; - color: black; //red-3; -} diff --git a/ui/scss/component/_spinner.scss b/ui/scss/component/_spinner.scss index 2e136653a..40b077d18 100644 --- a/ui/scss/component/_spinner.scss +++ b/ui/scss/component/_spinner.scss @@ -52,11 +52,3 @@ width: 3px; } } - -.spinner--splash { - margin-top: var(--spacing-large); - - .rect { - background-color: black; //white; - } -} diff --git a/ui/scss/component/_splash.scss b/ui/scss/component/_splash.scss index 8ff5f745f..f1c1814d2 100644 --- a/ui/scss/component/_splash.scss +++ b/ui/scss/component/_splash.scss @@ -11,17 +11,6 @@ overflow: hidden; } -.splash__button { - border-bottom: 1px solid black; //white; - color: black; //white; - transition: none; - - &:hover { - border-bottom: 1px solid black; //blue-1; - color: black; //blue-1; - } -} - .splash__details { position: absolute; line-height: 1; diff --git a/ui/scss/component/_syntax-highlighter.scss b/ui/scss/component/_syntax-highlighter.scss index 76750c355..3d8844fa3 100644 --- a/ui/scss/component/_syntax-highlighter.scss +++ b/ui/scss/component/_syntax-highlighter.scss @@ -40,11 +40,6 @@ background-color: transparent; } - // addon: selection/active-line.js - .CodeMirror-activeline-background { - background-color: black; //153, 187, 255, 0.04); - } - // basic syntax .cm-atom, .cm-attribute, diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss index 56dafe195..efc11f72e 100644 --- a/ui/scss/component/_table.scss +++ b/ui/scss/component/_table.scss @@ -76,3 +76,14 @@ width: 70%; } } + +.table__item--actionable { + vertical-align: middle; + white-space: nowrap; + + .button { + height: 1.5rem; + padding: var(--spacing-s); + margin-left: var(--spacing-m); + } +} diff --git a/ui/scss/component/_time.scss b/ui/scss/component/_time.scss deleted file mode 100644 index 085bd9d08..000000000 --- a/ui/scss/component/_time.scss +++ /dev/null @@ -1,9 +0,0 @@ -// All CSS for date & time ui - -.time { - color: black; //gray-5; -} - -.time--ago { - min-width: 140px; -} diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss index e9533973b..1d86ff773 100644 --- a/ui/scss/component/_wunderbar.scss +++ b/ui/scss/component/_wunderbar.scss @@ -26,7 +26,6 @@ @extend .wunderbar; flex: 0; margin-right: 0; - color: black; //black; fieldset-section { width: 15rem; diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index dc7398ee7..80d74bdaa 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -103,7 +103,6 @@ blockquote { code { @include font-mono; - background-color: black; //gray-1; font-size: 1.5rem; } @@ -136,11 +135,6 @@ a { } } -.divider__horizontal { - border-top: black; //gray-2; - margin: 16px 0; -} - .hidden { display: none; } @@ -211,7 +205,7 @@ a { .qr-code { width: 134px; height: 134px; - border: 3px solid black; //white; + border: 3px solid white; &.qr-code--right-padding { margin-right: $spacing-vertical * 2/3; diff --git a/ui/scss/init/_mixins.scss b/ui/scss/init/_mixins.scss index 82a097a90..2b7c6a4ab 100644 --- a/ui/scss/init/_mixins.scss +++ b/ui/scss/init/_mixins.scss @@ -17,7 +17,3 @@ } } } - -@mixin focus { - box-shadow: 0 0 0 2px black; //blue-1; -} diff --git a/ui/scss/init/_reset.scss b/ui/scss/init/_reset.scss index f9a9195e0..c16e74dce 100644 --- a/ui/scss/init/_reset.scss +++ b/ui/scss/init/_reset.scss @@ -77,7 +77,6 @@ dl { } textarea { - border: 1px solid black; //gray-2; padding: $spacing-vertical * 1/3; width: 100%; } diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 47135dbd9..cbea7a3b0 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -10,6 +10,7 @@ --color-border: #ededed; --color-background-overlay: #21252980; --color-nag: #f26522; + --color-error: #fcafca; // Text --color-text-selection-bg: var(--color-secondary-alt); @@ -22,7 +23,7 @@ --color-text-warning--background: var(--lbry-yellow-1); --color-blockquote: var(--color-gray-3); - --color-spinner-light: #5a6570; + --color-spinner-light: #ffffff; --color-spinner-dark: #212529; --color-box-shadow: #c4c4c4; --color-placeholder-background: #f0f0f0; diff --git a/yarn.lock b/yarn.lock index cb4e391b4..d8bbf741f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1019,10 +1019,10 @@ prop-types "^15.6.2" scheduler "^0.15.0" -"@lbry/components@^3.0.2": - version "3.0.2" - resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.2.tgz#46edf7fd70f0e15527ca00481c1352e1e7dbc48c" - integrity sha512-tMIUneFp0Rz3a3TZA11V8liIODJHPhiQ3b9R1U6OyZeNftAsswBFTZF5R0IyctbtsVFpovp6mK2aQEReU1Cu/g== +"@lbry/components@^3.0.3": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.3.tgz#fe227b28bf636cf089b673b7c3697d6a9770c14e" + integrity sha512-kWFDlBeZayNJ6XYLVP6Vrz2hMweOalHCjFl5DGL4qEEz/eWZBc4PuLFO7st5iklzjH8IT7jBE9FwoxOScLf2gw== "@mapbox/hast-util-table-cell-style@^0.1.3": version "0.1.3"