Update the UI

musangamfure · Jul 1, 2023 · b217bd2 · b217bd2
1 parent 5254b2a
commit b217bd2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 {