diff --git a/src/components/AddOption.js b/src/components/AddOption.js
index c26024e..89ca39f 100644
--- a/src/components/AddOption.js
+++ b/src/components/AddOption.js
@@ -20,9 +20,9 @@ export default class AddOption extends React.Component {
render () {
return (
- {this.state.error &&
{this.state.error}
}
-
diff --git a/src/components/Option.js b/src/components/Option.js
index 6ba879c..55b3b4e 100644
--- a/src/components/Option.js
+++ b/src/components/Option.js
@@ -2,13 +2,13 @@ import React from 'react'
const Option = (props) => {
return (
-
- {props.optionText}
+
+
{props.count}. {props.optionText}
-
+
)
} // End of Option stateless functional component definition
diff --git a/src/components/OptionModal.js b/src/components/OptionModal.js
new file mode 100644
index 0000000..50ca1d1
--- /dev/null
+++ b/src/components/OptionModal.js
@@ -0,0 +1,16 @@
+import React from 'react'
+// Third Party Components
+import Modal from 'react-modal'
+
+const OptionModal = (props) => (
+
+ Selected Option
+ {props.selectedOption}
+
+)
+
+export default OptionModal
diff --git a/src/components/Options.js b/src/components/Options.js
index 634c822..ab11516 100644
--- a/src/components/Options.js
+++ b/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 (
)
diff --git a/src/styles/components/_add-option.scss b/src/styles/components/_add-option.scss
new file mode 100644
index 0000000..cd5cff6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/styles/components/_option.scss b/src/styles/components/_option.scss
new file mode 100644
index 0000000..354e43a
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 20212b6..d0aa762 100644
--- a/src/styles/style.scss
+++ b/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';