diff --git a/packages/webapp/package.json b/packages/webapp/package.json index effb13ba1..c090e55ee 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -79,6 +79,7 @@ "path-browserify": "^1.0.1", "plaid": "^9.3.0", "plaid-threads": "^11.4.3", + "polished": "^4.3.1", "prop-types": "15.8.1", "query-string": "^7.1.1", "ramda": "^0.27.1", diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx index bee44902f..134f74bba 100644 --- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx @@ -1,20 +1,12 @@ -import { Box } from '@/components'; +import { Box, Stack } from '@/components'; import { useElementCustomizeContext } from './ElementCustomizeProvider'; export function ElementCustomizePreviewContent() { const { PaperTemplate } = useElementCustomizeContext(); return ( - + {PaperTemplate} - + ); } - diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx index a756d4127..3227708f0 100644 --- a/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx +++ b/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx @@ -1,8 +1,9 @@ import { Text, Classes, Button, Intent, ButtonProps } from '@blueprintjs/core'; import clsx from 'classnames'; +import { css } from '@emotion/css'; +import { lighten } from 'polished'; import { Box, Group, Stack } from '@/components'; import styles from './PaymentPortal.module.scss'; -import { css } from '@emotion/css'; export interface PaymentPageProps { // # Company name @@ -58,6 +59,8 @@ export interface PaymentPageProps { // # Copyright copyrightText?: string; + + classNames?: Record } export function InvoicePaymentPage({ @@ -67,7 +70,7 @@ export function InvoicePaymentPage({ organizationAddress, // # Colors - primaryColor, + primaryColor = 'rgb(0, 82, 204)', // # Customer customerName, @@ -114,9 +117,11 @@ export function InvoicePaymentPage({ // # Copyright copyrightText = `© 2024 Bigcapital Technology, Inc.
All rights reserved.`, + + classNames, }: PaymentPageProps) { return ( - + @@ -217,6 +222,11 @@ export function InvoicePaymentPage({ css` &.bp4-intent-primary { background-color: ${primaryColor}; + + &:hover, + &:focus { + background-color: ${lighten(0.1, primaryColor)}; + } } `, )} diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss index b33db22db..9ad45640e 100644 --- a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss +++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss @@ -7,7 +7,7 @@ border-radius: 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); width: 600px; - margin: 40px auto; + // margin: 40px auto; color: #222; background-color: #fff; } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx index 0e405a6ec..63b6cebc1 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx @@ -4,6 +4,7 @@ import { InvoiceCustomizeFormValues } from './types'; import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider'; import { useFormikContext } from 'formik'; import { InvoiceMailReceiptPreview } from './InvoiceMailReceiptPreview'; +import { Box } from '@/components'; const withInvoiceMailReceiptPreviewConnected =

( Component: React.ComponentType

, @@ -21,7 +22,11 @@ const withInvoiceMailReceiptPreviewConnected =

( primaryColor: mergedBrandingState?.primaryColor, // organizationAddress: mergedBrandingState, }; - return ; + return ( + + + + ); }; }; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx index df28c18ba..0b1afdf4b 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx @@ -1,11 +1,14 @@ import * as R from 'ramda'; import { useFormikContext } from 'formik'; +import { css } from '@emotion/css'; import { InvoicePaymentPagePreview, InvoicePaymentPagePreviewProps, } from '@/containers/PaymentPortal/InvoicePaymentPagePreview'; import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider'; import { InvoiceCustomizeFormValues } from './types'; +import { Box } from '@/components'; + const withInvoicePaymentPreviewPageProps =

( Component: React.ComponentType

, @@ -22,7 +25,19 @@ const withInvoicePaymentPreviewPageProps =

( companyLogoUri: mergedBrandingState?.companyLogoUri, primaryColor: mergedBrandingState?.primaryColor, }; - return ; + return ( + + + + ); }; }; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePdfPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePdfPreview.tsx index 38e8b6c1b..44ea38af6 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePdfPreview.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePdfPreview.tsx @@ -6,10 +6,11 @@ import { } from './InvoicePaperTemplate'; import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider'; import { InvoiceCustomizeFormValues } from './types'; +import { Box } from '@/components'; /** * Injects the `InvoicePaperTemplate` component props from the form and branding states. - * @param Component + * @param {React.ComponentType

} Component * @returns {JSX.Element} */ const withInvoicePreviewTemplateProps =

( @@ -23,7 +24,11 @@ const withInvoicePreviewTemplateProps =

( ...brandingState, ...values, }; - return ; + return ( + + + + ); }; }; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx index 5e694d637..7fddc6a48 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx @@ -1,12 +1,17 @@ import { css } from '@emotion/css'; import { Tabs, TabsProps } from '@blueprintjs/core'; -interface InvoiceCustomizeTabsProps extends TabsProps { } +interface InvoiceCustomizeTabsProps extends TabsProps {} export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) { return ( diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx index 943bc493a..02801698a 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx @@ -1,6 +1,7 @@ import { Button, Intent } from '@blueprintjs/core'; import { css } from '@emotion/css'; import { x } from '@xstyled/emotion'; +import { lighten } from 'polished'; import { Group, Stack, StackProps } from '@/components'; export interface InvoiceMailReceiptProps extends StackProps { @@ -9,7 +10,7 @@ export interface InvoiceMailReceiptProps extends StackProps { companyLogoUri?: string; // # Colors - primaryColor?: string, + primaryColor?: string; // # Due date dueDate: string; @@ -45,7 +46,7 @@ export function InvoiceMailReceipt({ companyLogoUri, // # Colors - primaryColor, + primaryColor = 'rgb(0, 82, 204)', // Due date dueDate, @@ -126,8 +127,13 @@ export function InvoiceMailReceipt({ large intent={Intent.PRIMARY} className={css` - &.bp4-intent-primary{ + &.bp4-intent-primary { background-color: ${primaryColor}; + + &:hover, + &:focus { + background-color: ${lighten(0.1, primaryColor)}; + } } &.bp4-large { min-height: 38px; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4723d37c0..19a6d8986 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -706,6 +706,9 @@ importers: plaid-threads: specifier: ^11.4.3 version: 11.5.0(react-dom@18.3.1)(react@18.3.1) + polished: + specifier: ^4.3.1 + version: 4.3.1 prop-types: specifier: 15.8.1 version: 15.8.1 @@ -20485,6 +20488,13 @@ packages: hasBin: true dev: true + /polished@4.3.1: + resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==} + engines: {node: '>=10'} + dependencies: + '@babel/runtime': 7.24.5 + dev: false + /popper.js@1.16.1: resolution: {integrity: sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==} deprecated: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1