<commit_before>
import React from 'react'
import styled from 'styled-components'
import InputLabel from './InputLabel'
import Button from './Button'

import RegexIcon from './svg-icons/RegexIcon'
import CaseSensitiveIcon from './svg-icons/CaseSensitiveIcon'
import WholeWordIcon from './svg-icons/WholeWordIcon'

import SelectionIcon from './svg-icons/SelectionIcon'
import PageIcon from './svg-icons/PageIcon'
import DocumentIcon from './svg-icons/DocumentIcon'

import Gtag from './Gtag'

const HelpPage = styled.div`
  position: absolute;
  top: ${props => props.isActive ? 0 : 240}px;
  width: 100%;
  overflow: scroll;
  height: 218px;
  padding: 14px 16px 16px 16px;
  background-color: ${props => props.theme.background};
  color: ${props => props.theme.text};
  z-index: 100;
  transition: top 0.15s ease-in-out;
  margin-bottom: 32px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: small;
`

const HelpIconsContainer = styled.div`
  display: flex; /* or inline-flex */
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
`

const HelpIcon = styled.div`
  margin-right: 1em;
  
`

const HelpIconDescription = styled.div`
  
`

const BtnHelpContainer = styled.div`
  display: flex; /* or inline-flex */
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 2em;
`


const Help = (props) => {
  const { 
    isActive,
    theme,
    close,
  } = props
  return <HelpPage 
    isActive={isActive}
    theme={theme}
    >
    <InputLabel theme={theme}>Help</InputLabel>
    <h2>Sketch Find and Replace</h2>
    <p>By <a href={'mailto:<EMAIL>'}><NAME></a> - UX / UI and Code Designer </p>

    <h3>version 2.7.1</h3>
    
    <p>New Shortcut : "cmd option shift f"</p>
    
    <h3>Options to find</h3>

    <HelpIconsContainer>
      <HelpIcon><RegexIcon theme={theme} isActive={true}/></HelpIcon>
      <HelpIconDescription>Regex (Regular expressions)*</HelpIconDescription>
    </HelpIconsContainer>

    <HelpIconsContainer>
      <HelpIcon><CaseSensitiveIcon theme={theme} isActive={true}/></HelpIcon>
      <HelpIconDescription>Case Sensitive (on)/ Case Insensitive (off)</HelpIconDescription>
    </HelpIconsContainer>

    <HelpIconsContainer>
      <HelpIcon><WholeWordIcon theme={theme} isActive={true}/></HelpIcon>
      <HelpIconDescription>Whole Word</HelpIconDescription><commit_msg>remove version from help<commit_after>
import React from 'react'
import styled from 'styled-components'
import InputLabel from './InputLabel'
import Button from './Button'

import RegexIcon from './svg-icons/RegexIcon'
import CaseSensitiveIcon from './svg-icons/CaseSensitiveIcon'
import WholeWordIcon from './svg-icons/WholeWordIcon'

import SelectionIcon from './svg-icons/SelectionIcon'
import PageIcon from './svg-icons/PageIcon'
import DocumentIcon from './svg-icons/DocumentIcon'

import Gtag from './Gtag'

const HelpPage = styled.div`
  position: absolute;
  top: ${props => props.isActive ? 0 : 240}px;
  width: 100%;
  overflow: scroll;
  height: 218px;
  padding: 14px 16px 16px 16px;
  background-color: ${props => props.theme.background};
  color: ${props => props.theme.text};
  z-index: 100;
  transition: top 0.15s ease-in-out;
  margin-bottom: 32px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: small;
`

const HelpIconsContainer = styled.div`
  display: flex; /* or inline-flex */
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
`

const HelpIcon = styled.div`
  margin-right: 1em;
  
`

const HelpIconDescription = styled.div`
  
`

const BtnHelpContainer = styled.div`
  display: flex; /* or inline-flex */
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 2em;
`


const Help = (props) => {
  const { 
    isActive,
    theme,
    close,
  } = props
  return <HelpPage 
    isActive={isActive}
    theme={theme}
    >
    <InputLabel theme={theme}>Help</InputLabel>
    <h2>Sketch Find and Replace</h2>
    <p>By <a href={'mailto:<EMAIL>'}><NAME></a> - UX / UI and Code Designer </p>
    
    <p>New Shortcut : "cmd option shift f"</p>
    
    <h3>Options to find</h3>

    <HelpIconsContainer>
      <HelpIcon><RegexIcon theme={theme} isActive={true}/></HelpIcon>
      <HelpIconDescription>Regex (Regular expressions)*</HelpIconDescription>
    </HelpIconsContainer>

    <HelpIconsContainer>
      <HelpIcon><CaseSensitiveIcon theme={theme} isActive={true}/></HelpIcon>
      <HelpIconDescription>Case Sensitive (on)/ Case Insensitive (off)</HelpIconDescription>
    </HelpIconsContainer>

    <HelpIconsContainer>
      <HelpIcon><WholeWordIcon theme={theme} isActive={true}/></HelpIcon>
      <HelpIconDescription>Whole Word</HelpIconDescription>
{'fraction_non_alphanumeric': 0.13861184612253205, 'fraction_numerical': 0.014044372074089151, 'mean_word_length': 3.808219178082192, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 83, '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': '4125792', 'n_tokens_mistral': 1699, 'n_tokens_neox': 1614, 'n_words': 382}