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

[TAS-178] Matt's UI feedback #20

Closed
wants to merge 2 commits into from
Closed

[TAS-178] Matt's UI feedback #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
722e195
fix: matt's feedback
dcodes05 Aug 25, 2023
35322d9
style: minor changes around input, output, top nav and apy cards
dcodes05 Sep 4, 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
8 changes: 5 additions & 3 deletions libs/defi/oeth/src/components/Swap/GasPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ import {
import { isNumber } from 'lodash';
import { useIntl } from 'react-intl';

import type { Theme } from '@mui/material';
import type { SxProps } from '@mui/material';

const defaultPriceTolerance = 0.01;

const gridStyles = {
display: 'grid',
gridTemplateColumns: (theme: Theme) => `1.5fr 1fr`,
gridTemplateColumns: `1.5fr 1fr`,
gap: 1,
justifyContent: 'space-between',
alignItems: 'center',
Expand All @@ -33,9 +33,10 @@ const gridStyles = {
interface Props {
gasPrice: number;
onPriceToleranceChange: (value: number) => void;
sx?: SxProps;
}

export function GasPopover({ gasPrice, onPriceToleranceChange }: Props) {
export function GasPopover({ gasPrice, onPriceToleranceChange, sx }: Props) {
const theme = useTheme();
const intl = useIntl();
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
Expand All @@ -49,6 +50,7 @@ export function GasPopover({ gasPrice, onPriceToleranceChange }: Props) {
<IconButton
onClick={(e) => setAnchorEl(e.currentTarget)}
data-testid="gas-popover-button"
sx={{ ...sx }}
>
<img src="/images/settings-icon.svg" />
</IconButton>
Expand Down
6 changes: 6 additions & 0 deletions libs/defi/oeth/src/components/Swap/Swap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useIntl } from 'react-intl';
import { GasPopover } from './GasPopover';
import { SwapRoute } from './SwapRoute';

import type { Theme } from '@mui/material';
import type { Option } from '@origin/shared/components';

export function Swap() {
Expand Down Expand Up @@ -87,6 +88,11 @@ export function Swap() {
<GasPopover
gasPrice={21}
onPriceToleranceChange={(tolerance) => null}
// @ts-expect-error type mistmatch
sx={{
position: 'relative',
right: (theme: Theme) => theme.spacing(-0.75),
}}
/>
</Stack>
}
Expand Down
1 change: 1 addition & 0 deletions libs/defi/oeth/src/components/Swap/SwapRoute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export function SwapRoute({ isLoading = false, routes }: Props) {
border: '1px solid',
borderColor: (theme) => theme.palette.background.default,
backgroundColor: 'grey.900',
borderRadius: 1,
}}
title={
isLoading ? (
Expand Down
1 change: 0 additions & 1 deletion libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export function SwapRouteAccordion({ routes, selected, onSelect, sx }: Props) {
backgroundColor: 'grey.900',
paddingInline: 2,
paddingBlock: 1,
borderColor: 'grey.800',
},

...sx,
Expand Down
35 changes: 19 additions & 16 deletions libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,31 +27,34 @@ 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',
background: (theme) =>
`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"
Expand All @@ -65,7 +68,7 @@ export function SwapRouteAccordionItem({
<Stack
direction="row"
alignItems="center"
gap={2}
gap={1}
sx={{ flex: { xs: '0 0 100%', md: 1 } }}
>
<Box
Expand Down
2 changes: 1 addition & 1 deletion libs/defi/oeth/src/components/Swap/SwapRouteCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function SwapRouteCard({ index, selected, onSelect, route }: Props) {
<Stack
direction="row"
alignItems="center"
gap={1}
gap={0.5}
sx={{ position: 'relative' }}
>
<Box
Expand Down
1 change: 0 additions & 1 deletion libs/defi/oeth/src/components/shared/APY.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const meta: Meta<typeof APY> = {
component: APY,
title: 'OETH/APY',
args: {
tokenIcon: ' /images/oeth.svg',
value: 8.71,
balance: 250.1937,
pendingYield: 0.0023,
Expand Down
38 changes: 9 additions & 29 deletions libs/defi/oeth/src/components/shared/APY.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | HTMLElement>(null);
Expand Down Expand Up @@ -66,7 +58,7 @@ export function APY({
<Stack
direction="row"
flexWrap="wrap"
gap={{ xs: 1, md: 2 }}
gap={{ xs: 1, md: 1.75 }}
sx={{ width: '100%' }}
>
<Box
Expand All @@ -78,10 +70,11 @@ export function APY({
borderColor: 'grey.800',
flexBasis: {
xs: '100%',
md: '25%',
md: '9.4rem',
},
display: 'grid',
placeContent: 'center',
boxSizing: 'border-box',
}}
>
<Typography
Expand Down Expand Up @@ -118,20 +111,20 @@ export function APY({
})}
</Typography>
<IconButton
disableRipple
onClick={(e) => setAnchorEl(e.currentTarget)}
sx={{
backgroundColor: (theme) =>
alpha(theme.palette.common.white, 0.15),
marginInlineStart: 1,
alignSelf: 'center',
position: 'relative',
height: '26px',
height: '1rem',
width: '1rem',
borderRadius: '100%',
top: '-2px',
}}
>
<Box component={'img'} src={`/images/downarrow.svg`} />
<Box component={'img'} src={`/images/downarrow.png`} />
</IconButton>
</Stack>
</Box>
Expand All @@ -147,13 +140,12 @@ export function APY({
direction="row"
>
<ValueContainer
icon={tokenIcon}
text={intl.formatMessage({ defaultMessage: 'OETH Balance' })}
value={intl.formatNumber(balance, { minimumFractionDigits: 4 })}
/>
<Box
sx={{
flex: { xs: 0.5, md: 1 },
flex: { xs: 0.5, md: 0.25 },
display: 'flex',
justifyContent: 'center',
paddingBlock: 0.75,
Expand All @@ -170,7 +162,7 @@ export function APY({
/>
<Box
sx={{
flex: { xs: 0.5, md: 1 },
flex: { xs: 0.5, md: 0.25 },
display: 'flex',
justifyContent: 'center',
paddingBlock: 0.75,
Expand All @@ -191,7 +183,6 @@ export function APY({
function ValueContainer({
text,
value,
icon,
}: {
text: string;
value: string;
Expand Down Expand Up @@ -219,17 +210,6 @@ function ValueContainer({
},
}}
>
{icon ? (
<Icon
sx={{
width: '0.75rem',
height: '0.75rem',
marginInlineEnd: 0.5,
}}
src={icon}
/>
) : undefined}

{value}
</Stack>
</Box>
Expand Down
8 changes: 1 addition & 7 deletions libs/defi/oeth/src/views/History.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,7 @@ import { APY, HistoryCard } from '../components';
export function HistoryView() {
return (
<>
<APY
value={6.71}
balance={0}
pendingYield={0}
earnings={0}
tokenIcon="/images/oeth.svg"
/>
<APY value={6.71} balance={0} pendingYield={0} earnings={0} />
<HistoryCard />
</>
);
Expand Down
8 changes: 1 addition & 7 deletions libs/defi/oeth/src/views/Swap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import { APY, Swap } from '../components';
export function SwapView() {
return (
<>
<APY
value={6.71}
balance={0}
pendingYield={0}
earnings={0}
tokenIcon="/images/oeth.svg"
/>
<APY value={6.71} balance={0} pendingYield={0} earnings={0} />

<Stack gap={3} mt={3}>
<Swap />
Expand Down
8 changes: 1 addition & 7 deletions libs/defi/oeth/src/views/Wrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,7 @@ export function WrapView() {
const intl = useIntl();
return (
<>
<APY
value={6.71}
balance={0}
pendingYield={0}
earnings={0}
tokenIcon=" /images/currency/woeth-icon-small.svg"
/>
<APY value={6.71} balance={0} pendingYield={0} earnings={0} />

<Stack gap={3} mt={3}>
<Card
Expand Down
Binary file added libs/shared/assets/files/downarrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion libs/shared/components/src/Cards/SwapCard/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function ActionButton({ sx, children, ...rest }: Props) {
lineHeight: '2rem',
borderRadius: 2,
fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
fontWeight: 400,
fontWeight: 500,
fontStyle: 'normal',
boxShadow: (theme) => theme.shadows[24],
'&:hover': {
Expand Down
Loading