From 3d82c36be845e3f46a52a1998dfb9e2056e80a17 Mon Sep 17 00:00:00 2001 From: Matej Rifelj Date: Tue, 17 Jan 2023 17:53:20 +0100 Subject: [PATCH] Top header redesign (also moving receive address inside top header) --- .../CopyToClipboard/CopyToClipboard.tsx | 2 +- .../LayoutDashboard/LayoutDashboard.tsx | 10 +++++- .../StateIndicator/StateIndicator.tsx | 4 ++- .../StateIndicator/StateIndicatorDot.tsx | 35 +++++++++++++++++-- .../src/components/app/AppStatusHeader.tsx | 24 +++++++++---- .../components/nfts/gallery/NFTGallery.tsx | 2 -- .../walletConnect/WalletConnectDropdown.tsx | 13 +++++-- packages/icons/src/NFTs.tsx | 5 +++ packages/icons/src/WalletConnect.tsx | 17 +++++++++ packages/icons/src/images/cancelConnect.svg | 4 +++ .../icons/src/images/checkmarkConnect.svg | 3 ++ packages/icons/src/images/copy.svg | 3 ++ packages/icons/src/images/exit.svg | 3 ++ packages/icons/src/images/reload.svg | 11 ++---- packages/icons/src/images/reloadConnect.svg | 4 +++ packages/icons/src/images/walletConnect.svg | 2 +- packages/icons/src/index.ts | 4 +-- .../components/WalletReceiveAddressField.tsx | 24 +++++++++---- 18 files changed, 135 insertions(+), 35 deletions(-) create mode 100644 packages/icons/src/images/cancelConnect.svg create mode 100644 packages/icons/src/images/checkmarkConnect.svg create mode 100644 packages/icons/src/images/copy.svg create mode 100644 packages/icons/src/images/exit.svg create mode 100644 packages/icons/src/images/reloadConnect.svg diff --git a/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx b/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx index 688380ed2f..d424c32096 100644 --- a/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx +++ b/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx @@ -1,5 +1,5 @@ +import { Copy as AssignmentIcon } from '@chia-network/icons'; import { Trans } from '@lingui/macro'; -import { Assignment as AssignmentIcon } from '@mui/icons-material'; import { Tooltip, IconButton } from '@mui/material'; import { styled } from '@mui/material/styles'; import React, { useState } from 'react'; diff --git a/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx b/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx index a5e265345b..922881fdfe 100644 --- a/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx +++ b/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx @@ -1,4 +1,5 @@ import { useLogout, useGetLoggedInFingerprintQuery, useGetKeyQuery } from '@chia-network/api-react'; +import { Exit as ExitIcon } from '@chia-network/icons'; import { t, Trans } from '@lingui/macro'; import { ExitToApp as ExitToAppIcon } from '@mui/icons-material'; import { Box, AppBar, Toolbar, Drawer, Container, IconButton, Typography, CircularProgress } from '@mui/material'; @@ -50,6 +51,13 @@ const StyledInlineTypography = styled(Typography)` display: inline-block; `; +const ExitIconStyled = styled(ExitIcon)` + fill: none !important; + position: relative; + top: 2px; + left: 4px; +`; + export type LayoutDashboardProps = { children?: ReactNode; sidebar?: ReactNode; @@ -143,7 +151,7 @@ export default function LayoutDashboard(props: LayoutDashboardProps) { */} Log Out}> - + diff --git a/packages/core/src/components/StateIndicator/StateIndicator.tsx b/packages/core/src/components/StateIndicator/StateIndicator.tsx index 49c4d5411d..7b9fcc647f 100644 --- a/packages/core/src/components/StateIndicator/StateIndicator.tsx +++ b/packages/core/src/components/StateIndicator/StateIndicator.tsx @@ -13,6 +13,8 @@ const Color = { }; const StyledFlexContainer = styled(({ color, ...rest }) => )` + position: relative; + top: -1px; color: ${({ color }) => color}; `; @@ -41,7 +43,7 @@ export default function StateComponent(props: StateComponentProps) { return ( {!hideTitle && {children}} - {indicator && } + {indicator && } ); } diff --git a/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx b/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx index fdff8e93d0..3e0dee8ad2 100644 --- a/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx +++ b/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx @@ -1,7 +1,36 @@ -import { FiberManualRecord as FiberManualRecordIcon } from '@mui/icons-material'; +import { ConnectCheckmark, ConnectCancel, ConnectReload } from '@chia-network/icons'; +import React from 'react'; import styled from 'styled-components'; -export default styled(FiberManualRecordIcon)` +import State from '../../constants/State'; + +const WrapperStyled = styled.div` + display: inline-block; + width: 18px; + height: 18px; font-size: 1rem; - color: ${({ color }) => color}; + border: 2px solid ${({ color }) => color}; + border-radius: 50%; `; + +type StateIndicatorDotTypes = { + color: string; + state: string; +}; + +export default function StateIndicatorDot(props: StateIndicatorDotTypes) { + const { color, state } = props; + function renderIcon() { + if (state === State.SUCCESS) { + return ; + } + if (state === State.WARNING) { + return ; + } + if (state === State.ERROR) { + return ; + } + return null; + } + return {renderIcon()}; +} diff --git a/packages/gui/src/components/app/AppStatusHeader.tsx b/packages/gui/src/components/app/AppStatusHeader.tsx index 2764174106..4448ba1f1c 100644 --- a/packages/gui/src/components/app/AppStatusHeader.tsx +++ b/packages/gui/src/components/app/AppStatusHeader.tsx @@ -1,18 +1,29 @@ -import { Flex, useMode, Mode } from '@chia-network/core'; -import { WalletConnections, WalletStatus } from '@chia-network/wallets'; +import { Flex, useMode, Mode, useDarkMode } from '@chia-network/core'; +import { WalletConnections, WalletStatus, WalletReceiveAddressField } from '@chia-network/wallets'; import { Trans } from '@lingui/macro'; import { Box, ButtonGroup, Button, Popover } from '@mui/material'; import React, { useState } from 'react'; +import styled from 'styled-components'; import Connections from '../fullNode/FullNodeConnections'; import FullNodeStateIndicator from '../fullNode/FullNodeStateIndicator'; import WalletConnectDropdown from '../walletConnect/WalletConnectDropdown'; export default function AppStatusHeader() { + const ButtonStyled = styled(Button)` + padding-top: 3px; + padding-bottom: 0; + border: 1px solid ${(props: any) => props.theme.palette.border.main}; + &:hover { + border: 1px solid ${(props: any) => props.theme.palette.border.main}; + } + white-space: nowrap; + `; const [mode] = useMode(); const [anchorElFN, setAnchorElFN] = useState(null); const [anchorElW, setAnchorElW] = useState(null); + const { isDarkMode } = useDarkMode(); const handleClickFN = (event: React.MouseEvent) => { setAnchorElFN(event.currentTarget); @@ -32,16 +43,17 @@ export default function AppStatusHeader() { return ( + {mode === Mode.FARMING && ( <> - + )} - + - toggleMultipleSelection(!inMultipleSelectionMode)} diff --git a/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx b/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx index 0ded529c9b..5ae5bbbcea 100644 --- a/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx +++ b/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx @@ -2,6 +2,7 @@ import { DropdownBase } from '@chia-network/core'; import { WalletConnect } from '@chia-network/icons'; import { Box, Button } from '@mui/material'; import React from 'react'; +import styled from 'styled-components'; import useWalletConnectContext from '../../hooks/useWalletConnectContext'; import WalletConnectConnections from './WalletConnectConnections'; @@ -9,12 +10,20 @@ import WalletConnectConnections from './WalletConnectConnections'; export default function WalletConnectDropdown() { const { enabled, pairs, isLoading } = useWalletConnectContext(); + const ButtonStyled = styled(Button)` + height: 40px; + border: 1px solid ${(props) => props.theme.palette.border.main}; + &:hover { + border: 1px solid ${(props) => props.theme.palette.border.main}; + } + `; + const color = enabled && !isLoading && pairs.get().length > 0 ? 'primary' : 'secondary'; return ( {({ onClose, onToggle }) => [ - , + , , diff --git a/packages/icons/src/NFTs.tsx b/packages/icons/src/NFTs.tsx index 44be021eb5..9970b3ceff 100644 --- a/packages/icons/src/NFTs.tsx +++ b/packages/icons/src/NFTs.tsx @@ -3,6 +3,7 @@ import React from 'react'; import NFTsIcon from './images/NFTs.svg'; import NFTsSmallIcon from './images/NFTsSmall.svg'; +import CopyIcon from './images/copy.svg'; import ReloadIcon from './images/reload.svg'; export function NFTsSmall(props: SvgIconProps) { @@ -16,3 +17,7 @@ export default function NFTs(props: SvgIconProps) { export function Reload(props: SvgIconProps) { return ; } + +export function Copy(props: SvgIconProps) { + return ; +} diff --git a/packages/icons/src/WalletConnect.tsx b/packages/icons/src/WalletConnect.tsx index 28eecfba37..d497bce2d8 100644 --- a/packages/icons/src/WalletConnect.tsx +++ b/packages/icons/src/WalletConnect.tsx @@ -1,8 +1,25 @@ import { SvgIcon, SvgIconProps } from '@mui/material'; import React from 'react'; +import ConnectCancelIcon from './images/cancelConnect.svg'; +import ConnectCheckmarkIcon from './images/checkmarkConnect.svg'; +import ExitIcon from './images/exit.svg'; +import ConnectReloadIcon from './images/reloadConnect.svg'; import WalletConnectIcon from './images/walletConnect.svg'; export default function WalletConnect(props: SvgIconProps) { return ; } + +export function ConnectCheckmark(props: SvgIconProps) { + return ; +} +export function ConnectCancel(props: SvgIconProps) { + return ; +} +export function ConnectReload(props: SvgIconProps) { + return ; +} +export function Exit(props: SvgIconProps) { + return ; +} diff --git a/packages/icons/src/images/cancelConnect.svg b/packages/icons/src/images/cancelConnect.svg new file mode 100644 index 0000000000..5818688b30 --- /dev/null +++ b/packages/icons/src/images/cancelConnect.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/images/checkmarkConnect.svg b/packages/icons/src/images/checkmarkConnect.svg new file mode 100644 index 0000000000..c8bd70b601 --- /dev/null +++ b/packages/icons/src/images/checkmarkConnect.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/images/copy.svg b/packages/icons/src/images/copy.svg new file mode 100644 index 0000000000..b86b237b41 --- /dev/null +++ b/packages/icons/src/images/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/images/exit.svg b/packages/icons/src/images/exit.svg new file mode 100644 index 0000000000..30f3293672 --- /dev/null +++ b/packages/icons/src/images/exit.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/images/reload.svg b/packages/icons/src/images/reload.svg index c2c091d739..dfe4bdc233 100644 --- a/packages/icons/src/images/reload.svg +++ b/packages/icons/src/images/reload.svg @@ -1,10 +1,3 @@ - - + + - diff --git a/packages/icons/src/images/reloadConnect.svg b/packages/icons/src/images/reloadConnect.svg new file mode 100644 index 0000000000..94f7c1a8a8 --- /dev/null +++ b/packages/icons/src/images/reloadConnect.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/images/walletConnect.svg b/packages/icons/src/images/walletConnect.svg index dcfaa54414..b6f44ef9ac 100644 --- a/packages/icons/src/images/walletConnect.svg +++ b/packages/icons/src/images/walletConnect.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index ae1ba73be6..8c4f5ca844 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -6,7 +6,7 @@ export { default as FullNode } from './FullNode'; export { default as Home } from './Home'; export { default as Keys } from './Keys'; export { default as LinkSmall } from './Link'; -export { default as NFTs, NFTsSmall, Reload } from './NFTs'; +export { default as NFTs, NFTsSmall, Reload, Copy } from './NFTs'; export { default as Offering } from './Offering'; export { default as Offers, OffersSmall } from './Offers'; export { default as Plot } from './Plot'; @@ -19,4 +19,4 @@ export { default as Status } from './Status'; export { default as Tokens } from './Tokens'; export { default as Trade } from './Trade'; export { default as Settings } from './Settings'; -export { default as WalletConnect } from './WalletConnect'; +export { default as WalletConnect, ConnectCheckmark, ConnectCancel, ConnectReload, Exit } from './WalletConnect'; diff --git a/packages/wallets/src/components/WalletReceiveAddressField.tsx b/packages/wallets/src/components/WalletReceiveAddressField.tsx index e008fc101d..21c56327aa 100644 --- a/packages/wallets/src/components/WalletReceiveAddressField.tsx +++ b/packages/wallets/src/components/WalletReceiveAddressField.tsx @@ -9,28 +9,28 @@ import styled from 'styled-components'; const ReloadIconSvg = styled(Reload)` path { fill: none; - stroke: ${(props) => (props.isDarkMode ? props.theme.palette.common.white : props.theme.palette.text.secondary)}; + stroke: ${(props) => (props.isDarkMode ? props.theme.palette.common.white : props.theme.palette.sidebarIcon)}; } `; const WalletReceiveAddressWrapper = styled.div` display: flex; + position: relative; flex: 1; width: 100%; - padding: 9px; - background: ${(props) => (props.isDarkMode ? '#333' : '#fff')}; + padding: 3px; border-radius: 5px; - border: 1px solid ${(props) => (props.isDarkMode ? '#333' : '#e2e2e2')}; + border: 1px solid ${(props) => (props.isDarkMode ? props.theme.palette.border.dark : props.theme.palette.border.main)}; > div { background: ${(props) => (props.isDarkMode ? '#444' : '#f4f4f4')}; border-radius: 5px; } input { - padding: 3px 8px; + padding: 4px 8px 4px 36px; + height: 24px; border: 0; outline: none; } - height: 48px; button { padding: 3px 5px; } @@ -39,6 +39,13 @@ const WalletReceiveAddressWrapper = styled.div` } `; +const CopyToClipboardWrapper = styled.div` + position: absolute; + z-index: 5; + left: 5px; + top: 5px; +`; + export type WalletReceiveAddressProps = { walletId?: number; }; @@ -65,6 +72,9 @@ export default function WalletReceiveAddressField(props: WalletReceiveAddressPro return ( + + + - {isLoading ? ( ) : (