added animation to kiwi

Lambda-Build-Week-Water-My-Plants-II · Jun 26, 2020 · 032cae9 · 032cae9
1 parent 6fd2735
commit 032cae9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/wmp/src/App.css b/wmp/src/App.css
@@ -29,11 +29,4 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+
diff --git a/wmp/src/components/NavBar.js b/wmp/src/components/NavBar.js
@@ -14,9 +14,7 @@ import './navbar.css';
 const Navbar = () => {
   const history = useHistory();
   const [name, setName] = useState('')
-  console.log('username state', name)
-
-
+  // console.log('username state', name)
 
   useEffect(() => {
     axiosWithAuth()
@@ -43,7 +41,8 @@ const Navbar = () => {
       <div className="NavBar">
         <h1>Water My Plants</h1>   
 
-        <h3>Welcome {name} &#129373;</h3>
+        <h3>Welcome {name} <div className="kiwi"> &#129373;</div></h3>
+
 
         <div className='linky'>
           <button onClick={newPlant}>New Plant</button>

diff --git a/wmp/src/components/navbar.css b/wmp/src/components/navbar.css
@@ -7,6 +7,7 @@
 
 .NavBar h1 {
     margin-left: 1%;
+    animation-name: bounce;
 }
 
 .NavBar h3 {
@@ -15,6 +16,19 @@
     align-items: center;
 }
 
+.kiwi {
+    animation: App-logo-spin infinite 10s linear;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .linky, .logout {
     display: flex;
     align-items: center;