From cea6c4604ec1e434be3cf6989aa10eb476135dbf Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Thu, 24 Sep 2020 10:45:13 +0200
Subject: [PATCH] Add primary color to buttons that are active/selected

---
 .../src/components/FeatureFlagsItem.tsx       |  2 +-
 .../src/components/PinButton.tsx              |  2 +-
 .../src/components/ProviderSettingsItem.tsx   | 18 ++++-------
 .../src/components/ThemeToggle.tsx            | 31 +++++++++++++------
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/plugins/user-settings/src/components/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlagsItem.tsx
index 760aa25a34..7f7f990e48 100644
--- a/plugins/user-settings/src/components/FeatureFlagsItem.tsx
+++ b/plugins/user-settings/src/components/FeatureFlagsItem.tsx
@@ -45,7 +45,7 @@ export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
         onChange={() => toggleHandler(flag.name)}
       >
         <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-          <CheckIcon />
+          <CheckIcon color={enabled ? 'primary' : undefined} />
         </Tooltip>
       </ToggleButton>
     </ListItemSecondaryAction>
diff --git a/plugins/user-settings/src/components/PinButton.tsx b/plugins/user-settings/src/components/PinButton.tsx
index 0858e9d4fb..be4024f954 100644
--- a/plugins/user-settings/src/components/PinButton.tsx
+++ b/plugins/user-settings/src/components/PinButton.tsx
@@ -37,7 +37,7 @@ export const SidebarPinButton = () => {
       arrow
       title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}
     >
-      {isPinned ? <LockIcon /> : <LockOpenIcon />}
+      {isPinned ? <LockIcon color="primary" /> : <LockOpenIcon />}
     </Tooltip>
   );
 
diff --git a/plugins/user-settings/src/components/ProviderSettingsItem.tsx b/plugins/user-settings/src/components/ProviderSettingsItem.tsx
index e4a3900919..018e6a1326 100644
--- a/plugins/user-settings/src/components/ProviderSettingsItem.tsx
+++ b/plugins/user-settings/src/components/ProviderSettingsItem.tsx
@@ -77,15 +77,9 @@ export const ProviderSettingsItem: FC<OAuthProviderSidebarProps> = ({
           selected={signedIn}
           onChange={() => (signedIn ? api.signOut() : api.signIn())}
         >
-          <Tooltip
-            placement="top"
-            arrow
-            title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}
-          >
-            <PowerButton />
-          </Tooltip>
-        </ToggleButton>
-      </ListItemSecondaryAction>
-    </ListItem>
-  );
-};
+          <PowerButton color={signedIn ? 'primary' : undefined} />
+        </Tooltip>
+      </ToggleButton>
+    </ListItemSecondaryAction>
+  </ListItem>
+);
diff --git a/plugins/user-settings/src/components/ThemeToggle.tsx b/plugins/user-settings/src/components/ThemeToggle.tsx
index 88eee3c6bf..9acfc3407f 100644
--- a/plugins/user-settings/src/components/ThemeToggle.tsx
+++ b/plugins/user-settings/src/components/ThemeToggle.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { useObservable } from 'react-use';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
-import { appThemeApiRef, useApi } from '@backstage/core';
+import { AppTheme, appThemeApiRef, useApi } from '@backstage/core';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import {
@@ -47,6 +47,23 @@ export const SidebarThemeToggle = () => {
     }
   };
 
+  const ThemeIcon = ({ theme }: { theme: AppTheme }) => {
+    const themeIcon = themeIds.find(t => t.id === theme.id)?.icon;
+    const icon = themeIcon ? (
+      cloneElement(themeIcon, {
+        color: themeId === theme.id ? 'primary' : undefined,
+      })
+    ) : (
+      <AutoIcon color={themeId === theme.id ? 'primary' : undefined} />
+    );
+
+    return (
+      <Tooltip placement="top" arrow title={`Select ${theme.variant} theme`}>
+        {icon}
+      </Tooltip>
+    );
+  };
+
   return (
     <ListItem>
       <ListItemText primary="Theme" secondary="Change the theme mode" />
@@ -59,18 +76,12 @@ export const SidebarThemeToggle = () => {
         >
           {themeIds.map(theme => (
             <ToggleButton key={theme.id} value={theme.variant}>
-              <Tooltip
-                placement="top"
-                arrow
-                title={`Select ${theme.variant} theme`}
-              >
-                {themeIds.find(t => t.id === theme.id)!.icon ?? <AutoIcon />}
-              </Tooltip>
+              <ThemeIcon theme={theme} />
             </ToggleButton>
           ))}
           <ToggleButton value="auto">
             <Tooltip placement="top" arrow title="Select auto theme">
-              <AutoIcon />
+              <AutoIcon color={themeId === undefined ? 'primary' : undefined} />
             </Tooltip>
           </ToggleButton>
         </ToggleButtonGroup>