From 5e9acd5947b02bde74ebc77a787051db0812454a Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Thu, 10 Sep 2020 17:59:40 +0200
Subject: [PATCH] Option to change size of SignInAvatar

---
 .../Sidebar/Settings/SettingsDialog.tsx       |  2 +-
 .../layout/Sidebar/Settings/SignInAvatar.tsx  | 37 ++++---------------
 2 files changed, 8 insertions(+), 31 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx b/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
index b37053763b..9077654b5c 100644
--- a/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
@@ -47,7 +47,7 @@ export const SettingsDialog = ({
   return (
     <Card className={classes.root}>
       <CardHeader
-        avatar={<SignInAvatar />}
+        avatar={<SignInAvatar size={48} />}
         action={<UserSettingsMenu />}
         title={displayName}
         subheader={profile.email}
diff --git a/packages/core/src/layout/Sidebar/Settings/SignInAvatar.tsx b/packages/core/src/layout/Sidebar/Settings/SignInAvatar.tsx
index c6eed74a18..519d467436 100644
--- a/packages/core/src/layout/Sidebar/Settings/SignInAvatar.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/SignInAvatar.tsx
@@ -18,41 +18,18 @@ import React from 'react';
 import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, Avatar } from '@material-ui/core';
 import { useUserProfile } from './useUserProfileInfo';
+import { sidebarConfig } from '../config';
 
-// const useStyles = makeStyles<BackstageTheme, { size: number }>({
-//   avatar: {
-//     width: ({ size }) => size,
-//     height: ({ size }) => size,
-//   },
-// });
-
-// export const SignInAvatar = ({ size = 24 }: { size?: number }) => {
-//   const classes = useStyles({ size });
-//   const { profile, displayName } = useUserProfile();
-
-//   return (
-//     <Avatar src={profile.picture} className={classes.avatar}>
-//       {displayName[0]}
-//     </Avatar>
-//   );
-// };
-
-// const useStyles = makeStyles({
-//   avatar: {
-//     width: 24,
-//     height: 24,
-//   },
-// });
-
-const useStyles = makeStyles({
+const useStyles = makeStyles<BackstageTheme, { size: number }>({
   avatar: {
-    width: 24,
-    height: 24,
+    width: ({ size }) => size,
+    height: ({ size }) => size,
   },
 });
 
-export const SignInAvatar = () => {
-  const classes = useStyles();
+export const SignInAvatar = ({ size }: { size?: number }) => {
+  const { iconSize } = sidebarConfig;
+  const classes = useStyles(size ? { size } : { size: iconSize });
   const { profile, displayName } = useUserProfile();
 
   return (