<commit_before>import React, { useEffect } from 'react'
import history from '../history'
import PropTypes from 'prop-types'
import styled from '@emotion/styled'

import { ReactComponent as CloseIcon } from '../static/images/close.svg'

const ESCAPE_KEY = 27

const Container = styled('div')`
  background: #1d1d1d;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  cursor: auto;

  @media all and (max-width: 700px) {
    width: 100vw;
    height: 100vh;
    padding: 0;
    .buttonBar {
      margin: 40px 0 20px;
    }
  }
`
const Accent = styled('div')`
  height: 3px;
  display: flex;
  flex-direction: row;
  div {
    height: 100%;
    flex: 1;
  }
}
`
const CloseIconContainer = styled('span')`
  filter: invert(0.9);
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
`
const Body = styled('div')`
  padding: 40px;
  height: 100%;
  min-height: 100%;
  overflow: auto;

  color: h1 {
    margin: 0 0 40px;
  }
  h1 {
    margin: 0 0 40px;
  }
  .buttonBar {
    margin: 40px 0 0;
  }
  @media all and (max-width: 700px) {
    padding: 20px 20px 0 20px;
  }
`

const Modal = ({
  children,
  topAccent,
  allowClose,
  width,
  height,
  className,
  onClose,
}) => {
  useEffect(() => {
    const handleKeyDown = (event) => {
      switch (event.keyCode) {
        case ESCAPE_KEY:
          onClose()
          break
        default:
          break
      }
    }

    document.addEventListener('keydown', handleKeyDown)

    return () => {
      document.removeEventListener('keydown', handleKeyDown)
    }
  }, [onClose])

  return (
    <Container
      style={window.innerWidth > 700 ? { width: width, height: height } : {}}
      className={className}
    >
      {allowClose && (
        <CloseIconContainer onClick={onClose}>
          <CloseIcon className="closeIcon" alt="Close" />
        </CloseIconContainer>
      )}
      {topAccent && (
        <Accent>
          <div style={{ background: '#005461' }}></div>
          <div style={{ background: '#00A8A1' }}></div>
          <div style={{ background: '#F5A51E' }}></div>
          <div style={{ background: '#F5791E' }}></div>
          <div style={{ background: '#F54820' }}></div>
        </Accent>
      )}
      <Body>{children}</Body>
    </Container>
  )
}

Modal.propTypes = {<commit_msg>Fixes modal close icon on iOS<commit_after>import React, { useEffect } from 'react'
import history from '../history'
import PropTypes from 'prop-types'
import styled from '@emotion/styled'

import { ReactComponent as CloseIcon } from '../static/images/close.svg'

const ESCAPE_KEY = 27

const Container = styled('div')`
  background: #1d1d1d;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative;
  cursor: auto;

  @media all and (max-width: 700px) {
    width: 100vw;
    height: 100vh;
    padding: 0;
    .buttonBar {
      margin: 40px 0 20px;
    }
  }
`
const Accent = styled('div')`
  height: 3px;
  display: flex;
  flex-direction: row;
  div {
    height: 100%;
    flex: 1;
  }
}
`
const CloseIconContainer = styled('span')`
  filter: invert(0.9);
  cursor: pointer;
  float: right;
  padding: 10px;
`
const Body = styled('div')`
  padding: 40px;
  height: 100%;
  min-height: 100%;
  overflow: auto;

  color: h1 {
    margin: 0 0 40px;
  }
  h1 {
    margin: 0 0 40px;
  }
  .buttonBar {
    margin: 40px 0 0;
  }
  @media all and (max-width: 700px) {
    padding: 20px 20px 0 20px;
  }
`

const Modal = ({
  children,
  topAccent,
  allowClose,
  width,
  height,
  className,
  onClose,
}) => {
  useEffect(() => {
    const handleKeyDown = (event) => {
      switch (event.keyCode) {
        case ESCAPE_KEY:
          onClose()
          break
        default:
          break
      }
    }

    document.addEventListener('keydown', handleKeyDown)

    return () => {
      document.removeEventListener('keydown', handleKeyDown)
    }
  }, [onClose])

  return (
    <Container
      style={window.innerWidth > 700 ? { width: width, height: height } : {}}
      className={className}
    >
      {topAccent && (
        <Accent>
          <div style={{ background: '#005461' }}></div>
          <div style={{ background: '#00A8A1' }}></div>
          <div style={{ background: '#F5A51E' }}></div>
          <div style={{ background: '#F5791E' }}></div>
          <div style={{ background: '#F54820' }}></div>
        </Accent>
      )}
      {allowClose && (
        <CloseIconContainer onClick={onClose}>
          <CloseIcon className="closeIcon" alt="Close" />
        </CloseIconContainer>
      )}
      <Body>{children}</Body>
    </Container>
  )
}

Modal.propTypes = {
{'fraction_non_alphanumeric': 0.15304574029915458, 'fraction_numerical': 0.04162150444396272, 'mean_word_length': 2.469172932330827, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1653254', 'n_tokens_mistral': 1748, 'n_tokens_neox': 1577, 'n_words': 397}