Merge pull request #2045 from lbryio/redesign

Replacing existing colors with npm module, and refactored Sass

CHANGELOG.md

@@ -21,7 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
  * Reverse Order & Use System/Location Time/Date ([#2036]https://github.com/lbryio/lbry-desktop/pull/2036)
  * Limit file type can be uploaded as thumbnail for publishing ([#2034](https://github.com/lbryio/lbry-desktop/pull/2034))
  * Change snackbar notification postion to bottom-left ([#2040](https://github.com/lbryio/lbry-desktop/pull/2040))
-
+ * Use shared colors from lbryio/color project ([#2045](https://github.com/lbryio/lbry-desktop/pull/2045))
 
 ### Fixed
  * Fixed Transactions filter menu collides with transaction table ([#2005](https://github.com/lbryio/lbry-desktop/pull/2005))

package.json

@@ -87,6 +87,7 @@
     "y18n": "^4.0.0"
   },
   "devDependencies": {
+    "@lbry/color": "^1.0.2",
     "axios": "^0.18.0",
     "babel-eslint": "^8.2.2",
     "babel-plugin-module-resolver": "^3.1.1",

src/main/createWindow.js

@@ -15,7 +15,7 @@ export default appState => {
   });
 
   const windowConfiguration = {
-    backgroundColor: '#44b098',
+    backgroundColor: '#2f9176',
     minWidth: 950,
     minHeight: 600,
     autoHideMenuBar: true,
@@ -123,7 +123,7 @@ export default appState => {
   window.webContents.on('crashed', () => {
     window = null;
   });
-  
+
   window.webContents.on('new-window', (event, url) => {
     event.preventDefault();
     shell.openExternal(url);

src/renderer/component/app/index.js

@@ -3,13 +3,15 @@ import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'l
 import { doRecordScroll } from 'redux/actions/navigation';
 import { selectUser } from 'lbryinc';
 import { doAlertError } from 'redux/actions/app';
+import { selectThemePath } from 'redux/selectors/settings';
 import App from './view';
 
 const select = state => ({
   pageTitle: selectPageTitle(state),
   user: selectUser(state),
   currentStackIndex: selectHistoryIndex(state),
   currentPageAttributes: selectActiveHistoryEntry(state),
+  theme: selectThemePath(state),
 });
 
 const perform = dispatch => ({

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';
@@ -15,6 +14,7 @@ type Props = {
   currentStackIndex: number,
   currentPageAttributes: { path: string, scrollY: number },
   pageTitle: ?string,
+  theme: string,
 };
 
 class App extends React.PureComponent<Props> {
@@ -25,13 +25,16 @@ class App extends React.PureComponent<Props> {
   }
 
   componentWillMount() {
-    const { alertError } = this.props;
+    const { alertError, theme } = this.props;
 
     // TODO: create type for this object
     // it lives in jsonrpc.js
     document.addEventListener('unhandledError', (event: any) => {
       alertError(event.detail);
     });
+
+    // $FlowFixMe
+    document.documentElement.setAttribute('data-theme', theme);
   }
 
   componentDidMount() {
@@ -51,12 +54,17 @@ class App extends React.PureComponent<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { currentStackIndex: prevStackIndex } = prevProps;
-    const { currentStackIndex, currentPageAttributes } = this.props;
+    const { currentStackIndex: prevStackIndex, theme: prevTheme } = prevProps;
+    const { currentStackIndex, currentPageAttributes, theme } = this.props;
 
     if (this.mainContent && currentStackIndex !== prevStackIndex && currentPageAttributes) {
       this.mainContent.scrollTop = currentPageAttributes.scrollY || 0;
     }
+
+    if (prevTheme !== theme) {
+      // $FlowFixMe
+      document.documentElement.setAttribute('data-theme', theme);
+    }
   }
 
   componentWillUnmount() {
@@ -81,7 +89,6 @@ class App extends React.PureComponent<Props> {
   render() {
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
-        <Theme />
         <Header />
         <main className="page">
           <SideBar />

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,17 +100,15 @@ class WunderBar extends React.PureComponent<Props> {
     if (suggestion) {
       if (suggestion.type === 'search') {
         onSearch(query, resultCount);
+      } else if (isURIValid(query)) {
+        const params = getParams();
+        const uri = normalizeURI(query);
+        onSubmit(uri, params);
       } else {
-        if (isURIValid(query)) {
-          const params = getParams();
-          const uri = normalizeURI(query);
-          onSubmit(uri, params);
-        } else {
-          this.props.doShowSnackBar({
-              message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'),
-              displayType: ['snackbar'],
-            })
-        }
+        this.props.doShowSnackBar({
+          message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'),
+          displayType: ['snackbar'],
+        });
       }
 
       return;
@@ -125,9 +123,9 @@ class WunderBar extends React.PureComponent<Props> {
         onSubmit(uri, params);
       } else {
         this.props.doShowSnackBar({
-            message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'),
-            displayType: ['snackbar'],
-          })
+          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/redux/selectors/settings.js

@@ -30,7 +30,7 @@ export const selectThemePath = createSelector(
   selectIsNight,
   (theme, automaticDarkModeEnabled, isNight) => {
     const dynamicTheme = automaticDarkModeEnabled && isNight ? 'dark' : theme;
-    return `${staticResourcesPath}/themes/${dynamicTheme || 'light'}.css`;
+    return dynamicTheme || 'light';
   }
 );