From 3e9c1cb8a1e9137928dc8d57354fbb7841468f75 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Thu, 28 Jul 2022 00:22:54 +0530
Subject: [PATCH] spinner done

---
 src/plays/dev-jokes/DevJokes.jsx | 35 +++++++++++++++++---------------
 src/plays/dev-jokes/spinner.css  |  6 +++---
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/plays/dev-jokes/DevJokes.jsx b/src/plays/dev-jokes/DevJokes.jsx
index 426b832c9..9e47c4fcf 100644
--- a/src/plays/dev-jokes/DevJokes.jsx
+++ b/src/plays/dev-jokes/DevJokes.jsx
@@ -2,10 +2,10 @@ import PlayHeader from "common/playlists/PlayHeader";
 import "./devJokes.css";
 import axios from "axios";
 import { useEffect, useState } from "react";
-import Spinner from './Spinner'
+import Spinner from "./Spinner";
 function DevJokes(props) {
   const [joke, setjoke] = useState([]);
-  const [spinner,setspinner]=useState(false);
+  const [spinner, setspinner] = useState(false);
   const fetch = () => {
     setspinner(true);
     axios
@@ -24,21 +24,24 @@ function DevJokes(props) {
         <PlayHeader play={props} />
         <div className="maincontanier">
           <div className="jokecontanier">
-          { spinner ? 
-             <Spinner/> : 
-          <div>
-            {joke.map((value) => {
-                 return (
-                   <div key={value}>
-                     <h1>{value.question}</h1>
-                     <p>{value.punchline}</p>
-                   </div>
-                 );
-               })}
+            {spinner ? (
+              <Spinner />
+            ) : (
+              <div>
+                {joke.map((value) => {
+                  return (
+                    <div key={value}>
+                      <h1>{value.question}</h1>
+                      <p>{value.punchline}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           </div>
-          }
-          </div>
-          <button onClick={fetch} className="dev-jokes-btn">Next joke</button>
+          <button onClick={fetch} className="dev-jokes-btn">
+            Next joke
+          </button>
         </div>
       </div>
     </>
diff --git a/src/plays/dev-jokes/spinner.css b/src/plays/dev-jokes/spinner.css
index b91217d7a..dbe704d69 100644
--- a/src/plays/dev-jokes/spinner.css
+++ b/src/plays/dev-jokes/spinner.css
@@ -7,9 +7,9 @@
     }
   }
   .loading-spinner {
-    width: 50px;
-    height: 50px;
-    border: 10px solid #f3f3f3; /* Light grey */
+    width: 40px;
+    height: 40px;
+    border: 10px solid #fefefe; /* Light grey */
     border-top: 10px solid #383636; /* Black */
     border-radius: 50%;
     animation: spinner 1.5s linear infinite;