diff --git a/.changeset/rude-ads-check.md b/.changeset/rude-ads-check.md new file mode 100644 index 00000000..5302fe31 --- /dev/null +++ b/.changeset/rude-ads-check.md @@ -0,0 +1,6 @@ +--- +'@rosen-bridge/ui-kit': minor +--- + +- Revise the default layout to incorporate toolbar buttons into the sidebar for mobile devices +- Create an improved dialogue that aligns with our Figma design and ensures responsiveness diff --git a/.changeset/small-baboons-tap.md b/.changeset/small-baboons-tap.md new file mode 100644 index 00000000..6e5ea193 --- /dev/null +++ b/.changeset/small-baboons-tap.md @@ -0,0 +1,5 @@ +--- +'@rosen-bridge/rosen-app': minor +--- + +Improve the transaction dialog confirmation to enhance its responsiveness and user experience diff --git a/apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx b/apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx index e10645c6..da932b3f 100644 --- a/apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx +++ b/apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx @@ -5,9 +5,10 @@ import { Amount, Box, Card, - Dialog, DialogActions, + DialogContent, Divider, + EnhancedDialog, EnhancedDialogTitle, Grid, LoadingButton, @@ -121,87 +122,93 @@ export const ConnectOrSubmitButton = ({ > {!selectedWallet ? 'CONNECT WALLET' : 'SUBMIT'} - setOpen(false)}> + setOpen(false)} + > } onClose={() => setOpen(false)} > Confirm Transaction - - theme.palette.mode === 'light' - ? theme.palette.primary.light - : theme.palette.primary.dark, - px: 2, - py: 3, - mx: 3, - }} - > - - - - + + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + px: 2, + py: 3, }} > - - {SourceLogo && ( - - - - )} - {source?.label} - - - - - - {TargetLogo && ( - - - - )} - {target?.label} + + - - - - - - - - - - Destination address - - - {walletAddressValue} - - + + + {SourceLogo && ( + + + + )} + {source?.label} + + + + + + {TargetLogo && ( + + + + )} + {target?.label} + + + + + + + + + + + Destination address + + + {walletAddressValue} + + + - + ); }; diff --git a/packages/ui-kit/src/components/common/App.tsx b/packages/ui-kit/src/components/common/App.tsx index f1f09f97..b9529dcf 100644 --- a/packages/ui-kit/src/components/common/App.tsx +++ b/packages/ui-kit/src/components/common/App.tsx @@ -1,9 +1,10 @@ import { ReactNode } from 'react'; import { SnackbarProvider } from '../../contexts'; +import { useMediaQuery } from '../../hooks'; import { ThemeProvider, ThemeProviderProps } from '../../Providers'; import { styled } from '../../styling'; -import { CssBaseline } from '../base'; +import { Box, CssBaseline } from '../base'; import { AppSnackbar } from './AppSnackbar'; const Root = styled('div', { @@ -49,15 +50,33 @@ interface AppProps { } export const App = ({ children, sideBar, theme, toolbar }: AppProps) => { + const isMobile = useMediaQuery( + ('light' in theme ? theme.light : theme).breakpoints.down('tablet'), + ); return ( <> - {sideBar} + {isMobile ? ( + + {sideBar} + {toolbar} + + ) : ( + sideBar + )}
-
{toolbar}
+ {!isMobile && ( +
+ {toolbar} +
+ )} {children}
diff --git a/packages/ui-kit/src/components/common/EnhancedDialog.tsx b/packages/ui-kit/src/components/common/EnhancedDialog.tsx new file mode 100644 index 00000000..31866e82 --- /dev/null +++ b/packages/ui-kit/src/components/common/EnhancedDialog.tsx @@ -0,0 +1,18 @@ +import { styled } from '../../styling'; +import { Dialog } from '../base'; + +/** + * renders an enhanced version of material ui Dialog + */ +export const EnhancedDialog = styled(Dialog)(({ theme }) => ({ + [theme.breakpoints.down('tablet')]: { + '& > .MuiDialog-container': { + 'alignItems': 'end', + '& > .MuiPaper-root': { + margin: 0, + borderBottomRightRadius: 0, + borderBottomLeftRadius: 0, + }, + }, + }, +})); diff --git a/packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx b/packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx index bfa02267..c35c403d 100644 --- a/packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx +++ b/packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { styled } from '@mui/material'; import { Times } from '@rosen-bridge/icons'; +import { useIsMobile } from '../../hooks'; import { DialogTitle, DialogTitleProps, IconButton, SvgIcon } from '../base'; const IconContainer = styled('div')(({ theme }) => ({ @@ -25,15 +26,22 @@ export const EnhancedDialogTitle = ({ onClose, ...props }: EnhancedDialogTitleProps) => { + const isMobile = useIsMobile(); return ( - - {icon && ( + + {!isMobile && icon && ( {icon} )} {props.children} - {onClose && ( + {!isMobile && onClose && ( diff --git a/packages/ui-kit/src/components/common/Toolbar.tsx b/packages/ui-kit/src/components/common/Toolbar.tsx index bd2afcc9..e7d0049e 100644 --- a/packages/ui-kit/src/components/common/Toolbar.tsx +++ b/packages/ui-kit/src/components/common/Toolbar.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import { useIsMobile } from '../../hooks'; import { isLegacyTheme, useTheme } from '../../hooks/useTheme'; import { styled } from '../../styling'; import { Typography, Stack, Grid } from '../base'; @@ -40,6 +41,15 @@ export const Toolbar: React.FC = (props) => { const theme = useTheme(); const textAlign = isCentered ? 'center' : 'inherit'; + const isMobile = useIsMobile(); + + if (isMobile) + return ( +
+ {toolbarActions} +
+ ); + return (
diff --git a/packages/ui-kit/src/components/common/index.ts b/packages/ui-kit/src/components/common/index.ts index 9db3c086..b5e80934 100644 --- a/packages/ui-kit/src/components/common/index.ts +++ b/packages/ui-kit/src/components/common/index.ts @@ -4,6 +4,7 @@ export * from './ApiKeyModal'; export * from './App'; export * from './AppBar'; export * from './AppLogo'; +export * from './EnhancedDialog'; export * from './EnhancedDialogTitle'; export * from './EnhancedTable'; export * from './EnhancedTableCell';