update table styling to match design

knowit · Mar 8, 2021 · 6ea3e10 · 6ea3e10
1 parent da08367
commit 6ea3e10
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 118 deletions.
diff --git a/src/components/AdminPanel/AddMemberToGroupDialog.tsx b/src/components/AdminPanel/AddMemberToGroupDialog.tsx
@@ -1,14 +1,11 @@
 import React, { useState } from "react";
 
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
-import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import Switch from "@material-ui/core/Switch";
@@ -23,6 +20,9 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 
+import Table from "../mui/Table";
+import TableRow from "../mui/TableRow";
+import PictureAndNameCell from "./PictureAndNameCell";
 import { dialogStyles } from "../../styles";
 import { CloseIcon } from "../DescriptionTable";
 import { not, getAttribute } from "./helpers";
@@ -202,9 +202,8 @@ const User = ({ user, selected, setSelectedUser }: any) => {
                 onClick={() => setSelectedUser(user)}
             >
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>
                     {groupLeaderName || "Mangler gruppeleder"}
                 </TableCell>
@@ -218,12 +217,11 @@ const UsersTable = ({ users, selectedUsers, setSelectedUser }: any) => {
         selectedUsers.some((u: any) => u.Username === user.Username);
 
     return (
-        <TableContainer component={Paper}>
-            <Table>
+        <TableContainer component={Paper} style={{ height: "100%" }}>
+            <Table stickyHeader style={{ maxHeight: "100%" }}>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
-                        <TableCell>Navn</TableCell>
+                        <TableCell>Ansatt</TableCell>
                         <TableCell>Gruppeleder</TableCell>
                     </TableRow>
                 </TableHead>

diff --git a/src/components/AdminPanel/EditAdmins.tsx b/src/components/AdminPanel/EditAdmins.tsx
@@ -3,16 +3,13 @@ import React, { useState } from "react";
 import Container from "@material-ui/core/Container";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import Avatar from "@material-ui/core/Avatar";
 import DeleteIcon from "@material-ui/icons/Delete";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
 import Typography from "@material-ui/core/Typography";
@@ -23,7 +20,9 @@ import DeleteUserFromGroupDialog from "./DeleteUserFromGroupDialog";
 import useApiGet from "./useApiGet";
 import { listAllUsers, listAdmins, removeAdmin, addAdmin } from "./adminApi";
 import { getAttribute } from "./helpers";
-import Button from "../Button";
+import Button from "../mui/Button";
+import Table from "../mui/Table";
+import PictureAndNameCell from "./PictureAndNameCell";
 
 const Admin = (props: any) => {
     const { admin, deleteAdmin } = props;
@@ -36,9 +35,8 @@ const Admin = (props: any) => {
         <>
             <TableRow>
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{email}</TableCell>
                 <TableCell>{username}</TableCell>
                 <TableCell>
@@ -53,15 +51,11 @@ const Admin = (props: any) => {
 
 const AdminTable = ({ admins, deleteAdmin }: any) => {
     return (
-        <TableContainer
-            component={Paper}
-            className={commonStyles.tableContainer}
-        >
+        <TableContainer className={commonStyles.tableContainer}>
             <Table stickyHeader>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
-                        <TableCell>Navn</TableCell>
+                        <TableCell>Ansatt</TableCell>
                         <TableCell>Email</TableCell>
                         <TableCell>Brukernavn</TableCell>
                         <TableCell />

diff --git a/src/components/AdminPanel/EditGroupLeaders.tsx b/src/components/AdminPanel/EditGroupLeaders.tsx
@@ -3,16 +3,13 @@ import React, { useState } from "react";
 import Container from "@material-ui/core/Container";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import Avatar from "@material-ui/core/Avatar";
 import DeleteIcon from "@material-ui/icons/Delete";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
 import Typography from "@material-ui/core/Typography";
@@ -26,9 +23,11 @@ import {
     addGroupLeader,
 } from "./adminApi";
 import { getAttribute } from "./helpers";
+import PictureAndNameCell from "./PictureAndNameCell";
 import AddUserToGroupDialog from "./AddUserToGroupDialog";
 import DeleteUserFromGroupDialog from "./DeleteUserFromGroupDialog";
-import Button from "../Button";
+import Button from "../mui/Button";
+import Table from "../mui/Table";
 
 const GroupLeader = (props: any) => {
     const { groupLeader, deleteGroupLeader } = props;
@@ -41,9 +40,8 @@ const GroupLeader = (props: any) => {
         <>
             <TableRow>
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{email}</TableCell>
                 <TableCell>{username}</TableCell>
                 <TableCell>
@@ -61,15 +59,11 @@ const GroupLeader = (props: any) => {
 
 const GroupLeaderTable = ({ groupLeaders, deleteGroupLeader }: any) => {
     return (
-        <TableContainer
-            component={Paper}
-            className={commonStyles.tableContainer}
-        >
+        <TableContainer className={commonStyles.tableContainer}>
             <Table stickyHeader>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
-                        <TableCell>Navn</TableCell>
+                        <TableCell>Ansatt</TableCell>
                         <TableCell>Email</TableCell>
                         <TableCell>Brukernavn</TableCell>
                         <TableCell />

diff --git a/src/components/AdminPanel/EditGroups.tsx b/src/components/AdminPanel/EditGroups.tsx
@@ -1,29 +1,22 @@
 import React, { useState } from "react";
 
-import { withStyles } from "@material-ui/core/styles";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import Avatar from "@material-ui/core/Avatar";
-import Badge from "@material-ui/core/Badge";
 import DeleteIcon from "@material-ui/icons/Delete";
 import AddIcon from "@material-ui/icons/Add";
 import Typography from "@material-ui/core/Typography";
 import Box from "@material-ui/core/Box";
 import Collapse from "@material-ui/core/Collapse";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import EditIcon from "@material-ui/icons/Edit";
 
 import commonStyles from "./common.module.css";
 import DeleteUserFromGroupDialog from "./DeleteUserFromGroupDialog";
@@ -44,9 +37,12 @@ import {
     updateGroupLeader,
 } from "./groupsApi";
 import { getAttribute, compareByName } from "./helpers";
+import PictureAndNameEditCell from "./PictureAndNameEditCell";
 import GroupMembers from "./GroupMembers";
 import AddUserToGroupDialog from "./AddUserToGroupDialog";
-import Button from "../Button"
+import Button from "../mui/Button";
+import Table from "../mui/Table";
+import TableRow from "../mui/TableRow";
 
 const useRowStyles = makeStyles({
     root: {
@@ -57,38 +53,6 @@ const useRowStyles = makeStyles({
     editIcon: {},
 });
 
-const StyledEditIcon = withStyles(() => ({
-    root: {
-        fontSize: "15px",
-    },
-}))(EditIcon);
-
-const StyledBadge = withStyles((theme) => ({
-    badge: {
-        border: `2px solid ${theme.palette.background.default}`,
-        padding: "0 0px",
-        backgroundColor: `${theme.palette.background.paper}`,
-    },
-}))(Badge);
-
-const GroupAvatar = ({ showBadge, onClick, name, picture }: any) => (
-    <StyledBadge
-        badgeContent={
-            showBadge ? (
-                <IconButton size="small" onClick={onClick}>
-                    <StyledEditIcon />
-                </IconButton>
-            ) : null
-        }
-        anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "right",
-        }}
-    >
-        <Avatar alt={name} src={picture} />
-    </StyledBadge>
-);
-
 const Group = ({
     addMembersToGroup,
     deleteMember,
@@ -124,14 +88,12 @@ const Group = ({
                     </IconButton>
                 </TableCell>
                 <TableCell align="right">
-                    <GroupAvatar
-                        onClick={() => editGroup(group)}
+                    <PictureAndNameEditCell
                         name={name}
                         picture={picture}
-                        showBadge={true}
+                        onEdit={() => editGroup(group)}
                     />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{group.members.length}</TableCell>
                 <TableCell align="right">
                     <Button
@@ -220,14 +182,13 @@ const GroupsTable = ({
 
     return (
         <TableContainer
-            component={Paper}
             className={commonStyles.tableContainer}
+            style={{ overflowX: "hidden" }}
         >
             <Table>
                 <TableHead>
                     <TableRow>
                         <TableCell>Detaljer</TableCell>
-                        <TableCell />
                         <TableCell>Gruppeleder</TableCell>
                         <TableCell>Antall gruppemedlemmer</TableCell>
                         <TableCell />

diff --git a/src/components/AdminPanel/GroupMembers.tsx b/src/components/AdminPanel/GroupMembers.tsx
@@ -1,20 +1,17 @@
 import React, { useState } from "react";
 
-import IconButton from "@material-ui/core/IconButton";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
-import DeleteIcon from "@material-ui/icons/Delete";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
-import Avatar from "@material-ui/core/Avatar";
 
 import { getAttribute } from "./helpers";
+import PictureAndNameCell from "./PictureAndNameCell";
 import AddMemberToGroupDialog from "./AddMemberToGroupDialog";
-import Button from "../Button";
+import Button from "../mui/Button";
+import Table from "../mui/Table";
+import TableRow from "../mui/TableRow";
 
 const User = ({ user, deleteMember }: any) => {
     const name = getAttribute(user, "name");
@@ -25,14 +22,16 @@ const User = ({ user, deleteMember }: any) => {
         <>
             <TableRow>
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{email}</TableCell>
                 <TableCell>
-                    <IconButton edge="end" onClick={() => deleteMember(user)}>
-                        <DeleteIcon />
-                    </IconButton>
+                    <Button
+                        onClick={() => deleteMember(user)}
+                        style={{ fontStyle: "italic" }}
+                    >
+                        Fjern fra gruppe
+                    </Button>
                 </TableCell>
             </TableRow>
         </>
@@ -53,12 +52,11 @@ const GroupMembers = ({
 
     return (
         <>
-            <TableContainer component={Paper}>
+            <TableContainer>
                 <Table>
                     <TableHead>
                         <TableRow>
-                            <TableCell />
-                            <TableCell>Navn</TableCell>
+                            <TableCell>Ansatt</TableCell>
                             <TableCell>Email</TableCell>
                             <TableCell />
                         </TableRow>

diff --git a/src/components/AdminPanel/PictureAndNameCell.tsx b/src/components/AdminPanel/PictureAndNameCell.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import Avatar from "@material-ui/core/Avatar";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+    root: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+});
+
+const PictureAndNameCell = ({ name, picture }: any) => {
+    const classes = useStyles();
+
+    return (
+        <span className={classes.root}>
+            <Avatar alt={name} src={picture} />
+            {name}
+        </span>
+    );
+};
+
+export default PictureAndNameCell