Review comments

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

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

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

@@ -19,18 +19,11 @@ import {
   ListItem,
   ListItemSecondaryAction,
   ListItemText,
+  Switch,
   Tooltip,
 } from '@material-ui/core';
-import LockIcon from '@material-ui/icons/Lock';
-import LockOpenIcon from '@material-ui/icons/LockOpen';
-import { ToggleButton } from '@material-ui/lab';
 import { SidebarPinStateContext } from '@backstage/core';
 
-type PinIconProps = { isPinned: boolean };
-
-const PinIcon = ({ isPinned }: PinIconProps) =>
-  isPinned ? <LockIcon color="primary" /> : <LockOpenIcon />;
-
 export const PinButton = () => {
   const { isPinned, toggleSidebarPinState } = useContext(
     SidebarPinStateContext,
@@ -48,16 +41,12 @@ export const PinButton = () => {
           arrow
           title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}
         >
-          <ToggleButton
-            size="small"
-            value="pin"
-            selected={isPinned}
-            onChange={() => {
-              toggleSidebarPinState();
-            }}
-          >
-            <PinIcon isPinned={isPinned} />
-          </ToggleButton>
+          <Switch
+            color="primary"
+            checked={isPinned}
+            onChange={() => toggleSidebarPinState()}
+            name="pin"
+          />
         </Tooltip>
       </ListItemSecondaryAction>
     </ListItem>

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

@@ -102,12 +102,20 @@ export const ThemeToggle = () => {
                 title={`Select ${theme.title}`}
                 value={theme.variant}
               >
-                <ThemeIcon id={theme.id} icon={themeIcon} activeId={themeId} />
+                <>
+                  {theme.variant}&nbsp;
+                  <ThemeIcon
+                    id={theme.id}
+                    icon={themeIcon}
+                    activeId={themeId}
+                  />
+                </>
               </TooltipToggleButton>
             );
           })}
           <Tooltip placement="top" arrow title="Select auto theme">
-            <ToggleButton value="auto">
+            <ToggleButton value="auto" selected={themeId === undefined}>
+              Auto&nbsp;
               <AutoIcon color={themeId === undefined ? 'primary' : undefined} />
             </ToggleButton>
           </Tooltip>