feat: mobile feedback

- update topnav padding - fix alignements - use text-ellipsis wherever possible - adapt inputMode for touch screens
OriginProtocol · Sep 28, 2023 · 3ff261e · 3ff261e
1 parent 2c78068
commit 3ff261e
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 19 deletions.
diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -11,10 +11,10 @@ export const App = () => {
         <Topnav />
         <Container
           sx={{
-            mt: 3,
+            mt: { xs: 3.25, md: 3 },
             mb: 10,
             pt: (theme) => ({
-              xs: `${Number(theme.mixins.toolbar.height) * 2}px`,
+              xs: '112px',
               md: `${theme.mixins.toolbar.height}px`,
             }),
           }}

diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
@@ -43,21 +43,22 @@ export function Topnav(props: BoxProps) {
         backgroundColor: alpha(theme.palette.background.default, 0.6),
         backdropFilter: 'blur(15px)',
         height: {
-          xs: `${Number(theme.mixins.toolbar.height) * 2}px`,
+          xs: '112px',
           md: `${theme.mixins.toolbar.height}px`,
         },
         display: 'grid',
         borderBottom: {
           xs: 'none',
           md: `1px solid ${theme.palette.background.paper}`,
         },
-        gap: { xs: 1, md: 10 },
+        columnGap: { xs: 1, md: 10 },
+        rowGap: { xs: 0, md: 10 },
         alignItems: 'center',
-        paddingInline: {
+        px: {
           xs: 1.5,
           md: 3,
         },
-        paddingBlockStart: {
+        pt: {
           xs: 1.5,
           md: 0,
         },
@@ -101,7 +102,7 @@ export function Topnav(props: BoxProps) {
             md: 'span 1',
           },
           marginBlockStart: {
-            xs: 4,
+            xs: 2,
             md: 0,
           },
           '& .MuiTabs-flexContainer': {
@@ -179,7 +180,7 @@ export function Topnav(props: BoxProps) {
               xs: 0.75,
             },
             minWidth: 36,
-            maxWidth: { xs: 36, sm: 160, lg: 220 },
+            maxWidth: { xs: isConnected ? 36 : 160, sm: 160, lg: 220 },
             fontWeight: 500,
             minHeight: { xs: 36, md: 44 },
           }}
@@ -197,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',
         }}
       />

diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
@@ -85,6 +85,7 @@ function ValueContainer({
         paddingBlock: 2,
         alignItems: 'center',
         textAlign: 'center',
+        justifyContent: 'space-between',
         flex: 1,
         ...rest?.sx,
       }}

diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
@@ -1,4 +1,12 @@
-import { Box, Divider, Skeleton, Stack, Typography } from '@mui/material';
+import {
+  Box,
+  Divider,
+  Skeleton,
+  Stack,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import { InfoTooltip } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
 import { useGasPrice, usePrices } from '@origin/shared/providers';
@@ -18,6 +26,8 @@ import type { StackProps } from '@mui/material';
 
 export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
   const intl = useIntl();
+  const theme = useTheme();
+  const isXs = useMediaQuery(theme.breakpoints.down('sm'));
   const { data: prices, isLoading: isPricesLoading } = usePrices();
   const [{ amountOut, gas, rate, split, isEstimateLoading }] = useRedeemState();
   const { data: gasPrice, isLoading: gasPriceLoading } = useGasPrice(gas);
@@ -36,12 +46,20 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
           `linear-gradient(${theme.palette.grey[800]}, ${theme.palette.grey[800]}) padding-box,
  linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`,
         ...props?.sx,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
       }}
     >
       <Stack direction="row" alignItems="center" spacing={1} px={2} py={1.5}>
-        <Mix />
+        {!isXs && <Mix />}
         <Stack flex={1} direction="column">
-          <Stack direction="row" alignItems="baseline" gap={1}>
+          <Stack
+            direction="row"
+            alignItems="baseline"
+            gap={1}
+            overflow="hidden"
+            whiteSpace="nowrap"
+          >
             <Typography fontWeight={500}>
               {isEstimateLoading ? (
                 <Skeleton width={100} />
@@ -57,7 +75,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
               )}
             </Typography>
           </Stack>
-          <Typography>
+          <Typography noWrap>
             {intl.formatMessage({
               defaultMessage: 'Redeem for mix via OETH vault',
             })}
@@ -129,6 +147,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
               direction="row"
               justifyContent="space-between"
               alignItems="center"
+              gap={2}
             >
               <Stack direction="row" alignItems="center" spacing={1}>
                 <Box component="img" src={s.token.icon} />
@@ -152,7 +171,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
                 ) : (
                   <Typography
                     fontWeight={500}
-                    color="text.tertiary"
+                    color="text.secondary"
                     sx={{ minWidth: 100, textAlign: 'end' }}
                   >
                     {intl.formatNumber(converted, currencyFormat)}

diff --git a/libs/shared/components/src/Inputs/BigIntInput.tsx b/libs/shared/components/src/Inputs/BigIntInput.tsx
@@ -66,7 +66,7 @@ export const BigIntInput = forwardRef<HTMLInputElement, BigintInputProps>(
         placeholder="0"
         {...rest}
         inputRef={ref}
-        inputMode="decimal"
+        inputMode="numeric"
         value={strVal}
         onChange={handleChange}
         inputProps={{

diff --git a/libs/shared/components/src/Inputs/PercentInput.tsx b/libs/shared/components/src/Inputs/PercentInput.tsx
@@ -64,7 +64,7 @@ export const PercentInput = forwardRef<HTMLInputElement, PercentInputProps>(
         inputRef={ref}
         value={strVal}
         onChange={handleChange}
-        inputMode="decimal"
+        inputMode="numeric"
         inputProps={{
           pattern: `[0-9]*(.[0-9]{0,${precision}})`,
           minLength: 0,

diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -76,7 +76,15 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
 
     return (
       <Stack {...rest}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: 1,
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+          }}
+        >
           <BigIntInput
             {...inputProps}
             value={amount}
@@ -121,13 +129,20 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
               {intl.formatNumber(amountUsd, currencyFormat)}
             </Typography>
           ) : null}
-          <Stack direction="row" alignItems="center" spacing={0.5}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            spacing={0.5}
+            overflow="hidden"
+            whiteSpace="nowrap"
+          >
             {isConnected ? (
               isBalanceLoading ? (
                 <Skeleton width={28} />
               ) : (
                 <>
                   <Typography
+                    noWrap
                     color="text.secondary"
                     variant="body1"
                     sx={{
@@ -136,6 +151,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
                       fontStyle: 'normal',
                       visibility: balance === undefined ? 'hidden' : 'visible',
                       lineHeight: '1.5rem',
+                      textOverflow: 'ellipsis',
                     }}
                   >
                     {intl.formatMessage(
@@ -154,7 +170,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
                         justifyContent: 'center',
                         alignItems: 'center',
                         borderRadius: 1,
-                        minWidth: 0,
+                        minWidth: 36,
                         lineHeight: 1,
                         color: 'text.secondary',
                         padding: (theme) => theme.spacing(0.25, 0.5),