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

Move token bar to use grid over flex

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-06-14 17:07:15 +10:00
parent 53be182b1c
commit a997641628
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/token/TokenBar.js
View File

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { Box, Flex } from "theme-ui"; import { Box, Flex, Grid } from "theme-ui";
import SimpleBar from "simplebar-react"; import SimpleBar from "simplebar-react";
import { import {
DragOverlay, DragOverlay,
@ -165,9 +165,9 @@ function TokenBar({ onMapTokensStateCreate }) {
padding: "0 16px", padding: "0 16px",
}} }}
> >
<Flex sx={{ flexDirection: "column" }}> <Grid columns="1fr" gap={2} py={2}>
{tokenGroups.map((group) => renderToken(group))} {tokenGroups.map((group) => renderToken(group))}
</Flex> </Grid>
</SimpleBar> </SimpleBar>
<Flex <Flex
bg="muted" bg="muted"

3
src/components/token/TokenBarTokenGroup.js
View File

@ -41,8 +41,9 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
<Grid <Grid
columns="1fr" columns="1fr"
bg="muted" bg="muted"
sx={{ borderRadius: "8px", gridGap: 0 }} sx={{ borderRadius: "8px" }}
p={0} p={0}
gap={2}
> >
<Flex <Flex
sx={{ sx={{

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

@ -25,8 +25,8 @@ function TokenTileGroup({
<Grid <Grid
columns={`repeat(${layout.groupGridColumns}, 1fr)`} columns={`repeat(${layout.groupGridColumns}, 1fr)`}
p={2} p={2}
gap={2}
sx={{ sx={{
gridGap: 2,
height: "100%", height: "100%",
gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`, gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
}} }}