2 files changed, 62 insertions, 57 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 44c94a3ff..c06183e37 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -41,10 +41,6 @@ const styles = theme => ({
     '&:hover $closeTodosButton': {
       opacity: 1,
     },
-  },
-  webview: {
-    height: '100%',
-
     '& webview': {
       height: '100%',
     },
@@ -245,60 +241,58 @@ class TodosWebview extends Component {
     const { intl } = this.context;
 
     return (
-      <>
-        <div
-          className={classes.root}
-          style={{ width: isVisible ? width : 0 }}
-          onMouseUp={() => this.stopResize()}
-          ref={(node) => { this.node = node; }}
+      <div
+        className={classes.root}
+        style={{ width: isVisible ? width : 0 }}
+        onMouseUp={() => this.stopResize()}
+        ref={(node) => { this.node = node; }}
+      >
+        <button
+          onClick={() => togglePanel()}
+          className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
+          type="button"
         >
-          <button
-            onClick={() => togglePanel()}
-            className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
-            type="button"
-          >
-            <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
-          </button>
+          <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
+        </button>
+        <div
+          className={classes.resizeHandler}
+          style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
+          onMouseDown={e => this.startResize(e)}
+        />
+        {isDragging && (
           <div
-            className={classes.resizeHandler}
-            style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
-            onMouseDown={e => this.startResize(e)}
+            className={classes.dragIndicator}
+            style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
+          />
+        )}
+        {isTodosIncludedInCurrentPlan ? (
+          <Webview
+            className={classes.webview}
+            onDidAttach={() => {
+              const { setTodosWebview } = this.props;
+              setTodosWebview(this.webview);
+              this.startListeningToIpcMessages();
+            }}
+            partition="persist:todos"
+            preload="./features/todos/preload.js"
+            ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            src={environment.TODOS_FRONTEND}
           />
-          {isDragging && (
-            <div
-              className={classes.dragIndicator}
-              style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
-            />
-          )}
-          {isTodosIncludedInCurrentPlan ? (
-            <Webview
-              className={classes.webview}
-              onDidAttach={() => {
-                const { setTodosWebview } = this.props;
-                setTodosWebview(this.webview);
-                this.startListeningToIpcMessages();
-              }}
-              partition="persist:todos"
-              preload="./features/todos/preload.js"
-              ref={(webview) => { this.webview = webview ? webview.view : null; }}
-              src={environment.TODOS_FRONTEND}
-            />
-          ) : (
-            <Appear>
-              <div className={classes.premiumContainer}>
-                <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
-                <p>{intl.formatMessage(messages.premiumInfo)}</p>
-                <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-                <UpgradeButton
-                  className={classes.premiumCTA}
-                  gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
-                  short
-                />
-              </div>
-            </Appear>
-          )}
-        </div>
-      </>
+        ) : (
+          <Appear>
+            <div className={classes.premiumContainer}>
+              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
+              <p>{intl.formatMessage(messages.premiumInfo)}</p>
+              <p>{intl.formatMessage(messages.rolloutInfo)}</p>
+              <UpgradeButton
+                className={classes.premiumCTA}
+                gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                short
+              />
+            </div>
+          </Appear>
+        )}
+      </div>
     );
   }
 }
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 5c6abff4c..aebe0dcbe 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -61,6 +61,7 @@ export default class TodoStore extends FeatureStore {
 
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
+      this._updateTodosConfig,
       this._firstLaunchReaction,
     ]);
 
@@ -124,11 +125,16 @@ export default class TodoStore extends FeatureStore {
   // Todos client message handlers
 
   _onTodosClientInitialized = () => {
+    const { authToken } = this.stores.user;
+    const { isDarkThemeActive } = this.stores.ui;
+    const { locale } = this.stores.app;
+    if (!this.webview) return;
     this.webview.send(IPC.TODOS_HOST_CHANNEL, {
       action: 'todos:configure',
       data: {
-        authToken: this.stores.user.authToken,
-        theme: this.stores.ui.isDarkThemeActive ? ThemeType.dark : ThemeType.default,
+        authToken,
+        locale,
+        theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default,
       },
     });
   };
@@ -148,6 +154,11 @@ export default class TodoStore extends FeatureStore {
     this.isFeatureEnabled = isTodosEnabled;
   };
 
+  _updateTodosConfig = () => {
+    // Resend the config if any part changes in Franz:
+    this._onTodosClientInitialized();
+  };
+
   _firstLaunchReaction = () => {
     const { stats } = this.stores.settings.all;