@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleFeedback/ScreenThankyou.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import Heading from '@kiwicom/orbit-components/lib/Heading';
import Close from '@kiwicom/orbit-components/lib/icons/Close';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import ValueBind from '@kiwicom/nitro/lib/components/ValueBind';

import screenList from './screenList';
import Box from '../../../SmartFAQ/common/Box';

type Props = {|
  changeScreen: (nextScreen: $Values<typeof screenList>) => void,
|};

const style = css`
  div.feedbackMessage {
    text-align: center;
    padding: 32px 83px;
  }
  div.close-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
  }
`;

const ScreenThankyou = (props: Props) => (
  <Box border="none" borderRadius="4px" backgroundColor="#f5f7f9">
    <div className="feedbackMessage">
      <ValueBind value={screenList.VOTING} onChange={props.changeScreen}>
        {({ onClick }) => (
          <div
            className="close-icon"
            onClick={onClick}
            onKeyUp={null}
            tabIndex="-1"
            role="button"
          >
            <Close customColor="#bac7d5" size="small" />
          </div>
        )}
      </ValueBind>
      <Heading type="title2">
        <Translate t="smartfaq.article_feedback.thank_you" />
      </Heading>
      <style jsx>{style}</style>
    </div>
  </Box>
);

export default ScreenThankyou;