Styling

* custom font `quicksand`
* font-awesome icons
* random background and text colors
* quote center alignment and author name right
* layout etc. like horizontally and vertically center in a card

random-quote-machine/src/App.js

@@ -1,4 +1,10 @@
 import React from "react";
+import { faTwitter } from "@fortawesome/free-brands-svg-icons";
+import { faShuffle } from "@fortawesome/free-solid-svg-icons";
+import { faQuoteLeft } from "@fortawesome/free-solid-svg-icons";
+import { faQuoteRight } from "@fortawesome/free-solid-svg-icons";
+import { faCode } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import "./App.scss";
 import { quotesAndAuthors } from "./quotes";
 
@@ -8,50 +14,77 @@ class App extends React.Component {
     this.state = {
       quotesAndAuthors: quotesAndAuthors,
       randomIndex: Math.floor(Math.random() * quotesAndAuthors.length),
+      randomColorClass: `color-${Math.floor(Math.random() * 5) + 1}`,
     };
     this.state.randomQuote =
       this.state.quotesAndAuthors[this.state.randomIndex].quote;
     this.state.randomAuthor =
       this.state.quotesAndAuthors[this.state.randomIndex].author;
     this.handleNewQuote = this.handleNewQuote.bind(this);
+    this.state.randomBackgroundColorClass = `bg-${this.state.randomColorClass}`;
   }
 
   handleNewQuote() {
     this.setState((state) => ({
       randomIndex: Math.floor(Math.random() * state.quotesAndAuthors.length),
+      randomColorClass: `color-${Math.floor(Math.random() * 10) + 1}`,
     }));
     this.setState((state) => ({
       randomQuote: state.quotesAndAuthors[state.randomIndex].quote,
       randomAuthor: state.quotesAndAuthors[state.randomIndex].author,
+      randomBackgroundColorClass: `bg-${state.randomColorClass}`,
     }));
   }
 
   render() {
     return (
-      <div className="body">
-        <div className="quote-box" id="quote-box">
-          <p className="text" id="text">
-            {this.state.randomQuote}
-          </p>
-          <p className="author" id="author">
-            {this.state.randomAuthor}
-          </p>
-          <button
-            className="btn btn-primary"
-            id="new-quote"
-            onClick={this.handleNewQuote}
-          >
-            New Quote
-          </button>
-          <a
-            href={`https://twitter.com/intent/tweet?text="${encodeURI(
-              `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
-            )}&hashtags=quotes,freeCodeCamp`}
-            className=""
-            id="tweet-quote"
-          >
-            Tweet Quote
-          </a>
+      <div
+        className={`body d-flex align-items-center min-vh-100 ${this.state.randomBackgroundColorClass}`}
+      >
+        <div className="container">
+          <div className="card">
+            <div className="card-body " id="quote-box">
+              <h4 className={`quote ${this.state.randomColorClass}`} id="text">
+                <FontAwesomeIcon icon={faQuoteLeft} />
+                {` ${this.state.randomQuote} `}
+                <FontAwesomeIcon icon={faQuoteRight} />
+              </h4>
+              <p
+                className={`author ${this.state.randomColorClass}`}
+                id="author"
+              >
+                - {this.state.randomAuthor}
+              </p>
+              <div className="row justify-content-center">
+                <button
+                  className={`btn col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
+                  id="new-quote"
+                  onClick={this.handleNewQuote}
+                >
+                  <FontAwesomeIcon icon={faShuffle} /> Random Quote
+                </button>
+                <a
+                  className="btn bg-color-twitter col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-1"
+                  href={`https://twitter.com/intent/tweet?text="${encodeURI(
+                    `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
+                  )}&hashtags=quotes,freeCodeCamp`}
+                  id="tweet-quote"
+                >
+                  <FontAwesomeIcon icon={faTwitter} /> Tweet Quote
+                </a>
+              </div>
+            </div>
+          </div>
+          <footer>
+            <p>
+              <a
+                className="link-light"
+                href="https://radii.dev/freeCodeCamp.org-Front-End-Dev-Libraries/Build-a-Random-Quote-Machine"
+              >
+                <FontAwesomeIcon icon={faCode} /> {`Source Code & License`}
+              </a>
+            </p>
+          </footer>
         </div>
       </div>
     );

random-quote-machine/src/App.scss

@@ -1 +1,66 @@
+@font-face {
+  font-family: "quicksand";
+  /* license: url("https://radii.page/fonts/Quicksand-Regular.txt"); */
+  src: local("quicksand") url("./quicksand.ttf") format("tff");
+}
+
+$font-family-base: quicksand, roboto !default;
+
 @import "~bootstrap/scss/bootstrap";
+
+$colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
+  #f39c12, #16a085;
+
+@for $i from 1 through length($colors) {
+  $color: nth($colors, $i);
+  .color-#{$i} {
+    color: $color;
+  }
+  .bg-color-#{$i} {
+    background-color: $color;
+    color: white;
+    &:hover {
+      background-color: darken($color, 10%);
+      color: white;
+    }
+    &:focus {
+      background-color: $color;
+      color: white;
+    }
+    &:focus:hover {
+      background-color: darken($color, 10%);
+      color: white;
+    }
+  }
+}
+
+.quote {
+  text-align: center;
+}
+
+.author {
+  text-align: right;
+}
+
+.bg-color-twitter {
+  $twitter-color: #1d9bf0;
+  background-color: $twitter-color;
+  color: white;
+  &:hover {
+    background-color: darken($twitter-color, 10%);
+    color: white;
+  }
+  &:focus {
+    background-color: $twitter-color;
+    color: white;
+  }
+  &:focus:hover {
+    background-color: darken($twitter-color, 10%);
+    color: white;
+  }
+}
+
+footer {
+  margin: 10px;
+  text-align: center;
+}