mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
wip darkmode
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -92,5 +92,5 @@ const PaymentFeatureIcon = styled('span')`
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 2px;
|
||||
color: #0052cc;
|
||||
color: var(--color-primary);
|
||||
`;
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user