<commit_before>import {Button} from 'app/components/buttons';
import {CookieBanner} from 'app/components/cookie-banner';
import {Header, SmallHeader} from 'app/components/headers';
import {AouTitle} from 'app/components/text-wrappers';
import colors from 'app/styles/colors';
import {reactStyles} from 'app/utils';

import * as React from 'react';

const googleIcon = '/assets/icons/google-icon.png';

export const styles = reactStyles({
  sign: {
    backgroundSize: 'contain',
    backgroundRepeat: 'noRepeat',
    backgroundPosition: 'center',
    display: 'flex',
    justifyContent: 'spaceAround',
    alignItems: 'flexStart',
    width: 'auto'
  },
  button: {
    marginTop: '0.5rem',
    display: 'flex',
    alignItems: 'center',
    height: 'auto',
    paddingLeft: '0',
    fontSize: '18px',
    fontStyle: 'normal',
    textTransform: 'none',
    borderRadius: '2px',
    justifyContent: 'baseline',
    maxWidth: '11.45rem'
  },
  fismaCommon: {
    fontSize: '10px',
    color: colors.primary,
    lineHeight: '18px'
  },
  fismaHeader: {
    fontWeight: 600,
    textTransform: 'uppercase',
  },
  fismaSection: {
    fontWeight: 400,
    marginBottom: '0.5rem'
  }
});


export const LoginReactComponent: React.FunctionComponent<{
  signIn: Function, onCreateAccount: Function }> = ({ signIn, onCreateAccount}) => {
    return <React.Fragment>
      <div data-test-id='login' style={{marginTop: '5.5rem',  paddingLeft: '3rem'}}>
        <div>
          <Header>
            Already have an account?
          </Header>
          <div>
            <Button type='primary' style={styles.button} onClick={signIn}>
              <img src={googleIcon}
                     style={{ height: '54px', width: '54px', margin: '-3px 19px -3px -3px'}}/>
              <div>
                Sign In with Google
              </div>
            </Button>
          </div>
        </div>
        <div style={{paddingTop: '1.25rem'}}>
          <SmallHeader>
            Don't have an account?
          </SmallHeader>
          <Button type='secondary' style={{fontSize: '10px', margin: '.25rem .5rem .25rem 0',
            border: `1px solid ${colors.primary}`, height: '48px'}}
                  onClick={onCreateAccount}>
            Create Account
          </Button>
        </div><commit_msg>[RW-4717][Risk=no] Fix button text (#3403)<commit_after>import {Button} from 'app/components/buttons';
import {CookieBanner} from 'app/components/cookie-banner';
import {Header, SmallHeader} from 'app/components/headers';
import {AouTitle} from 'app/components/text-wrappers';
import colors from 'app/styles/colors';
import {reactStyles} from 'app/utils';

import * as React from 'react';

const googleIcon = '/assets/icons/google-icon.png';

export const styles = reactStyles({
  sign: {
    backgroundSize: 'contain',
    backgroundRepeat: 'noRepeat',
    backgroundPosition: 'center',
    display: 'flex',
    justifyContent: 'spaceAround',
    alignItems: 'flexStart',
    width: 'auto'
  },
  button: {
    marginTop: '0.5rem',
    display: 'flex',
    alignItems: 'center',
    height: 'auto',
    paddingLeft: '0',
    fontSize: '18px',
    fontStyle: 'normal',
    textTransform: 'none',
    borderRadius: '2px',
    justifyContent: 'baseline',
    width: '6.5rem'
  },
  createAccountButton: {
    fontSize: '12px',
    margin: '.5rem .5rem .25rem 0',
    border: `1px solid ${colors.primary}`,
    height: '48px',
    width: '6.5rem'
  },
  fismaCommon: {
    fontSize: '10px',
    color: colors.primary,
    lineHeight: '18px'
  },
  fismaHeader: {
    fontWeight: 600,
    textTransform: 'uppercase',
  },
  fismaSection: {
    fontWeight: 400,
    marginBottom: '0.5rem'
  }
});


export const LoginReactComponent: React.FunctionComponent<{
  signIn: Function, onCreateAccount: Function }> = ({ signIn, onCreateAccount}) => {
    return <React.Fragment>
      <div data-test-id='login' style={{marginTop: '5.5rem',  paddingLeft: '3rem'}}>
        <div>
          <Header style={{width: '14rem', lineHeight: '30px'}}>
            Already have a
            Researcher Workbench account?
          </Header>
          <div>
            <Button type='primary' style={styles.button} onClick={signIn}>
              <img src={googleIcon}
                     style={{ height: '54px', width: '54px', margin: '-3px 19px -3px -3px'}}/>
              <div>
                Sign In
              </div>
            </Button>
          </div>
        </div>
        <div style={{paddingTop: '1.25rem'}}>
          <SmallHeader>
            Don't have an account?
          </SmallHeader>
          <Button type='secondary' style={styles.createAccountButton}
                  onClick={onCreateAccount}>
            Create Account
          </Button>
        </div>
{'fraction_non_alphanumeric': 0.14798488664987405, 'fraction_numerical': 0.022460117548278757, 'mean_word_length': 2.5296296296296297, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 45, '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': '1861843', 'n_tokens_mistral': 1531, 'n_tokens_neox': 1486, 'n_words': 355}