Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Even up group tile padding and fix light theme badge colour

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-05-20 13:50:19 +10:00
parent 3a68c47de6
commit 19a2668644
3 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Tile.js
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Flex, IconButton, Box, Text, Badge, Grid } from "theme-ui"; import { Flex, IconButton, Box, Text, Badge } from "theme-ui";
import EditTileIcon from "../icons/EditTileIcon"; import EditTileIcon from "../icons/EditTileIcon";
@ -12,7 +12,6 @@ function Tile({
canEdit, canEdit,
badges, badges,
editTitle, editTitle,
columns,
children, children,
}) { }) {
return ( return (
@ -37,19 +36,17 @@ function Tile({
onDoubleClick={onDoubleClick} onDoubleClick={onDoubleClick}
aria-label={title} aria-label={title}
> >
<Grid <Box
columns={columns}
sx={{ sx={{
width: "100%", width: "100%",
height: "100%", height: "100%",
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
gridGap: 0,
}} }}
> >
{children} {children}
</Grid> </Box>
<Flex <Flex
sx={{ sx={{
position: "absolute", position: "absolute",
@ -89,7 +86,7 @@ function Tile({
/> />
<Box sx={{ position: "absolute", top: 0, left: 0 }}> <Box sx={{ position: "absolute", top: 0, left: 0 }}>
{badges.map((badge, i) => ( {badges.map((badge, i) => (
<Badge m={2} key={i} bg="overlay"> <Badge m={2} key={i} bg="overlay" color="text">
{badge} {badge}
</Badge> </Badge>
))} ))}

14
src/components/map/MapTileGroup.js
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { Grid } from "theme-ui";
import Tile from "../Tile"; import Tile from "../Tile";
import MapTileImage from "./MapTileImage"; import MapTileImage from "./MapTileImage";
@ -10,15 +11,12 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onOpen, canOpen }) {
isSelected={isSelected} isSelected={isSelected}
onSelect={() => onSelect(group)} onSelect={() => onSelect(group)}
onDoubleClick={() => canOpen && onOpen()} onDoubleClick={() => canOpen && onOpen()}
columns="1fr 1fr"
> >
{maps.slice(0, 4).map((map) => ( <Grid columns="1fr 1fr" p={2} sx={{ gridGap: 2 }}>
<MapTileImage {maps.slice(0, 4).map((map) => (
sx={{ padding: 1, borderRadius: "8px" }} <MapTileImage sx={{ borderRadius: "8px" }} map={map} key={map.id} />
map={map} ))}
key={map.id} </Grid>
/>
))}
</Tile> </Tile>
); );
} }

17
src/components/token/TokenTileGroup.js
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { Grid } from "theme-ui";
import Tile from "../Tile"; import Tile from "../Tile";
import TokenTileImage from "./TokenTileImage"; import TokenTileImage from "./TokenTileImage";
@ -19,13 +20,15 @@ function TokenTileGroup({
onDoubleClick={() => canOpen && onOpen()} onDoubleClick={() => canOpen && onOpen()}
columns="1fr 1fr" columns="1fr 1fr"
> >
{tokens.slice(0, 4).map((token) => ( <Grid columns="1fr 1fr" p={2} sx={{ gridGap: 2 }}>
<TokenTileImage {tokens.slice(0, 4).map((token) => (
sx={{ padding: 1, borderRadius: "8px" }} <TokenTileImage
token={token} sx={{ padding: 1, borderRadius: "8px" }}
key={token.id} token={token}
/> key={token.id}
))} />
))}
</Grid>
</Tile> </Tile>
); );
} }