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
2 years ago · 1813e6ae02
parent 39de62a7cc
commit 1813e6ae02
5 changed files with 246 additions and 24 deletions
--- a/random-quote-machine/package-lock.json
+++ b/random-quote-machine/package-lock.json
@ -8,6 +8,11 @@
      "name": "random-quote-machine",
      "version": "0.1.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-regular-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.3.0",
        "@testing-library/user-event": "^13.5.0",
@ -2159,6 +2164,75 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.9.5",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@ -18298,6 +18372,51 @@
        }
      }
    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
    "@humanwhocodes/config-array": {
      "version": "0.9.5",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
--- a/random-quote-machine/package.json
+++ b/random-quote-machine/package.json
@ -3,6 +3,11 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
--- a/random-quote-machine/src/App.js
+++ b/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>
    );
--- a/random-quote-machine/src/App.scss
+++ b/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;
+}
--- a/random-quote-machine/src/quicksand.ttf
+++ b/random-quote-machine/src/quicksand.ttf