From 3c98bf9a798c88682152d9a8e3ff57a761028818 Mon Sep 17 00:00:00 2001
From: Dakota Walsh <101994734+dakota-portainer@users.noreply.github.com>
Date: Wed, 6 Apr 2022 09:08:35 +1200
Subject: [PATCH] fix(theme): apply theme without saving (#6695)

---
 .../theme/theme-settings.controller.js        | 29 +++++--------------
 .../components/theme/theme-settings.html      |  1 -
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/app/portainer/components/theme/theme-settings.controller.js b/app/portainer/components/theme/theme-settings.controller.js
index 0cdfda2e1..9b96a2cd0 100644
--- a/app/portainer/components/theme/theme-settings.controller.js
+++ b/app/portainer/components/theme/theme-settings.controller.js
@@ -13,35 +13,27 @@ export default class ThemeSettingsController {
     this.setTheme = this.setTheme.bind(this);
   }
 
-  /** Theme Settings Panel */
-  async updateTheme() {
+  async setTheme(theme) {
     try {
+      if (theme === 'auto' || !theme) {
+        this.ThemeManager.autoTheme();
+      } else {
+        this.ThemeManager.setTheme(theme);
+      }
+      this.state.userTheme = theme;
       await this.UserService.updateUserTheme(this.state.userId, this.state.userTheme);
-      this.state.themeInProgress = false;
       this.Notifications.success('Success', 'User theme successfully updated');
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to update user theme');
     }
   }
 
-  setTheme(theme) {
-    if (theme === 'auto' || !theme) {
-      this.ThemeManager.autoTheme();
-    } else {
-      this.ThemeManager.setTheme(theme);
-    }
-    this.state.themeInProgress = true;
-    this.state.userTheme = theme;
-  }
-
   $onInit() {
     return this.$async(async () => {
       this.state = {
         userId: null,
         userTheme: '',
-        initTheme: '',
         defaultTheme: 'auto',
-        themeInProgress: false,
       };
 
       this.state.availableThemes = [
@@ -55,16 +47,9 @@ export default class ThemeSettingsController {
         this.state.userId = await this.Authentication.getUserDetails().ID;
         const data = await this.UserService.user(this.state.userId);
         this.state.userTheme = data.UserTheme || this.state.defaultTheme;
-        this.state.initTheme = this.state.userTheme;
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to get user details');
       }
     });
   }
-
-  $onDestroy() {
-    if (this.state.themeInProgress) {
-      this.ThemeManager.setTheme(this.state.initTheme);
-    }
-  }
 }
diff --git a/app/portainer/components/theme/theme-settings.html b/app/portainer/components/theme/theme-settings.html
index 433c45007..131139930 100644
--- a/app/portainer/components/theme/theme-settings.html
+++ b/app/portainer/components/theme/theme-settings.html
@@ -12,7 +12,6 @@
     <form class="theme-panel">
       <!-- Theme Selector-->
       <box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
-      <button ng-click="$ctrl.updateTheme()" class="btn btn-primary btn-sm">Update theme</button>
       <!-- !Theme -->
     </form>
   </rd-widget-body>