align chat icon

src/components/base/IconTextField.jsx

@@ -25,7 +25,7 @@ function IconTextField(props) {
   const { iconName, classes } = props
   return (
     <div className={classes.iconRoot}>
-      <Icon name={iconName} className={classes.icon} />
+      <Icon name={iconName} className={classes.icon} centered />
       <StatusTextField {...props} className={classes.textField} />
     </div>
   )

src/components/base/icons/IconByName.jsx

@@ -15,7 +15,7 @@ const icons = {
   [PHOTO]: Photo
 }
 
-const Icon = ({ name }) => {
+const Icon = ({ name, centered }) => {
   const Component = icons[name]
   return (
     <div style={{
@@ -23,8 +23,8 @@ const Icon = ({ name }) => {
       borderRadius: '50%',
       padding: '10px',
       maxHeight: '45px',
-      justifySelf: 'center'
-    }}>
+      justifySelf: centered ? 'center' : 'auto'
+    }} >
       <Component />
     </div>
   )

src/components/projects/CreateProject.jsx

@@ -81,7 +81,11 @@ const styles = theme => ({
     gridColumnStart: 1,
     gridColumnEnd: 13,
     justifyItems: 'start',
-    gridAutoFlow: 'column'
+    gridAutoFlow: 'column',
+    paddingLeft: '5px'
+  },
+  chatRoomIcon: {
+    justifySelf: 'auto'
   },
   chatText: {
     marginTop: '15px',