Fixed styles throughout all the pages

mansisindhu · Dec 19, 2021 · b036d15 · b036d15
1 parent 97ffd72
commit b036d15
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 31 deletions.
diff --git a/src/components/GamePageComponents/GameCard/gameCard.module.css b/src/components/GamePageComponents/GameCard/gameCard.module.css
@@ -10,7 +10,6 @@
 
 .card {
  margin: auto;
- height: 100vh;
  width: 100%;
 }
 

diff --git a/src/components/LandingPageComponents/PriceComponent/PriceComponent.jsx b/src/components/LandingPageComponents/PriceComponent/PriceComponent.jsx
@@ -1,8 +1,8 @@
 import styles from "./price-component.module.css";
 
 const PriceComponent = ({ price }) => {
- const discount = price.discount;
- const mainPrice = price.mainPrice;
+ const discount = price?.discount;
+ const mainPrice = price?.mainPrice;
 
  let discountedPrice = mainPrice - Math.floor(mainPrice * (discount / 100));
 
@@ -18,8 +18,8 @@ const PriceComponent = ({ price }) => {
  </>
  ) : (
  <>
- <div className={styles.blue_button}>-{price.discount}%</div>
- <div className={styles.prev_price}>&#8377; {price.mainPrice}</div>
+ <div className={styles.blue_button}>-{price?.discount}%</div>
+ <div className={styles.prev_price}>&#8377; {price?.mainPrice}</div>
  <div className={styles.disounted_price}>
  &#8377; {discountedPrice}
  </div>

diff --git a/src/components/LandingPageComponents/SecondaryCard/SecondaryCard.jsx b/src/components/LandingPageComponents/SecondaryCard/SecondaryCard.jsx
@@ -6,23 +6,20 @@ const SecondaryCard = (props) => {
 
  return (
  <>
- <a className={styles.card} href="#">
- <div className={styles.card}>
- <div className={styles.image_div}>
- <img className={styles.banner} src={image} alt="cardImage" />
-
+ <div className={styles.card}>
+ <div className={styles.image_div}>
+ <img className={styles.banner} src={image} alt="cardImage" />
+ </div>
+ <div className={styles.content}>
+ <p className={styles.title}>{title} Available Now.</p>
+ <div className={styles.description_cont}>
+ <p className={styles.description}> {description}</p>
  </div>
- <div className={styles.content}>
- <p className={styles.title}>{title} Available Now.</p>
- <div className={styles.description_cont}>
- <p className={styles.description}> {description}</p>
- </div>
- <div className={styles.price}>
- <PriceComponent price={price} />
- </div>
+ <div className={styles.price}>
+ <PriceComponent price={price} />
  </div>
  </div>
- </a>
+ </div>
  </>
  );
 };

diff --git a/src/components/LandingPageComponents/SecondaryCardContainer/SecondaryCardContainer.jsx b/src/components/LandingPageComponents/SecondaryCardContainer/SecondaryCardContainer.jsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import SecondaryCard from "../SecondaryCard/SecondaryCard";
 import styles from "./secondaryCardContainer.module.css";
 
@@ -7,14 +8,16 @@ const SecondaryCardContainer = ({ data }) => {
  <div className={styles.container}>
  {data.map((el, i) => {
  return (
- <div key={i} className={styles.card}>
- <SecondaryCard
- image={el.thumbnail}
- title={el.title}
- description={el.description}
- price={el.price}
- />
- </div>
+ <Link key={i} to={`/games/${el?._id}`}>
+ <div className={styles.card}>
+ <SecondaryCard
+ image={el?.thumbnail}
+ title={el?.title}
+ description={el?.description}
+ price={el?.price}
+ />
+ </div>
+ </Link>
  );
  })}
  </div>

diff --git a/src/pages/LandingPage/LandingPage.jsx b/src/pages/LandingPage/LandingPage.jsx
@@ -17,7 +17,7 @@ const LandingPage = () => {
  const saleData = landingPageData.slice(0, 5);
  const recentlyUpdatedData = landingPageData.slice(5, 10);
  const mostPopularData = landingPageData.slice(10, 15); // to be changed
- const newToStoreData = landingPageData.slice(10, 15);
+ const newToStoreData = landingPageData.slice(15, 20);
  const secondaryCardData = Data; // to be changed
 
  return (
@@ -36,7 +36,7 @@ const LandingPage = () => {
 
  <div className={styles.secondaryCardContainer}>
  <SecondaryCardContainer
- data={[secondaryCardData[6], secondaryCardData[14]]}
+ data={[landingPageData[24], landingPageData[25]]}
  />
  </div>
 
@@ -59,14 +59,14 @@ const LandingPage = () => {
  <div className={styles.miniCardContainer}>
  <MiniCardContainer
  data={mostPopularData}
- heading="Coming Soon"
+ heading="Holiday Sale"
  />
  </div>
  </div>
 
  <div className={styles.secondaryCardContainer}>
  <SecondaryCardContainer
- data={[secondaryCardData[2], secondaryCardData[3]]}
+ data={[landingPageData[20], landingPageData[19]]}
  />
  </div>