From 3d2842783f86adaeefe39ddaeec9cd9c054dbc3c Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Mon, 9 Mar 2020 11:32:17 +0100 Subject: [PATCH] get them zebras back --- packages/core/src/theme/BackstageTheme.js | 193 +++++++++--------- .../src/components/HomePage/HomePage.tsx | 35 +++- 2 files changed, 122 insertions(+), 106 deletions(-) diff --git a/packages/core/src/theme/BackstageTheme.js b/packages/core/src/theme/BackstageTheme.js index 0a7d64a903..b8be7223a2 100644 --- a/packages/core/src/theme/BackstageTheme.js +++ b/packages/core/src/theme/BackstageTheme.js @@ -101,119 +101,121 @@ const extendedThemeConfig = { const createOverrides = theme => { return { - MuiTableRow: { - // Alternating row backgrounds - root: { - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.background.default, + overrides: { + MuiTableRow: { + // Alternating row backgrounds + root: { + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.background.default, + }, + }, + // Use pointer for hoverable rows + hover: { + '&:hover': { + cursor: 'pointer', + }, + }, + // Alternating head backgrounds + head: { + '&:nth-of-type(odd)': { + backgroundColor: COLORS.NAMED.WHITE, + }, }, }, - // Use pointer for hoverable rows - hover: { - '&:hover': { - cursor: 'pointer', + // Tables are more dense than default mui tables + MuiTableCell: { + root: { + wordBreak: 'break-word', + overflow: 'hidden', + verticalAlign: 'middle', + lineHeight: '1', + margin: 0, + padding: '8px', + borderBottom: 0, + }, + head: { + wordBreak: 'break-word', + overflow: 'hidden', + color: 'rgb(179, 179, 179)', + fontWeight: 'normal', + lineHeight: '1', }, }, - // Alternating head backgrounds - head: { - '&:nth-of-type(odd)': { - backgroundColor: COLORS.NAMED.WHITE, + MuiTabs: { + // Tabs are smaller than default mui tab rows + root: { + minHeight: 24, }, }, - }, - // Tables are more dense than default mui tables - MuiTableCell: { - root: { - wordBreak: 'break-word', - overflow: 'hidden', - verticalAlign: 'middle', - lineHeight: '1', - margin: 0, - padding: '8px', - borderBottom: 0, - }, - head: { - wordBreak: 'break-word', - overflow: 'hidden', - color: 'rgb(179, 179, 179)', - fontWeight: 'normal', - lineHeight: '1', - }, - }, - MuiTabs: { - // Tabs are smaller than default mui tab rows - root: { - minHeight: 24, - }, - }, - MuiTab: { - // Tabs are smaller and have a hover background - root: { - color: theme.palette.link, - minHeight: 24, - textTransform: 'initial', - '&:hover': { - color: darken(theme.palette.link, 0.3), - background: lighten(theme.palette.link, 0.95), + MuiTab: { + // Tabs are smaller and have a hover background + root: { + color: theme.palette.link, + minHeight: 24, + textTransform: 'initial', + '&:hover': { + color: darken(theme.palette.link, 0.3), + background: lighten(theme.palette.link, 0.95), + }, + [theme.breakpoints.up('md')]: { + minWidth: 120, + fontSize: theme.typography.pxToRem(14), + fontWeight: 500, + }, }, - [theme.breakpoints.up('md')]: { - minWidth: 120, - fontSize: theme.typography.pxToRem(14), - fontWeight: 500, + textColorPrimary: { + color: theme.palette.link, }, }, - textColorPrimary: { - color: theme.palette.link, - }, - }, - MuiTableSortLabel: { - // No color change on hover, just rely on the arrow showing up instead. - root: { - color: 'inherit', - '&:hover': { + MuiTableSortLabel: { + // No color change on hover, just rely on the arrow showing up instead. + root: { color: 'inherit', + '&:hover': { + color: 'inherit', + }, + '&:focus': { + color: 'inherit', + }, }, - '&:focus': { + // Bold font for highlighting selected column + active: { + fontWeight: 'bold', color: 'inherit', }, }, - // Bold font for highlighting selected column - active: { - fontWeight: 'bold', - color: 'inherit', + MuiListItemText: { + dense: { + // Default dense list items to adding ellipsis for really long str... + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, }, - }, - MuiListItemText: { - dense: { - // Default dense list items to adding ellipsis for really long str... - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', + MuiButton: { + text: { + // Text buttons have less padding by default, but we want to keep the original padding + padding: null, + }, }, - }, - MuiButton: { - text: { - // Text buttons have less padding by default, but we want to keep the original padding - padding: null, + MuiChip: { + root: { + // By default there's no margin, but it's usually wanted, so we add some trailing margin + marginRight: theme.spacing(1), + marginBottom: theme.spacing(1), + }, }, - }, - MuiChip: { - root: { - // By default there's no margin, but it's usually wanted, so we add some trailing margin - marginRight: theme.spacing(1), - marginBottom: theme.spacing(1), + MuiCardHeader: { + root: { + // Reduce padding between header and content + paddingBottom: 0, + }, }, - }, - MuiCardHeader: { - root: { - // Reduce padding between header and content - paddingBottom: 0, - }, - }, - MuiCardActions: { - root: { - // We default to putting the card actions at the end - justifyContent: 'flex-end', + MuiCardActions: { + root: { + // We default to putting the card actions at the end + justifyContent: 'flex-end', + }, }, }, }; @@ -224,7 +226,6 @@ const extendedTheme = createMuiTheme(extendedThemeConfig); // V1 theming // https://material-ui-next.com/customization/themes/ // For CSS it is advised to use JSS, see https://material-ui-next.com/customization/css-in-js/ - const BackstageTheme = { ...extendedTheme, ...createOverrides(extendedTheme) }; // Temporary workaround for files incorrectly importing the theme directly diff --git a/plugins/home-page/src/components/HomePage/HomePage.tsx b/plugins/home-page/src/components/HomePage/HomePage.tsx index 625d3be097..7b6e3ff9da 100644 --- a/plugins/home-page/src/components/HomePage/HomePage.tsx +++ b/plugins/home-page/src/components/HomePage/HomePage.tsx @@ -5,12 +5,17 @@ import { Content, EntityLink, InfoCard, - SortableTable, Header, Page, pageTheme, } from '@spotify-backstage/core'; import SquadTechHealth from './SquadTechHealth'; +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'; const STATIC_DATA = [ { id: 'backstage', kind: 'service' }, @@ -18,11 +23,6 @@ const STATIC_DATA = [ ]; const HomePage: FC<{}> = () => { - const columns = [ - { id: 'entity', label: 'ID' }, - { id: 'kind', label: 'Kind' }, - ]; - const data = STATIC_DATA.map(({ id, kind }) => { return { id, @@ -48,11 +48,26 @@ const HomePage: FC<{}> = () => { - - Things you own - + Things you own - + + + + + ID + Kind + + + + {data.map(d => ( + + {d.entity} + {d.kind} + + ))} + +
+