Merge pull request #783 from dylanesque/ac-refactor

Inline style Refactoring
codeforboston · Sep 24, 2018 · 57c8af6 · 57c8af6
2 parents ca5850e + 8215954
commit 57c8af6
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/src/components/AboutContent.js b/src/components/AboutContent.js
@@ -10,9 +10,9 @@ const AboutContent = function ({ snippets }) {
   return (
     <div>
 
-      <Header
-        as='h1'
-        style={{ fontSize: '4em' }}>
+
+      <Header className="ac-header"
+        as='h1'>
         { snippets.i_aboutPageHeader }
       </Header>
 

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -11,7 +11,6 @@ class Header extends React.Component {
         className="header_segment"
         inverted
         textAlign='center'
-        style={{ padding: '1em 0em' }}
         vertical
         color='teal'>
         <MainMenu />

diff --git a/src/components/PageLayout.js b/src/components/PageLayout.js
@@ -7,8 +7,7 @@ import {
 const PageLayout = (props) => {
   return (
     <div>
-      <Segment
-        style={{ padding: '8em 0em' }}
+      <Segment className="pl-segment"
         vertical>
         <Grid
           container

diff --git a/src/index.css b/src/index.css
@@ -10,6 +10,12 @@ body {
   height:  100%;
 }
 
+/* AboutContent.js styles */
+
+.ac-header {
+  font-size: 4em;
+}
+
 /* App.js styles */
 #App {
   min-height: 100%;
@@ -36,6 +42,12 @@ body {
   padding: 1em 0em;
 }
 
+/* PageLayout.js styles */
+
+.pl-segment {
+  padding: 8em 0em;
+}
+
 form .field-aligner {
   display: inline-block;
   text-align: left;