#153 Add ability to change service icon size

1 files changed, 20 insertions, 6 deletions

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index f99e69b0d..6dcdfc986 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -1,6 +1,6 @@
 import { reaction } from 'mobx';
 import themeInfo from '../../assets/themeInfo.json';
-import { DEFAULT_APP_SETTINGS } from '../../config';
+import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config';
 
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
@@ -42,17 +42,20 @@ function generateAccentStyle(color) {
   return style;
 }
 
-function generateServiceRibbonWidthStyle(width) {
+function generateServiceRibbonWidthStyle(widthStr, iconSizeStr) {
+  const width = Number(widthStr);
+  const iconSize = Number(iconSizeStr) - iconSizeBias;
+
   return `
     .sidebar {
       width: ${width}px !important;
     }
     .tab-item {
       width: ${width - 2}px !important;
-      height: ${width - 5}px !important;
+      height: ${width - 5 + iconSize}px !important;
     }
     .tab-item .tab-item__icon {
-      width: ${width / 2}px !important;
+      width: ${(width / 2) + iconSize}px !important;
     }
     .sidebar__button {
       font-size: ${width / 3}px !important;
@@ -66,13 +69,15 @@ function generateStyle(settings) {
   const {
     accentColor,
     serviceRibbonWidth,
+    iconSize,
   } = settings;
 
   if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) {
     style += generateAccentStyle(accentColor);
   }
-  if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth) {
-    style += generateServiceRibbonWidthStyle(serviceRibbonWidth);
+  if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth
+      || iconSize !== DEFAULT_APP_SETTINGS.iconSize) {
+    style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize);
   }
 
   return style;
@@ -107,4 +112,13 @@ export default function initAppearance(stores) {
       updateStyle(settings.all.app);
     },
   );
+  // Update icon size
+  reaction(
+    () => (
+      settings.all.app.iconSize
+    ),
+    () => {
+      updateStyle(settings.all.app);
+    },
+  );
 }