chore: Update CSS and JSX files for quote generator functionality

AVidhanR · Sep 7, 2024 · d6c7f52 · d6c7f52
1 parent 73a0e72
commit d6c7f52
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/favicon.ico → favicon.png b/favicon.ico → favicon.png
diff --git a/index.html b/index.html
@@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- meta info -->
     <meta charset="UTF-8" />
-    <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <!-- google fonts -->
     <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=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico&display=swap"
       rel="stylesheet"
     />
+
+    <!-- website icon -->
+    <link rel="icon" href="./favicon.png" />
+
+    <!-- website title name -->
     <title>Quote Generator</title>
   </head>
   <body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,16 @@
 import QuoteGenerator from "./quote-generator";
-import quotes from "./data/quotes.json";
+import quoteData from "./data/quotes.json";
 import "./index.css";
 
 function App() {
   return (
-    <div style={{ fontFamily: "Open Sans" }}>
-      <QuoteGenerator quotes={quotes.listOfQuotes} />
+    <div
+      style={{
+        fontFamily: `"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
+      sans-serif`,
+      }}
+    >
+      <QuoteGenerator quotes={quoteData.listOfQuotes} />
     </div>
   );
 }

diff --git a/src/index.css b/src/index.css
@@ -50,8 +50,6 @@
   > p {
     margin: 0;
     padding-bottom: 1rem;
-    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
-      sans-serif;
     font-size: larger;
   }
 
@@ -60,7 +58,7 @@
 
     > button {
       display: inline-block;
-      padding: 0.4rem 1rem;
+      padding: 0.5rem 1rem;
       text-decoration: none;
       border: none;
       border-radius: 0.6rem;
@@ -87,6 +85,7 @@ footer {
   }
 
   > a:hover {
+    transition: color 0.7s ease;
     color: whitesmoke;
   }
 }
diff --git a/src/quote-generator.jsx b/src/quote-generator.jsx
@@ -20,14 +20,14 @@ const QuoteGenerator = ({ quotes }) => {
     "#E6B333", // brown
     "#3366E6", // dark blue
     "#999966", // dirty yellow
-    "#99FF99", // light green
     "#B34D4D", // dark red
     "#809900", // olive
     "#E6B3B3", // light pink
     "#6680B3", // light blue
     "#CCFF1A", // green
     "#33FFCC", // light blue
     "#66994D", // dirty green
+    "#B366bb",
   ];
 
   // Get the current background color based on the random index
@@ -43,18 +43,25 @@ const QuoteGenerator = ({ quotes }) => {
       }}
     >
       <div className="quote-content">
-        <h1 className="rainbow-text pacifico-regular">Quote Generator</h1>
+        <h1 className="rainbow-text pacifico-regular">
+          <a href="https://github.com/AVidhanR/QuoteGenerator" target="_blank">
+            Quote Generator
+          </a>
+        </h1>
         <p>&ldquo;{quotes[randomIndex]}&rdquo;</p>
         <div>
           <button onClick={generateQuote}>New Quote</button>
         </div>
       </div>
       <footer>
         Made with ❤️ by{" "}
-        <a href="https://linkedin.com/in/AVidhanR">A Vidhan Reddy</a>
+        <a href="https://linkedin.com/in/AVidhanR" target="_blank">
+          A Vidhan Reddy
+        </a>
       </footer>
     </div>
   );
 };
 
 export default QuoteGenerator;
+// by AVidhanR