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-303] Feat/ux feedback #53

Merged
merged 23 commits into from
Sep 29, 2023
Merged

[TAS-303] Feat/ux feedback #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
d5b76ab
feat: theming
toniocodo Sep 26, 2023
4d75968
feat: design and revamp
toniocodo Sep 26, 2023
00ae472
feat: product team feedback
toniocodo Sep 26, 2023
78b76a3
feat: feedback
toniocodo Sep 27, 2023
c1a7ace
feat: update history filters
toniocodo Sep 27, 2023
f2d9fe1
feat: update filter buttons disabled states
toniocodo Sep 27, 2023
a167646
feat: clear all filters direct action
toniocodo Sep 27, 2023
9f490d5
feat: spacing and positionning on Swap and Redeem
toniocodo Sep 27, 2023
b283729
feat: feedback
toniocodo Sep 27, 2023
4841577
fix: accurate swap and redeem loading states
toniocodo Sep 27, 2023
c6ced40
feat: update topnav fixed, adapt main layout
toniocodo Sep 27, 2023
287d16a
feat: update balance format
toniocodo Sep 27, 2023
827d913
feat: disable scroll lock for Popover and Dialog
toniocodo Sep 27, 2023
8881ccc
feat: geo fence
toniocodo Sep 27, 2023
2c78068
fix: gaspopover button variant to action
toniocodo Sep 28, 2023
3ff261e
feat: mobile feedback
toniocodo Sep 28, 2023
04324f7
feat: replace ApyChart with ApyHeader, set app min width
toniocodo Sep 28, 2023
8ebd04e
feat: responsiveness
toniocodo Sep 28, 2023
7349fc9
fix: null check eth balance
toniocodo Sep 28, 2023
eb25bfb
fix: overflow token button
toniocodo Sep 28, 2023
dea5228
fix: set inputMode to decimal, remove fixed height
toniocodo Sep 28, 2023
b58e285
fix: input glitch on mobile
toniocodo Sep 28, 2023
4d6c206
refactor: meaningful renaming
toniocodo Sep 29, 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/oeth/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Oeth</title>
<title>OETH</title>
<meta
name="description"
content="An ETH-pegged token that earns yield from all forms of staking"
Expand Down
20 changes: 8 additions & 12 deletions apps/oeth/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,20 @@ export const App = () => {
return (
<>
<CssBaseline />
<Stack>
<Stack minWidth={370}>
<Topnav />
<Container
sx={{
mt: {
xs: 3,
md: 5,
paddingInline: {
xs: 2,
md: 0,
},
},
mt: { xs: 3.25, md: 3 },
mb: 10,
pt: (theme) => ({
xs: '112px',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: seems like this one should be derived on math from the md value.
(i don't really care though)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this padding accounts for the topnav height which has quite strange dimensions when < md: it wraps to 2 rows, the second one having distinct height than the first. I initially just wanted to do theme.mixins.toolbar.height * 2 but designs said otherwise 😅

md: `${theme.mixins.toolbar.height}px`,
}),
}}
maxWidth="sm"
>
<Stack mt={3}>
<Outlet />
</Stack>
<Outlet />
</Container>
</Stack>
</>
Expand Down
115 changes: 47 additions & 68 deletions apps/oeth/src/components/Topnav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,29 +33,40 @@ export function Topnav(props: BoxProps) {
return (
<Box
component="nav"
sx={{
{...props}
sx={(theme) => ({
position: 'fixed',
top: 0,
left: 0,
width: 1,
zIndex: theme.zIndex.appBar,
backgroundColor: alpha(theme.palette.background.default, 0.6),
backdropFilter: 'blur(15px)',
height: {
xs: '112px',
md: `${theme.mixins.toolbar.height}px`,
},
display: 'grid',
borderBlockEnd: {
borderBottom: {
xs: 'none',
md: '1px solid var(--mui-palette-background-paper)',
md: `1px solid ${theme.palette.background.paper}`,
},
gap: { xs: 1, md: 10 },
columnGap: { xs: 1, md: 10 },
rowGap: { xs: 0, md: 10 },
alignItems: 'center',
backgroundColor: 'divider',
paddingInline: {
px: {
xs: 1.5,
md: 3,
},
paddingBlockStart: {
pt: {
xs: 1.5,
md: 0,
},
gridTemplateColumns: {
xs: '1fr 1fr',
md: 'auto 1fr auto',
},
...props?.sx,
}}
})}
>
<Box
component={Link}
Expand Down Expand Up @@ -91,19 +102,9 @@ export function Topnav(props: BoxProps) {
md: 'span 1',
},
marginBlockStart: {
xs: 4,
xs: 2,
md: 0,
},
backgroundColor: 'transparent',
minHeight: 0,
overflow: 'visible',
'& .MuiTabs-fixed': {
overflow: 'visible !important',
},
fontSize: {
xs: '0.875rem',
md: '1rem',
},
'& .MuiTabs-flexContainer': {
justifyContent: {
xs: 'center',
Expand All @@ -117,50 +118,15 @@ export function Topnav(props: BoxProps) {
key={route?.path ?? '/'}
value={route?.path ?? '/'}
label={intl.formatMessage(route.handle.label)}
sx={{
fontSize: {
xs: '0.875rem',
md: '1rem',
},
position: 'relative',
textTransform: 'none',
boxSizing: 'borderBox',
paddingInline: 2,
paddingBlock: { xs: 1, md: 3 },
lineHeight: '1.6875rem',
'&:hover:after': {
content: '""',
width: '100%',
height: '2px',
background: (theme) =>
`linear-gradient(90deg, ${alpha(
theme.palette.primary.main,
0.4,
)} 0%, ${alpha(theme.palette.primary.dark, 0.4)} 100%)`,
position: 'absolute',
left: 0,
bottom: 0,
zIndex: 2,
},
}}
/>
))}
</Tabs>

<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
gap: { xs: 1, md: 2 },
'& > a, & > *': {
fontSize: {
xs: '0.75rem',
md: '1rem',
},
color: (theme) => theme.palette.primary.contrastText,
lineHeight: (theme) => theme.spacing(3),
},
}}
>
<MuiLink
Expand All @@ -169,30 +135,28 @@ export function Topnav(props: BoxProps) {
noWrap
sx={{
borderRadius: 25,
paddingBlock: 0.75,
display: 'grid',
placeContent: 'center',
paddingInline: {
paddingX: {
md: 3,
xs: 2,
},
fontFamily: 'Inter',
fontStyle: 'normal',
paddingY: {
md: 1,
xs: 0.75,
},
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 500,
minHeight: 36,
background: ` linear-gradient(0deg, ${alpha(
minHeight: { xs: 36, md: 44 },
background: `linear-gradient(0deg, ${alpha(
theme.palette.common.white,
0.05,
)} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${
theme.palette.background.paper
};`,
'&:hover': {
background: (theme) => theme.palette.background.paper,
backgroundImage: 'none',
},
color: 'primary.contrastText',
boxSizing: 'border-box',
lineHeight: '1rem',
}}
>
{isMd
Expand All @@ -205,6 +169,21 @@ export function Topnav(props: BoxProps) {
setAccountModalAnchor(e.currentTarget);
}
}}
sx={{
borderRadius: 25,
paddingX: {
md: 3,
xs: 2,
},
paddingY: {
md: 1,
xs: 0.75,
},
minWidth: 36,
maxWidth: { xs: isConnected ? 36 : 160, sm: 160, lg: 220 },
fontWeight: 500,
minHeight: { xs: 36, md: 44 },
}}
/>
<AccountPopover
anchor={accountModalAnchor}
Expand All @@ -219,7 +198,7 @@ export function Topnav(props: BoxProps) {
borderColor: (theme) => theme.palette.background.paper,
position: 'relative',
width: 'calc(100% + 1.5rem)',
bottom: '-3.75rem',
bottom: '-3rem',
left: '-0.75rem',
}}
/>
Expand Down
2 changes: 2 additions & 0 deletions apps/oeth/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
import { chains, queryClient, wagmiConfig } from '@origin/oeth/shared';
import {
CurveProvider,
GeoFenceProvider,
NotificationsProvider,
registerChart,
} from '@origin/shared/providers';
Expand Down Expand Up @@ -42,6 +43,7 @@ root.render(
[RainbowKitProvider, { chains: chains, theme: darkTheme() }],
[CurveProvider],
[NotificationsProvider],
[GeoFenceProvider],
],
<RouterProvider router={createHashRouter(routes)} />,
),
Expand Down
13 changes: 2 additions & 11 deletions libs/oeth/history/src/components/APYContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,24 +85,15 @@ function ValueContainer({
paddingBlock: 2,
alignItems: 'center',
textAlign: 'center',
justifyContent: 'space-between',
flex: 1,
...rest?.sx,
}}
>
<Typography variant="body2" color="text.secondary">
{label}
</Typography>
<Typography
sx={{
fontFamily: 'Sailec',
fontSize: (theme) => theme.typography.pxToRem(20),
fontStyle: 'normal',
fontWeight: 700,
lineHeight: '2rem',
textAlign: 'center',
}}
color="primary.contrastText"
>
<Typography variant="h4" textAlign="center">
{isLoading ? <Skeleton width={60} /> : value}
</Typography>
</Stack>
Expand Down
Loading