import React from "react";
import { connect } from "react-redux";
import { withTranslation } from "react-i18next";

import Toggle from "./toggle";
import { controlsWidth } from "../../util/globals";
import { TOGGLE_TRANSMISSION_LINES } from "../../actions/types";
import { SidebarSubtitle } from "./styles";

@connect((state) => {
  return {
    showTransmissionLines: state.controls.showTransmissionLines
  };
})
class TransmissionLines extends React.Component {
  render() {
    const { t } = this.props;
    return (
      <>
        <SidebarSubtitle spaceAbove>
          {t("sidebar:Transmission lines")}
        </SidebarSubtitle>
        <div style={{marginBottom: 10, width: controlsWidth, fontSize: 14}}>
          <Toggle
            display
            on={this.props.showTransmissionLines}
            callback={() => {
              this.props.dispatch({ type: TOGGLE_TRANSMISSION_LINES, data: !this.props.showTransmissionLines });
            }}
            label={t("sidebar:Show transmission lines")}
          />
        </div>
      </>
    );
  }
}

export default withTranslation()(TransmissionLines);

@@ -260,52 +260,8 @@
 es%22;
-%0Aimport %7B SidebarSubtitle %7D from %22./styles%22;
 %0A%0A@c
@@ -473,127 +473,8 @@
 n (%0A
-      %3C%3E%0A        %3CSidebarSubtitle spaceAbove%3E%0A          %7Bt(%22sidebar:Transmission lines%22)%7D%0A        %3C/SidebarSubtitle%3E%0A  
     
@@ -556,18 +556,16 @@
     
- 
- 
 %3CToggle%0A
     
@@ -560,18 +560,16 @@
 %3CToggle%0A
-  
         
@@ -578,18 +578,16 @@
 display%0A
-  
         
@@ -636,18 +636,16 @@
         
-  
 callback
@@ -654,18 +654,16 @@
 () =%3E %7B%0A
-  
         
@@ -779,15 +779,11 @@
     
-  
 %7D%7D%0A
-  
     
@@ -845,15 +845,11 @@
     
-  
 /%3E%0A
-  
     
@@ -861,18 +861,8 @@
 iv%3E%0A
-      %3C/%3E%0A
     

Remove unnecessary byline in sidebar