added transition, tweet button

.eslintcache

@@ -1 +1 @@
-[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4","/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx":"5"},{"size":500,"mtime":1611491491707,"results":"6","hashOfConfig":"7"},{"size":542,"mtime":1611519261709,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611491491707,"results":"9","hashOfConfig":"7"},{"size":2105,"mtime":1611519235196,"results":"10","hashOfConfig":"7"},{"size":243,"mtime":1611512231156,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1h1r0ga",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],["23","24"],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[],"/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
+[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4","/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx":"5"},{"size":500,"mtime":1611491491707,"results":"6","hashOfConfig":"7"},{"size":641,"mtime":1611569283324,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611491491707,"results":"9","hashOfConfig":"7"},{"size":2909,"mtime":1611571160661,"results":"10","hashOfConfig":"7"},{"size":313,"mtime":1611570503827,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1h1r0ga",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],["23","24"],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[],"/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]

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}>
+    <Button
-      New Quote
+      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">
+          <div id="new-quote">
-            <QuoteButton click={this.handleChange} />
+            <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>