From 382dc145c87276b72bd6a399075b7345e3b4029f Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 17 Apr 2020 08:24:36 +0200
Subject: [PATCH] Updated AvatarList component style

---
 client/src/components/AvatarList.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/components/AvatarList.tsx b/client/src/components/AvatarList.tsx
index adc2eea..35d5f86 100644
--- a/client/src/components/AvatarList.tsx
+++ b/client/src/components/AvatarList.tsx
@@ -3,16 +3,27 @@ import { Link } from "react-router-dom";
 import Avatar from "@material-ui/core/Avatar";
 import AvatarGroup from "@material-ui/lab/AvatarGroup";
 import { User } from "../types/User";
+import { makeStyles, Theme, createStyles } from "@material-ui/core";
 
 interface AvatarListProps {
   users: User[];
 }
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(2),
+    },
+  })
+);
+
 export const AvatarList: FC<AvatarListProps> = ({ users }) => {
+  const classes = useStyles();
   return users === undefined ? (
     <></>
   ) : (
-    <>
+    <div className={classes.root}>
       <AvatarGroup max={5}>
         {users.map((user: User, i: number) => (
           <Link to={`/users/${user.id}`} key={i}>
@@ -20,6 +31,6 @@ export const AvatarList: FC<AvatarListProps> = ({ users }) => {
           </Link>
         ))}
       </AvatarGroup>
-    </>
+    </div>
   );
 };