Merge pull request #4348 from adamdmharvey/change-settings

user-settings: Always show Pin Sidebar and minor fixes

.changeset/tidy-news-perform.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Keep the Pin Sidebar setting visible on small screens.

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

@@ -32,11 +32,11 @@ export const EmptyFlags = () => (
   <EmptyState
     missing="content"
     title="No Feature Flags"
-    description="Feature Flags makes it possible for plugins to register features in Backstage for users to opt into. You      can use this to split out logic in your code for manual A/B testing, etc."
+    description="Feature Flags make it possible for plugins to register features in Backstage for users to opt into. You can use this to split out logic in your code for manual A/B testing, etc."
     action={
       <>
         <Typography variant="body1">
-          An example how how to add a feature flags is highlighted below:
+          An example for how to add a feature flag is highlighted below:
         </Typography>
         <CodeSnippet
           text={EXAMPLE}

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

@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 import { InfoCard } from '@backstage/core';
-import { Grid, List, useMediaQuery, useTheme } from '@material-ui/core';
+import { Grid, List } from '@material-ui/core';
 import React from 'react';
 import { PinButton } from './PinButton';
 import { Profile } from './Profile';
 import { ThemeToggle } from './ThemeToggle';
 
 export const General = () => {
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
   return (
     <Grid container direction="row" spacing={3}>
       <Grid item sm={12} md={6}>
@@ -32,7 +30,7 @@ export const General = () => {
         <InfoCard title="Appearance">
           <List dense>
             <ThemeToggle />
-            {!fullScreen && <PinButton />}
+            <PinButton />
           </List>
         </InfoCard>
       </Grid>

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

@@ -24,31 +24,27 @@ export const Profile = () => {
   const { profile, displayName } = useUserProfile();
 
   return (
-    <Grid container spacing={3}>
-      <Grid item md={12}>
-        <InfoCard title="Profile">
-          <Grid container spacing={6}>
-            <Grid item>
-              <SignInAvatar size={96} />
-            </Grid>
-            <Grid item xs={12} sm container>
-              <Grid item xs container direction="column" spacing={2}>
-                <Grid item xs>
-                  <Typography variant="subtitle1" gutterBottom>
-                    {displayName}
-                  </Typography>
-                  <Typography variant="body2" color="textSecondary">
-                    {profile.email}
-                  </Typography>
-                </Grid>
-              </Grid>
-              <Grid item>
-                <UserSettingsMenu />
-              </Grid>
+    <InfoCard title="Profile">
+      <Grid container spacing={6}>
+        <Grid item>
+          <SignInAvatar size={96} />
+        </Grid>
+        <Grid item xs={12} sm container>
+          <Grid item xs container direction="column" spacing={2}>
+            <Grid item xs>
+              <Typography variant="subtitle1" gutterBottom>
+                {displayName}
+              </Typography>
+              <Typography variant="body2" color="textSecondary">
+                {profile.email}
+              </Typography>
             </Grid>
           </Grid>
-        </InfoCard>
+          <Grid item>
+            <UserSettingsMenu />
+          </Grid>
+        </Grid>
       </Grid>
-    </Grid>
+    </InfoCard>
   );
 };