diff options
author | Vijay A <vraravam@users.noreply.github.com> | 2022-05-06 20:12:53 -0500 |
---|---|---|
committer | Vijay A <vraravam@users.noreply.github.com> | 2022-05-06 20:12:53 -0500 |
commit | e9d8d2a5109c81933af98cefef12d18a0f673688 (patch) | |
tree | 160d138d3971846241daed77efb9fbbad27e7526 /src/components/ui/headline/index.tsx | |
parent | Update npm modules. (diff) | |
download | ferdium-app-e9d8d2a5109c81933af98cefef12d18a0f673688.tar.gz ferdium-app-e9d8d2a5109c81933af98cefef12d18a0f673688.tar.zst ferdium-app-e9d8d2a5109c81933af98cefef12d18a0f673688.zip |
Minor refactoring for css styles of headings (fontSize)
Diffstat (limited to 'src/components/ui/headline/index.tsx')
-rw-r--r-- | src/components/ui/headline/index.tsx | 14 |
1 files changed, 10 insertions, 4 deletions
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index d9954c38f..b5a5f695f 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx | |||
@@ -10,6 +10,7 @@ interface IProps extends WithStylesProps<typeof styles> { | |||
10 | className?: string; | 10 | className?: string; |
11 | children: string | ReactNode; | 11 | children: string | ReactNode; |
12 | id?: string; | 12 | id?: string; |
13 | onClick?: () => void; | ||
13 | } | 14 | } |
14 | 15 | ||
15 | const styles = (theme: Theme) => ({ | 16 | const styles = (theme: Theme) => ({ |
@@ -21,23 +22,26 @@ const styles = (theme: Theme) => ({ | |||
21 | textAlign: 'left', | 22 | textAlign: 'left', |
22 | }, | 23 | }, |
23 | h1: { | 24 | h1: { |
24 | fontSize: 30, | 25 | fontSize: theme.uiFontSize + 3, |
25 | marginTop: 0, | 26 | marginTop: 0, |
26 | }, | 27 | }, |
27 | h2: { | 28 | h2: { |
28 | fontSize: 20, | 29 | fontSize: theme.uiFontSize + 2, |
29 | }, | 30 | }, |
30 | h3: { | 31 | h3: { |
31 | fontSize: 18, | 32 | fontSize: theme.uiFontSize + 1, |
32 | }, | 33 | }, |
33 | h4: { | 34 | h4: { |
34 | fontSize: theme.uiFontSize, | 35 | fontSize: theme.uiFontSize, |
35 | }, | 36 | }, |
37 | h5: { | ||
38 | fontSize: theme.uiFontSize - 1, | ||
39 | }, | ||
36 | }); | 40 | }); |
37 | 41 | ||
38 | class HeadlineComponent extends Component<IProps> { | 42 | class HeadlineComponent extends Component<IProps> { |
39 | render() { | 43 | render() { |
40 | const { classes, level, className, children, id } = this.props; | 44 | const { classes, level, className, children, id, onClick } = this.props; |
41 | 45 | ||
42 | return createElement( | 46 | return createElement( |
43 | `h${level}`, | 47 | `h${level}`, |
@@ -49,6 +53,7 @@ class HeadlineComponent extends Component<IProps> { | |||
49 | [`${className}`]: className, | 53 | [`${className}`]: className, |
50 | }), | 54 | }), |
51 | 'data-type': 'franz-headline', | 55 | 'data-type': 'franz-headline', |
56 | onClick, | ||
52 | }, | 57 | }, |
53 | children, | 58 | children, |
54 | ); | 59 | ); |
@@ -68,3 +73,4 @@ export const H1 = createH(1); | |||
68 | export const H2 = createH(2); | 73 | export const H2 = createH(2); |
69 | export const H3 = createH(3); | 74 | export const H3 = createH(3); |
70 | export const H4 = createH(4); | 75 | export const H4 = createH(4); |
76 | export const H5 = createH(5); | ||