created button component added handlechange and styled button

src/App.css

@@ -1 +0,0 @@
-

src/components/button/button.jsx

@@ -0,0 +1,10 @@
+import Button from "react-bootstrap/Button";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+export const QuoteButton = (props) => {
+  return (
+    <Button variant="outline-primary" onClick={props.click}>
+      New Quote
+    </Button>
+  );
+};

src/components/quote-box/quote-box-styles.scss

@@ -1,14 +1,30 @@
 .wrapper {
   display: flex;
   justify-content: center;
+  align-content: center;
+  height: 950px;
 
   #quote-box {
+    display: flexbox;
+    align-self: center;
     color: white;
-    width: 550px;
-    height: 350px;
+    width: 800px;
+    height: 400px;
     background-color: black;
     border: 1px solid grey;
     border-radius: 5px;
     padding: 10px;
   }
+
+  .writing {
+    padding-top: 100px;
+    text-align: center;
+  }
+
+  #button {
+    float: right;
+    bottom: 400px;
+    right: 95px;
+    position: fixed;
+  }
 }

src/components/quote-box/quote-box.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Button, QuoteButton } from "../button/button";
 import "./quote-box-styles.scss";
 
 class QuoteBox extends React.Component {
@@ -11,31 +12,50 @@ class QuoteBox extends React.Component {
     };
   }
 
+  //   creating random number for quote api
   random = () => {
     return Math.floor(Math.random() * 1600);
   };
 
+  //   fetching the quotes and assigning it to displayquote/author states
   async componentDidMount() {
     const response = await fetch("https://type.fit/api/quotes");
     const json = await response.json();
-    await this.setState({ quotes: json });
+    this.setState({ quotes: json });
     const randomNum = this.random();
-    await this.setState({
+    this.setState({
       displayQuote: this.state.quotes[randomNum].text,
       displayAuthor: this.state.quotes[randomNum].author,
     });
   }
+
+  handleChange = () => {
+    const randomNum = this.random();
+    this.setState({
+      displayQuote: this.state.quotes[randomNum].text,
+      displayAuthor: this.state.quotes[randomNum].author,
+    });
+  };
+
   render() {
     if (!this.state.quotes) {
-      return <div>Loading...</div>;
+      return (
+        <div>
+          <h1 style={{ textAlign: "center" }}>Loading...</h1>
+        </div>
+      );
     }
 
     return (
       <div className="wrapper">
         <div id="quote-box">
-          <h3 id="text">{this.state.displayQuote}</h3>
-          <p id="author"> {this.state.displayAuthor} </p>
-          {/* new quote button */}
+          <div className="writing">
+            <h3 id="text">{this.state.displayQuote}</h3>
+            <p id="author">{this.state.displayAuthor}</p>
+          </div>
+          <div id="button">
+            <QuoteButton click={this.handleChange} />
+          </div>
         </div>
       </div>
     );