import * as React from "react" ; import styled from "styled-components" ; import { BorderlessButton , Modal , fonts , colors } from "@joincivil/components" ; const Wrapper = styled . div `
  margin: auto;
  margin-top: 100px;
  max-width: 850px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
` ; const ContentWrapper = styled . div `
  width: 80%;
  margin-left: 15px;
` ; export const Header = styled . h2 `
  text-align: center;
  font-family: ${ fonts . SANS_SERIF };
  font-size: 32px;
  font-weight: bold;
  letter-spacing: -0.67px;
  line-height: 30px;
  padding-bottom: 60px;
  border-bottom: 1px solid ${ colors . accent . CIVIL_GRAY_3 };
  margin-bottom: 20px;
` ; export const SectionHeader = styled . h4 `
  font-family: ${ fonts . SANS_SERIF };
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
` ; export const Paragraph = styled . p `
  color: ${ colors . primary . CIVIL_GRAY_1 };
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 28px;
` ; const Button = styled ( BorderlessButton ) `
  margin: auto;
  display: block;
` ; const LightButton = styled ( BorderlessButton ) `
  font-weight: 200;
  display: block;
` ; export interface InfoModalButtonState { modalOpen : boolean ; } export interface InfoModalButtonProps { content : JSX . Element ; buttonText : string ; lightStyle ? : boolean ; } export class InfoModalButton extends React . Component < InfoModalButtonProps , InfoModalButtonState > { constructor ( props ) { super ( props ) ; this . state = { modalOpen : false , } ; } public renderModal ( ) { if ( ! this . state . modalOpen ) { return null ; } return ( < Modal fullScreen = { true } > < Wrapper > < BorderlessButton onClick = { this . close } > Back < /BorderlessButton> < ContentWrapper > { this . props . content } < /ContentWrapper> < /Wrapper> < /Modal>); } public render ( ) { const button = this . props . lightStyle ? ( < LightButton onClick = { this . showModal } > { this . props . buttonText } < /LightButton>) : (<Button onClick={this.showModal}>{this.props.buttonText}</Button > ) ; return ( < > { button } { this . renderModal ( ) } < />); } private showModal = ( ) : void => { this . setState ( { modalOpen : true } ) ; } ; private close = ( ) : void => { this . setState ( { modalOpen : false } ) ; } ; }