UI updates

Author: gauravchl

src/components/home.css

@@ -3,9 +3,9 @@
 }
 
 .home-logo {
-  animation: home-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+  width: 320px;
+  margin-top: 32px;
+  margin-bottom: 28px
 }
 
 .home-header {
@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   font-size: calc(10px + 2vmin);
   color: white;
 }

src/components/home.js

@@ -1,26 +1,25 @@
-import React from 'react';
-import logo from '../logo.svg';
-import './home.css';
+import React from "react";
+import "./home.css";
 
 function Home(props) {
-
-  const { loading, error, data} = props;
-  console.log(props)
+  const { loading, error, data } = props;
   return (
     <div className="home">
       <header className="home-header">
-        <img src={logo} className="home-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="home-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <img
+          src="https://codebuddies.org/images/logo.svg"
+          className="home-logo"
+          alt="logo"
+        />
+
+        {loading ? <div>Loading Data from backend</div> : null}
+        {error ? <div>Error loading data</div> : null}
+
+        {data && data.rates && data.rates.map((r, i) => (
+          <div key={i}>
+            {r.currency} : {r.rate}USD$
+          </div>
+        ))}
       </header>
     </div>
   );