Merge branch '450-enhance-the-default-layout-to-ensure-it-is-fully-re…

…sponsive-across-ui-apps' into 'dev' Resolve "Enhance the default layout to ensure it is fully responsive across UI apps" Closes #450 See merge request ergo/rosen-bridge/ui!377
rosen-bridge · Dec 9, 2024 · 2d84e19 · 2d84e19
2 parents 1f718d1 + 9c10f7d
commit 2d84e19
Show file tree

Hide file tree

Showing 35 changed files with 503 additions and 401 deletions.
diff --git a/.changeset/dull-meals-knock.md b/.changeset/dull-meals-knock.md
@@ -0,0 +1,7 @@
+---
+'@rosen-bridge/watcher-app': minor
+'@rosen-bridge/guard-app': minor
+'@rosen-bridge/rosen-app': minor
+---
+
+Update the root layout to incorporate the latest changes from the UI kit, enhancing its responsiveness
diff --git a/.changeset/popular-trees-fold.md b/.changeset/popular-trees-fold.md
@@ -0,0 +1,8 @@
+---
+'@rosen-bridge/ui-kit': minor
+---
+
+- Implement an App component that integrates common Context providers and supports a default layout
+- Enhance the AppBar and AppLogo components to ensure it is fully responsive
+- Introduce a new component called NavigationBar to manage its styles wherever it is utilized
+- Revise the NavigationButton components to reflect the latest design changes
diff --git a/apps/guard/app/App.tsx b/apps/guard/app/App.tsx
@@ -1,16 +1,10 @@
 'use client';
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { NoSsr } from '@mui/material';
 import { ApiKeyContextProvider } from '@rosen-bridge/shared-contexts';
-import {
-  styled,
-  SnackbarProvider,
-  AppSnackbar,
-  CssBaseline,
-  ThemeProvider,
-} from '@rosen-bridge/ui-kit';
+import { App as AppBase } from '@rosen-bridge/ui-kit';
 import { SWRConfig } from '@rosen-ui/swr-mock';
 
 import { theme } from '@/_theme/theme';
@@ -19,77 +13,19 @@ import { mockedData } from './_mock/mockedData';
 import { SideBar } from './SideBar';
 import { Toolbar } from './Toolbar';
 
