From ed5b5d0a2131a78e9221325cfa8ddcccbb47105d Mon Sep 17 00:00:00 2001 From: dcodes05 Date: Fri, 25 Aug 2023 11:17:19 +0200 Subject: [PATCH] fix: matt's feedback --- .../components/Swap/SwapRouteAccordion.tsx | 1 - .../Swap/SwapRouteAccordionItem.tsx | 35 +++++----- .../src/components/Swap/SwapRouteCard.tsx | 2 +- .../src/components/shared/APY.stories.tsx | 1 - libs/defi/oeth/src/components/shared/APY.tsx | 28 ++------ libs/defi/oeth/src/views/History.tsx | 8 +-- libs/defi/oeth/src/views/Swap.tsx | 8 +-- libs/defi/oeth/src/views/Wrap.tsx | 8 +-- libs/shared/assets/files/downarrow.png | Bin 0 -> 438 bytes .../components/src/Cards/SwapCard/Input.tsx | 66 +++++++----------- .../components/src/Cards/SwapCard/Output.tsx | 6 +- .../src/Cards/SwapCard/SwapButton.tsx | 7 +- .../src/Cards/SwapCard/SwapCard.tsx | 8 ++- .../src/Cards/SwapCard/SwapItem.tsx | 1 + .../components/src/Cards/SwapCard/utils.ts | 5 +- libs/shared/components/src/Loader/Loader.tsx | 2 +- .../src/top-nav/ConnectedButton.tsx | 5 +- libs/shared/components/src/top-nav/TopNav.tsx | 19 +++-- libs/shared/components/src/top-nav/utils.ts | 5 +- libs/shared/theme/src/theme.tsx | 14 +++- 20 files changed, 100 insertions(+), 129 deletions(-) create mode 100644 libs/shared/assets/files/downarrow.png diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx index 96d6816cc..b6e06e465 100644 --- a/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx +++ b/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx @@ -31,7 +31,6 @@ export function SwapRouteAccordion({ routes, selected, onSelect, sx }: Props) { backgroundColor: 'grey.900', paddingInline: 2, paddingBlock: 1, - borderColor: 'grey.800', }, ...sx, diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx index 2ee3f1c41..a5583d354 100644 --- a/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx +++ b/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx @@ -27,23 +27,11 @@ export function SwapRouteAccordionItem({ borderRadius: 1, backgroundColor: 'background.paper', border: '1px solid', + // @ts-expect-error complains that color is redefined in hover state borderColor: 'grey.800', paddingInline: 2, paddingBlock: 1, - ':hover': { - borderColor: 'transparent', - background: (theme) => - `linear-gradient(${theme.palette.grey[800]}, ${ - theme.palette.grey[800] - }) padding-box, - linear-gradient(90deg, ${alpha( - theme.palette.primary.main, - 0.4, - )} 0%, ${alpha( - theme.palette.primary.dark, - 0.4, - )} 100%) border-box;`, - }, + ...(selected === index ? { borderColor: 'transparent', @@ -51,7 +39,22 @@ export function SwapRouteAccordionItem({ `linear-gradient(${theme.palette.grey[800]}, ${theme.palette.grey[800]}) padding-box, linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%) border-box;`, } - : {}), + : { + ':hover': { + borderColor: 'transparent', + background: (theme) => + `linear-gradient(${theme.palette.grey[800]}, ${ + theme.palette.grey[800] + }) padding-box, + linear-gradient(90deg, ${alpha( + theme.palette.primary.main, + 0.4, + )} 0%, ${alpha( + theme.palette.primary.dark, + 0.4, + )} 100%) border-box;`, + }, + }), }} onClick={() => onSelect(index)} role="button" @@ -65,7 +68,7 @@ export function SwapRouteAccordionItem({ = { component: APY, title: 'OETH/APY', args: { - tokenIcon: ' /images/oeth.svg', value: 8.71, balance: 250.1937, pendingYield: 0.0023, diff --git a/libs/defi/oeth/src/components/shared/APY.tsx b/libs/defi/oeth/src/components/shared/APY.tsx index 15ef8e6f0..6d820d7f7 100644 --- a/libs/defi/oeth/src/components/shared/APY.tsx +++ b/libs/defi/oeth/src/components/shared/APY.tsx @@ -10,26 +10,18 @@ import { Stack, Typography, } from '@mui/material'; -import { Icon } from '@origin/shared/components'; import { useIntl } from 'react-intl'; const days = [7, 30]; interface Props { value: number; - tokenIcon: string; balance: number; pendingYield: number; earnings: number; } -export function APY({ - value, - tokenIcon, - balance, - pendingYield, - earnings, -}: Props) { +export function APY({ value, balance, pendingYield, earnings }: Props) { const intl = useIntl(); const [selectedPeriod, setSelectedPeriod] = useState(30); const [anchorEl, setAnchorEl] = React.useState(null); @@ -126,12 +118,13 @@ export function APY({ marginInlineStart: 1, alignSelf: 'center', position: 'relative', - height: '26px', + height: '1rem', + width: '1rem', borderRadius: '100%', top: '-2px', }} > - + @@ -147,7 +140,6 @@ export function APY({ direction="row" > @@ -191,7 +183,6 @@ export function APY({ function ValueContainer({ text, value, - icon, }: { text: string; value: string; @@ -219,17 +210,6 @@ function ValueContainer({ }, }} > - {icon ? ( - - ) : undefined} - {value} diff --git a/libs/defi/oeth/src/views/History.tsx b/libs/defi/oeth/src/views/History.tsx index 3d9ab326e..23f534ce3 100644 --- a/libs/defi/oeth/src/views/History.tsx +++ b/libs/defi/oeth/src/views/History.tsx @@ -3,13 +3,7 @@ import { APY, HistoryCard } from '../components'; export function HistoryView() { return ( <> - + ); diff --git a/libs/defi/oeth/src/views/Swap.tsx b/libs/defi/oeth/src/views/Swap.tsx index 13b0bf7cb..8b5625709 100644 --- a/libs/defi/oeth/src/views/Swap.tsx +++ b/libs/defi/oeth/src/views/Swap.tsx @@ -5,13 +5,7 @@ import { APY, Swap } from '../components'; export function SwapView() { return ( <> - + diff --git a/libs/defi/oeth/src/views/Wrap.tsx b/libs/defi/oeth/src/views/Wrap.tsx index e1527e6a2..364480292 100644 --- a/libs/defi/oeth/src/views/Wrap.tsx +++ b/libs/defi/oeth/src/views/Wrap.tsx @@ -8,13 +8,7 @@ export function WrapView() { const intl = useIntl(); return ( <> - + m^1+^gZ_?aq5U%)Sw@pp+`pr=r8r+X=;#A`n9SnEApW^14P*#bSh7NX-N^ zxk2Hg7`UPj7Lj_RwgeeEmpPDhyHlX-JXE<~GE-U+6$z{Ki?gIV9HMS#UJl01-Scrb zPoQM(gb`Z(yTms|9%=pbs(L}BT9$w#?VFBH+z!7_clh{)uthsaN>J6!MB`GOj; ziMe4?@a?xGFfFOK01Dp_Tc^is?E?=Zi=S}$5v*76C^1I4eLa{w|I+`yC-caufY8=$ z theme.shape.borderRadius, - borderStartEndRadius: (theme) => theme.shape.borderRadius, + borderRadius: 1, }, '&:hover': { background: (theme) => @@ -80,9 +81,9 @@ export function Input({ - + + + {baseTokenValue !== undefined ? ( isLoading ? ( @@ -138,39 +136,23 @@ export function Input({ ) ) : undefined} - - {baseTokenBalance ? ( - - {intl.formatMessage( - { defaultMessage: 'Balance: {number}' }, - { number: intl.formatNumber(baseTokenBalance, currencyFormat) }, - )} - {/* alpha(theme.palette.common.white, 0.1), - }} - > - max - */} - - ) : undefined} + + {intl.formatMessage( + { defaultMessage: 'Balance: {number}' }, + { + number: intl.formatNumber(baseTokenBalance || 0, currencyFormat), + }, + )} + ); diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx index e9f24a3f1..4ea929158 100644 --- a/libs/shared/components/src/Cards/SwapCard/Output.tsx +++ b/libs/shared/components/src/Cards/SwapCard/Output.tsx @@ -41,6 +41,7 @@ export function Output({ backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2), ...cardStyles, paddingBlock: 3.0625, + boxSizing: 'border-box', }} > @@ -53,8 +54,9 @@ export function Output({ fontWeight: 700, fontStyle: 'normal', fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif', + flex: 1, + alignSelf: 'end', lineHeight: '1.5rem', - marginBlockStart: 0.4, color: (theme) => exchangeTokenQuantity === 0 ? theme.palette.text.secondary @@ -71,7 +73,9 @@ export function Output({ {...(!isSwapped ? { additionalNode: exchangeTokenNode } : {})} sx={{ justifySelf: 'end' }} /> + + {exchangeTokenValue !== undefined ? ( isLoading ? ( diff --git a/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx b/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx index 2aee2c706..01f350130 100644 --- a/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx +++ b/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx @@ -18,16 +18,17 @@ export function SwapButton({ onClick, sx, ...rest }: Props) { zIndex: 2, width: { md: '3rem', xs: '2rem' }, height: { md: '3rem', xs: '2rem' }, - fill: (theme) => theme.palette.background.paper, strokeWidth: (theme) => theme.typography.pxToRem(2), stroke: (theme) => theme.palette.grey[700], transform: { xs: 'translateY(-20%)', md: 'translateY(-8%)' }, - backgroundColor: (theme) => theme.palette.divider, + border: '1px solid', + borderColor: 'divider', + backgroundColor: (theme) => theme.palette.background.paper, '& img': { transition: (theme) => theme.transitions.create('transform'), }, '&:hover': { - backgroundColor: (theme) => theme.palette.background.default, + backgroundColor: (theme) => theme.palette.background.paper, '& img': { transform: 'rotate(-180deg)', }, diff --git a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx index bc2e2a65e..13e3ff0c9 100644 --- a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx +++ b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx @@ -59,7 +59,13 @@ export function SwapCard({ }: Props) { const [isSwapped, setSwapState] = useState(false); return ( - + diff --git a/libs/shared/components/src/Cards/SwapCard/utils.ts b/libs/shared/components/src/Cards/SwapCard/utils.ts index 92cfa08ae..f9ac34f1a 100644 --- a/libs/shared/components/src/Cards/SwapCard/utils.ts +++ b/libs/shared/components/src/Cards/SwapCard/utils.ts @@ -1,8 +1,5 @@ export const styles = { - display: 'grid', + display: 'flex', justifyContent: 'space-between', - alignContent: 'end', gap: 2.5, - gridTemplateColumns: '1fr auto', - rowGap: 1, }; diff --git a/libs/shared/components/src/Loader/Loader.tsx b/libs/shared/components/src/Loader/Loader.tsx index cc5dedb7c..caf8ea37a 100644 --- a/libs/shared/components/src/Loader/Loader.tsx +++ b/libs/shared/components/src/Loader/Loader.tsx @@ -8,7 +8,7 @@ export function Loader({ sx, ...rest }: Props) { return ( diff --git a/libs/shared/components/src/top-nav/ConnectedButton.tsx b/libs/shared/components/src/top-nav/ConnectedButton.tsx index 322acf78a..605bc8f05 100644 --- a/libs/shared/components/src/top-nav/ConnectedButton.tsx +++ b/libs/shared/components/src/top-nav/ConnectedButton.tsx @@ -100,7 +100,7 @@ export function ConnectedButton({ sx={{ borderRadius: 7, paddingInline: 2.375, - paddingBlock: 0.5, + paddingBlock: 1.25, fontSize: '0.75rem', lineHeight: '0.75rem', '&:hover': { @@ -171,8 +171,7 @@ export function ConnectButton({ display: 'flex', alignItems: 'center', paddingInline: { xs: 1, sm: 3 }, - paddingInlineStart: { xs: 1, sm: 1 }, - paddingBlock: 1, + paddingInlineStart: { xs: 1, sm: connected ? 1 : 3 }, borderRadius: 25, background: (theme) => connected diff --git a/libs/shared/components/src/top-nav/TopNav.tsx b/libs/shared/components/src/top-nav/TopNav.tsx index 48b957740..b5b8d7c57 100644 --- a/libs/shared/components/src/top-nav/TopNav.tsx +++ b/libs/shared/components/src/top-nav/TopNav.tsx @@ -7,6 +7,7 @@ import { Link as MuiLink, Tab, Tabs, + useMediaQuery, useTheme, } from '@mui/material'; import { useIntl } from 'react-intl'; @@ -38,6 +39,7 @@ export function TopNav({ ...rest }: Props) { const theme = useTheme(); + const isSmall = useMediaQuery(theme.breakpoints.down('md')); const intl = useIntl(); const [value, setValue] = useState(selected); return ( @@ -62,10 +64,6 @@ export function TopNav({ xs: '1fr 1fr', md: 'auto 1fr auto', }, - rowGap: { - xs: 1.5, - md: 0, - }, ...sx, }} > @@ -100,6 +98,10 @@ export function TopNav({ xs: 'span 2', md: 'span 1', }, + marginBlockStart: { + xs: 4, + md: 0, + }, backgroundColor: 'transparent', minHeight: 0, overflow: 'visible', @@ -159,8 +161,9 @@ export function TopNav({ sx={{ display: 'flex', justifyContent: 'flex-end', + alignItems: 'stretch', gap: { xs: 1, md: 2 }, - '& > a': { + '& > a, & > *': { fontSize: { xs: '0.75rem', md: '1rem', @@ -196,7 +199,7 @@ export function TopNav({ }, }} > - {theme.breakpoints.down('md') + {isSmall ? intl.formatMessage({ defaultMessage: 'IPFS' }) : intl.formatMessage({ defaultMessage: 'View on IPFS' })} @@ -222,7 +225,9 @@ export function TopNav({ gridRowStart: 1, borderColor: 'background.paper', position: 'relative', - bottom: '-4rem', + width: 'calc(100% + 1.5rem)', + bottom: '-3.75rem', + left: '-0.75rem', }} /> diff --git a/libs/shared/components/src/top-nav/utils.ts b/libs/shared/components/src/top-nav/utils.ts index 67eb42df6..ab7a6de0c 100644 --- a/libs/shared/components/src/top-nav/utils.ts +++ b/libs/shared/components/src/top-nav/utils.ts @@ -5,10 +5,11 @@ import type { SxProps, Theme } from '@mui/material'; export const styles: SxProps = { backgroundColor: 'background.paper', borderRadius: 25, - paddingBlock: 1, + paddingBlock: 0.75, paddingInline: { xs: 2, md: 3 }, color: 'primary.contrastText', - boxShadow: (theme) => theme.shadows['24'], + boxSizing: 'border-box', + lineHeight: '1rem', }; export const messages = { diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index 9b90ffdd0..7a1f7861b 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/libs/shared/theme/src/theme.tsx @@ -140,6 +140,13 @@ export const theme = extendTheme({ }, }, }, + MuiPaper: { + styleOverrides: { + root: { + backgroundImage: 'none', + }, + }, + }, MuiTab: { styleOverrides: { root: ({ theme }) => ({ @@ -160,6 +167,10 @@ export const theme = extendTheme({ styleOverrides: { indicator: ({ theme }) => ({ background: theme.palette.background.gradient2, + transition: theme.transitions.create('all', { + duration: theme.transitions.duration.shortest, + easing: theme.transitions.easing.easeInOut, + }), }), }, }, @@ -246,11 +257,12 @@ export const theme = extendTheme({ borderRadius: theme.shape.borderRadius, backgroundColor: theme.palette.grey[900], border: '1px solid', - borderColor: alpha(theme.palette.grey[200], 0.2), + borderColor: theme.palette.grey[800], boxShadow: 'none', '&:before': { height: 0, }, + backgroundImage: 'none', }), }, },