From ab94b6e1dcdfb195fa5add70ca9fb567614e6fb2 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 17 Sep 2021 12:23:01 +0200
Subject: [PATCH 1/3] align grid height

Signed-off-by: Samira Mokaram <samiram@spotify.com>
---
 .../General/UserSettingsAppearanceCard.tsx    | 27 ++++++++++++-------
 .../General/UserSettingsGeneral.tsx           | 15 ++++++++---
 .../General/UserSettingsProfileCard.tsx       | 11 ++++++--
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
index 982911821b..6d68c5dfed 100644
--- a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
@@ -14,16 +14,25 @@
  * limitations under the License.
  */
 import React from 'react';
-import { List } from '@material-ui/core';
+import { List, makeStyles } from '@material-ui/core';
 import { InfoCard } from '@backstage/core-components';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 
-export const UserSettingsAppearanceCard = () => (
-  <InfoCard title="Appearance">
-    <List dense>
-      <UserSettingsThemeToggle />
-      <UserSettingsPinToggle />
-    </List>
-  </InfoCard>
-);
+const useStyles = makeStyles({
+  fullWidth: {
+    width: '100%',
+  },
+});
+
+export const UserSettingsAppearanceCard = () => {
+  const classes = useStyles();
+  return (
+    <InfoCard title="Appearance" className={classes.fullWidth}>
+      <List dense>
+        <UserSettingsThemeToggle />
+        <UserSettingsPinToggle />
+      </List>
+    </InfoCard>
+  );
+};
diff --git a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
index bd08fef565..aad80ebb3b 100644
--- a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
@@ -13,18 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 
+const useStyles = makeStyles({
+  flex: {
+    display: 'flex',
+  },
+});
+
 export const UserSettingsGeneral = () => {
+  const classes = useStyles();
   return (
-    <Grid container direction="row" spacing={3}>
-      <Grid item sm={12} md={6}>
+    <Grid container direction="row" spacing={3} alignItems="stretch">
+      <Grid item sm={12} md={6} className={classes.flex}>
         <UserSettingsProfileCard />
       </Grid>
-      <Grid item sm={12} md={6}>
+      <Grid item sm={12} md={6} className={classes.flex}>
         <UserSettingsAppearanceCard />
       </Grid>
     </Grid>
diff --git a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
index f79b1084c5..e7910d178d 100644
--- a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
@@ -13,18 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid, Typography } from '@material-ui/core';
+import { Grid, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from '../useUserProfileInfo';
 import { InfoCard } from '@backstage/core-components';
 
+const useStyles = makeStyles({
+  fullWidth: {
+    width: '100%',
+  },
+});
+
 export const UserSettingsProfileCard = () => {
   const { profile, displayName } = useUserProfile();
+  const classes = useStyles();
 
   return (
-    <InfoCard title="Profile">
+    <InfoCard title="Profile" className={classes.fullWidth}>
       <Grid container spacing={6}>
         <Grid item>
           <UserSettingsSignInAvatar size={96} />

From 63602a1753da664388d6fdccb602ac8ae0297b23 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 17 Sep 2021 12:25:05 +0200
Subject: [PATCH 2/3] add changeset

Signed-off-by: Samira Mokaram <samiram@spotify.com>
---
 .changeset/lucky-plums-brake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lucky-plums-brake.md

diff --git a/.changeset/lucky-plums-brake.md b/.changeset/lucky-plums-brake.md
new file mode 100644
index 0000000000..80eb7b4cb4
--- /dev/null
+++ b/.changeset/lucky-plums-brake.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Align grid height

From ff63d65363a3be8d456c84bc9b75a3d59056e7c7 Mon Sep 17 00:00:00 2001
From: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
Date: Mon, 18 Oct 2021 13:31:41 +0200
Subject: [PATCH 3/3] use InfoCard Variant instead of styles

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
---
 .../General/UserSettingsAppearanceCard.tsx    | 27 +++++++------------
 .../General/UserSettingsGeneral.tsx           | 15 +++--------
 .../General/UserSettingsProfileCard.tsx       | 11 ++------
 3 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
index 6d68c5dfed..8f6e60e289 100644
--- a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
@@ -14,25 +14,16 @@
  * limitations under the License.
  */
 import React from 'react';
-import { List, makeStyles } from '@material-ui/core';
+import { List } from '@material-ui/core';
 import { InfoCard } from '@backstage/core-components';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 
-const useStyles = makeStyles({
-  fullWidth: {
-    width: '100%',
-  },
-});
-
-export const UserSettingsAppearanceCard = () => {
-  const classes = useStyles();
-  return (
-    <InfoCard title="Appearance" className={classes.fullWidth}>
-      <List dense>
-        <UserSettingsThemeToggle />
-        <UserSettingsPinToggle />
-      </List>
-    </InfoCard>
-  );
-};
+export const UserSettingsAppearanceCard = () => (
+  <InfoCard title="Appearance" variant="gridItem">
+    <List dense>
+      <UserSettingsThemeToggle />
+      <UserSettingsPinToggle />
+    </List>
+  </InfoCard>
+);
diff --git a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
index aad80ebb3b..bd08fef565 100644
--- a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
@@ -13,25 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid, makeStyles } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 
-const useStyles = makeStyles({
-  flex: {
-    display: 'flex',
-  },
-});
-
 export const UserSettingsGeneral = () => {
-  const classes = useStyles();
   return (
-    <Grid container direction="row" spacing={3} alignItems="stretch">
-      <Grid item sm={12} md={6} className={classes.flex}>
+    <Grid container direction="row" spacing={3}>
+      <Grid item sm={12} md={6}>
         <UserSettingsProfileCard />
       </Grid>
-      <Grid item sm={12} md={6} className={classes.flex}>
+      <Grid item sm={12} md={6}>
         <UserSettingsAppearanceCard />
       </Grid>
     </Grid>
diff --git a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
index e7910d178d..93bb32c5db 100644
--- a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
@@ -13,25 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid, makeStyles, Typography } from '@material-ui/core';
+import { Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from '../useUserProfileInfo';
 import { InfoCard } from '@backstage/core-components';
 
-const useStyles = makeStyles({
-  fullWidth: {
-    width: '100%',
-  },
-});
-
 export const UserSettingsProfileCard = () => {
   const { profile, displayName } = useUserProfile();
-  const classes = useStyles();
 
   return (
-    <InfoCard title="Profile" className={classes.fullWidth}>
+    <InfoCard title="Profile" variant="gridItem">
       <Grid container spacing={6}>
         <Grid item>
           <UserSettingsSignInAvatar size={96} />