Footer moved to its own component

Footer styles moved to Footer.css

src/app/Footer.css

@@ -0,0 +1,16 @@
+footer,header {
+    background:lightgray;
+  }
+  
+
+footer .things{
+    display: inline-flex;
+    padding-right: 10px;
+}
+
+.things .child{
+    background: #a2a1a1;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: bold
+}

src/app/Footer.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import './Footer.css';
+
+export default class Footer extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <footer>
+                <div className="things">
+                    <span className="child">API</span>->
+            <span className="child">
+                        <a href="https://haveibeenpwned.com/">haveibeenpwned</a>
+                    </span>
+
+                </div>
+                <div className="things">
+                    <span className="child">Layout Design</span>->
+            <span className="child">
+                        <a href="mailto:venture666666@gmail.com">Rajesh K P</a>
+                    </span>
+                </div>
+                <div className="things">
+                    <span className="child">Everything else</span>->
+            <span className="child">
+                        <a href="https://twitter.com/indrajithKLIS">Indrajith K L</a>
+                    </span>
+                </div>
+            </footer>
+        );
+    }
+}

src/app/SearchField.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import axios from 'axios';
 import PawnedListItem from './PawnedListItem';
 import './SearchField.css';
+import Footer from './Footer';
 
 export default class SearchField extends Component {
 
@@ -34,24 +35,29 @@ export default class SearchField extends Component {
         }
 
         return (
-            <div className="searchWrapper">
+            <div>
-                <div className="search">
+                <div id="wrapper">
-                    <div className="title">
+                    <div className="searchWrapper">
-                        <label className="hover-field glitch-text" data-text="notPwned">
+                        <div className="search">
-                            isPwned
+                            <div className="title">
+                                <label className="hover-field glitch-text" data-text="notPwned">
+                                    isPwned
                         <span>Check wheather your email address is Pawned anywhere</span>
-                        </label>
+                                </label>
-                    </div>
+                            </div>
-                    <input className="email-field pulse" type="email" placeholder="Enter an Email ID" onKeyPress={(event) => { if (event.key == 'Enter') this.checkIsPawned.call() }} onChange={(event) => this.setState({ isPawnedEmail: event.target.value })} required onFocus={this.onFocus} onBlur={this.onBlur} />
+                            <input className="email-field pulse" type="email" placeholder="Enter an Email ID" onKeyPress={(event) => { if (event.key == 'Enter') this.checkIsPawned.call() }} onChange={(event) => this.setState({ isPawnedEmail: event.target.value })} required onFocus={this.onFocus} onBlur={this.onBlur} />
-                    <button className="kool-button-black check-button hover-field" onClick={this.checkIsPawned}>Check
+                            <button className="kool-button-black check-button hover-field" onClick={this.checkIsPawned}>Check
                     </button>
+                        </div>
+                        <div className={`display-message ${this.state.displayMessageStyle}`}>
+                            {this.state.displayMessage}
+                        </div>
+                        <div className="searchResults">
+                            {this.breachItems}
+                        </div>
+                    </div>
                 </div>
-                <div className={`display-message ${this.state.displayMessageStyle}`}>
+                <Footer />
-                    {this.state.displayMessage}
-                </div>
-                <div className="searchResults">
-                    {this.breachItems}
-                </div> 
             </div>
         );
     }

src/app/main.js

@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('wrapper'));
+ReactDOM.render(<App />, document.getElementById('renderArea'));

src/css/style.css

@@ -24,9 +24,6 @@ body
     width: fit-content;
 }
 
-footer,header {
-  background:lightgray;
-}
 
 /* Other Styles */
 .vex.vex-theme-wireframe .vex-content {
@@ -50,14 +47,3 @@ footer,header {
     cursor: pointer;
 }
 
-footer .things{
-    display: inline-flex;
-    padding-right: 10px;
-}
-
-.things .child{
-    background: #a2a1a1;
-    padding-left: 5px;
-    padding-right: 5px;
-    font-weight: bold
-}

src/index.html

@@ -13,28 +13,8 @@
 </head>
 
 <body>
-    <div id="wrapper"></div>
+    <div id="renderArea"></div>
-    <footer>
-        <div class="things">
-            <span class="child">API</span>->
-            <span class="child">
-                <a href="https://haveibeenpwned.com/">haveibeenpwned</a>
-            </span>
     
-        </div>
-        <div class="things">
-            <span class="child">Layout Design</span>->
-            <span class="child">
-                <a href="">Rajesh K P</a>
-            </span>
-        </div>
-        <div class="things">
-            <span class="child">Everything else</span>->
-            <span class="child">
-                <a href="https://twitter.com/indrajithKLIS">Indrajith K L</a>
-            </span>
-        </div>
-    </footer>
     <script src="./app/main.js"></script>
 </body>