fontss changed

Author: vignesh-cloud-prog

src/App.css

@@ -1,11 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Sora&display=swap");
 #root,
 html,
 body {
   margin: 0;
   padding: 0;
   height: 100vh;
-  
+  font-family: "Sora", sans-serif;
 }
 
 .app {
@@ -39,10 +40,11 @@ body {
   align-items: center;
   font-size: large;
   height: 582px;
-  font-family: 'Patrick Hand SC', cursive;
+  font-family: "Patrick Hand", cursive;
 }
 
 .button {
+  font-family: "Alegreya Sans SC", sans-serif;
   position: relative;
   outline: none;
   text-decoration: none;
@@ -66,11 +68,11 @@ body {
   letter-spacing: 0.7px;
 }
 
-.button:hover {
+.button:hover, .button:active   {
   animation: rotate 0.7s ease-in-out both;
 }
 
-.button:hover span {
+.button:hover span, .button:active span  {
   animation: storm 0.7s ease-in-out both;
   animation-delay: 0.06s;
 }

src/components/main.js

@@ -39,20 +39,20 @@ export default class Main extends Component {
       });
   };
   fetchQuote = () => {
-    
     axios
       .get("https://api.adviceslip.com/advice")
       .then((response) => {
         const { advice } = response.data.slip;
         // console.log(advice);
-        this.setState({ advice },()=>{this.setBgImage();});
+        this.setState({ advice }, () => {
+          this.setBgImage();
+        });
       })
       .catch((error) => {
         console.log(error);
       });
   };
 
-
   render() {
     return (
       <main>
@@ -67,9 +67,28 @@ export default class Main extends Component {
               content="Get the most inspirational quotes at your finger tips. "
             />
             <link rel="shortcut icon" href={favicon} type="image/x-icon" />
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link
+              rel="preconnect"
+              href="https://fonts.gstatic.com"
+              crossorigin
+            />
+            <link
+              href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"
+              rel="stylesheet"
+            ></link>
+
+            <link
+              href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@500&display=swap"
+              rel="stylesheet"
+            />
+            <link
+              href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap"
+              rel="stylesheet"
+            />
           </Helmet>
           <div className="card">
-            <p className="heading">"{this.state.advice}"</p>
+            <b className="heading">"{this.state.advice}"</b>
 
             <button className="button" onClick={this.fetchQuote}>
               <span>ONE MORE ADVICE!</span>

src/css/nav.css

@@ -10,6 +10,7 @@
   margin-top: 0.2rem;
   margin-left: 0.8rem;
   color: whitesmoke;
+  font-family: 'Montserrat', sans-serif;
 }
 .github_icon {
   border-radius: 50%;
@@ -25,4 +26,5 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
+  filter: grayscale();
 }