GoogleFontBadge.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BODY_960 } from '../constants/defaults';
import scrollama from 'scrollama';
import { scaleLinear } from 'd3';

class GoogleFontBadge extends Component {
  constructor(props){
    super(props);

    this.state = {
      conversed: false,
      footer: false
    }
  }

  componentWillReceiveProps(newProps){
    if (newProps.screenWidth != this.props.screenHeight ||
        newProps.screenHeight != this.props.screenHeight) {

      this.scroller.resize();
      this.footerScroller.resize();
    }
  }

  componentDidMount(){
    let { screenHeight } = this.props;
    
    this.scroller = scrollama();
    this.footerScroller = scrollama();


    this.footerScroller.setup({
      step: '.footer',
      offset: (screenHeight - 80) / screenHeight,
    }).onStepEnter(this.handleFooterEnter.bind(this))
        .onStepExit(this.handleFooterExit.bind(this));


    this.scroller.setup({
        step: '.description-footer',
        // progress: true,
        offset: (screenHeight - 69) / screenHeight 
      }).onStepEnter(this.handleStepEnter.bind(this))
        // .onStepProgress(this.handleStepProgress.bind(this))
        .onStepExit(this.handleStepExit.bind(this));
  }

  handleFooterEnter(e){
    this.setState({
      footer: true
    });
  }

  handleFooterExit(e){
    this.setState({
      footer: false
    });
  }

  handleStepEnter(e){
    this.setState({
      conversed: true
    })
  }

  handleStepExit(e){

  
    this.setState({
      conversed: false
    });
  }

