From b217bd2d0c8f598dc88c5ad941338d97449cd448 Mon Sep 17 00:00:00 2001
From: Musangamfura Emmanuel <musangamfure@gmail.com>
Date: Sat, 1 Jul 2023 11:02:34 +0100
Subject: [PATCH] Update the UI

---
 src/components/Home.js | 18 +++++++++++++++---
 src/styles/Home.css    |  1 -
 src/styles/Show.css    |  3 +--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Home.js b/src/components/Home.js
index ecfd4f4..03e7901 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -7,17 +7,29 @@ function Home() {
   const categories = useSelector((state) => state.shows.categories);
   const allCategories = ['All', ...categories];
   const shows = useSelector((state) => state.shows.Shows);
-  const bgColors = ['#0C2340', '#1D428A'];
-
   const [filteredCategory, setFilteredCategory] = useState('All');
 
   const filteredShows = filteredCategory === 'All'
     ? shows
     : shows.filter((show) => show.category.includes(filteredCategory));
+
   const handleCategory = (event) => {
     setFilteredCategory(event.target.value);
   };
 
+  const renderBackgroundColor = (index) => {
+    const patternIndex = index % 8;
+    if (
+      patternIndex === 0
+      || patternIndex === 3
+      || patternIndex === 4
+      || patternIndex === 7
+    ) {
+      return '#0C2340';
+    }
+    return '#1D428A';
+  };
+
   return (
     <>
       <div className="hero">
@@ -39,7 +51,7 @@ function Home() {
             <Show
               key={show.id}
               Show={show}
-              backgroundColor={bgColors[index % bgColors.length]}
+              backgroundColor={renderBackgroundColor(index)}
             />
           ))}
         </div>
diff --git a/src/styles/Home.css b/src/styles/Home.css
index db882f8..bc0e9c0 100644
--- a/src/styles/Home.css
+++ b/src/styles/Home.css
@@ -39,7 +39,6 @@
 .shows-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-gap: 20px;
 }
 
 @media screen and (max-width: 768px) {
diff --git a/src/styles/Show.css b/src/styles/Show.css
index 58e4c4f..61d9383 100644
--- a/src/styles/Show.css
+++ b/src/styles/Show.css
@@ -5,7 +5,7 @@
   color: var(--light-mode-text);
   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;
@@ -17,7 +17,6 @@
   background-color: var(--dark-blue-elements);
   color: var(--color-white);
   box-shadow: 5px 5px 10px 0;
-  border-radius: 8px;
 }
 
 .show-image {