-const Root = styled('div')(({ theme }) => ({
-  width: '100vw',
-  height: '100vh',
-  display: 'flex',
-  flexDirection: 'row',
-  backgroundColor: theme.palette.info.dark,
-  backgroundImage:
-    theme.palette.mode === 'light'
-      ? `linear-gradient(180deg, ${theme.palette.info.main} 0%, ${theme.palette.secondary.dark} 100%)`
-      : 'none',
-  [theme.breakpoints.down('tablet')]: {
-    flexDirection: 'column',
-    backgroundImage:
-      theme.palette.mode === 'light'
-        ? `linear-gradient(90deg, ${theme.palette.info.main} 0%, ${theme.palette.secondary.dark} 100%)`
-        : 'none',
-  },
-}));
-
-const Main = styled('main')(({ theme }) => ({
-  flexGrow: 1,
-  overflowY: 'auto',
-  minHeight: '100%',
-  backgroundColor: theme.palette.background.default,
-  borderTopLeftRadius: theme.shape.borderRadius * 2,
-  borderBottomLeftRadius: theme.shape.borderRadius * 2,
-  paddingTop: theme.shape.borderRadius,
-  paddingBottom: theme.shape.borderRadius * 4,
-  paddingLeft: theme.shape.borderRadius * 2,
-  paddingRight: theme.shape.borderRadius * 2,
-
-  [theme.breakpoints.down('tablet')]: {
-    backgroundColor: theme.palette.background.paper,
-    borderTopRightRadius: theme.shape.borderRadius * 2,
-    borderBottomLeftRadius: 0,
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-  },
-}));
-
-interface AppProps {
-  children?: React.ReactNode;
-}
-
-export const App = ({ children }: AppProps) => {
+export const App = ({ children }: { children?: ReactNode }) => {
   return (
     <NoSsr>
-      <ThemeProvider theme={theme}>
-        <>
-          <CssBaseline />
-          <SnackbarProvider>
-            <ApiKeyContextProvider>
-              <Root>
-                <SideBar />
-                <SWRConfig
-                  useMockedApis={
-                    process.env.NEXT_PUBLIC_USE_MOCKED_APIS === 'true'
-                  }
-                  fakeData={mockedData}
-                >
-                  <Main>
-                    <Toolbar />
-                    {children}
-                    <AppSnackbar />
-                  </Main>
-                </SWRConfig>
-              </Root>
-            </ApiKeyContextProvider>
-          </SnackbarProvider>
-        </>
-      </ThemeProvider>
+      <ApiKeyContextProvider>
+        <AppBase sideBar={<SideBar />} theme={theme} toolbar={<Toolbar />}>
+          <SWRConfig
+            useMockedApis={process.env.NEXT_PUBLIC_USE_MOCKED_APIS === 'true'}
+            fakeData={mockedData}
+          >
+            {children}
+          </SWRConfig>
+        </AppBase>
+      </ApiKeyContextProvider>
     </NoSsr>
   );
 };
diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx
@@ -9,7 +9,12 @@ import {
   Moneybag,
   ClipboardNotes,
 } from '@rosen-bridge/icons';
-import { AppBar, AppLogo } from '@rosen-bridge/ui-kit';
+import {
+  AppBar,
+  AppLogo,
+  NavigationBar,
+  NavigationButton,
+} from '@rosen-bridge/ui-kit';
 
 import packageJson from '../package.json';
 import { useInfo } from './_hooks/useInfo';
@@ -22,6 +27,39 @@ export const SideBar = () => {
 
   const router = useRouter();
 
+  const routes = [
+    {
+      label: 'Dashboard',
+      path: '/',
+      icon: <Dashboard />,
+    },
+    {
+      label: 'Health',
+      path: '/health',
+      icon: <Heartbeat />,
+    },
+    {
+      label: 'Events',
+      path: '/events',
+      icon: <ClipboardNotes />,
+    },
+    {
+      label: 'History',
+      path: '/history',
+      icon: <History />,
+    },
+    {
+      label: 'Assets',
+      path: '/assets',
+      icon: <BitcoinCircle />,
+    },
+    {
+      label: 'Revenues',
+      path: '/revenues',
+      icon: <Moneybag />,
+    },
+  ];
+
   const { data: info, isLoading } = useInfo();
 
   const versions = [
@@ -51,50 +89,28 @@ export const SideBar = () => {
     <AppBar
       logo={
         <Link href="/">
-          <AppLogo darkLogoPath="/dark.png" lightLogoPath="/light.png" />
+          <AppLogo
+            darkLogoPath="/logo-dark-desktop.png"
+            lightLogoPath="/logo-light-desktop.png"
+            darkLogoMobilePath="/logo-dark-mobile.png"
+            lightLogoMobilePath="/logo-light-mobile.png"
+          />
         </Link>
       }
       versions={versions}
-      routes={[
-        {
-          label: 'Dashboard',
-          path: '/',
-          disabled: false,
-          icon: <Dashboard />,
-        },
-        {
-          label: 'Health',
-          path: '/health',
-          disabled: false,
-          icon: <Heartbeat />,
-        },
-        {
-          label: 'Events',
-          path: '/events',
-          disabled: false,
-          icon: <ClipboardNotes />,
-        },
-        {
-          label: 'History',
-          path: '/history',
-          disabled: false,
-          icon: <History />,
-        },
-        {
-          label: 'Assets',
-          path: '/assets',
-          disabled: false,
-          icon: <BitcoinCircle />,
-        },
-        {
-          label: 'Revenues',
-          path: '/revenues',
-          disabled: false,
-          icon: <Moneybag />,
-        },
-      ]}
-      isActive={(route) => pathname === route.path}
-      onNavigate={(route) => router.push(route.path)}
+      navigationBar={
+        <NavigationBar>
+          {routes.map((route) => (
+            <NavigationButton
+              key={route.label}
+              icon={route.icon}
+              isActive={pathname === route.path}
+              label={route.label}
+              onClick={() => router.push(route.path)}
+            />
+          ))}
+        </NavigationBar>
+      }
     />
   );
 };
diff --git a/apps/guard/app/_theme/theme.ts b/apps/guard/app/_theme/theme.ts
@@ -251,6 +251,39 @@ const create = (baseTheme: Theme) =>
           },
         },
       },