  render() {
    let { backgroundMode, screenWidth } = this.props;
    let { footer } = this.state;
    let style = {};

    backgroundMode = this.state.conversed ? 
      (backgroundMode == "black" ? "white" : "black") : backgroundMode;
    if (screenWidth < BODY_960) {
      style.backgroundColor = backgroundMode;
    }

    
    let svgColor = backgroundMode == "black" ? "white" : "black";

    return (
      <div className={`gf-badge${ footer ? "--footer" : ""}`} style={style}>
        <a href="https://fonts.google.com" target="_blank">
          <svg width="136px" height="42px" viewBox="0 0 136 42" version="1.1">
              <g id="made_by_google_fonts_white">
                <polygon id="Shape" fill={svgColor} points="82.4 35.9 82.4 19.1 92.2 19.1 92.2 21.2 84.5 21.2 84.5 26.7 91.4 26.7 91.4 28.7 84.5 28.7 84.5 35.9"></polygon>
                <path d="M105.1,30.2 C105.1,33.7 102.6,36.3 99.2,36.3 C95.7,36.3 93.3,33.7 93.3,30.2 C93.3,26.7 95.8,24.1 99.2,24.1 C102.6,24 105.1,26.7 105.1,30.2 Z M102.9,30.2 C102.9,27.6 101.1,26 99.1,26 C97.1,26 95.3,27.5 95.3,30.2 C95.3,32.8 97.1,34.4 99.1,34.4 C101.1,34.4 102.9,32.8 102.9,30.2 Z" id="Shape" fill={svgColor}></path>
                <path d="M109,26 C109.7,24.9 111.2,24 112.7,24 C115.6,24 117.1,26 117.1,28.8 L117.1,35.9 L115,35.9 L115,29.2 C115,26.8 113.8,26 112.2,26 C110.3,26 109.2,27.8 109.2,29.6 L109.2,36 L107,36 L107,24.4 L109.1,24.4 L109,26 Z" id="Shape" fill={svgColor}></path>
                <path d="M120.5,32.4 L120.5,26.4 L118.5,26.4 L118.5,24.4 L120.5,24.4 L120.5,20.9 L122.7,20.9 L122.7,24.4 L125.5,24.4 L125.5,26.4 L122.7,26.4 L122.7,32.3 C122.7,33.6 123.2,34.2 124.3,34.2 C124.7,34.2 125,34.2 125.3,34 L126.1,35.9 C125.6,36.1 125.1,36.2 124.4,36.2 C121.8,36.1 120.5,34.8 120.5,32.4 Z" id="Shape" fill={svgColor}></path>
                <path d="M126.4,33 L128.3,32.2 C128.9,33.7 130,34.4 131.4,34.4 C132.7,34.4 133.7,33.7 133.7,32.8 C133.7,32.2 133.3,31.6 132.1,31.3 L129.8,30.7 C128.7,30.4 126.7,29.5 126.7,27.5 C126.7,25.4 128.9,24.1 131.3,24.1 C133.3,24.1 135,25 135.7,26.8 L133.8,27.6 C133.4,26.5 132.3,26.1 131.2,26.1 C130,26.1 128.9,26.6 128.9,27.6 C128.9,28.3 129.5,28.7 130.4,28.9 L132.7,29.4 C135,29.9 135.9,31.4 135.9,32.8 C135.9,34.8 134.1,36.4 131.4,36.4 C128.7,36.3 127.1,34.7 126.4,33 Z" id="Shape" fill={svgColor}></path>
                <path d="M0.1,26.7 C0.1,21.4 4.6,17.1 9.9,17.1 C12.8,17.1 14.9,18.3 16.5,19.8 L14.6,21.7 C13.5,20.6 11.9,19.8 9.8,19.8 C5.9,19.8 2.9,22.9 2.9,26.8 C2.9,30.7 5.9,33.8 9.8,33.8 C12.3,33.8 13.8,32.8 14.7,31.9 C15.5,31.1 15.9,30.1 16.1,28.6 L9.9,28.6 L9.9,26 L18.8,26 C18.9,26.5 18.9,27 18.9,27.6 C18.9,29.6 18.4,32 16.6,33.8 C14.9,35.6 12.7,36.5 9.9,36.5 C4.6,36.3 0.1,32 0.1,26.7 Z" id="Shape" fill={svgColor}></path>
                <path d="M26.1,23.9 C22.7,23.9 19.9,26.5 19.9,30.1 C19.9,33.7 22.7,36.3 26.1,36.3 C29.5,36.3 32.3,33.7 32.3,30.1 C32.3,26.5 29.5,23.9 26.1,23.9 Z M26.1,33.9 C24.2,33.9 22.6,32.3 22.6,30.1 C22.6,27.9 24.2,26.3 26.1,26.3 C28,26.3 29.6,27.8 29.6,30.1 C29.6,32.3 28,33.9 26.1,33.9 Z" id="Shape" fill={svgColor}></path>
                <path d="M39.7,23.9 C36.3,23.9 33.5,26.5 33.5,30.1 C33.5,33.7 36.3,36.3 39.7,36.3 C43.1,36.3 45.9,33.7 45.9,30.1 C45.9,26.5 43.1,23.9 39.7,23.9 Z M39.7,33.9 C37.8,33.9 36.2,32.3 36.2,30.1 C36.2,27.9 37.8,26.3 39.7,26.3 C41.6,26.3 43.2,27.8 43.2,30.1 C43.2,32.3 41.6,33.9 39.7,33.9 Z" id="Shape" fill={svgColor}></path>
                <path d="M56.4,24.3 L56.4,25.3 L56.3,25.3 C55.7,24.6 54.5,23.9 53,23.9 C49.9,23.9 47,26.6 47,30.1 C47,33.6 49.8,36.3 53,36.3 C54.5,36.3 55.7,35.6 56.3,34.9 L56.4,34.9 L56.4,35.8 C56.4,38.2 55.1,39.4 53.1,39.4 C51.4,39.4 50.4,38.2 50,37.2 L47.6,38.2 C48.3,39.8 50.1,41.9 53.1,41.9 C56.3,41.9 59,40 59,35.4 L59,24.3 L56.4,24.3 Z M53.3,33.9 C51.4,33.9 49.8,32.3 49.8,30.2 C49.8,28 51.4,26.4 53.3,26.4 C55.2,26.4 56.6,28 56.6,30.2 C56.6,32.3 55.1,33.9 53.3,33.9 Z" id="Shape" fill={svgColor}></path>
                <rect id="Rectangle-path" fill={svgColor} x="60.9" y="17.7" width="2.7" height="18.3"></rect>
                <path d="M71.1,33.9 C69.7,33.9 68.7,33.3 68.1,32 L76.4,28.6 L76.1,27.9 C75.6,26.5 74,23.9 70.8,23.9 C67.6,23.9 64.9,26.4 64.9,30.1 C64.9,33.6 67.5,36.3 71.1,36.3 C73.9,36.3 75.6,34.6 76.3,33.5 L74.2,32.1 C73.5,33.2 72.5,33.9 71.1,33.9 Z M70.9,26.3 C72,26.3 72.9,26.8 73.2,27.6 L67.6,29.9 C67.6,27.5 69.5,26.3 70.9,26.3 Z" id="Shape" fill={svgColor}></path>
                <polygon id="Shape" fill={svgColor} points="0.9 0.1 2.3 0.1 5 5 5.1 5 7.9 0.1 9.2 0.1 9.2 8.7 7.9 8.7 7.9 4 8 2.6 7.9 2.6 5.5 6.9 4.7 6.9 2.2 2.6 2.1 2.6 2.2 4 2.2 8.7 0.9 8.7"></polygon>
                <path d="M14.3,8 C14.1,8.2 13.8,8.4 13.5,8.6 C13.2,8.8 12.9,8.9 12.4,8.9 C12.1,8.9 11.8,8.9 11.5,8.8 C11.2,8.7 11,8.6 10.8,8.4 C10.6,8.2 10.4,8 10.3,7.8 C10.2,7.6 10.1,7.3 10.1,7 C10.1,6.7 10.2,6.4 10.3,6.2 C10.4,6 10.6,5.7 10.8,5.6 C11,5.4 11.3,5.3 11.6,5.2 C11.9,5.1 12.2,5.1 12.6,5.1 C13,5.1 13.3,5.1 13.6,5.2 C13.9,5.3 14.1,5.3 14.2,5.4 L14.2,5 C14.2,4.8 14.2,4.7 14.1,4.5 C14,4.3 14,4.2 13.9,4.1 C13.8,4 13.6,3.9 13.5,3.8 C13.4,3.7 13.2,3.7 13,3.7 C12.7,3.7 12.4,3.8 12.2,3.9 C12,4 11.8,4.2 11.6,4.5 L10.5,3.8 C10.8,3.4 11.1,3.1 11.5,2.9 C11.9,2.7 12.4,2.6 12.9,2.6 C13.8,2.6 14.4,2.8 14.9,3.2 C15.4,3.6 15.6,4.2 15.6,5 L15.6,8.6 L14.3,8.6 L14.3,8 Z M14.3,6.2 C14.2,6.1 14,6.1 13.7,6 C13.5,5.9 13.2,5.9 13,5.9 C12.6,5.9 12.3,6 12,6.2 C11.8,6.4 11.6,6.6 11.6,6.9 C11.6,7 11.6,7.2 11.7,7.3 C11.8,7.4 11.8,7.5 11.9,7.6 C12,7.7 12.1,7.7 12.2,7.8 C12.3,7.8 12.5,7.9 12.6,7.9 C12.8,7.9 13,7.9 13.2,7.8 C13.4,7.7 13.6,7.6 13.7,7.5 C14,7.2 14.1,7 14.2,6.8 C14.3,6.6 14.3,6.4 14.3,6.2 Z" id="Shape" fill={svgColor}></path>
                <path d="M21.3,7.9 C21.1,8.2 20.8,8.4 20.5,8.6 C20.2,8.8 19.8,8.9 19.3,8.9 C18.9,8.9 18.6,8.8 18.2,8.7 C17.9,8.5 17.6,8.3 17.3,8 C17,7.7 16.8,7.4 16.7,7 C16.6,6.6 16.5,6.2 16.5,5.7 C16.5,5.2 16.6,4.8 16.7,4.4 C16.8,4 17.1,3.7 17.3,3.4 C17.6,3.1 17.9,2.9 18.2,2.7 C18.5,2.5 18.9,2.5 19.3,2.5 C19.8,2.5 20.1,2.6 20.5,2.8 C20.9,3 21.1,3.2 21.2,3.5 L21.3,3.5 L21.2,2.7 L21.2,0.1 L22.5,0.1 L22.5,8.7 L21.2,8.7 L21.2,7.9 L21.3,7.9 Z M19.5,7.6 C19.7,7.6 19.9,7.6 20.2,7.5 C20.4,7.4 20.6,7.3 20.8,7.1 C20.9,7 21,6.8 21.1,6.5 C21.2,6.3 21.2,6 21.2,5.7 C21.2,5.4 21.2,5.1 21.1,4.9 C21,4.7 20.9,4.5 20.7,4.3 C20.5,4.1 20.4,4 20.1,3.9 C19.9,3.8 19.7,3.8 19.4,3.8 C19.2,3.8 18.9,3.8 18.7,3.9 C18.5,4 18.3,4.1 18.2,4.3 C18.2,4.5 18.1,4.7 18,5 C17.9,5.3 17.9,5.5 17.9,5.8 C17.9,6.1 17.9,6.4 18,6.6 C18.1,6.8 18.2,7 18.4,7.2 C18.6,7.4 18.7,7.5 18.9,7.6 C19.1,7.6 19.3,7.6 19.5,7.6 Z" id="Shape" fill={svgColor}></path>
                <path d="M29.3,7.3 C29.1,7.8 28.7,8.1 28.2,8.4 C27.7,8.7 27.2,8.9 26.5,8.9 C26.1,8.9 25.7,8.8 25.3,8.7 C24.9,8.5 24.6,8.3 24.3,8 C24,7.7 23.8,7.4 23.7,7 C23.6,6.6 23.5,6.2 23.5,5.7 C23.5,5.3 23.6,4.9 23.7,4.5 C23.8,4.1 24,3.8 24.3,3.5 C24.6,3.2 24.9,3 25.2,2.8 C25.6,2.6 26,2.5 26.4,2.5 C26.9,2.5 27.3,2.6 27.6,2.7 C28,3 28.3,3.2 28.6,3.5 C28.8,3.8 29,4.1 29.2,4.5 C29.3,4.9 29.4,5.3 29.4,5.8 L29.4,6.1 L24.9,6.1 C24.9,6.4 25,6.6 25.1,6.8 C25.2,7 25.3,7.2 25.5,7.3 C25.7,7.4 25.8,7.5 26,7.6 C26.2,7.7 26.4,7.7 26.6,7.7 C27,7.7 27.3,7.6 27.5,7.4 C27.8,7.2 28,7 28.1,6.7 L29.3,7.3 Z M28,5 C28,4.9 27.9,4.7 27.9,4.6 C27.8,4.5 27.7,4.3 27.6,4.2 C27.5,4.1 27.4,4 27.2,3.9 C27,3.8 26.8,3.8 26.5,3.8 C26.1,3.8 25.8,3.9 25.5,4.1 C25.2,4.3 25,4.6 24.9,5 L28,5 Z" id="Shape" fill={svgColor}></path>
                <path d="M33,0.1 L34.3,0.1 L34.3,2.8 L34.2,3.6 L34.3,3.6 C34.5,3.3 34.7,3.1 35,2.9 C35.3,2.7 35.7,2.6 36.2,2.6 C36.6,2.6 36.9,2.7 37.3,2.8 C37.7,3 38,3.2 38.2,3.5 C38.5,3.8 38.7,4.1 38.8,4.5 C39,4.9 39,5.3 39,5.8 C39,6.3 39,6.6 38.8,7 C38.6,7.4 38.4,7.7 38.2,8 C37.9,8.3 37.6,8.5 37.3,8.7 C37,8.9 36.6,8.9 36.2,8.9 C35.7,8.9 35.4,8.8 35,8.6 C34.7,8.4 34.4,8.2 34.3,7.9 L34.2,7.9 L34.2,8.7 L33,8.7 L33,0.1 Z M36,7.6 C36.2,7.6 36.4,7.6 36.7,7.5 C36.9,7.4 37.1,7.3 37.3,7.1 C37.5,6.9 37.6,6.7 37.7,6.5 C37.8,6.3 37.8,6 37.8,5.7 C37.8,5.4 37.8,5.1 37.7,4.9 C37.6,4.7 37.5,4.5 37.3,4.3 C37,4.2 36.9,4.1 36.7,4 C36.5,3.9 36.3,3.9 36,3.9 C35.8,3.9 35.5,3.9 35.3,4 C35.1,4.1 34.9,4.2 34.8,4.4 C34.6,4.6 34.5,4.8 34.4,5 C34.3,5.2 34.3,5.5 34.3,5.8 C34.3,6.1 34.3,6.4 34.4,6.6 C34.5,6.8 34.6,7 34.8,7.2 C35,7.4 35.1,7.5 35.3,7.6 C35.5,7.6 35.8,7.6 36,7.6 Z" id="Shape" fill={svgColor}></path>
                <polygon id="Shape" fill={svgColor} points="41.7 8.4 39.3 2.9 40.8 2.9 42.4 6.8 42.5 6.8 44.1 2.9 45.6 2.9 41.9 11.4 40.5 11.4"></polygon>
                <path d="M51.3,0 C51.5,0 51.7,0 51.9,0.1 C52.1,0.1 52.2,0.2 52.4,0.3 L52,1.4 C51.9,1.4 51.8,1.3 51.7,1.3 C51.6,1.3 51.5,1.3 51.3,1.3 C51.1,1.3 50.9,1.4 50.7,1.5 C50.5,1.6 50.5,1.9 50.5,2.2 L50.5,2.8 L52,2.8 L52,4 L50.5,4 L50.5,8.7 L49.2,8.7 L49.2,4 L48.1,4 L48.1,2.8 L49.2,2.8 L49.2,2.1 C49.2,1.8 49.3,1.5 49.4,1.2 C49.5,0.9 49.6,0.7 49.8,0.5 C50,0.3 50.2,0.2 50.5,0.1 C50.8,0 51,0 51.3,0 Z" id="Shape" fill={svgColor}></path>
                <path d="M53.1,2.8 L54.4,2.8 L54.4,3.7 L54.5,3.7 C54.6,3.5 54.7,3.4 54.8,3.3 C54.9,3.2 55,3 55.2,2.9 C55.4,2.8 55.5,2.7 55.7,2.7 C55.9,2.6 56,2.6 56.2,2.6 C56.4,2.6 56.6,2.6 56.7,2.7 C56.8,2.7 57,2.8 57.1,2.8 L56.7,4 C56.6,4 56.5,3.9 56.4,3.9 C56.3,3.9 56.2,3.9 56,3.9 C55.8,3.9 55.6,3.9 55.4,4 C55.2,4.1 55.1,4.2 54.9,4.4 C54.8,4.6 54.7,4.7 54.6,4.9 C54.5,5.1 54.5,5.3 54.5,5.6 L54.5,8.7 L53.2,8.7 L53.2,2.8 L53.1,2.8 Z" id="Shape" fill={svgColor}></path>
                <path d="M58.5,1.8 C58.2,1.8 58,1.7 57.9,1.5 C57.8,1.3 57.6,1.1 57.6,0.9 C57.6,0.7 57.7,0.4 57.9,0.3 C58.1,0.1 58.3,0 58.5,0 C58.7,0 59,0.1 59.1,0.3 C59.3,0.5 59.4,0.7 59.4,0.9 C59.4,1.1 59.3,1.4 59.1,1.5 C58.9,1.6 58.8,1.8 58.5,1.8 Z M57.9,8.7 L57.9,2.8 L59.2,2.8 L59.2,8.7 L57.9,8.7 Z" id="Shape" fill={svgColor}></path>
                <path d="M66,7.3 C65.8,7.8 65.4,8.1 64.9,8.4 C64.4,8.7 63.9,8.9 63.2,8.9 C62.8,8.9 62.4,8.8 62,8.7 C61.6,8.5 61.3,8.3 61,8 C60.7,7.7 60.5,7.4 60.4,7 C60.3,6.6 60.2,6.2 60.2,5.7 C60.2,5.3 60.3,4.9 60.4,4.5 C60.5,4.1 60.7,3.8 61,3.5 C61.3,3.3 61.6,3 62,2.9 C62.4,2.7 62.8,2.6 63.2,2.6 C63.7,2.6 64.1,2.7 64.4,2.8 C64.8,3 65.1,3.2 65.3,3.4 C65.5,3.7 65.7,4 65.9,4.4 C66,4.8 66.1,5.2 66.1,5.7 L66.1,6 L61.6,6 C61.6,6.3 61.7,6.5 61.8,6.7 C61.9,7 62,7.1 62.2,7.3 C62.4,7.4 62.5,7.5 62.7,7.6 C62.9,7.7 63.1,7.7 63.3,7.7 C63.7,7.7 64,7.6 64.2,7.4 C64.4,7.2 64.7,7 64.8,6.7 L66,7.3 Z M64.8,5 C64.8,4.9 64.7,4.7 64.7,4.6 C64.6,4.5 64.5,4.3 64.4,4.2 C64.3,4.1 64.1,4 63.9,3.9 C63.7,3.8 63.5,3.8 63.2,3.8 C62.8,3.8 62.5,3.9 62.2,4.1 C61.9,4.3 61.7,4.6 61.6,5 L64.8,5 Z" id="Shape" fill={svgColor}></path>
                <path d="M68.4,3.6 C68.6,3.3 68.9,3.1 69.2,2.9 C69.5,2.7 69.9,2.6 70.3,2.6 C71,2.6 71.6,2.8 72,3.3 C72.4,3.7 72.6,4.3 72.6,5.1 L72.6,8.7 L71.3,8.7 L71.3,5.2 C71.3,4.7 71.2,4.3 70.9,4.1 C70.7,3.9 70.4,3.8 70,3.8 C69.8,3.8 69.6,3.8 69.4,3.9 C69.2,4 69.1,4.1 68.9,4.3 C68.8,4.5 68.7,4.7 68.6,4.9 C68.5,5.1 68.5,5.3 68.5,5.6 L68.5,8.7 L67.2,8.7 L67.2,2.8 L68.5,2.8 L68.5,3.6 L68.4,3.6 Z" id="Shape" fill={svgColor}></path>
                <path d="M78.3,7.9 C78.1,8.2 77.8,8.4 77.5,8.6 C77.2,8.8 76.8,8.9 76.3,8.9 C75.9,8.9 75.6,8.8 75.2,8.7 C74.9,8.5 74.6,8.3 74.3,8 C74,7.7 73.8,7.4 73.7,7 C73.5,6.6 73.5,6.2 73.5,5.7 C73.5,5.2 73.6,4.8 73.7,4.4 C73.9,4 74.1,3.7 74.3,3.4 C74.6,3.1 74.9,2.9 75.2,2.7 C75.5,2.5 75.9,2.5 76.3,2.5 C76.8,2.5 77.1,2.6 77.5,2.8 C77.9,3 78.1,3.2 78.2,3.5 L78.3,3.5 L78.2,2.7 L78.2,0.1 L79.5,0.1 L79.5,8.7 L78.2,8.7 L78.2,7.9 L78.3,7.9 Z M76.5,7.6 C76.7,7.6 76.9,7.6 77.2,7.5 C77.4,7.4 77.6,7.3 77.8,7.1 C77.9,7 78,6.8 78.1,6.5 C78.2,6.3 78.2,6 78.2,5.7 C78.2,5.4 78.2,5.1 78.1,4.9 C78,4.7 77.9,4.5 77.7,4.3 C77.5,4.1 77.4,4 77.1,3.9 C76.9,3.8 76.7,3.8 76.4,3.8 C76.2,3.8 75.9,3.8 75.7,3.9 C75.5,4 75.3,4.1 75.2,4.3 C75.2,4.5 75,4.7 75,5 C74.9,5.2 74.9,5.5 74.9,5.8 C74.9,6.1 74.9,6.4 75,6.6 C75,6.8 75.2,7 75.3,7.1 C75.5,7.3 75.6,7.4 75.8,7.5 C76.1,7.6 76.3,7.6 76.5,7.6 Z" id="Shape" fill={svgColor}></path>
                <path d="M83,8.9 C82.6,8.9 82.3,8.9 82,8.8 C81.7,8.7 81.5,8.6 81.2,8.4 C81,8.2 80.8,8.1 80.7,7.9 C80.6,7.7 80.4,7.5 80.4,7.3 L81.6,6.8 C81.8,7 82,7.3 82.2,7.5 C82.5,7.7 82.7,7.7 83,7.7 C83.3,7.7 83.6,7.6 83.8,7.5 C84,7.4 84.1,7.2 84.1,7 C84.1,6.8 84,6.7 83.9,6.6 C83.8,6.5 83.5,6.4 83.1,6.3 L82.3,6.1 C82.1,6.1 81.9,6 81.7,5.9 C81.5,5.8 81.3,5.7 81.2,5.6 C81.1,5.5 80.9,5.3 80.8,5.1 C80.7,4.9 80.7,4.7 80.7,4.4 C80.7,4.1 80.8,3.9 80.9,3.6 C81,3.4 81.2,3.2 81.4,3 C81.6,2.8 81.9,2.7 82.2,2.7 C82.5,2.6 82.8,2.6 83.1,2.6 C83.4,2.6 83.6,2.6 83.9,2.7 C84,2.8 84.2,2.8 84.4,3 C84.6,3.1 84.8,3.3 85,3.4 C85.2,3.6 85.3,3.8 85.4,4 L84.2,4.5 C84.1,4.2 83.9,4.1 83.7,3.9 C83.5,3.8 83.2,3.7 83,3.7 C82.9,3.7 82.8,3.7 82.7,3.7 C82.6,3.7 82.5,3.8 82.4,3.8 C82.2,4 82.1,4 82,4.1 C81.9,4.2 82,4.3 82,4.4 C82,4.6 82.1,4.7 82.2,4.8 C82.3,4.9 82.6,5 82.8,5 L83.7,5.2 C84.3,5.4 84.8,5.6 85,5.9 C85.2,6.2 85.4,6.6 85.4,7 C85.4,7.3 85.3,7.5 85.2,7.7 C85.1,7.9 84.9,8.1 84.7,8.3 C84.5,8.5 84.2,8.6 83.9,8.7 C83.7,8.8 83.4,8.9 83,8.9 Z" id="Shape" fill={svgColor}></path>
                <path d="M91.8,2.6 C92.2,2.6 92.7,2.7 93,2.8 C93.4,3 93.7,3.2 94,3.5 C94.3,3.8 94.5,4.1 94.6,4.5 C94.7,4.9 94.8,5.3 94.8,5.7 C94.8,6.1 94.7,6.6 94.6,6.9 C94.4,7.3 94.2,7.6 94,7.9 C93.7,8.2 93.4,8.4 93,8.6 C92.6,8.8 92.2,8.8 91.8,8.8 C91.4,8.8 91,8.8 90.6,8.6 C90.2,8.4 89.9,8.2 89.6,7.9 C89.3,7.6 89.1,7.3 89,6.9 C88.8,6.5 88.8,6.1 88.8,5.7 C88.8,5.3 88.9,4.8 89,4.5 C89.2,4.1 89.4,3.8 89.6,3.5 C89.9,3.2 90.2,3 90.6,2.8 C91,2.7 91.4,2.6 91.8,2.6 Z M91.8,7.6 C92,7.6 92.2,7.6 92.4,7.5 C92.6,7.4 92.8,7.3 93,7.1 C93.2,6.9 93.3,6.7 93.4,6.5 C93.5,6.3 93.5,6 93.5,5.7 C93.5,5.4 93.5,5.1 93.4,4.9 C93.3,4.7 93.2,4.5 93,4.3 C92.8,4.1 92.7,4 92.4,3.9 C92.2,3.8 92,3.8 91.8,3.8 C91.6,3.8 91.4,3.8 91.2,3.9 C91,4 90.8,4.1 90.6,4.3 C90.4,4.5 90.3,4.7 90.2,4.9 C90.1,5.1 90.1,5.4 90.1,5.7 C90.1,6 90.1,6.3 90.2,6.5 C90.3,6.7 90.4,6.9 90.6,7.1 C90.8,7.3 90.9,7.4 91.2,7.5 C91.4,7.6 91.6,7.6 91.8,7.6 Z" id="Shape" fill={svgColor}></path>
                <path d="M98.5,0 C98.7,0 98.9,0 99.1,0.1 C99.3,0.2 99.4,0.2 99.6,0.3 L99.2,1.5 C99.1,1.5 99,1.4 98.9,1.4 C98.8,1.4 98.7,1.4 98.5,1.4 C98.3,1.4 98.1,1.5 97.9,1.6 C97.7,1.7 97.7,2 97.7,2.3 L97.7,2.9 L99.2,2.9 L99.2,4 L97.7,4 L97.7,8.7 L96.4,8.7 L96.4,4 L95.3,4 L95.3,2.8 L96.4,2.8 L96.4,2.1 C96.4,1.8 96.5,1.5 96.6,1.2 C96.7,1 96.8,0.7 97,0.6 C97.2,0.4 97.4,0.3 97.7,0.2 C97.9,0 98.2,0 98.5,0 Z" id="Shape" fill={svgColor}></path>
              </g>
          </svg>
        </a>
      </div>
    );
  }
}

let mapStateToProps = state => {
  return {
    backgroundMode: state.backgroundMode,
    screenWidth: state.screenWidth,
    screenHeight: state.screenHeight
  }
}

export default connect(mapStateToProps)(GoogleFontBadge);