101 lines
2.3 KiB
TypeScript
101 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { BreakpointProvider } from './components/Breakpoint'
|
|
import { ConfigProvider } from 'antd'
|
|
import { Button } from './components/Button'
|
|
import Icon from '@ant-design/icons';
|
|
import { ReactComponent as CloseIcon } from './icons/close.svg'
|
|
|
|
const brandPrimary = '#FF5200';
|
|
const textPrimary = '#1E1D1F'
|
|
const textDarker = '#000022'
|
|
const textLighter = '#8F9296'
|
|
const white = '#FDFDFD'
|
|
|
|
function App() {
|
|
const items = [
|
|
{
|
|
title: 'Account',
|
|
},
|
|
{
|
|
title: 'Tester Info',
|
|
},
|
|
{
|
|
title: 'Review',
|
|
},
|
|
{
|
|
title: 'Done',
|
|
},
|
|
];
|
|
return (
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
colorBgMask: 'rgba(217, 217, 217, 0.65)',
|
|
colorLink: brandPrimary,
|
|
colorLinkHover: brandPrimary,
|
|
colorLinkActive: brandPrimary,
|
|
colorPrimary: brandPrimary,
|
|
colorText: textPrimary,
|
|
colorTextBase: textPrimary,
|
|
fontSize: 16,
|
|
fontSizeHeading1: 28,
|
|
fontSizeHeading2: 22,
|
|
fontSizeHeading3: 20,
|
|
lineHeightHeading1: 1.3,
|
|
lineHeightHeading2: 1.3,
|
|
lineHeightHeading3: 1.3,
|
|
fontSizeHeading4: 16,
|
|
fontFamily: 'Lato, Helvetica, Arial, sans-serif'
|
|
},
|
|
components: {
|
|
Button: {
|
|
// button base
|
|
fontSize: 20,
|
|
borderRadius: 4,
|
|
controlHeight: 45,
|
|
lineHeight: 45 / 20,
|
|
controlOutlineWidth: 0,
|
|
controlOutline: 'transparent',
|
|
// primary button
|
|
colorPrimary: '#FF5A0C',
|
|
colorTextLightSolid: white,
|
|
colorPrimaryHover: brandPrimary,
|
|
colorPrimaryActive: brandPrimary,
|
|
// disabled button
|
|
colorBgContainerDisabled: '#CACACC',
|
|
colorTextDisabled: white,
|
|
// text button
|
|
colorText: brandPrimary,
|
|
colorBgTextHover: 'transparent',
|
|
colorBgTextActive: 'transparent',
|
|
},
|
|
Modal: {
|
|
borderRadiusLG: 10,
|
|
boxShadow: '2px 2px 4px 1px rgba(0, 0, 0, 0.2)',
|
|
paddingContentHorizontalLG: 32,
|
|
},
|
|
Tooltip: {
|
|
fontSize: 14,
|
|
paddingSM: 12,
|
|
paddingXS: 10,
|
|
borderRadius: 4,
|
|
colorTextLightSolid: textDarker,
|
|
colorBgDefault: white,
|
|
},
|
|
Steps: {
|
|
colorSplit: brandPrimary,
|
|
colorTextDescription: textLighter,
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<BreakpointProvider>
|
|
<div>iHealth</div>
|
|
<Button icon={<Icon component={CloseIcon} />} />
|
|
</BreakpointProvider>
|
|
</ConfigProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|