Dark mode

src/renderer/component/app/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Router from 'component/router/index';
-// import Theme from 'component/theme';
 import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
 import throttle from 'util/throttle';

src/renderer/component/wunderbar/internal/autocomplete.jsx

@@ -184,11 +184,6 @@ export default class Autocomplete extends React.Component {
       return <div style={{ ...style, ...this.menuStyle }} children={items} />;
     },
     menuStyle: {
-      borderRadius: '3px',
-      boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
-      background: 'rgba(255, 255, 255, 0.9)',
-      padding: '2px 0',
-      fontSize: '90%',
       position: 'absolute',
       overflow: 'hidden',
     },
@@ -469,7 +464,7 @@ export default class Autocomplete extends React.Component {
       className: 'wunderbar__menu',
       // Ignore blur to prevent menu from de-rendering before we can process click
       onMouseEnter: () => this.setIgnoreBlur(true),
-      onMouseLeave: () => this.setIgnoreBlur(false),
+      onMouseLeave: () => this.setIgnoreBlur(false), // uncomment this to inspect styling
     });
   }
 

src/renderer/component/wunderbar/view.jsx

@@ -100,8 +100,7 @@ class WunderBar extends React.PureComponent<Props> {
     if (suggestion) {
       if (suggestion.type === 'search') {
         onSearch(query, resultCount);
-      } else {
-        if (isURIValid(query)) {
+      } else if (isURIValid(query)) {
         const params = getParams();
         const uri = normalizeURI(query);
         onSubmit(uri, params);
@@ -109,8 +108,7 @@ class WunderBar extends React.PureComponent<Props> {
         this.props.doShowSnackBar({
           message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'),
           displayType: ['snackbar'],
-            })
-        }
+        });
       }
 
       return;
@@ -127,7 +125,7 @@ class WunderBar extends React.PureComponent<Props> {
         this.props.doShowSnackBar({
           message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'),
           displayType: ['snackbar'],
-          })
+        });
       }
     } catch (e) {
       onSearch(query, resultCount);
@@ -176,7 +174,6 @@ class WunderBar extends React.PureComponent<Props> {
               <span className="wunderbar__suggestion-label">{value}</span>
               {isHighlighted && (
                 <span className="wunderbar__suggestion-label--action">
-                  {'-  '}
                   {type === SEARCH_TYPES.SEARCH && __('Search')}
                   {type === SEARCH_TYPES.CHANNEL && __('View channel')}
                   {type === SEARCH_TYPES.FILE && __('View file')}

src/renderer/scss/_gui.scss

@@ -41,8 +41,7 @@ input {
   line-height: 1;
 
   &::placeholder {
-    color: $lbry-gray-5;
-    opacity: 0.5;
+    color: rgba($lbry-gray-5, 0.5);
   }
 
   &[type='checkbox'],

src/renderer/scss/component/_content.scss

@@ -6,9 +6,9 @@
   right: 0;
 
   align-items: center;
-  background-position: 50% 50%;
+  background-position: center;
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
   display: flex;
   justify-content: center;
   position: absolute;

src/renderer/scss/component/_nav.scss

@@ -5,9 +5,9 @@
   padding: $spacing-width * 1/3;
 
   hr {
-    border: solid 1px $lbry-gray-2;
-    margin: $spacing-vertical $spacing-vertical * 2/3;
-    width: 24px;
+    border: 1px solid $lbry-gray-2;
+    margin: $spacing-vertical 0;
+    width: $spacing-vertical;
   }
 
   @media (min-width: $medium-breakpoint) {

src/renderer/scss/component/_search.scss

@@ -25,13 +25,17 @@
   height: var(--btn-height);
 
   align-items: center;
-  background-color: rgba($lbry-gray-1, 0.3);
   border-bottom: none; // ?
   color: $lbry-gray-5;
   display: flex;
   font-size: 13px;
   justify-content: center;
   padding: 10px 10px 10px 30px;
+  transition: background-color 0.2s;
+
+  &:not(:focus) {
+    background-color: rgba($lbry-gray-1, 0.3);
+  }
 
   &:focus {
     background-color: rgba($lbry-gray-1, 0.5);
@@ -39,16 +43,14 @@
 }
 
 .wunderbar__menu {
-  background-color: transparent;
-  border-radius: 0 0 3px 3px;
-  max-width: 100px;
-  overflow-x: hidden;
-  padding: 0;
+  background-color: $lbry-white;
+  box-shadow: 0 1px 5px rgba($lbry-black, 0.15);
+  max-width: 100px; // ?
+  overflow: hidden;
 }
 
 .wunderbar__suggestion {
   align-items: center;
-  background-color: $lbry-gray-5;
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -74,7 +76,8 @@
 .wunderbar__suggestion-label--action {
   font-size: 12px;
   line-height: 0.1; // to vertically align because the font size is smaller
-  margin-left: $spacing-vertical * 1/3;
+  margin-left: 0.5rem;
+  opacity: 0.3;
   white-space: nowrap;
 }
 

src/renderer/scss/themes/_dark.scss

@@ -1,5 +1,81 @@
 html[data-theme='dark'] {
   .header {
+    background-color: rgba($lbry-black, 0.9);
+  }
+
+  .header__navigation {
+    button {
+      background-color: transparent !important; // TODO: Fix
+      color: $lbry-white !important; // TODO: Fix
+    }
+  }
+
+  .wunderbar__active-suggestion {
+    background-color: $lbry-blue-4;
+    color: inherit;
+  }
+
+  .wunderbar__input {
+    background-color: rgba($lbry-white, 0.3);
+    color: $lbry-black;
+
+    &:focus {
+      background-color: rgba($lbry-white, 0.5);
+    }
+  }
+
+  .wunderbar__menu {
+    background-color: $lbry-gray-5;
+    color: $lbry-white;
+    top: 3rem;
+  }
+
+  input {
+    &::placeholder {
+      color: rgba($lbry-black, 0.7);
+    }
+  }
+
+  .nav {
+    background-color: rgba($lbry-white, 0.05);
+
+    hr {
+      border-color: $lbry-gray-5;
+    }
+  }
+
+  .nav__link .btn:hover {
+    color: $lbry-teal-5;
+  }
+
+  .nav__link--active {
+    color: $lbry-teal-3;
+  }
+
+  .page {
     background-color: $lbry-black;
+    color: $lbry-gray-1;
+  }
+
+  .card__title {
+    color: inherit;
+  }
+
+  .card--section {
+    background-color: rgba($lbry-white, 0.1);
+  }
+
+  .content__cover:not(.card__media--nsfw),
+  .card__media {
+    background-color: rgba($lbry-white, 0.1);
+  }
+
+  .card__media--nsfw {
+    background-color: rgba($lbry-red-1, 0.1);
+  }
+
+  .btn.btn--alt:not(:disabled) {
+    background-color: rgba($lbry-white, 0.1);
+    color: $lbry-gray-1;
   }
 }

static/themes/dark.css

@@ -100,10 +100,3 @@ html,
 .card {
   /* filter: invert(100%) hue-rotate(180deg); */
 }
-
-.card {
-}
-
-.header {
-  background-color: #212529; /* lbry-black */
-}