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"