wip darkmode

This commit is contained in:
Ahmed Bouhuolia
2025-08-04 12:25:27 +02:00
parent 456a9e1ad9
commit d9a716a46f
170 changed files with 2006 additions and 1018 deletions

View File

@@ -1,3 +1,4 @@
// @ts-nocheck
import { Button, Classes, Intent, Text } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FFormGroup, Group, Stack } from '@/components';
@@ -5,6 +6,7 @@ import { FColorInput } from '@/components/Forms/FColorInput';
import { CompanyLogoUpload } from '@/containers/ElementCustomize/components/CompanyLogoUpload';
import { PreferencesBrandingFormValues } from './_types';
import styles from './PreferencesBranding.module.scss';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function PreferencesBrandingFormContent() {
return (
@@ -31,9 +33,15 @@ export function PreferencesBrandingFormContent() {
export function PreferencesBrandingFormFooter() {
const { isSubmitting } = useFormikContext();
const isDarkMode = useIsDarkMode();
return (
<Group style={{ padding: '12px 0', borderTop: '1px solid #e1e1e1' }}>
<Group
style={{
padding: '12px 0',
borderTop: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.25)' : '#e1e1e1'}`,
}}
>
<Button intent={Intent.PRIMARY} type={'submit'} loading={isSubmitting}>
Submit
</Button>

View File

@@ -60,8 +60,11 @@ export function PreferencesCreditNotesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

View File

@@ -60,8 +60,11 @@ export function PreferencesEstimatesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

View File

@@ -271,8 +271,11 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.15);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

View File

@@ -60,8 +60,11 @@ export function PreferencesInvoicesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {

View File

@@ -24,11 +24,13 @@ import {
import { DRAWERS } from '@/constants/drawers';
import { MoreIcon } from '@/icons/More';
import { STRIPE_PRICING_LINK } from './constants';
import { useIsDarkMode } from '@/hooks/useDarkMode';
export function StripePaymentMethod() {
const { openDialog } = useDialogActions();
const { openDrawer } = useDrawerActions();
const { openAlert } = useAlertActions();
const isDarkMode = useIsDarkMode();
const { paymentMethodsState } = usePaymentMethodsBoot();
const stripeState = paymentMethodsState?.stripe;
@@ -63,8 +65,9 @@ export function StripePaymentMethod() {
<Card style={{ margin: 0 }}>
<Group position="apart">
<Group>
<StripeLogo />
<StripeLogo
color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#0A2540'}
/>
<Group spacing={10}>
{isStripeEnabled && (
<Tag minimal intent={Intent.SUCCESS}>

View File

@@ -92,5 +92,5 @@ const PaymentFeatureIcon = styled('span')`
position: absolute;
left: 12px;
top: 2px;
color: #0052cc;
color: var(--color-primary);
`;

View File

@@ -1,15 +1,18 @@
// @ts-nocheck
import { useIsDarkMode } from '@/hooks/useDarkMode';
import ContentLoader from 'react-content-loader';
export default function PreferencesPageLoader(props) {
const isDarkmode = useIsDarkMode();
return (
<ContentLoader
speed={2}
width={400}
height={250}
viewBox="0 0 400 250"
backgroundColor="#f3f3f3"
foregroundColor="#e6e6e6"
backgroundColor={isDarkmode ? 'rgba(255, 255, 255, 0.15)' : '#f3f3f3'}
foregroundColor={isDarkmode ? 'rgba(255, 255, 255, 0.3)' : '#e6e6e6'}
{...props}
>
<rect x="0" y="82" rx="2" ry="2" width="200" height="20" />

View File

@@ -60,8 +60,11 @@ export function PreferencesReceiptsForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
padding-top: 16px;
border-top: 1px solid #e0e7ea;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {