chore(feedback):implement LFA feedback

.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
 }

.eslintignore

@@ -1,2 +1,3 @@
 jest.config.js
-server.js
+server.js
+**/*.js

package.json

@@ -23,6 +23,12 @@
   "dependencies": {
     "babel-eslint": "^10.0.2",
     "express": "^4.17.1",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/runtime": "^7.5.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.19",
+    "@fortawesome/free-brands-svg-icons": "^5.9.0",
+    "@fortawesome/free-solid-svg-icons": "^5.9.0",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "axios": "^0.19.0",
     "axios-mock-adapter": "^1.17.0",
     "bootstrap": "^4.3.1",
@@ -58,6 +64,7 @@
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-transform-runtime": "^7.5.0",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.2",

src/components/Button/button.js

@@ -3,17 +3,19 @@ import PropTypes from 'prop-types';
 import { Button as ReactStrapBtn } from 'reactstrap';
 import './button.scss';
 
-const Button = ({ type, text, onClick, classname }) => (
-  <ReactStrapBtn className={classname} type={type} onClick={onClick}>
+const Button = ({
+  type, text, onClick, classname,
+}) => (
+  <ReactStrapBtn type={type} onClick={onClick} className={classname}>
     {text}
   </ReactStrapBtn>
 );
 
 Button.propTypes = {
   type: PropTypes.string,
+  classname: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string.isRequired,
-  classname: PropTypes.string,
 };
 
 Button.defaultProps = {

src/components/Button/button.scss

@@ -7,3 +7,10 @@
   padding: 14px;
   width: 100%;
 }
+.b-button:focus,
+.b-button:active {
+  box-shadow: none;
+  background-color: #f3994a !important;
+  border-color: #f3994a !important;
+  box-shadow: none !important;
+}

src/components/Footer/Footer.js

@@ -7,15 +7,15 @@ const Footer = () => (
     <nav>
       <ul className="footer-links">
         <Link className="flink" to="/about">
-            About
+          About
         </Link>
         <span>|</span>
         <Link className="flink" to="how-it-work">
-            How it works
+          How it works
         </Link>
         <span>|</span>
         <Link className="flink" to="contacts">
-           Contact us
+          Contact us
         </Link>
       </ul>
       <p className="rights">© CSLC 2019. All rights Reserved.</p>

src/components/heading/heading.js → src/components/Heading/heading.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './heading.scss';
 
-const Heading = ({ title }) => <h2 className="headsi">{title}</h2>;
+export const Heading = ({ title }) => <h2 className="headsi">{title}</h2>;
 Heading.propTypes = {
   title: PropTypes.string.isRequired,
 };

src/components/Inputs/Input.js

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import 'bootstrap/dist/css/bootstrap.css';
+import PropTypes from 'prop-types';
+import './inputs.scss';
+
+const InputField = ({
+  id, type, placeholder, name, onChange, value,
+}) => (
+  <Fragment>
+    <input
+      id={id}
+      className="input"
+      type={type}
+      placeholder={placeholder}
+      name={name}
+      value={value}
+      onChange={onChange}
+    />
+  </Fragment>
+);
+InputField.propTypes = {
+  type: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+InputField.defaultProps = {
+  type: 'text',
+};
+export default InputField;

src/components/Inputs/inputs.scss

@@ -0,0 +1,42 @@
+$input-color: #f2994a;
+$feedback: #ff0000;
+$border: #707070;
+
+.input {
+  margin: auto;
+  border: 0.5px solid $border;
+  width: 100%;
+  padding: 0.6rem;
+  border-radius: 5px;
+}
+
+.input:active,
+.input:focus,
+.input:focus-within {
+  outline-color: #f2994a;
+  border: 0.5px solid $input-color;
+}
+.example {
+  width: 400px;
+  background: #ffffff;
+  border-radius: 5px;
+  margin: auto;
+  z-index: 1000;
+  text-align: center;
+  padding-top: 2%;
+  padding-bottom: 2%;
+}
+
+.form-control {
+  width: 90% !important;
+}
+::placeholder {
+  font-size: 12px;
+}
+:-ms-input-placeholder {
+  font-size: 12px;
+}
+
+::-ms-input-placeholder {
+  font-size: 12px;
+}