From 70d1df1e05b8ef518f81f197f8d258ff01b94052 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 3 Apr 2020 13:11:57 +0200
Subject: [PATCH] update UserHeader

---
 client/src/components/UserHeader.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx
index b2345d9..1a6a460 100644
--- a/client/src/components/UserHeader.tsx
+++ b/client/src/components/UserHeader.tsx
@@ -1,21 +1,34 @@
 import React, { FC } from "react";
 import { Header } from "../components/Header";
 import { UserAvatar } from "./UserAvatar";
+import { Grid, makeStyles, createStyles, Theme } from "@material-ui/core";
+import classes from "*.module.css";
 
 interface IProps {
   fullName: string;
   presentation: string;
   picture: string;
 }
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    margin: theme.spacing(1),
+    flexGrow: 1
+  }
+}));
+
 export const UserHeader: FC<IProps> = ({ fullName, presentation, picture }) => {
+  const classes = useStyles();
   return (
-    <div className="row valign-wrapper">
-      <div className="col s2">
-        <UserAvatar picture={picture} alt="" />
-      </div>
-      <div className="col s10">
-        <Header title={fullName} description={presentation} />
-      </div>
+    <div className={classes.root}>
+      <Grid container>
+        <Grid item xs={2}>
+          <UserAvatar picture={picture} alt="" />
+        </Grid>
+        <Grid item xs>
+          <Header title={fullName} description={presentation} />
+        </Grid>
+      </Grid>
     </div>
   );
 };