hook epochs into Epochs render

src/App.css

@@ -7,14 +7,12 @@
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
 
 .App-link {

src/PhonoChangeApplier.js

@@ -124,7 +124,9 @@ const PhonoChangeApplier = () => {
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={state.lexicon} dispatch={dispatch}/>
       <Features phones={state.phones} features={state.features} dispatch={dispatch}/>
-      <Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
+      <Epochs epochs={state.epochs} dispatch={dispatch}
+      // setEpochs={setEpochs} 
+      />
       <Options options={options} setOptions={setOptions} runChanges={runChanges}/>
       <Output results={results} setResults={setResults}/>
     </div>

src/components/Epochs.js

@@ -10,7 +10,10 @@ const Epochs = props => {
   const addEpoch = (e, props) => {
     e.preventDefault()
     let index = props.epochs.length + 1;
-    props.setEpochs([...props.epochs, {name: `epoch ${index}`, changes:['[+ feature]>[- feature]/_#']}])
+    props.dispatch({
+      type: 'ADD_EPOCH',
+      value: {name: `Epoch ${index}`}
+    })
   }
 
   const removeEpoch = (e, epochName) => {
@@ -33,7 +36,7 @@ const Epochs = props => {
         return <SoundChangeSuite 
           key={`epochname-${idx}`} epochIndex={idx} epoch={epoch} 
           updateEpoch={updateEpoch} removeEpoch={removeEpoch}
-          error={props.errors[epoch.name]}
+          // error={props.errors[epoch.name]}
         />}) 
         : <></>}
       <form onSubmit={e=>addEpoch(e, props)}>

src/index.css

@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #111;
+  color: #EEE;
 }
 
 code {