@kiwicom/smart-faq/src/FullPage/GlobalStyles.js

Smart FAQ

// @flow

import * as React from 'react';
import { ThemeConsumer } from 'styled-components';

const Styles = ({ theme }) => (
  <style jsx global>
    {`
      .SmartFAQ {
        max-width: 740px;
        margin: auto;
        font-family: ${theme.orbit.fontFamily};
      }

      body {
        padding-top: 92px;
        padding-bottom: 40px;
        background: ${theme.orbit.backgroundBody};
        font-family: ${theme.orbit.fontFamily};
      }
    `}
  </style>
);

const MarkdownStyles = ({ theme }) => (
  <style
    dangerouslySetInnerHTML={{
      __html: `
        .SmartFAQMarkdownField {
          font-family: ${theme.orbit.fontFamily};
          font-size: ${theme.orbit.fontSizeTextNormal};
          font-weight: ${theme.orbit.fontWeightNormal};
          color: ${theme.orbit.colorTextPrimary};
          line-height: ${theme.orbit.lineHeightText};
          text-align: left;
          margin: 0;
        }`,
    }}
  />
);

const GlobalStyles = () => (
  <ThemeConsumer>
    {theme => (
      <>
        <MarkdownStyles theme={theme} />
        <Styles theme={theme} />
      </>
    )}
  </ThemeConsumer>
);

export default GlobalStyles;