fix: Invoice form layout

bigcapitalhq · Oct 12, 2024 · b7b86bb · b7b86bb
1 parent 817ef90
commit b7b86bb
Show file tree

Hide file tree

Showing 38 changed files with 1,577 additions and 935 deletions.
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -17,6 +17,8 @@
     "@casl/ability": "^5.4.3",
     "@casl/react": "^2.3.0",
     "@craco/craco": "^5.9.0",
+    "@emotion/css": "^11.13.4",
+    "@emotion/react": "^11.13.3",
     "@reduxjs/toolkit": "^1.2.5",
     "@stripe/connect-js": "^3.3.12",
     "@stripe/react-connect-js": "^3.3.13",
@@ -48,6 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+    "@xstyled/emotion": "^3.8.1",
     "accounting": "^0.4.1",
     "axios": "^1.6.0",
     "basscss": "^8.0.2",
@@ -124,6 +127,7 @@
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
     "stylis-rtlcss": "^2.1.1",
+    "theme-ui": "^0.16.2",
     "typescript": "^4.8.3",
     "yup": "^0.28.1"
   },

diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx
@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { defaultTheme, ThemeProvider } from '@xstyled/emotion';
 import { lazy, Suspense } from 'react';
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
@@ -35,37 +36,52 @@ const OneClickDemoPage = lazy(
 const PaymentPortalPage = lazy(
   () => import('@/containers/PaymentPortal/PaymentPortalPage'),
 );
+
+
+const theme = {
+  ...defaultTheme,
+  // Customize your theme here
+}
+
 /**
  * App inner.
  */
 function AppInsider({ history }) {
   return (
     <div className="App">
       <DashboardThemeProvider>
-        <Suspense fallback={'Loading...'}>
-          <Router history={history}>
-            <Switch>
-              <Route path={'/one_click_demo'} children={<OneClickDemoPage />} />
-              <Route path={'/auth/register/verify'}>
-                <EnsureAuthenticated>
-                  <EnsureUserEmailNotVerified>
-                    <RegisterVerify />
-                  </EnsureUserEmailNotVerified>
-                </EnsureAuthenticated>
-              </Route>
+        <ThemeProvider theme={theme}>
+          <Suspense fallback={'Loading...'}>
+            <Router history={history}>
+              <Switch>
+                <Route
+                  path={'/one_click_demo'}
+                  children={<OneClickDemoPage />}
+                />
+                <Route path={'/auth/register/verify'}>
+                  <EnsureAuthenticated>
+                    <EnsureUserEmailNotVerified>
+                      <RegisterVerify />
+                    </EnsureUserEmailNotVerified>
+                  </EnsureAuthenticated>
+                </Route>
 
-              <Route
-                path={'/auth/email_confirmation'}
-                children={<EmailConfirmation />}
-              />
-              <Route path={'/auth'} children={<AuthenticationPage />} />
-              <Route path={'/payment/:linkId'} children={<PaymentPortalPage />} />
-              <Route path={'/'} children={<DashboardPrivatePages />} />
-            </Switch>
-          </Router>
-        </Suspense>
+                <Route
+                  path={'/auth/email_confirmation'}
+                  children={<EmailConfirmation />}
+                />
+                <Route path={'/auth'} children={<AuthenticationPage />} />
+                <Route
+                  path={'/payment/:linkId'}
+                  children={<PaymentPortalPage />}
+                />
+                <Route path={'/'} children={<DashboardPrivatePages />} />
+              </Switch>
+            </Router>
+          </Suspense>
 
-        <GlobalErrors />
+          <GlobalErrors />
+        </ThemeProvider>
       </DashboardThemeProvider>
     </div>
   );

diff --git a/packages/webapp/src/components/Dashboard/DashboardInsider.tsx b/packages/webapp/src/components/Dashboard/DashboardInsider.tsx
@@ -2,13 +2,15 @@
 import React from 'react';
 import classnames from 'classnames';
 import { LoadingIndicator } from '../Indicator';
+import { css } from '@emotion/css';
 
 export function DashboardInsider({
   loading,
   children,
   name,
   mount = false,
   className,
+  style
 }) {
   return (
     <div
@@ -17,9 +19,11 @@ export function DashboardInsider({
           dashboard__insider: true,
           'dashboard__insider--loading': loading,
           [`dashboard__insider--${name}`]: !!name,
+
         },
         className,
       )}
+      style={style}
     >
       <LoadingIndicator loading={loading} mount={mount}>
         {children}

diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx
@@ -0,0 +1,90 @@
+import React, { FC } from 'react';
+import clsx from 'classnames';
+import { x, SystemProps } from '@xstyled/emotion';
+import { css } from '@emotion/css';
+import { Group, GroupProps } from '@/components';
+
+interface PageFormProps extends SystemProps {
+  children: React.ReactNode;
+}
+
+/**
+ *
+ * @returns {React.ReactNode}
+ */
+export const PageForm = ({ children, ...props }: PageFormProps) => {
+  return (
+    <x.div display="flex" flexDirection={'column'} overflow="hidden" {...props}>
+      {children}
+    </x.div>
+  );
+};
+PageForm.displayName = 'PageFormBody';
+
+/**
+ *
+ * @returns {React.ReactNode}
+ */
+const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({
+  children,
+}) => {
+  return (
+    <x.div flex="1" overflow="auto">
+      {children}{' '}
+    </x.div>
+  );
+};
+PageFormBody.displayName = 'PageFormBody';
+
+/**
+ *
+ * @returns {React.ReactNode}
+ */
+const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => {
+  return <x.div>{children} </x.div>;
+};
+
+PageFormFooter.displayName = 'PageFormFooter';
+
+const footerActionsStyle = `
+  width: 100%;
+  background: #fff;
+  padding: 14px 18px;
+  border-top: 1px solid rgb(210, 221, 226);
+  box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+
+  .bp4-button-group{
+    .bp4-button{
+      &:not(:last-child),
+      &.bp4-popover-wrapper:not(:last-child) {
+        border-right: 1px solid rgba(92, 112, 127, 0.3);
+        margin-right: 0;
+
+        &.bp4-intent-primary{
+          border-right: 1px solid rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+  }
+`;
+
+const PageFormFooterActions: FC<GroupProps> = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  return (
+    <Group
+      spacing={20}
+      {...restProps}
+      className={clsx(css(footerActionsStyle), className)}
+    >
+      {children}
+    </Group>
+  );
+};
+PageFormFooterActions.displayName = 'PageFormFooterActions';
+
+PageForm.Body = PageFormBody;
+PageForm.Footer = PageFormFooter;
+PageForm.FooterActions = PageFormFooterActions;
diff --git a/packages/webapp/src/components/PageForm/index.ts b/packages/webapp/src/components/PageForm/index.ts
@@ -2,3 +2,4 @@
 export * from './FormTopbar';
 export * from './FormTopbarSelectInputs';
 export * from './PageFormBigNumber';
+export * from './PageForm';
diff --git a/packages/webapp/src/components/Paper/Paper.tsx b/packages/webapp/src/components/Paper/Paper.tsx
@@ -1,13 +1,20 @@
-// @ts-nocheck
 import React from 'react';
-import styled from 'styled-components';
+import { x, SystemProps } from '@xstyled/emotion';
 
-export function Paper({ children, className }) {
-  return <PaperRoot className={className}>{children}</PaperRoot>;
+interface PaperProps extends SystemProps {
+  children: React.ReactNode;
 }
 
-const PaperRoot = styled.div`
-  border: 1px solid #d2dce2;
-  background: #fff;
-  padding: 10px;
-`;
+export const Paper = ({ children, ...props }: PaperProps) => {
+  return (
+    <x.div
+      background={'white'}
+      p={'10px'}
+      border={'1px solid #d2dce2'}
+      {...props}
+    >
+      {children}
+    </x.div>
+  );
+};
+Paper.displayName = 'Paper';