style features and options components

src/PhonoChangeApplier.scss

@@ -21,7 +21,9 @@ div.App {
     grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
     
     div {
-      padding: 1em;
+      width: 100%;
+      max-height: 85vh;
+      margin: 1em;
       overflow-y: scroll;
     }
   }

src/components/Epochs.js

@@ -37,22 +37,35 @@ const Epochs = ({epochs, dispatch}) => {
     })
   }
   
+  const renderAddEpochButton = index => {
+    if (index === epochs.length - 1 ) return (
+      <form onSubmit={e=>addEpoch(e)}>
+        <input type="submit" name="add-epoch" value="Add Epoch" ></input>
+      </form>
+    )
+    return <></>
+  }
+
   const renderEpochs = () => {
     if (epochs) return epochs.map((epoch, index) => (
+      <div 
+        className="SoundChangeSuite" 
+        data-testid={`${epoch.name}_SoundChangeSuite`}
+        key={`epoch-${index}`}
+      >
         <SoundChangeSuite 
-      key={`epoch-${index}`} epochIndex={index} epoch={epoch} 
+          epochIndex={index} epoch={epoch} 
           updateEpoch={updateEpoch} removeEpoch={removeEpoch}
           // error={errors[epoch.name]}
         />
+        {renderAddEpochButton(index)}
+      </div>
     ));
   }
 
   return (
     <>
       { renderEpochs() }
-      <form onSubmit={e=>addEpoch(e)}>
-        <input type="submit" name="add-epoch" value="Add Epoch" ></input>
-      </form>
     </>
   );
 }

src/components/Features.js

@@ -21,8 +21,22 @@ const parsePhonesFromFeatureObject = featureObject => {
       const { plus, minus } = feature[featureName];
       return (
         <li key={`feature__${featureName}`}>
-          <span className="plus-phones">{`[+ ${featureName}] = ${plus}`}</span>
+          <span className="feature--names-and-phones">
-          <span className="minus-phones">{`[- ${featureName}] = ${minus}`}</span>
+            <span className="feature--feature-name"> 
+              {`[+ ${featureName}]`}
+            </span>
+            <span className="feature--feature-phones">
+              {plus}
+            </span>
+          </span>
+          <span className="feature--names-and-phones">
+            <span className="feature--feature-name"> 
+              {`[- ${featureName}]`}
+            </span>
+            <span className="feature--feature-phones">
+              {minus}
+            </span>
+          </span>
         </li>
       )
     })
@@ -82,20 +96,22 @@ const Features = ({ phones, features, dispatch }) => {
           ></input>
 
         {/* ! Positive Phones */}
-        <label htmlFor="positive-phones">+</label>
+        <label htmlFor="positive-phones">+
           <input 
             id="positive-phones"
             type="text" name="phonemes" 
             value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
           ></input>
+        </label>
         
         {/* ! Negative Phones */}
-        <label htmlFor="negative-phones">-</label>
+        <label htmlFor="negative-phones">-
           <input 
             id="negative-phones"
             type="text" name="phonemes" 
             value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
           ></input>
+        </label>
 
         <input 
           type="submit" 

src/components/Features.scss

@@ -0,0 +1,27 @@
+div.Features {
+  max-width: 85%;
+
+  ul.Features__list li {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    span.feature--names-and-phones {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    }
+
+    span.feature-name {
+      font-weight: 600;
+    }
+  }
+
+  form {
+    display: flex;
+    flex-flow: column;
+
+    input {
+      margin: 0.1em;
+      font-size: 1em;
+    }
+  }
+}

src/components/Options.js

@@ -6,7 +6,7 @@ const Options = ({ options, dispatch }) => {
   const [ load, setLoad ] = useState('');
 
   const handleRadioChange = e => {
-    const { name, id } = e.target.name;
+    const { name, id } = e.target;
     dispatch({
       type: 'SET_OPTIONS',
       value: {
@@ -16,18 +16,6 @@ const Options = ({ options, dispatch }) => {
     });
   }
   
-  const handleCheckChange = e => {
-    const option = e.target.name;
-    const setValue = e.target.checked ? 'true' : 'false';
-    dispatch({
-      type: 'SET_OPTIONS',
-      value: {
-        option,
-        setValue
-      }
-    });
-  }
-
   const handleFormSubmit = (e, options) => {
     e.preventDefault();
     dispatch({
@@ -71,13 +59,6 @@ const Options = ({ options, dispatch }) => {
           <span className="Options__output-example"> *proto > *epoch > output</span>
         </label>
         
-        <input 
-          type="checkbox" name="save"
-          checked={options ? options.save : false}
-          onChange={e=>handleCheckChange(e)}
-        />
-        <label htmlFor="save">Store session on Run</label>
-        
         <input type="submit" value="Run Changes"></input>
       </form>
 

src/components/Options.scss

@@ -0,0 +1,8 @@
+div.Options {
+
+  form {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
+}

src/components/SoundChangeSuite.js

@@ -14,7 +14,7 @@ const SoundChangeSuite = props => {
   }, [epoch])
 
   return (
-    <div className="SoundChangeSuite" data-testid={`${epoch.name}_SoundChangeSuite`}>
+    <>
       <h4>{epoch.name}</h4>
       <form className="SoundChangeSuite__form" data-testid={`${epoch.name}_SoundChangeSuite_changes`}>
         
@@ -46,7 +46,7 @@ const SoundChangeSuite = props => {
       <form onSubmit={e=>props.removeEpoch(e, epoch.name)}>
         <input type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
       </form>
-    </div>
+    </>
   );
 }
 

src/reducers/reducer.results.js

@@ -276,6 +276,7 @@ export const run = (state: stateType, action: resultsAction): stateType => {
     }, []);
     
     const results = passResults.map(stringifyResults);
+    console.log(results)
     return {...state, results }
   } catch (err) {
     console.log(err)