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

Smart FAQ

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

type Props = {|
  theme: Object,
|};

const GlobalStyles = ({ theme }: Props) => (
  <style jsx global>
    {`
      .smartFAQ {
        display: none;
        position: fixed;
        min-width: 480px;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: ${theme.orbit.backgroundModal};
        font-family: ${theme.orbit.fontFamily};
      }
      .smartFAQ.open {
        display: block;
      }
      .smartFAQ * {
        box-sizing: border-box;
        font-family: ${theme.orbit.fontFamily};
      }
      @media only screen and (max-width: 901px) {
        .smartFAQ {
          min-width: 100%;
        }
      }
    `}
  </style>
);

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

export default ThemedGlobalStyles;