UX improvements to Settings

plugins/user-settings/src/components/AuthProviders/AuthProviders.tsx

@@ -37,7 +37,7 @@ export const AuthProviders = ({ providerSettings }: Props) => {
   }
 
   return (
-    <InfoCard>
+    <InfoCard title="Available Providers">
       <List dense>{providers}</List>
     </InfoCard>
   );

plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx

@@ -22,14 +22,13 @@ import {
   SessionState,
 } from '@backstage/core';
 import {
+  Button,
   ListItem,
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
   Tooltip,
 } from '@material-ui/core';
-import PowerButton from '@material-ui/icons/PowerSettingsNew';
-import { ToggleButton } from '@material-ui/lab';
 
 type Props = {
   title: string;
@@ -84,14 +83,13 @@ export const ProviderSettingsItem = ({
           arrow
           title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}
         >
-          <ToggleButton
-            size="small"
-            value={title}
-            selected={signedIn}
-            onChange={() => (signedIn ? api.signOut() : api.signIn())}
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => (signedIn ? api.signOut() : api.signIn())}
           >
-            <PowerButton color={signedIn ? 'primary' : undefined} />
-          </ToggleButton>
+            {signedIn ? `Sign out` : `Sign in`}
+          </Button>
         </Tooltip>
       </ListItemSecondaryAction>
     </ListItem>

plugins/user-settings/src/components/FeatureFlags/FeatureFlags.tsx

@@ -62,7 +62,7 @@ export const FeatureFlags = () => {
   }
 
   return (
-    <InfoCard>
+    <InfoCard title="Feature Flags">
       <List dense>
         {featureFlags.map(featureFlag => {
           const enabled = Boolean(state[featureFlag.name]);

plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx

@@ -19,10 +19,9 @@ import {
   ListItem,
   ListItemSecondaryAction,
   ListItemText,
+  Switch,
   Tooltip,
 } from '@material-ui/core';
-import CheckIcon from '@material-ui/icons/CheckCircle';
-import { ToggleButton } from '@material-ui/lab';
 import { FeatureFlagsRegistryItem } from '@backstage/core';
 
 type Props = {
@@ -39,14 +38,12 @@ export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
     />
     <ListItemSecondaryAction>
       <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-        <ToggleButton
-          size="small"
-          value="flag"
-          selected={enabled}
+        <Switch
+          color="primary"
+          checked={enabled}
           onChange={() => toggleHandler(flag.name)}
-        >
-          <CheckIcon color={enabled ? 'primary' : undefined} />
-        </ToggleButton>
+          name={flag.name}
+        />
       </Tooltip>
     </ListItemSecondaryAction>
   </ListItem>

plugins/user-settings/src/components/General/General.tsx

@@ -21,12 +21,12 @@ import { Profile } from './Profile';
 import { ThemeToggle } from './ThemeToggle';
 
 export const General = () => (
-  <Grid container spacing={3}>
-    <Grid item md={12}>
+  <Grid container direction="row" spacing={3}>
+    <Grid item sm={6}>
       <Profile />
     </Grid>
-    <Grid item md={12}>
-      <InfoCard>
+    <Grid item sm={6}>
+      <InfoCard title="Appearance">
         <List dense>
           <ThemeToggle />
           <PinButton />