use InfoCard Variant instead of styles

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

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>
+);

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>

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