From 15661870cff2a4fe112a23d7bb8238e94f1fd83d Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Wed, 15 Jun 2022 23:23:36 +0600 Subject: [PATCH 1/3] style fixes --- .../src/Components/Elements/CidRow.tsx | 49 ++++++----- .../src/Components/Pages/CidsPage.tsx | 84 ++++++++++++------- 2 files changed, 81 insertions(+), 52 deletions(-) diff --git a/packages/storage-ui/src/Components/Elements/CidRow.tsx b/packages/storage-ui/src/Components/Elements/CidRow.tsx index 79ecfb7dbe..bbc2623e84 100644 --- a/packages/storage-ui/src/Components/Elements/CidRow.tsx +++ b/packages/storage-ui/src/Components/Elements/CidRow.tsx @@ -1,5 +1,5 @@ import React from "react" -import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { DeleteSvg, ExternalIcon, formatBytes, MenuDropdown, MoreIcon, TableCell, TableRow } from "@chainsafe/common-components" import { Trans } from "@lingui/macro" import dayjs from "dayjs" @@ -71,6 +71,7 @@ const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY || "https://ipfs.io/ipfs const CidRow = ({ pinStatus }: Props) => { const classes = useStyles() const { unpin } = useStorage() + const { desktop } = useThemeSwitcher() return ( { > {pinStatus.pin?.name || "-"} {pinStatus.pin?.cid} - - {dayjs(pinStatus.created).format("DD MMM YYYY h:mm a")} - - - {pinStatus.info?.size ? formatBytes(pinStatus.info?.size, 2) : "-"} - - - {pinStatus.status} - - - {pinStatus.status === "pinned" && ( - window.open(`${trimChar(IPFS_GATEWAY, "/")}/${pinStatus.pin?.cid}`)} - /> - )} - + {desktop && + + {dayjs(pinStatus.created).format("DD MMM YYYY h:mm a")} + + } + {desktop && + + {pinStatus.info?.size ? formatBytes(pinStatus.info?.size, 2) : "-"} + + } + {desktop && + + {pinStatus.status} + + } + {desktop && + + {pinStatus.status === "pinned" && ( + window.open(`${trimChar(IPFS_GATEWAY, "/")}/${pinStatus.pin?.cid}`)} + /> + )} + + } createStyles({ @@ -39,9 +39,15 @@ const useStyles = makeStyles(({ animation, breakpoints, constants }: CSSTheme) = justifyContent: "space-between", alignItems: "center", [breakpoints.down("md")]: { - marginTop: constants.generalUnit + margin: `${constants.generalUnit}px ${constants.generalUnit * 2}px 0` } }, + title: { + marginRight: constants.generalUnit * 1.5 + }, + pinButton: { + minWidth: 110 + }, controls: { display: "flex", flexDirection: "row", @@ -67,7 +73,10 @@ const useStyles = makeStyles(({ animation, breakpoints, constants }: CSSTheme) = pagination: { margin: `${constants.generalUnit * 3}px 0`, display: "flex", - justifyContent: "flex-end" + justifyContent: "flex-end", + [breakpoints.down("md")]: { + marginRight: constants.generalUnit * 2 + } } }) ) @@ -77,6 +86,7 @@ type SortDirection = "ascend" | "descend" const CidsPage = () => { const classes = useStyles() + const { desktop } = useThemeSwitcher() const { pins, onNextPins, @@ -165,6 +175,7 @@ const CidsPage = () => { CIDs @@ -183,6 +194,7 @@ const CidsPage = () => { onClick={() => setAddCIDOpen(true)} variant="outline" size="large" + className={classes.pinButton} disabled={accountRestricted} > @@ -220,34 +232,42 @@ const CidsPage = () => { > Cid - handleSortToggle("date_uploaded")} - sortDirection={sortColumn === "date_uploaded" ? sortDirection : undefined} - sortActive={sortColumn === "date_uploaded"} - align="center" - > - Created - - handleSortToggle("size")} - sortDirection={sortColumn === "size" ? sortDirection : undefined} - sortActive={sortColumn === "size"} - align="center" - > - Size - - - Status - - {/* IPFS Gateway */} + {desktop && + handleSortToggle("date_uploaded")} + sortDirection={sortColumn === "date_uploaded" ? sortDirection : undefined} + sortActive={sortColumn === "date_uploaded"} + align="center" + > + Created + + } + {desktop && + handleSortToggle("size")} + sortDirection={sortColumn === "size" ? sortDirection : undefined} + sortActive={sortColumn === "size"} + align="center" + > + Size + + } + {desktop && + + Status + + } + {desktop && + {/* IPFS Gateway */} + } {/* Menu */} From 248baf330aae6794ee95060422dd61949d9316bf Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Mon, 20 Jun 2022 21:53:21 +0600 Subject: [PATCH 2/3] Update packages/storage-ui/src/Components/Pages/CidsPage.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- packages/storage-ui/src/Components/Pages/CidsPage.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/storage-ui/src/Components/Pages/CidsPage.tsx b/packages/storage-ui/src/Components/Pages/CidsPage.tsx index eecab89a05..e41df0ebe3 100644 --- a/packages/storage-ui/src/Components/Pages/CidsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/CidsPage.tsx @@ -232,7 +232,7 @@ const CidsPage = () => { > Cid - {desktop && + {desktop && <> { > Created - } - {desktop && { > Size - } - {desktop && { > Status - } - {desktop && {/* IPFS Gateway */} - } + } {/* Menu */} From 8cb7b60628e53ed2dd973cd6447c658dfbbed218 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Mon, 20 Jun 2022 21:53:33 +0600 Subject: [PATCH 3/3] Update packages/storage-ui/src/Components/Elements/CidRow.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- packages/storage-ui/src/Components/Elements/CidRow.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/storage-ui/src/Components/Elements/CidRow.tsx b/packages/storage-ui/src/Components/Elements/CidRow.tsx index bbc2623e84..3e774af211 100644 --- a/packages/storage-ui/src/Components/Elements/CidRow.tsx +++ b/packages/storage-ui/src/Components/Elements/CidRow.tsx @@ -93,22 +93,16 @@ const CidRow = ({ pinStatus }: Props) => { > {pinStatus.pin?.cid} - {desktop && + {desktop && <> {dayjs(pinStatus.created).format("DD MMM YYYY h:mm a")} - } - {desktop && {pinStatus.info?.size ? formatBytes(pinStatus.info?.size, 2) : "-"} - } - {desktop && {pinStatus.status} - } - {desktop && {pinStatus.status === "pinned" && ( { /> )} - } + }