mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-19 14:20:31 +00:00
feat: onboarding pages darkmode (#867)
This commit is contained in:
@@ -1,6 +1,9 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
import { x } from '@xstyled/emotion';
|
||||
import { css } from '@emotion/css';
|
||||
import { useIsDarkMode } from '@/hooks/useDarkMode';
|
||||
|
||||
import WorkflowIcon from './WorkflowIcon';
|
||||
import { FormattedMessage as T } from '@/components';
|
||||
@@ -8,13 +11,12 @@ import { FormattedMessage as T } from '@/components';
|
||||
import withOrganizationActions from '@/containers/Organization/withOrganizationActions';
|
||||
import { compose } from '@/utils';
|
||||
|
||||
import '@/style/pages/Setup/Congrats.scss';
|
||||
|
||||
/**
|
||||
* Setup congrats page.
|
||||
*/
|
||||
function SetupCongratsPage({ setOrganizationSetupCompleted }) {
|
||||
const [isReloading, setIsReloading] = React.useState(false);
|
||||
const isDarkMode = useIsDarkMode();
|
||||
|
||||
const handleBtnClick = () => {
|
||||
setIsReloading(true);
|
||||
@@ -22,30 +24,55 @@ function SetupCongratsPage({ setOrganizationSetupCompleted }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="setup-congrats">
|
||||
<div class="setup-congrats__workflow-pic">
|
||||
<x.div
|
||||
w={'500px'}
|
||||
mx="auto"
|
||||
textAlign="center"
|
||||
pt={'80px'}
|
||||
>
|
||||
<x.div>
|
||||
<WorkflowIcon width="280" height="330" />
|
||||
</div>
|
||||
</x.div>
|
||||
|
||||
<div class="setup-congrats__text">
|
||||
<h1>
|
||||
<T id={'setup.congrats.title'} />
|
||||
</h1>
|
||||
|
||||
<p class="paragraph">
|
||||
<T id={'setup.congrats.description'} />
|
||||
</p>
|
||||
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
loading={isReloading}
|
||||
onClick={handleBtnClick}
|
||||
<x.div mt={30}>
|
||||
<x.h2
|
||||
color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#2d2b43'}
|
||||
mb={'12px'}
|
||||
>
|
||||
<T id={'setup.congrats.go_to_dashboard'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<T id={'setup.congrats.title'} />
|
||||
</x.h2>
|
||||
|
||||
<x.p
|
||||
fontSize={'16px'}
|
||||
opacity={0.85}
|
||||
mb={'14px'}
|
||||
color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : undefined}
|
||||
>
|
||||
<T id={'setup.congrats.description'} />
|
||||
</x.p>
|
||||
|
||||
<x.div
|
||||
className={css`
|
||||
.bp4-button {
|
||||
height: 38px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
font-size: 15px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
loading={isReloading}
|
||||
onClick={handleBtnClick}
|
||||
>
|
||||
<T id={'setup.congrats.go_to_dashboard'} />
|
||||
</Button>
|
||||
</x.div>
|
||||
</x.div>
|
||||
</x.div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user