added comments

.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":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"]
+[{"/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":3034,"mtime":1611576324377,"results":"10","hashOfConfig":"7"},{"size":266,"mtime":1611576362850,"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,"usedDeprecatedRules":"14"},{"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},"/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"]

package-lock.json

@@ -7501,6 +7501,11 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "include-media": {
+      "version": "1.4.9",
+      "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.9.tgz",
+      "integrity": "sha1-0AILe+PrLVSGiiCUNZXOOA4LxDs="
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
     "bootstrap": "^4.6.0",
+    "include-media": "^1.4.9",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",

src/components/button/button.jsx

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

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

@@ -10,7 +10,6 @@
     color: white;
     width: 800px;
     height: 400px;
-    // background-color: #0077b6;
     border: 1px solid grey;
     border-radius: 5px;
     padding: 10px;
@@ -23,13 +22,13 @@
   }
 
   #new-quote {
-    margin-top: 80px;
+    margin-top: 100px;
     float: right;
   }
 
   #tweet {
     float: right;
-    margin-top: 80px;
+    margin-top: 100px;
     margin-right: 15px;
   }
 

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

@@ -9,7 +9,9 @@ class QuoteBox extends React.Component {
       quotes: null,
       displayQuote: null,
       displayAuthor: null,
+      // color for the box
       color: ["#264653", "#2a9d8f", "#e76f51", "#e63946", "#bc6c25"],
+      // color for the app.js body
       backGroundApp: [
         "#ffadad",
         "#ffd6a5",
@@ -43,6 +45,7 @@ class QuoteBox extends React.Component {
     });
   }
 
+  //changing the quotes and author also sending a bg to app.js
   handleChange = () => {
     const randomNum = this.random();
     this.setState({