From 72a5515167b1234204e77b5ebc5431da91407bf6 Mon Sep 17 00:00:00 2001
From: Sander Vocke <sandervocke@gmail.com>
Date: Tue, 15 Sep 2020 17:04:51 +0200
Subject: [PATCH] Buttony rows in table.

---
 client/src/components/tables/ResultsTable.tsx | 44 +++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/client/src/components/tables/ResultsTable.tsx b/client/src/components/tables/ResultsTable.tsx
index 001e97e..4e41e5d 100644
--- a/client/src/components/tables/ResultsTable.tsx
+++ b/client/src/components/tables/ResultsTable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableContainer, Table, TableHead, TableRow, TableCell, Paper, makeStyles, TableBody, Chip } from '@material-ui/core';
+import { TableContainer, Table, TableHead, TableRow, TableCell, Paper, makeStyles, TableBody, Chip, Box, Button } from '@material-ui/core';
 import stringifyList from '../../lib/stringifyList';
 
 export interface SongGetters {
@@ -39,16 +39,44 @@ export function SongTable(props: IProps) {
                         const artist = props.songGetters.getArtist(song);
                         const album = props.songGetters.getAlbum(song);
                         const tags = props.songGetters.getTags(song).map((tag: string[]) => {
-                            return <Chip label={stringifyList(tag, undefined, (idx: number, e: string) => {
-                                return (idx === 0) ? e : " / " + e;
-                            })} />
+                            return <Box ml={0.5} mr={0.5}>
+                                <Chip size="small" label={stringifyList(tag, undefined, (idx: number, e: string) => {
+                                    return (idx === 0) ? e : " / " + e;
+                                })} />
+                            </Box>
                         });
 
+                        const TextCell = (props: any) => {
+                            const classes = makeStyles({
+                                button: {
+                                    textTransform: "none",
+                                    fontWeight: 400,
+                                    paddingLeft: '0',
+                                }
+                            })();
+                            return <TableCell padding="none" {...props}>
+                                <Button className={classes.button} fullWidth={true}>
+                                    <Box
+                                        width="100%"
+                                        display="flex"
+                                        alignItems="center"
+                                        paddingLeft="16px"
+                                    >
+                                        {props.children}
+                                    </Box>
+                                </Button>
+                            </TableCell>;
+                        }
+
                         return <TableRow key={title}>
-                            <TableCell align="left">{title}</TableCell>
-                            <TableCell align="left">{artist}</TableCell>
-                            <TableCell align="left">{album}</TableCell>
-                            <TableCell align="left">{tags}</TableCell>
+                            <TextCell align="left">{title}</TextCell>
+                            <TextCell align="left">{artist}</TextCell>
+                            <TextCell align="left">{album}</TextCell>
+                            <TableCell padding="none" align="left" width="25%">
+                                <Box display="flex" alignItems="center">
+                                    {tags}
+                                </Box>
+                            </TableCell>
                         </TableRow>
                     })}
                 </TableBody>