Enlarge article tab icons and widen handle spacing.
Makes the icon-only tabs easier to hit and visually clearer.
This commit is contained in:
@@ -205,7 +205,7 @@ class ArticleTileTab extends Component {
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
minHeight: 36,
|
||||
minHeight: 56,
|
||||
px: 0,
|
||||
mb: 0,
|
||||
borderBottom: 'none',
|
||||
@@ -217,7 +217,7 @@ class ArticleTileTab extends Component {
|
||||
},
|
||||
'& .MuiTabs-list, & .MuiTabs-flexContainer': {
|
||||
flexWrap: 'wrap-reverse',
|
||||
columnGap: 0.75,
|
||||
columnGap: 3,
|
||||
rowGap: 0,
|
||||
alignItems: 'stretch',
|
||||
alignContent: 'flex-end',
|
||||
@@ -226,7 +226,7 @@ class ArticleTileTab extends Component {
|
||||
'& .MuiTab-root': {
|
||||
flexShrink: 0,
|
||||
maxWidth: 'none',
|
||||
minHeight: 40,
|
||||
minHeight: 56,
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
@@ -240,10 +240,10 @@ class ArticleTileTab extends Component {
|
||||
value={row.id}
|
||||
aria-label={row.label}
|
||||
title={row.label}
|
||||
icon={<Icon fontSize="small" />}
|
||||
icon={<Icon sx={{ fontSize: 40 }} />}
|
||||
sx={{
|
||||
minHeight: 40,
|
||||
minWidth: 48,
|
||||
minHeight: 56,
|
||||
minWidth: 64,
|
||||
py: 0.5,
|
||||
px: 1.25,
|
||||
border: 'none',
|
||||
|
||||
Reference in New Issue
Block a user