Merge branch 'develop' into publish-debug

4 files changed, 115 insertions, 58 deletions

diff --git a/src/features/accentColor/index.js b/src/features/accentColor/index.js
deleted file mode 100644
index a0f57a2fa..000000000
--- a/src/features/accentColor/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { reaction } from 'mobx';
-import themeInfo from '../../assets/themeInfo.json';
-import { DEFAULT_APP_SETTINGS } from '../../config';
-
-const STYLE_ELEMENT_ID = 'accent-color';
-
-function createAccentStyleElement() {
-  const styles = document.createElement('style');
-  styles.id = STYLE_ELEMENT_ID;
-
-  document.querySelector('head').appendChild(styles);
-}
-
-function setAccentStyle(style) {
-  const styleElement = document.getElementById(STYLE_ELEMENT_ID);
-  styleElement.innerHTML = style;
-}
-
-function generateAccentStyle(color) {
-  let style = '';
-
-  Object.keys(themeInfo).forEach((property) => {
-    style += `
-      ${themeInfo[property]} {
-        ${property}: ${color};
-      }
-    `;
-  });
-
-  return style;
-}
-
-export default function initAccentColor(stores) {
-  const { settings } = stores;
-  createAccentStyleElement();
-
-  // Update accent color
-  reaction(
-    () => (
-      settings.all.app.accentColor
-    ),
-    (color) => {
-      if (color === DEFAULT_APP_SETTINGS.accentColor) {
-        // Reset accent style to return to default color scheme
-        setAccentStyle('');
-      } else {
-        const style = generateAccentStyle(color);
-        setAccentStyle(style);
-      }
-    },
-    {
-      fireImmediately: true,
-    },
-  );
-}
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
new file mode 100644
index 000000000..8a81054df
--- /dev/null
+++ b/src/features/appearance/index.js
@@ -0,0 +1,107 @@
+import { reaction } from 'mobx';
+import themeInfo from '../../assets/themeInfo.json';
+import { DEFAULT_APP_SETTINGS } from '../../config';
+
+const STYLE_ELEMENT_ID = 'custom-appearance-style';
+
+// Additional styles needed to make accent colors work properly
+// "[ACCENT]" will be replaced with the accent color
+const ACCENT_ADDITIONAL_STYLES = `
+.franz-form__button {
+  background: inherit !important;
+  border: 2px solid [ACCENT] !important;
+}
+`;
+
+function createStyleElement() {
+  const styles = document.createElement('style');
+  styles.id = STYLE_ELEMENT_ID;
+
+  document.querySelector('head').appendChild(styles);
+}
+
+function setAppearance(style) {
+  const styleElement = document.getElementById(STYLE_ELEMENT_ID);
+
+  styleElement.innerHTML = style;
+}
+
+function generateAccentStyle(color) {
+  let style = '';
+
+  Object.keys(themeInfo).forEach((property) => {
+    style += `
+      ${themeInfo[property]} {
+        ${property}: ${color};
+      }
+    `;
+  });
+
+  style += ACCENT_ADDITIONAL_STYLES.replace(/\[ACCENT\]/g, color);
+
+  return style;
+}
+
+function generateServiceRibbonWidthStyle(width) {
+  return `
+    .sidebar {
+      width: ${width}px !important;
+    }
+    .tab-item {
+      width: ${width - 2}px !important;
+      height: ${width - 5}px !important;
+    }
+    .tab-item .tab-item__icon {
+      width: ${width / 2}px !important;
+    }
+  `;
+}
+
+function generateStyle(settings) {
+  let style = '';
+
+  const {
+    accentColor,
+    serviceRibbonWidth,
+  } = settings;
+
+  if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) {
+    style += generateAccentStyle(accentColor);
+  }
+  if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth) {
+    style += generateServiceRibbonWidthStyle(serviceRibbonWidth);
+  }
+
+  return style;
+}
+function updateStyle(settings) {
+  const style = generateStyle(settings);
+  setAppearance(style);
+}
+
+export default function initAppearance(stores) {
+  const { settings } = stores;
+  createStyleElement();
+
+  // Update accent color
+  reaction(
+    () => (
+      settings.all.app.accentColor
+    ),
+    () => {
+      updateStyle(settings.all.app);
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+  // Update service ribbon width
+  reaction(
+    () => (
+      settings.all.app.serviceRibbonWidth
+    ),
+    () => {
+      updateStyle(settings.all.app);
+    },
+  );
+}
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index 797589e9b..0f44385e1 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -56,6 +56,9 @@ const styles = theme => ({
     marginBottom: 10,
     display: 'flex',
     alignItems: 'center',
+    '&:last-child': {
+      marginBottom: 0,
+    },
     '&:hover': {
       background: theme.styleTypes.primary.accent,
       color: theme.styleTypes.primary.contrast,
@@ -319,7 +322,10 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
           ))}
         </div>
 
-        <p>{intl.formatMessage(messages.info)}</p>
+        <p>
+          <br />
+          {intl.formatMessage(messages.info)}
+        </p>
       </Modal>
     );
   }
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
index e9a01b156..e78607667 100644
--- a/src/features/serviceProxy/index.js
+++ b/src/features/serviceProxy/index.js
@@ -22,7 +22,6 @@ export default function init(stores) {
     config.isIncludedInCurrentPlan = true;
 
     const services = stores.services.enabled;
-    const isPremiumUser = stores.user.data.isPremium;
     const proxySettings = stores.settings.proxy;
 
     debug('Service Proxy autorun');
@@ -30,7 +29,7 @@ export default function init(stores) {
     services.forEach((service) => {
       const s = session.fromPartition(`persist:service-${service.id}`);
 
-      if (config.isEnabled && (isPremiumUser || !config.isIncludedInCurrentPlan)) {
+      if (config.isEnabled) {
         const serviceProxyConfig = proxySettings[service.id];
 
         if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {