added transition, tweet button

src/App.js

@@ -6,7 +6,7 @@ class App extends Component {
   constructor() {
     super();
     this.state = {
-      backG: null,
+      backG: "#2a9d8f",
     };
   }
 
@@ -19,7 +19,13 @@ class App extends Component {
 
   render() {
     return (
-      <div className="App" style={{ backgroundColor: this.state.backG }}>
+      <div
+        className="App"
+        style={{
+          transition: "background-color 0.3s ease",
+          backgroundColor: this.state.backG,
+        }}
+      >
         <QuoteBox id="quote" handler={this.bgChange} />
       </div>
     );

src/components/button/button.jsx

@@ -3,8 +3,13 @@ import "bootstrap/dist/css/bootstrap.min.css";
 
 export const QuoteButton = (props) => {
   return (
-    <Button variant="outline-primary" onClick={props.click}>
-      New Quote
+    <Button
+      variant={props.variant}
+      href={props.href}
+      target={props.target}
+      onClick={props.click}
+    >
+      {props.text}
     </Button>
   );
 };

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

@@ -17,11 +17,29 @@
   }
 
   .writing {
-    padding-top: 100px;
+    padding-top: 130px;
+    height: 150px;
     text-align: center;
   }
 
-  #button {
+  #new-quote {
+    margin-top: 80px;
     float: right;
   }
+
+  #tweet {
+    float: right;
+    margin-top: 80px;
+    margin-right: 15px;
+  }
+
+  a:link {
+    color: white;
+  }
+  a:visited {
+    color: white;
+  } /* visited link */
+  a:active {
+    color: white;
+  }
 }

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

@@ -65,14 +65,41 @@ class QuoteBox extends React.Component {
       <div className="wrapper">
         <div
           id="quote-box"
-          style={{ backgroundColor: this.state.color[this.random2()] }}
+          style={{
+            transition: "background-color 0.3s ease",
+            backgroundColor: this.state.color[this.random2()],
+          }}
         >
           <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 id="new-quote">
+            <QuoteButton
+              click={this.handleChange}
+              text="New Quote"
+              variant="success"
+            />
+          </div>
+          <div id="tweet">
+            <QuoteButton
+              href={`https://twitter.com/intent/tweet?text=${this.state.displayQuote} 
+              
+              ${this.state.displayAuthor}`}
+              text={
+                <a
+                  id="tweet-quote"
+                  target="_blank"
+                  rel="noreferrer"
+                  href={`https://twitter.com/intent/tweet?text=${this.state.displayQuote} 
+              
+              ${this.state.displayAuthor}`}
+                >
+                  Tweet
+                </a>
+              }
+              variant="primary"
+            />
           </div>
         </div>
       </div>