Update the UI view

musangamfure · Jul 1, 2023 · 1f71001 · 1f71001
1 parent a3ed34c
commit 1f71001
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 43 deletions.
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -20,7 +20,7 @@ function Home() {
   return (
     <>
       <div className="hero">
-        <div className="title" />
+        <h1>Shows</h1>
         <div className="filter">
           <span>Categories</span>
           <select onChange={handleCategory}>

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -1,6 +1,8 @@
 import '../styles/header.css';
 import { Outlet } from 'react-router-dom';
 import { useState } from 'react';
+import { IoSettingsOutline } from 'react-icons/io5';
+import { FaMicrophone } from 'react-icons/fa';
 
 const Header = () => {
   const [darkTheme, setDarkTheme] = useState(false);
@@ -15,27 +17,37 @@ const Header = () => {
     <>
       <header className="header">
         <h1>Movies App</h1>
-        {darkTheme ? (
-          <div
-            className="theme-light hidden"
-            onClick={handleTheme}
-            onKeyDown={handleTheme}
-            role="button"
-            tabIndex={0}
-          >
-            <i className="fa-solid fa-moon" />
-          </div>
-        ) : (
-          <div
-            className="theme-dark"
-            onClick={handleTheme}
-            onKeyDown={handleTheme}
-            role="button"
-            tabIndex={0}
-          >
-            <i className="fa-solid fa-sun" />
-          </div>
-        )}
+        <div className="container">
+          <ul>
+            <li>
+              <IoSettingsOutline />
+            </li>
+            <li>
+              <FaMicrophone />
+            </li>
+          </ul>
+          {darkTheme ? (
+            <div
+              className="theme-light hidden"
+              onClick={handleTheme}
+              onKeyDown={handleTheme}
+              role="button"
+              tabIndex={0}
+            >
+              <i className="fa-solid fa-moon" />
+            </div>
+          ) : (
+            <div
+              className="theme-dark"
+              onClick={handleTheme}
+              onKeyDown={handleTheme}
+              role="button"
+              tabIndex={0}
+            >
+              <i className="fa-solid fa-sun" />
+            </div>
+          )}
+        </div>
       </header>
       <Outlet />
     </>

diff --git a/src/components/Show.js b/src/components/Show.js
@@ -1,6 +1,7 @@
 import '../styles/Show.css';
 import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { BsArrowRightCircle } from 'react-icons/bs';
 
 function Show({ Show }) {
   const navigate = useNavigate();
@@ -12,18 +13,17 @@ function Show({ Show }) {
 
   return (
     <div className="show-item">
+      <button
+        type="button"
+        onClick={handleShowDetails}
+        aria-label="View more info"
+        className="details-btn"
+      >
+        <BsArrowRightCircle />
+      </button>
       <img className="show-image" src={Show.image.medium} alt="" />
       <h3 className="show-name">{Show.name}</h3>
-      <div className="view-more">
-        <button
-          type="button"
-          onClick={handleShowDetails}
-          aria-label="View more info"
-          className="details-btn"
-        >
-          View Details
-        </button>
-      </div>
+      <h3 className="show-rating">{Show.rating.average}</h3>
     </div>
   );
 }
@@ -35,6 +35,9 @@ Show.propTypes = {
       medium: PropTypes.string.isRequired,
     }).isRequired,
     name: PropTypes.string.isRequired,
+    rating: PropTypes.shape({
+      average: PropTypes.number.isRequired,
+    }).isRequired,
   }).isRequired,
 };
 

diff --git a/src/index.css b/src/index.css
@@ -31,6 +31,7 @@ body {
   font-size: 1.4rem;
   width: 100%;
   height: 100%;
+  background: var(--dark-mode-bg);
 }
 
 .root {

diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -1,14 +1,11 @@
 .hero {
-  height: 20vh;
+  height: 15vh;
   color: var(--light-mode-text);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 2% 10%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
+  padding: 0 10px;
 }
 
 .hero h1 {

diff --git a/src/styles/Show.css b/src/styles/Show.css
@@ -2,11 +2,12 @@
   display: flex;
   flex-direction: column;
   color: var(--light-mode-text);
-  align-items: flex-start;
+  align-items: flex-end;
   background-color: var(--color-white);
   margin-bottom: 3rem;
   text-decoration: none;
   box-shadow: 5px 5px 10px 0 #dfd5d5;
+  padding-right: 10px;
 }
 
 .show-item,
@@ -22,13 +23,10 @@
   display: block;
   width: 100%;
   height: 100%;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
 
-.show-name,
-.view-more {
-  margin: 10px 0;
+.show-name {
+  margin: 5px 0;
   padding-left: 5px;
 }
 

diff --git a/src/styles/header.css b/src/styles/header.css
@@ -25,6 +25,23 @@
   margin-right: 5px;
 }
 
+.container {
+  display: flex;
+}
+
+.header ul {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  list-style-type: none;
+  margin-right: 10px;
+}
+
+.header ul li {
+  margin-right: 10px;
+}
+
 /* Media Query for smaller screens */
 @media only screen and (max-width: 768px) {
   .header {