merge-in latest develop

25 files changed, 69 insertions, 153 deletions

diff --git a/package-lock.json b/package-lock.json
index f34f0bef9..05ad8f465 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1948,6 +1948,15 @@
         "@meetfranz/theme": "^1.0.7",
         "react-html-attributes": "^1.4.3",
         "react-loader": "^2.4.5"
+      },
+      "dependencies": {
+        "@meetfranz/theme": {
+          "version": "1.0.9",
+          "bundled": true,
+          "requires": {
+            "color": "^3.1.0"
+          }
+        }
       }
     },
     "@meetfranz/theme": {
@@ -1963,6 +1972,15 @@
         "@mdi/react": "^1.1.0",
         "@meetfranz/theme": "^1.0.7",
         "react-loader": "^2.4.5"
+      },
+      "dependencies": {
+        "@meetfranz/theme": {
+          "version": "1.0.9",
+          "bundled": true,
+          "requires": {
+            "color": "^3.1.0"
+          }
+        }
       }
     },
     "@mrmlnc/readdir-enhanced": {
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index 791e0f360..68bb5ac57 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -38,6 +38,7 @@ class InputComponent extends Component<IProps, IState> {
     focus: false,
     onChange: () => {},
     onBlur: () => {},
+    onFocus: () => {},
     scorePassword: false,
     showLabel: true,
     showPasswordToggle: false,
@@ -108,7 +109,11 @@ class InputComponent extends Component<IProps, IState> {
       placeholder,
       spellCheck,
       onBlur,
+<<<<<<< HEAD
       onEnterKey,
+=======
+      onFocus,
+>>>>>>> develop
     } = this.props;
 
     const {
@@ -151,6 +156,7 @@ class InputComponent extends Component<IProps, IState> {
               className={classes.input}
               ref={this.inputRef}
               onChange={this.onChange.bind(this)}
+              onFocus={onFocus}
               onBlur={onBlur}
               disabled={disabled}
               onKeyPress={this.onInputKeyPress.bind(this)}
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 9b6bf055c..1757f5abd 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -60,3 +60,6 @@ export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayL
 export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex();
 export const selectOptionItemHoverColor = selectColor;
 export const selectSearchColor = inputBackground;
+
+// Modal
+export const colorModalOverlayBackground = color(legacyStyles.darkThemeGray).alpha(0.8).rgb().string();
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index d36558ff0..40521995b 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -137,3 +137,6 @@ export const selectDisabledOpacity = inputDisabledOpacity;
 // Badge
 export const badgeFontSize = uiFontSize - 2;
 export const badgeBorderRadius = 50;
+
+// Modal
+export const colorModalOverlayBackground = color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string();
diff --git a/src/config.js b/src/config.js
index 3696354c6..b11952520 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,7 @@
 import electron from 'electron';
 import path from 'path';
+import isDevMode from 'electron-is-dev';
+
 import { asarPath } from './helpers/asar-helpers';
 
 const app = process.type === 'renderer' ? electron.remote.app : electron.app;
@@ -9,7 +11,7 @@ export const CHECK_INTERVAL = 1000 * 3600; // How often should we perform checks
 export const LOCAL_API = 'http://localhost:3000';
 export const DEV_API = 'https://dev.franzinfra.com';
 export const LIVE_API = 'https://api.franzinfra.com';
-export const GA_ID = 'UA-74126766-10';
+export const GA_ID = !isDevMode ? 'UA-74126766-10' : 'UA-74126766-12';
 
 export const DEFAULT_APP_SETTINGS = {
   autoLaunchInBackground: false,
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 762929dc6..e63f40c06 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
+import { ThemeProvider } from 'react-jss';
+import { theme } from '@meetfranz/theme';
 
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppStore from '../../stores/AppStore';
@@ -21,30 +23,38 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
     const {
       stores, actions, children, location,
     } = this.props;
-    const { app, features, globalError } = stores;
+    const {
+      app, features, globalError, settings,
+    } = stores;
 
     const isLoadingBaseFeatures = features.defaultFeaturesRequest.isExecuting
       && !features.defaultFeaturesRequest.wasExecuted;
 
+    const themeType = theme(settings.app.darkMode ? 'dark' : 'default');
+
     if (isLoadingBaseFeatures) {
       return (
-        <AppLoader />
+        <ThemeProvider theme={theme(themeType)}>
+          <AppLoader />
+        </ThemeProvider>
       );
     }
 
     return (
-      <AuthLayout
-        error={globalError.response}
-        pathname={location.pathname}
-        isOnline={app.isOnline}
-        isAPIHealthy={!app.healthCheckRequest.isError}
-        retryHealthCheck={actions.app.healthCheck}
-        isHealthCheckLoading={app.healthCheckRequest.isExecuting}
-        isFullScreen={app.isFullScreen}
-        darkMode={app.isSystemDarkModeEnabled}
-      >
-        {children}
-      </AuthLayout>
+      <ThemeProvider theme={theme(themeType)}>
+        <AuthLayout
+          error={globalError.response}
+          pathname={location.pathname}
+          isOnline={app.isOnline}
+          isAPIHealthy={!app.healthCheckRequest.isError}
+          retryHealthCheck={actions.app.healthCheck}
+          isHealthCheckLoading={app.healthCheckRequest.isExecuting}
+          isFullScreen={app.isFullScreen}
+          darkMode={app.isSystemDarkModeEnabled}
+        >
+          {children}
+        </AuthLayout>
+      </ThemeProvider>
     );
   }
 }
diff --git a/src/containers/auth/ImportScreen.js b/src/containers/auth/ImportScreen.js
index fc46f8b54..4a93891d6 100644
--- a/src/containers/auth/ImportScreen.js
+++ b/src/containers/auth/ImportScreen.js
@@ -3,13 +3,8 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Import from '../../components/auth/Import';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class ImportScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Import');
-  }
-
   render() {
     const { actions, stores } = this.props;
 
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index 26bf97038..66afaf7e1 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -2,13 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class InviteScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Invite');
-  }
-
   render() {
     const { actions } = this.props;
 
diff --git a/src/containers/auth/LoginScreen.js b/src/containers/auth/LoginScreen.js
index 865bd38f8..e5ee10785 100644
--- a/src/containers/auth/LoginScreen.js
+++ b/src/containers/auth/LoginScreen.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Login from '../../components/auth/Login';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -12,10 +11,6 @@ export default @inject('stores', 'actions') @observer class LoginScreen extends
     error: globalErrorPropType.isRequired,
   };
 
-  componentDidMount() {
-    gaPage('Auth/Login');
-  }
-
   render() {
     const { actions, stores, error } = this.props;
     return (
diff --git a/src/containers/auth/PasswordScreen.js b/src/containers/auth/PasswordScreen.js
index 236fd2031..5b238860e 100644
--- a/src/containers/auth/PasswordScreen.js
+++ b/src/containers/auth/PasswordScreen.js
@@ -3,13 +3,8 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Password from '../../components/auth/Password';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class PasswordScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Password Retrieve');
-  }
-
   render() {
     const { actions, stores } = this.props;
 
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 34b512e15..8d179a170 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -6,7 +6,6 @@ import { RouterStore } from 'mobx-react-router';
 import Pricing from '../../components/auth/Pricing';
 import UserStore from '../../stores/UserStore';
 import PaymentStore from '../../stores/PaymentStore';
-import { gaPage } from '../../lib/analytics';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -15,10 +14,6 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     error: globalErrorPropType.isRequired,
   };
 
-  componentDidMount() {
-    gaPage('Auth/Pricing');
-  }
-
   render() {
     const { actions, stores, error } = this.props;
 
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index caf75de90..efc7ea4c1 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -4,7 +4,6 @@ import { inject, observer } from 'mobx-react';
 
 import Signup from '../../components/auth/Signup';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -13,10 +12,6 @@ export default @inject('stores', 'actions') @observer class SignupScreen extends
     error: globalErrorPropType.isRequired,
   };
 
-  componentDidMount() {
-    gaPage('Auth/Signup');
-  }
-
   render() {
     const { actions, stores, error } = this.props;
     return (
diff --git a/src/containers/auth/WelcomeScreen.js b/src/containers/auth/WelcomeScreen.js
index 2c120f81c..75182345a 100644
--- a/src/containers/auth/WelcomeScreen.js
+++ b/src/containers/auth/WelcomeScreen.js
@@ -5,13 +5,8 @@ import { inject, observer } from 'mobx-react';
 import Welcome from '../../components/auth/Welcome';
 import UserStore from '../../stores/UserStore';
 import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class LoginScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Welcome');
-  }
-
   render() {
     const { user, recipePreviews } = this.props.stores;
 
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index d681d5226..ce1b9c333 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -6,7 +6,6 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 import UserStore from '../../stores/UserStore';
 import AppStore from '../../stores/AppStore';
-import { gaPage } from '../../lib/analytics';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -22,10 +21,6 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
     user.getUserInfoRequest.invalidate({ immediately: true });
   }
 
-  componentDidMount() {
-    gaPage('Settings/Account Dashboard');
-  }
-
   onCloseWindow() {
     const { user, payment } = this.props.stores;
     user.getUserInfoRequest.invalidate({ immediately: true });
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index d08f0a52e..870ca4ecd 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -9,7 +9,6 @@ import ServicesStore from '../../stores/ServicesStore';
 import SettingsStore from '../../stores/SettingsStore';
 import FeaturesStore from '../../stores/FeaturesStore';
 import Form from '../../lib/Form';
-import { gaPage } from '../../lib/analytics';
 
 import ServiceError from '../../components/settings/services/ServiceError';
 import EditServiceForm from '../../components/settings/services/EditServiceForm';
@@ -93,10 +92,6 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/Service/Edit');
-  }
-
   onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 992c49b09..97c1fa3b1 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -8,7 +8,6 @@ import SettingsStore from '../../stores/SettingsStore';
 import UserStore from '../../stores/UserStore';
 import Form from '../../lib/Form';
 import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
-import { gaPage } from '../../lib/analytics';
 import { DEFAULT_APP_SETTINGS } from '../../config';
 import { config as spellcheckerConfig } from '../../features/spellchecker';
 
@@ -75,10 +74,6 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/App');
-  }
-
   onSubmit(settingsData) {
     const { app, settings, user } = this.props.actions;
 
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index 3d35effc5..bade928a0 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -9,7 +9,6 @@ import EditUserForm from '../../components/settings/user/EditUserForm';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 import { required, email, minLength } from '../../helpers/validation-helpers';
-import { gaPage } from '../../lib/analytics';
 
 const messages = defineMessages({
   firstname: {
@@ -57,10 +56,6 @@ export default @inject('stores', 'actions') @observer class EditUserScreen exten
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/Account/Edit');
-  }
-
   componentWillUnmount() {
     this.props.actions.user.resetStatus();
   }
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index cd36610e4..cc36849e8 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -5,13 +5,7 @@ import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
-import { gaPage } from '../../lib/analytics';
-
 export default @inject('stores', 'actions') @observer class InviteScreen extends Component {
-  componentDidMount() {
-    gaPage('Settings/Invite');
-  }
-
   componentWillUnmount() {
     this.props.stores.user.inviteRequest.reset();
   }
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index b3d758c87..eda5ae54c 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -7,7 +7,6 @@ import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
 import ServiceStore from '../../stores/ServicesStore';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -33,20 +32,15 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
   autorunDisposer = null;
 
   componentDidMount() {
-    gaPage('Settings/Recipe Dashboard/Featured');
-
     this.autorunDisposer = autorun(() => {
       const { filter } = this.props.params;
       const { currentFilter } = this.state;
 
       if (filter === 'all' && currentFilter !== 'all') {
-        gaPage('Settings/Recipe Dashboard/All');
         this.setState({ currentFilter: 'all' });
       } else if (filter === 'featured' && currentFilter !== 'featured') {
-        gaPage('Settings/Recipe Dashboard/Featured');
         this.setState({ currentFilter: 'featured' });
       } else if (filter === 'dev' && currentFilter !== 'dev') {
-        gaPage('Settings/Recipe Dashboard/Dev');
         this.setState({ currentFilter: 'dev' });
       }
     });
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index b70a5506e..a501bf530 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -6,16 +6,11 @@ import { RouterStore } from 'mobx-react-router';
 // import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import UserStore from '../../stores/UserStore';
 import ServiceStore from '../../stores/ServicesStore';
-import { gaPage } from '../../lib/analytics';
 
 import ServicesDashboard from '../../components/settings/services/ServicesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 export default @inject('stores', 'actions') @observer class ServicesScreen extends Component {
-  componentDidMount() {
-    gaPage('Settings/Service Dashboard');
-  }
-
   componentWillUnmount() {
     this.props.actions.service.resetFilter();
     this.props.actions.service.resetStatus();
diff --git a/src/features/basicAuth/index.js b/src/features/basicAuth/index.js
index 03269582c..00ad65ce6 100644
--- a/src/features/basicAuth/index.js
+++ b/src/features/basicAuth/index.js
@@ -31,15 +31,6 @@ export default function initialize() {
     state.authInfo = data.authInfo;
     state.isModalVisible = true;
   });
-
-  // autorun(() => {
-  //   // if (state.serviceId) {
-  //   // const service = stores.services.one(state.serviceId);
-  //   // if (service) {
-  //   //   state.service = service;
-  //   // }
-  //   // }
-  // });
 }
 
 export function mainIpcHandler(mainWindow, authInfo) {
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 28aa50eb2..48aac34b6 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 import DelayAppComponent from './Component';
 
 import { DEFAULT_FEATURES_CONFIG } from '../../config';
-import { gaEvent } from '../../lib/analytics';
+import { gaEvent, gaPage } from '../../lib/analytics';
 
 const debug = require('debug')('Franz:feature:delayApp');
 
@@ -50,6 +50,7 @@ export default function init(stores) {
             debug(`App will be delayed for ${config.delayDuration / 1000}s`);
 
             setVisibility(true);
+            gaPage('/delayApp');
             gaEvent('delayApp', 'show', 'Delay App Feature');
 
             timeLastDelay = moment();
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index b21d48a11..d90f32744 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,5 +1,7 @@
 import { remote, ipcRenderer, shell } from 'electron';
-import { action, computed, observable } from 'mobx';
+import {
+  action, computed, observable, reaction,
+} from 'mobx';
 import moment from 'moment';
 import key from 'keymaster';
 import { getDoNotDisturb } from '@meetfranz/electron-notification-state';
@@ -11,7 +13,7 @@ import Request from './lib/Request';
 import { CHECK_INTERVAL, DEFAULT_APP_SETTINGS } from '../config';
 import { isMac, isLinux, isWindows } from '../environment';
 import locales from '../i18n/translations';
-import { gaEvent } from '../lib/analytics';
+import { gaEvent, gaPage } from '../lib/analytics';
 import { onVisibilityChange } from '../helpers/visibility-helper';
 import { getLocale } from '../helpers/i18n-helpers';
 
@@ -184,6 +186,12 @@ export default class AppStore extends Store {
 
       debug('Window is visible/focused', isVisible);
     });
+
+    // analytics autorun
+    reaction(() => this.stores.router.location.pathname, (pathname) => {
+      gaPage(pathname);
+    });
+    console.log('router location', this.stores.router.location);
   }
 
   @computed get cacheSize() {
diff --git a/src/theme/dark/index.js b/src/theme/dark/index.js
deleted file mode 100644
index 8fdb321f3..000000000
--- a/src/theme/dark/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import hexToRgba from 'hex-to-rgba';
-
-import * as legacyStyles from '../default/legacy';
-
-export const colorBackground = legacyStyles.darkThemeGrayDarkest;
-export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
-
-export const colorHeadline = legacyStyles.darkThemeTextColor;
-export const colorText = legacyStyles.darkThemeTextColor;
-
-// Error Handler
-export const colorWebviewErrorHandlerBackground = legacyStyles.darkThemeGrayDarkest;
-
-// Loader
-export const colorFullscreenLoaderSpinner = '#FFF';
-export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.5);
-
-// Modal
-export const colorModalOverlayBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.8);
diff --git a/src/theme/default/index.js b/src/theme/default/index.js
deleted file mode 100644
index 61410073d..000000000
--- a/src/theme/default/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import hexToRgba from 'hex-to-rgba';
-
-import * as legacyStyles from './legacy';
-
-export const brandPrimary = '#3498db';
-export const brandSuccess = '#5cb85c';
-export const brandInfo = '#5bc0de';
-export const brandWarning = '#FF9F00';
-export const brandDanger = '#d9534f';
-
-export const borderRadius = legacyStyles.themeBorderRadius;
-export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall;
-
-export const colorBackground = legacyStyles.themeGrayLighter;
-export const colorHeadline = legacyStyles.themeGrayDark;
-
-export const colorText = legacyStyles.themeTextColor;
-
-// Subscription Container Component
-export const colorSubscriptionContainerBackground = 'none';
-export const colorSubscriptionContainerBorder = [1, 'solid', brandPrimary];
-export const colorSubscriptionContainerTitle = brandPrimary;
-export const colorSubscriptionContainerActionButtonBackground = brandPrimary;
-export const colorSubscriptionContainerActionButtonColor = '#FFF';
-
-// Error Handler
-export const colorWebviewErrorHandlerBackground = legacyStyles.themeGrayLighter;
-
-// Loader
-export const colorAppLoaderSpinner = '#FFF';
-export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark;
-export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.themeGrayLighter, 0.8);
-
-// Modal
-export const colorModalOverlayBackground = hexToRgba(legacyStyles.themeGrayLighter, 0.8);