Minor refactoring for css styles of headings (fontSize)

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> {
   className?: string;
   children: string | ReactNode;
   id?: string;
+  onClick?: () => void;
 }
 
 const styles = (theme: Theme) => ({
@@ -21,23 +22,26 @@ const styles = (theme: Theme) => ({
     textAlign: 'left',
   },
   h1: {
-    fontSize: 30,
+    fontSize: theme.uiFontSize + 3,
     marginTop: 0,
   },
   h2: {
-    fontSize: 20,
+    fontSize: theme.uiFontSize + 2,
   },
   h3: {
-    fontSize: 18,
+    fontSize: theme.uiFontSize + 1,
   },
   h4: {
     fontSize: theme.uiFontSize,
   },
+  h5: {
+    fontSize: theme.uiFontSize - 1,
+  },
 });
 
 class HeadlineComponent extends Component<IProps> {
   render() {
-    const { classes, level, className, children, id } = this.props;
+    const { classes, level, className, children, id, onClick } = this.props;
 
     return createElement(
       `h${level}`,
@@ -49,6 +53,7 @@ class HeadlineComponent extends Component<IProps> {
           [`${className}`]: className,
         }),
         'data-type': 'franz-headline',
+        onClick,
       },
       children,
     );
@@ -68,3 +73,4 @@ export const H1 = createH(1);
 export const H2 = createH(2);
 export const H3 = createH(3);
 export const H4 = createH(4);
+export const H5 = createH(5);