+      RosenNavigationBar: {
+        styleOverrides: {
+          root: {
+            [baseTheme.breakpoints.down('tablet')]: {},
+          },
+        },
+      },
+      RosenApp: {
+        styleOverrides: {
+          root: {
+            backgroundColor: baseTheme.palette.info.dark,
+            backgroundImage:
+              baseTheme.palette.mode === 'light'
+                ? `linear-gradient(180deg, ${baseTheme.palette.info.main} 0%, ${baseTheme.palette.secondary.dark} 100%)`
+                : 'none',
+            [baseTheme.breakpoints.down('tablet')]: {
+              backgroundImage:
+                baseTheme.palette.mode === 'light'
+                  ? `linear-gradient(90deg, ${baseTheme.palette.info.main} 0%, ${baseTheme.palette.secondary.dark} 100%)`
+                  : 'none',
+            },
+          },
+          main: {
+            paddingTop: baseTheme.shape.borderRadius,
+            paddingBottom: baseTheme.shape.borderRadius * 4,
+            paddingLeft: baseTheme.shape.borderRadius * 2,
+            paddingRight: baseTheme.shape.borderRadius * 2,
+            [baseTheme.breakpoints.down('tablet')]: {
+              backgroundColor: baseTheme.palette.background.paper,
+            },
+          },
+        },
+      },
     },
   });
 

diff --git a/apps/guard/public/dark.png b/apps/guard/public/dark.png
diff --git a/apps/guard/public/light.png b/apps/guard/public/light.png
diff --git a/apps/rosen/public/dark.png → apps/guard/public/logo-dark-desktop.png b/apps/rosen/public/dark.png → apps/guard/public/logo-dark-desktop.png
diff --git a/apps/guard/public/logo-dark-mobile.png b/apps/guard/public/logo-dark-mobile.png
diff --git a/apps/rosen/public/light.png → apps/guard/public/logo-light-desktop.png b/apps/rosen/public/light.png → apps/guard/public/logo-light-desktop.png
diff --git a/apps/guard/public/logo-light-mobile.png b/apps/guard/public/logo-light-mobile.png
diff --git a/apps/rosen/app/(bridge)/BridgeForm.tsx b/apps/rosen/app/(bridge)/BridgeForm.tsx
@@ -163,8 +163,8 @@ export const BridgeForm = () => {
 
   return (
     <FormContainer>
-      <Grid container spacing={1}>
-        <Grid item mobile={6}>
+      <Grid container spacing={2}>
+        <Grid item mobile={6} tablet={12} laptop={6}>
           <TextField
             id="source"
             select
@@ -190,7 +190,7 @@ export const BridgeForm = () => {
             ))}
           </TextField>
         </Grid>
-        <Grid item mobile={6}>
+        <Grid item mobile={6} tablet={12} laptop={6}>
           <TextField
             id="target"
             select

diff --git a/apps/rosen/app/(bridge)/page.tsx b/apps/rosen/app/(bridge)/page.tsx
@@ -19,24 +19,34 @@ const Background = styled('div')(({ theme }) => ({
   backgroundPosition: 'center center',
   backgroundSize: 'cover',
   zIndex: '0',
+  [theme.breakpoints.down('tablet')]: {
+    display: 'none',
+  },
 }));
 
 const BridgeContainer = styled('div')(({ theme }) => ({
-  'zIndex': '3',
-  'position': 'absolute',
-  'top': '50%',
-  'left': '50%',
-  'transform': 'translate(-50%, -50%)',
-  'maxWidth': theme.breakpoints.values.desktop,
-  'width': '100%',
-  'gap': theme.spacing(3),
-  'padding': theme.spacing(4),
-  'display': 'grid',
-  'gridTemplateColumns': '8fr 4fr',
-  'gridTemplateRows': '1fr auto auto',
-  '& > button': {
-    width: '50%',
-    justifySelf: 'flex-end',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(3),
+  [theme.breakpoints.up('tablet')]: {
+    'zIndex': '3',
+    'position': 'absolute',
+    'top': '50%',
+    'left': '50%',
+    'transform': 'translate(-50%, -50%)',
+    'maxWidth': theme.breakpoints.values.desktop,
+    'width': '100%',
+    'padding': theme.spacing(4),
+    'display': 'grid',
+    'gridTemplateColumns': '1fr 1fr',
+    'gridTemplateRows': '1fr auto auto',
+    '& > button': {
+      width: '50%',
+      justifySelf: 'flex-end',
+    },
+  },
+  [theme.breakpoints.up('laptop')]: {
+    gridTemplateColumns: '8fr 4fr',
   },
 }));