change spinner color based on theme

src/renderer/component/common/spinner.jsx

@@ -1,28 +0,0 @@
-// @flow
-import * as React from 'react';
-import classnames from 'classnames';
-
-type Props = {
-  dark?: boolean,
-};
-
-class Spinner extends React.Component<Props> {
-  static defaultProps = {
-    dark: false,
-  };
-
-  render() {
-    const { dark } = this.props;
-    return (
-      <div className={classnames('spinner', { 'spinner--dark': dark })}>
-        <div className="rect rect1" />
-        <div className="rect rect2" />
-        <div className="rect rect3" />
-        <div className="rect rect4" />
-        <div className="rect rect5" />
-      </div>
-    );
-  }
-}
-
-export default Spinner;

src/renderer/component/page/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import classnames from 'classnames';
-import Spinner from 'component/common/spinner';
+import Spinner from 'component/spinner';
 import { isShowingChildren } from 'util/dom';
 
 // time in ms to wait to show loading spinner

src/renderer/component/spinner/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { selectTheme } from 'redux/selectors/settings';
+import Spinner from './view';
+
+const mapStateToProps = state => ({
+  theme: selectTheme(state),
+});
+
+export default connect(mapStateToProps, null)(Spinner);

src/renderer/component/spinner/view.jsx

@@ -0,0 +1,36 @@
+// @flow
+import * as React from 'react';
+import classnames from 'classnames';
+import { DARK_THEME, LIGHT_THEME } from 'constants/settings';
+
+type Props = {
+  dark?: boolean, // always a dark spinner
+  light?: boolean, // always a light spinner
+  theme: string,
+};
+
+const Spinner = (props: Props) => {
+  const { dark, light, theme } = props;
+
+  return (
+    <div
+      className={classnames('spinner', {
+        'spinner--dark': !light && (dark || theme === LIGHT_THEME),
+        'spinner--light': !dark && (light || theme === DARK_THEME),
+      })}
+    >
+      <div className="rect rect1" />
+      <div className="rect rect2" />
+      <div className="rect rect3" />
+      <div className="rect rect4" />
+      <div className="rect rect5" />
+    </div>
+  );
+};
+
+Spinner.defaultProps = {
+  dark: false,
+  light: false,
+};
+
+export default Spinner;

src/renderer/component/video/internal/loading-screen.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import Spinner from 'component/common/spinner';
+import Spinner from 'component/spinner';
 
 type Props = {
   spinner: boolean,
@@ -16,7 +16,7 @@ class LoadingScreen extends React.PureComponent<Props> {
     const { status, spinner } = this.props;
     return (
       <div className="content__loading">
-        {spinner && <Spinner />}
+        {spinner && <Spinner light />}
 
         <span className="content__loading-text">{status}</span>
       </div>

src/renderer/constants/settings.js

@@ -11,4 +11,6 @@ export const INSTANT_PURCHASE_ENABLED = 'instantPurchaseEnabled';
 export const INSTANT_PURCHASE_MAX = 'instantPurchaseMax';
 export const THEME = 'theme';
 export const THEMES = 'themes';
+export const DARK_THEME = 'dark';
+export const LIGHT_THEME = 'light';
 export const AUTOMATIC_DARK_MODE_ENABLED = 'automaticDarkModeEnabled';

src/renderer/redux/actions/subscriptions.js

@@ -52,10 +52,10 @@ export const doFetchMySubscriptions = () => (dispatch: Dispatch, getState: () =>
       // If something is in the db, but not in redux, add it to redux
       // If something is in redux, but not in the db, add it to the db
       if (storedSubscriptions.length !== reduxSubscriptions.length) {
-        let dbSubMap = {};
-        let reduxSubMap = {};
-        let subsNotInDB = [];
-        let subscriptionsToReturn = reduxSubscriptions.slice();
+        const dbSubMap = {};
+        const reduxSubMap = {};
+        const subsNotInDB = [];
+        const subscriptionsToReturn = reduxSubscriptions.slice();
 
         storedSubscriptions.forEach(sub => {
           dbSubMap[sub.claim_id] = 1;

src/renderer/scss/component/_spinner.scss

@@ -10,7 +10,6 @@
     height: 100%;
     width: 6px;
     margin: 0 2px;
-    background-color: var(--color-white);
     animation: sk-stretchdelay 1.2s infinite ease-in-out;
 
     &.rect2 {
@@ -31,6 +30,12 @@
   }
 }
 
+.spinner--light {
+  .rect {
+    background-color: var(--color-white);
+  }
+}
+
 .spinner--dark {
   .rect {
     background-color: var(--color-black);