From 7c5a92e07968d9e96d94849271343ba692a008a4 Mon Sep 17 00:00:00 2001
From: Vincent Rubinetti <vince.rubinetti@gmail.com>
Date: Fri, 9 Aug 2019 21:25:33 -0400
Subject: [PATCH] add new section class for app

---
 src/app.css                    | 3 +++
 src/disease-contributions.js   | 4 ++--
 src/disease-info.js            | 4 ++--
 src/disease-prediction-info.js | 4 ++--
 src/disease-predictions.js     | 4 ++--
 src/diseases.js                | 4 ++--
 src/feature-info.js            | 4 ++--
 src/feature-prediction-info.js | 4 ++--
 src/feature-predictions.js     | 4 ++--
 src/features.js                | 4 ++--
 src/gene-contributions.js      | 4 ++--
 src/gene-info.js               | 4 ++--
 src/gene-prediction-info.js    | 4 ++--
 src/gene-predictions.js        | 4 ++--
 src/genes.js                   | 4 ++--
 15 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/app.css b/src/app.css
index ad64d2a..725b24e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,6 +2,9 @@
   text-align: center;
 }
 
+.app_section {
+  margin: 20px 0;
+}
 table tr th {
   height: 40px;
 }
diff --git a/src/disease-contributions.js b/src/disease-contributions.js
index 3f3b14d..f8d8fac 100644
--- a/src/disease-contributions.js
+++ b/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>
     );
   }
 }
diff --git a/src/disease-info.js b/src/disease-info.js
index 37355eb..9573d7d 100644
--- a/src/disease-info.js
+++ b/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>
     );
   }
 }
diff --git a/src/disease-prediction-info.js b/src/disease-prediction-info.js
index e638e59..4dbc9ae 100644
--- a/src/disease-prediction-info.js
+++ b/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>
     );
   }
 }
diff --git a/src/disease-predictions.js b/src/disease-predictions.js
index 7bc6367..10336b0 100644
--- a/src/disease-predictions.js
+++ b/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>
     );
   }
 }
diff --git a/src/diseases.js b/src/diseases.js
index 109ae08..9a7126d 100644
--- a/src/diseases.js
+++ b/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>
     );
   }
 }
diff --git a/src/feature-info.js b/src/feature-info.js
index dae5df2..b1587f2 100644
--- a/src/feature-info.js
+++ b/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>
     );
   }
 }
diff --git a/src/feature-prediction-info.js b/src/feature-prediction-info.js
index b292f7a..416c14b 100644
--- a/src/feature-prediction-info.js
+++ b/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>
     );
   }
 }
diff --git a/src/feature-predictions.js b/src/feature-predictions.js
index cf99aa1..a07b532 100644
--- a/src/feature-predictions.js
+++ b/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>
     );
   }
 }
diff --git a/src/features.js b/src/features.js
index d899bc6..f626e7e 100644
--- a/src/features.js
+++ b/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>
     );
   }
 }
diff --git a/src/gene-contributions.js b/src/gene-contributions.js
index ffdacc5..b78cb11 100644
--- a/src/gene-contributions.js
+++ b/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>
     );
   }
 }
diff --git a/src/gene-info.js b/src/gene-info.js
index 244b403..ee318ed 100644
--- a/src/gene-info.js
+++ b/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>
     );
   }
 }
diff --git a/src/gene-prediction-info.js b/src/gene-prediction-info.js
index 8e1fe31..92622cb 100644
--- a/src/gene-prediction-info.js
+++ b/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>
     );
   }
 }
diff --git a/src/gene-predictions.js b/src/gene-predictions.js
index 1998716..7451b4a 100644
--- a/src/gene-predictions.js
+++ b/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>
     );
   }
 }
diff --git a/src/genes.js b/src/genes.js
index be396e7..574fddc 100644
--- a/src/genes.js
+++ b/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>
     );
   }
 }