Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Guardian Admin UI to match Figma spec #168

Merged
merged 18 commits into from
Sep 2, 2023
Merged

Update Guardian Admin UI to match Figma spec #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0b532cd
fix(ui): update chakra Card styles to match Figma spec
wbobeirne Aug 30, 2023
8f4df56
refactor(gateway-ui): change GatewayCard to use updated chakra-ui Card
wbobeirne Aug 30, 2023
2582c2e
fix(guardian-ui): update to use new chakra-ui Card styles
wbobeirne Aug 30, 2023
e924e64
fix(ui): better Table styles, better handle table without heading
wbobeirne Aug 30, 2023
7da97c1
refactor: replace guardian-ui Pill component with reusable StatusIndi…
wbobeirne Aug 30, 2023
3fcc445
feat(ui): add KeyValues component for display lists of key / value co…
wbobeirne Aug 30, 2023
65010bb
feat(guardian-ui): split federation info into FederationInfoCard, upd…
wbobeirne Aug 30, 2023
fe76b92
feat(guardian-ui): add non-functional balance and bitcoin node cards
wbobeirne Aug 30, 2023
d4f5e25
chore(guardian-ui): remove AdminMain and AdminChart components
wbobeirne Aug 30, 2023
6ccf5e8
refactor(guardian-ui): move gateway fetch into ConnectedNodes, redesi…
wbobeirne Aug 30, 2023
82adc7c
feat: add size prop to Wrapper, make size=lg for guardian-ui admin view
wbobeirne Aug 30, 2023
6c6a289
fix(guardian-ui): match federation name header to Figma spec
wbobeirne Aug 31, 2023
09bd470
fix: match CopyInput styles and sm size to Figma spec
wbobeirne Aug 31, 2023
5b35906
refactor: reorganize admin components into components folder
wbobeirne Aug 31, 2023
400a309
feat: extract formatEllipsized util, use in gateway for node ID
wbobeirne Aug 31, 2023
f2beb68
fix(guardian-ui): improve responsive behavior
wbobeirne Aug 31, 2023
f72198f
fix(gateway-ui): use lg Wrapper size
wbobeirne Aug 31, 2023
c8a7b33
refactor(ui): better CopyInput button size calculation
wbobeirne Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/gateway-ui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const App = React.memo(function Admin(): JSX.Element {

return (
<ApiProvider props={{ gateway }}>
<Wrapper>
<Wrapper size='lg'>
{error ? (
<VStack spacing={4}>
<Heading size='md'>{t('common.error')}</Heading>
Expand Down
49 changes: 15 additions & 34 deletions apps/gateway-ui/src/components/BalanceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Box, Flex, Text, useTheme } from '@chakra-ui/react';
import { Text, useTheme } from '@chakra-ui/react';
import { useTranslation } from '@fedimint/utils';
import { GatewayCard } from '.';
import { GatewayCard } from './GatewayCard';

interface BalanceCardProps {
balance_msat: number;
Expand All @@ -15,37 +15,18 @@ export const BalanceCard = React.memo(function BalanceCard(
const theme = useTheme();

return (
<Box w='100%'>
<GatewayCard>
<Box>
<Text
fontSize='lg'
fontWeight='600'
color={theme.colors.gray[900]}
fontFamily={theme.fonts.body}
>
{t('balance-card.card_header')}
</Text>
<Text
fontSize='sm'
color={theme.colors.gray[600]}
fontFamily={theme.fonts.body}
pt='4px'
>
{t('balance-card.sentence')}
</Text>
</Box>
<Flex>
<Text
fontSize='24px'
fontWeight='600'
color={theme.colors.gray[800]}
fontFamily={theme.fonts.body}
>
{balance_msat}
</Text>
</Flex>
</GatewayCard>
</Box>
<GatewayCard
title={t('balance-card.card_header')}
description={t('balance-card.sentence')}
>
<Text
fontSize='24px'
fontWeight='600'
color={theme.colors.gray[800]}
fontFamily={theme.fonts.body}
>
{balance_msat}
</Text>
</GatewayCard>
);
});
142 changes: 64 additions & 78 deletions apps/gateway-ui/src/components/DepositCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,95 +44,81 @@ export const DepositCard = React.memo(function DepositCard({
}, [address, federationId, gateway]);

return (
<GatewayCard>
<Stack spacing='12px'>
<Text
fontSize='lg'
fontWeight='600'
color={theme.colors.gray[900]}
fontFamily={theme.fonts.body}
>
{t('deposit-card.card_header')}
</Text>
<Text
fontSize='md'
color={theme.colors.gray[600]}
fontFamily={theme.fonts.body}
>
{t('deposit-card.sentence-one')}
</Text>
<Stack spacing='24px'>
<Flex gap='4px' alignItems='flex-start'>
{address ? (
<GatewayCard
title={t('deposit-card.card_header')}
description={t('deposit-card.sentence-one')}
>
<Stack spacing='24px'>
<Flex gap='4px' alignItems='flex-start'>
{address ? (
<Text
fontSize='md'
color={theme.colors.gray[900]}
fontFamily={theme.fonts.body}
overflowWrap='break-word'
wordBreak='break-word'
cursor='pointer'
onClick={onCopy}
>
{address}
</Text>
) : (
<Text
fontSize='md'
color={theme.colors.red}
fontFamily={theme.fonts.body}
>
{error}
</Text>
)}
<Box>
{hasCopied ? (
<Text
fontSize='md'
fontSize='xs'
fontWeight='semibold'
color={theme.colors.gray[900]}
bgColor={theme.colors.gray[25]}
fontFamily={theme.fonts.body}
overflowWrap='break-word'
wordBreak='break-word'
cursor='pointer'
onClick={onCopy}
p='4px 12px'
borderRadius='16px'
border={`1px solid ${theme.colors.gray[400]}`}
>
{address}
{t('common.copied')}
</Text>
) : (
<Text
fontSize='md'
color={theme.colors.red}
fontFamily={theme.fonts.body}
>
{error}
</Text>
)}
<Box>
{hasCopied ? (
<Text
fontSize='xs'
fontWeight='semibold'
color={theme.colors.gray[900]}
bgColor={theme.colors.gray[25]}
fontFamily={theme.fonts.body}
onClick={onCopy}
p='4px 12px'
borderRadius='16px'
border={`1px solid ${theme.colors.gray[400]}`}
>
{t('common.copied')}
</Text>
) : (
<CopyIcon
color={theme.colors.gray[900]}
height='20px'
width='20px'
onClick={onCopy}
cursor='pointer'
/>
)}
</Box>
</Flex>
<Box>
{address && (
<QRCodeSVG height='200px' width='200px' value={address} />
<CopyIcon
color={theme.colors.gray[900]}
height='20px'
width='20px'
onClick={onCopy}
cursor='pointer'
/>
)}
</Box>
</Stack>
<Flex gap='4px'>
<Link
fontSize='md'
color={theme.colors.blue[600]}
fontFamily={theme.fonts.body}
_hover={{ textDecoration: 'underline' }}
transition={`text-decoration 1s ease-in-out`}
href={`https://mempool.space/address/${address}`}
target='_blank'
rel='noreferrer'
w='fit-content'
>
{t('deposit-card.mempool_deposit_link_text')}
</Link>
<LinkIcon color={theme.colors.blue[600]} />
</Flex>
<Box>
{address && (
<QRCodeSVG height='200px' width='200px' value={address} />
)}
</Box>
</Stack>
<Flex gap='4px'>
<Link
fontSize='md'
color={theme.colors.blue[600]}
fontFamily={theme.fonts.body}
_hover={{ textDecoration: 'underline' }}
transition={`text-decoration 1s ease-in-out`}
href={`https://mempool.space/address/${address}`}
wbobeirne marked this conversation as resolved.
Show resolved Hide resolved
target='_blank'
rel='noreferrer'
w='fit-content'
>
{t('deposit-card.mempool_deposit_link_text')}
</Link>
<LinkIcon color={theme.colors.blue[600]} />
</Flex>
</GatewayCard>
);
});
43 changes: 18 additions & 25 deletions apps/gateway-ui/src/components/GatewayCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,30 @@
import React from 'react';
import { Flex, Stack, useTheme } from '@chakra-ui/react';
import { Card, CardBody, CardHeader, Text } from '@chakra-ui/react';

export interface GatewayCardProps {
title: string;
description?: string;
children: React.ReactNode;
}

export const GatewayCard = React.memo(function GatewayCard({
title,
description,
children,
}: GatewayCardProps) {
const theme = useTheme();

return (
<Flex
borderRadius='8px'
bgColor={theme.colors.white}
boxShadow={theme.shadows.sm}
w='100%'
h='100%'
maxWidth='100%'
maxH='100%'
flexDir='column'
justifyContent='space-between'
>
<Stack spacing='16px' p='24px'>
{children}
</Stack>
<Flex
alignItems='center'
gap='4px'
h='16px'
w='100%'
bgColor={theme.colors.gray[50]}
></Flex>
</Flex>
<Card w='100%' maxWidth='100%'>
<CardHeader>
<Text size='lg' fontWeight='600'>
{title}
</Text>
{description && (
<Text variant='secondary' size='sm'>
{description}
</Text>
)}
</CardHeader>
<CardBody>{children}</CardBody>
</Card>
);
});
16 changes: 4 additions & 12 deletions apps/gateway-ui/src/components/InfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Box,
useClipboard,
} from '@chakra-ui/react';
import { useTranslation } from '@fedimint/utils';
import { formatEllipsized, useTranslation } from '@fedimint/utils';
import { GatewayCard } from '.';
import { ReactComponent as CopyIcon } from '../assets/svgs/copy.svg';
import { ReactComponent as LinkIcon } from '../assets/svgs/linkIcon.svg';
Expand All @@ -26,16 +26,8 @@ export const InfoCard = React.memo(function InfoCard(
const { onCopy, hasCopied } = useClipboard(nodeId);

return (
<GatewayCard>
<Text
fontSize='lg'
fontWeight='600'
color={theme.colors.gray[900]}
fontFamily={theme.fonts.body}
>
{t('info-card.card_header')}
</Text>
<Flex gap='8px'>
<GatewayCard title={t('info-card.card_header')}>
<Flex gap='8px' mb='8px'>
<Text
fontSize='md'
color={theme.colors.gray[900]}
Expand All @@ -45,7 +37,7 @@ export const InfoCard = React.memo(function InfoCard(
cursor='pointer'
onClick={onCopy}
>
{nodeId}
{formatEllipsized(nodeId)}
</Text>
<Box>
{hasCopied ? (
Expand Down
49 changes: 20 additions & 29 deletions apps/gateway-ui/src/components/WithdrawCard.tsx
View file
Open in desktop
wbobeirne marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -96,35 +96,16 @@ export const WithdrawCard = React.memo(function WithdrawCard({
});
};

const description = `${t('withdraw-card.total_bitcoin')} ${
withdrawObject.amount / 100000
EthnTuttle marked this conversation as resolved.
Show resolved Hide resolved
} ${t('common.btc')}`;

return (
<Box w='100%'>
<GatewayCard>
<Stack spacing='4px' h='100%'>
<Text
fontSize='lg'
fontWeight='600'
color={theme.colors.gray[900]}
fontFamily={theme.fonts.body}
>
{t('withdraw-card.card-header')}
</Text>
<Text
fontSize='md'
color={theme.colors.gray[600]}
fontFamily={theme.fonts.body}
>
{t('withdraw-card.total_bitcoin')} {withdrawObject.amount / 100000}{' '}
{t('common.btc')}
</Text>
<Text
cursor='pointer'
fontSize='sm'
color={theme.colors.blue[600]}
fontFamily={theme.fonts.body}
>
{t('withdraw-card.withdraw_all')}
</Text>
</Stack>
<>
EthnTuttle marked this conversation as resolved.
Show resolved Hide resolved
<GatewayCard
title={t('withdraw-card.card-header')}
description={description}
>
<Stack spacing='20px'>
<InputGroup flexDir='column'>
<Text
Expand All @@ -150,6 +131,16 @@ export const WithdrawCard = React.memo(function WithdrawCard({
onChange={(e) => handleInputChange(e)}
name='amount'
/>

<Text
mt='4px'
cursor='pointer'
fontSize='sm'
color={theme.colors.blue[600]}
fontFamily={theme.fonts.body}
>
{t('withdraw-card.withdraw_all')}
</Text>
</InputGroup>
<InputGroup flexDir='column'>
<Text
Expand Down Expand Up @@ -209,7 +200,7 @@ export const WithdrawCard = React.memo(function WithdrawCard({
startWithdrawalCallback={startWithdrawal}
/>
)}
</Box>
</>
);
});

Expand Down
Loading