more layout fixes

src/components/GroupList.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
+import { Card, CardContent, Typography } from "material-ui";
 import { withStyles } from "material-ui/styles";
 import Table, {
   TableBody,
@@ -10,7 +11,6 @@ import Table, {
   TableRow,
   TableHead
 } from "material-ui/Table";
-import Paper from "material-ui/Paper";
 import IconButton from "material-ui/IconButton";
 import FirstPageIcon from "material-ui-icons/FirstPage";
 import KeyboardArrowLeft from "material-ui-icons/KeyboardArrowLeft";
@@ -24,7 +24,6 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import CreateIcon from "material-ui-icons/Create";
 import DeleteIcon from "material-ui-icons/Delete";
-import Typography from "material-ui/Typography";
 import { getContacts } from "../redux/selectors/contactsSelectors";
 
 const actionsStyles = theme => ({
@@ -190,10 +189,15 @@ class GroupList extends React.Component {
 
     return (
       <Screen>
-        <Typography type="headline" component="h2" align="center">
-          {t("group_list.header")}
-        </Typography>
-        <Paper className={classes.root}>
+        <Card className={classes.root}>
+          <CardContent>
+            <Typography className={classes.title} color="textSecondary">
+              {t(`group.listScreen.title`)}
+            </Typography>
+            <Typography variant="headline" component="h2">
+              {t(`group.listScreen.headline`)}
+            </Typography>
+          </CardContent>
           <div className={classes.tableWrapper}>
             <Table className={classes.table} align="center">
               <TableHead>
@@ -293,7 +297,7 @@ class GroupList extends React.Component {
               </TableFooter>
             </Table>
           </div>
-        </Paper>
+        </Card>
       </Screen>
     );
   }

src/components/RoleList.js

@@ -10,7 +10,7 @@ import Table, {
   TableRow,
   TableHead
 } from "material-ui/Table";
-import Paper from "material-ui/Paper";
+import { Card, CardContent, Typography } from "material-ui";
 import IconButton from "material-ui/IconButton";
 import FirstPageIcon from "material-ui-icons/FirstPage";
 import KeyboardArrowLeft from "material-ui-icons/KeyboardArrowLeft";
@@ -30,7 +30,6 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import CreateIcon from "material-ui-icons/Create";
 import DeleteIcon from "material-ui-icons/Delete";
-import Typography from "material-ui/Typography";
 import { entity } from "../lib/entity";
 import { CircularProgress } from "material-ui";
 
@@ -205,10 +204,15 @@ class RoleList extends React.Component {
 
     return (
       <Screen>
-        <Typography type="headline" component="h2" align="center">
-          {t("role_list.header")}
-        </Typography>
-        <Paper className={classes.root}>
+        <Card className={classes.root}>
+          <CardContent>
+            <Typography className={classes.title} color="textSecondary">
+              {t(`role.listScreen.title`)}
+            </Typography>
+            <Typography variant="headline" component="h2">
+              {t(`role.listScreen.headline`)}
+            </Typography>
+          </CardContent>
           <div className={classes.tableWrapper}>
             <Table className={classes.table} align="center">
               <TableHead>
@@ -288,7 +292,7 @@ class RoleList extends React.Component {
               </TableFooter>
             </Table>
           </div>
-        </Paper>
+        </Card>
       </Screen>
     );
   }

src/components/contact/ContactDetailScreen.js

@@ -43,7 +43,8 @@ const styles = theme => ({
     justifyContent: "center"
   },
   card: {
-    height: "100%"
+    height: "100%",
+    padding: theme.spacing.unit * 2
   },
   bullet: {
     display: "inline-block",

src/components/contact/ContactListScreen.js

@@ -136,7 +136,8 @@ const styles = theme => ({
   },
   card: {
     height: "100%",
-    width: "100%"
+    width: "100%",
+    padding: theme.spacing.unit * 2
   },
   root: {
     width: "100%",

src/components/user/UserList.js

@@ -136,7 +136,8 @@ const styles = theme => ({
   },
   card: {
     height: "100%",
-    width: "100%"
+    width: "100%",
+    padding: theme.spacing.unit * 2
   },
   root: {
     width: "100%",

src/i18n/en.js

@@ -90,6 +90,10 @@ export default {
       checkBoxEnabled: "Enabled"
     },
     role: {
+      listScreen: {
+        title: "List",
+        headline: "Roles"
+      },
       cancel: "Cancel",
       delete: "Delete",
       error_message: "Oops! Something went wrong",
@@ -124,6 +128,10 @@ export default {
       delete: "Delete"
     },
     group: {
+      listScreen: {
+        title: "List",
+        headline: "Groups"
+      },
       cancel: "Cancel",
       delete: "Delete",
       error_message: "Oops! Something went wrong",