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

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

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

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

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