make new section class

src/app.css

@@ -2,6 +2,9 @@
   text-align: center;
 }
 
+.app_section {
+  margin: 20px 0;
+}
 table tr th {
   height: 40px;
 }

src/disease-contributions.js

@@ -9,7 +9,7 @@ export class DiseaseContributions extends Component {
       return <></>;
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Contributions for{' '}
@@ -33,7 +33,7 @@ export class DiseaseContributions extends Component {
             }
           }}
         />
-      </section>
+      </div>
     );
   }
 }

src/disease-info.js

@@ -23,7 +23,7 @@ export class DiseaseInfo extends Component {
     ];
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Info about{' '}
@@ -32,7 +32,7 @@ export class DiseaseInfo extends Component {
           </b>
         </p>
         <InfoTable bodyContents={bodyContents} />
-      </section>
+      </div>
     );
   }
 }

src/disease-prediction-info.js

@@ -40,7 +40,7 @@ export class DiseasePredictionInfo extends Component {
     ];
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Info about{' '}
@@ -49,7 +49,7 @@ export class DiseasePredictionInfo extends Component {
           </b>
         </p>
         <InfoTable bodyContents={bodyContents} />
-      </section>
+      </div>
     );
   }
 }

src/disease-predictions.js

@@ -28,7 +28,7 @@ export class DiseasePredictions extends Component {
       return <></>;
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Predictions for{' '}
@@ -162,7 +162,7 @@ export class DiseasePredictions extends Component {
           ]}
           bodyClasses={['', 'small left', 'left']}
         />
-      </section>
+      </div>
     );
   }
 }

src/diseases.js

@@ -25,7 +25,7 @@ export class Diseases extends Component {
   // display component
   render() {
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <div className='table_attic'>
           <span className='small light'>
             {toComma(this.props.diseases.length)} entries
@@ -137,7 +137,7 @@ export class Diseases extends Component {
           ]}
           bodyClasses={['', 'small left', 'left']}
         />
-      </section>
+      </div>
     );
   }
 }

src/feature-info.js

@@ -22,7 +22,7 @@ export class FeatureInfo extends Component {
     ];
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Info about{' '}
@@ -31,7 +31,7 @@ export class FeatureInfo extends Component {
           </b>
         </p>
         <InfoTable bodyContents={bodyContents} />
-      </section>
+      </div>
     );
   }
 }

src/feature-prediction-info.js

@@ -34,7 +34,7 @@ export class FeaturePredictionInfo extends Component {
     ];
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Info about{' '}
@@ -43,7 +43,7 @@ export class FeaturePredictionInfo extends Component {
           </b>
         </p>
         <InfoTable bodyContents={bodyContents} />
-      </section>
+      </div>
     );
   }
 }

src/feature-predictions.js

@@ -28,7 +28,7 @@ export class FeaturePredictions extends Component {
       return <></>;
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Predictions for{' '}
@@ -162,7 +162,7 @@ export class FeaturePredictions extends Component {
           ]}
           bodyClasses={['', 'small left', 'left']}
         />
-      </section>
+      </div>
     );
   }
 }

src/features.js

@@ -25,7 +25,7 @@ export class Features extends Component {
   // display component
   render() {
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <div className='table_attic'>
           <span className='small light'>
             {toComma(this.props.features.length)} entries
@@ -119,7 +119,7 @@ export class Features extends Component {
           ]}
           bodyClasses={['', 'small left', 'left']}
         />
-      </section>
+      </div>
     );
   }
 }

src/gene-contributions.js

@@ -9,7 +9,7 @@ export class GeneContributions extends Component {
       return <></>;
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Contributions for{' '}
@@ -33,7 +33,7 @@ export class GeneContributions extends Component {
             }
           }}
         />
-      </section>
+      </div>
     );
   }
 }

src/gene-info.js

@@ -32,7 +32,7 @@ export class GeneInfo extends Component {
     ];
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Info about{' '}
@@ -41,7 +41,7 @@ export class GeneInfo extends Component {
           </b>
         </p>
         <InfoTable bodyContents={bodyContents} />
-      </section>
+      </div>
     );
   }
 }

src/gene-prediction-info.js

@@ -29,7 +29,7 @@ export class GenePredictionInfo extends Component {
     ];
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Info about{' '}
@@ -38,7 +38,7 @@ export class GenePredictionInfo extends Component {
           </b>
         </p>
         <InfoTable bodyContents={bodyContents} />
-      </section>
+      </div>
     );
   }
 }

src/gene-predictions.js

@@ -28,7 +28,7 @@ export class GenePredictions extends Component {
       return <></>;
 
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <hr />
         <p className='left'>
           Predictions for{' '}
@@ -152,7 +152,7 @@ export class GenePredictions extends Component {
           ]}
           bodyClasses={['', 'small left', 'left']}
         />
-      </section>
+      </div>
     );
   }
 }

src/genes.js

@@ -25,7 +25,7 @@ export class Genes extends Component {
   // display component
   render() {
     return (
-      <section style={{ display: this.props.visible ? 'block' : 'none' }}>
+      <div className='app_section' style={{ display: this.props.visible ? 'block' : 'none' }}>
         <div className='table_attic'>
           <span className='small light'>
             {toComma(this.props.genes.length)} entries
@@ -120,7 +120,7 @@ export class Genes extends Component {
           ]}
           bodyClasses={['', 'small left', 'left']}
         />
-      </section>
+      </div>
     );
   }
 }