update random-quote-machine

random-quote-machine/src/App.css

@@ -12,16 +12,16 @@
 }
 
 .red-background {
-  background-color: #ff0000;
+  background-color: #ff1500;
   color: black;
 }
 
 .blue-background {
-  background-color: #0000ff;
+  background-color: #006aff;
   color: white;
 }
 
 .yellow-background {
-  background-color: #ffff00;
+  background-color: #eaff00;
   color: black;
 }

random-quote-machine/src/NewQuote.css

@@ -1,11 +1,12 @@
 .NewQuote {
   text-align: center;
-  height: 60%;
+  height: 45%;
   width: 45%;
   border: none;
   border-radius: 5px;
   font-size: 0.8em;
   font-weight: bold;
+  margin: auto;
 }
 
 .NewQuote:focus {
@@ -13,16 +14,29 @@
 }
 
 .red-background {
-  background-color: #ff0000;
+  background-color: #ff1500;
   color: #000000;
 }
 
 .blue-background {
-  background-color: #0000ff;
-  color: #ff8000;
+  background-color: #006Aff;
+  color: #eaff00;
 }
 
 .yellow-background {
-  background-color: #ffff00;
-  color: #0080ff;
+  background-color: #eaff00;
+  color: #006bff;
+}
+
+@media (orientation: portrait) and (max-device-width: 767px) {
+  .NewQuote {
+    height: 40%;
+  }
+}
+
+@media (orientation: landscape) and (max-device-height: 450px) {
+  .NewQuote {
+    height: 60%;
+  font-size: 1em;
+  }
 }

random-quote-machine/src/NewQuote.js

@@ -30,11 +30,7 @@ class NewQuote extends React.Component {
     const colors = ["red-background", "blue-background", "yellow-background"];
     const newQuoteClass = "NewQuote " + colors[this.props.colorCount];
     return (
-      <button
-        onClick={this.handleClick}
-        className={newQuoteClass}
-        id="new-quote"
-      >
+      <button onClick={this.handleClick} className={newQuoteClass} id="new-quote">
         Click Me!
       </button>
     );

random-quote-machine/src/QuoteBox.css

@@ -3,41 +3,49 @@
   text-align: center;
   max-width: 80%;
   max-height: 60vh;
-  width: 500px;
+  width: 800px;
   height: 500px;
   border-radius: 10px;
   box-shadow: 4px 3px black;
 }
 
 .red-complimentary-background {
-  background-color: #0080ff;
+  background-color: #006aff;
   color: white;
 }
 
 .blue-complimentary-background {
-  background-color: #7fff00;
+  background-color: #ff1500;
   color: white;
 }
 
 .yellow-complimentary-background {
-  background-color: #8000ff;
+  background-color: #9400ff;
   color: black;
 }
 
 .quote-box-top {
-  height: 70%;
+  height: 20%;
+}
+
+.quote-box-middle {
+  height: 40%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
 
 .quote-box-bottom {
-  height: 30%;
+  height: 40%;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
 }
 
+.quote-box-underneath {
+  height: 0%;
+}
+
 .quote-box-bottom-left {
   width: 50%;
   display: flex;
@@ -51,3 +59,21 @@
   flex-direction: row;
   justify-content: space-around;
 }
+
+@media (orientation: portrait) and (max-device-width: 767px) {
+  .QuoteBox {
+    max-height: 60vh;
+  }
+  .quote-box-top {
+    height: 10%;
+  }
+  .quote-box-middle {
+    height: 50%;
+  }
+  .quote-box-bottom {
+    height: 40%;
+  }
+  .quote-box-underneath {
+    height: 0%;
+  }
+}

random-quote-machine/src/QuoteBox.js

@@ -19,6 +19,8 @@ class QuoteBox extends React.Component {
     return (
       <div className={quoteBoxClass} id="quote-box">
         <div className="quote-box-top">
+        </div>
+        <div className="quote-box-middle">
           <TextAuthor />
         </div>
         <div className="quote-box-bottom">
@@ -29,6 +31,8 @@ class QuoteBox extends React.Component {
             <NewQuote />
           </div>
         </div>
+        <div className="quote-box-underneath">
+        </div>
       </div>
     );
   }

random-quote-machine/src/TextAuthor.css

@@ -1,13 +1,13 @@
 .red {
-  color: #00ff80;
+  color: #00ff94;
 }
 
 .blue {
-  color: #0000ff;
+  color: white;
 }
 
 .yellow {
-  color: #ffff00;
+  color: white;
 }
 
 .text {
@@ -21,3 +21,20 @@
   margin-right: 10%;
   font-style: oblique;
 }
+
+p {
+  font-size: .7em;
+  margin: auto;
+}
+
+@media (orientation: portrait) and (max-device-width: 767px) {
+  p {
+    font-size: .9em;
+  }
+}
+
+@media (orientation: landscape) and (max-device-height: 450px) {
+  p {
+    font-size: .9em;
+  }
+}

random-quote-machine/src/TextAuthor.js

@@ -27,7 +27,7 @@ class TextAuthor extends React.Component {
     const textClass = "text " + colors[this.props.colorCount];
     const authorClass = "author " + colors[this.props.colorCount];
     return (
-      <div style={{ fontSize: ".7em" }}>
+      <div>
         <p className={textClass} id="text">
           {quote}
         </p>

random-quote-machine/src/TweetQuote.css

@@ -1,5 +1,5 @@
 .TweetQuote {
-  height: 60%;
+  height: 45%;
   width: 45%;
   border: none;
   border-radius: 5px;
@@ -7,16 +7,7 @@
   font-weight: bold;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-content: center;
-}
-
-.tweetQuoteContainer {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
+  margin: auto;
 }
 
 .TweetQuote:focus {
@@ -24,16 +15,32 @@
 }
 
 .red-background {
-  background-color: #ff0000;
+  background-color: #ff1500;
   color: #000000;
 }
 
 .blue-background {
-  background-color: #0000ff;
-  color: #ff8000;
+  background-color: #006aff;
+  color: #eaff00;
 }
 
 .yellow-background {
-  background-color: #ffff00;
-  color: #0080ff;
+  background-color: #eaff00;
+  color: #006bff;
+}
+
+.TweetQuote > a {
+  margin: auto;
+}
+
+@media (orientation: portrait) and (max-device-width: 767px) {
+  .TweetQuote {
+    height: 40%;
+  }
+}
+
+@media (orientation: landscape) and (max-device-height: 450px) {
+  .TweetQuote {
+    height: 60%;
+  }
 }

random-quote-machine/src/TweetQuote.js

@@ -21,20 +21,10 @@ class TweetQuote extends React.Component {
       );
     }
     return (
-      <div className="tweetQuoteContainer">
-        <div className={tweetQuoteClass}>
-          <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            id="tweet-quote"
-          >
-            <FontAwesomeIcon
-              icon={faTwitter}
-              className={colors[this.props.colorCount]}
-            />
-          </a>
-        </div>
+      <div className={tweetQuoteClass}>
+        <a href={href} target="_blank" rel="noopener noreferrer" id="tweet-quote">
+          <FontAwesomeIcon icon={faTwitter} className={colors[this.props.colorCount]}/>
+        </a>
       </div>
     );
   }