Add styling to Widget etc

src/components/AddOption.js

@@ -20,9 +20,9 @@ export default class AddOption extends React.Component {
   render () {
     return (
       <div>
-        {this.state.error && <div>{this.state.error}</div>}
-        <form onSubmit={this.handleAddOption}>
-          <input type='text' name='option' />
+        {this.state.error && <div className="add-option-error">{this.state.error}</div>}
+        <form className="add-option" onSubmit={this.handleAddOption}>
+          <input className="add-option__input"  type='text' name='option' />
           <button className="button">Add Option</button>
         </form>
 

src/components/Option.js

@@ -2,13 +2,13 @@ import React from 'react'
 
 const Option = (props) => {
   return (
-    <p>
-      {props.optionText}
+    <div className="option">
+      <p className="option__text">{props.count}. {props.optionText}</p>
       <button className="button button--link" onClick={(e) => {
         // Rather than passing the whole event, just pass the option text
         props.handleDeleteOption(props.optionText)
       }}>remove</button>
-    </p>
+    </div>
   )
 } // End of Option stateless functional component definition
 

src/components/OptionModal.js

@@ -0,0 +1,16 @@
+import React from 'react'
+// Third Party Components
+import Modal from 'react-modal'
+
+const OptionModal = (props) => (
+  <Modal
+    isOpen={!!props.selectedOption}
+    contentLabel="Selected Option"
+
+  >
+    <h3>Selected Option</h3>
+    <p>{props.selectedOption}</p>
+  </Modal>
+)
+
+export default OptionModal

src/components/Options.js

@@ -27,11 +27,12 @@ const Options = (props) => {
       }
       {
         props.options.length > 0 &&
-        props.options.map((option) => {
+        props.options.map((option, index) => {
           return (
             <Option
               key={option}
               optionText={option}
+              count={index + 1}
               handleDeleteOption={props.handleDeleteOption}
             />
           )

src/styles/components/_add-option.scss

@@ -0,0 +1,20 @@
+.add-option {
+  display: flex;
+  padding: $m-size;
+}
+.add-option__input {
+  color: $off-white;
+  background: $dark-blue;
+  border: none;
+  border-bottom: .3rem solid darken($color: $dark-blue, $amount: 10);
+  flex-grow: 1;
+  margin-right: $s-size;
+  padding: $s-size;
+}
+
+.add-option-error {
+  color: $off-white;
+  font-style: italic;
+  padding: 0 $m-size;
+  margin-top: $m-size;
+}

src/styles/components/_option.scss

@@ -0,0 +1,12 @@
+.option {
+  border-bottom: 1px solid lighten($color: $light-blue, $amount: 10);
+  display: flex;
+  justify-content: space-between;
+  padding: $l-size $m-size;
+}
+
+.option__text {
+  color: white;
+  font-weight: 500;
+  font-size: 2rem;
+}

src/styles/style.scss

@@ -1,6 +1,10 @@
+// Setup
 @import './base/settings';
 @import './base/base';
+// Partials
+@import './components/add-option';
+@import './components/button';
 @import './components/container';
 @import './components/header';
-@import './components/button';
+@import './components/option';
 @import './components/widget';