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] 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} />