Fix product page UI

made UI changes the customer reviews&ratings ,Buy box,variants
oimg src={accountCircle} className={styles.accountCircle} onClick={() => nav("/account/profile")} />
                    <img src={cart} className={styles.cart} onClick={() => nav("/cart")} /># Please enter the commit message for your changes. Lines starting

src/components/home/SuggestionBox.jsx

@@ -11,4 +11,4 @@ function SuggestionBox({show}){
         </div>
     )
 }
-export default SuggestionBox
+export default SuggestionBox  

src/components/product/ProductInfo.jsx

@@ -55,7 +55,6 @@ function ProductInfo() {
             <div className={styles.product_details}>
                 {product.description}
             </div>
-
         </div>
     )
 }

src/components/product/Reviews.jsx

@@ -7,18 +7,21 @@ function Reviews() {
     return (
         <div className={styles.reviews}>
             <div className={styles.summary}>
+                <h2>Customer reviews</h2>
                 <div className={styles.wtAverage}>
-                    {Array.from({length:Math.floor(rating.star)}, () => <img src={"/star.svg"} />)}
-                    <span className={styles.average_rating}>{rating.star} Out of 5</span>
-                    <span>{rating.reviews} Global Ratings</span>
+                    <div className={styles.rating_heading}>
+                        {Array.from({ length: Math.round(rating.star) }, () => <img src={"/star.svg"} />)}
+                        <span className={styles.average_rating}>{Math.round(rating.star)} Out of 5</span>
+                    </div>
+                    <span className={styles.global_ratings}>{rating.reviews} Global Ratings</span>
                     <div className={styles.rating_perc}>
-                        {rating.starPrecent.map(
+                        {rating.starPrecent.reverse().map(
                             (value, index) => <div className={styles.star_perc}>
-                                <span className={styles.star_numer}>{index + 1} Star</span>
+                                <span className={styles.star_numer}>{Math.abs(index - 5)} Star</span>
                                 <div className={styles.percent_box}>
                                     <div className={styles.percent_fill} style={{ width: value + "%" }}></div>
                                 </div>
-                                <span className={styles.percent}>{value}</span>
+                                <span className={styles.percent}>{value.toFixed(1)}</span>
                             </div>)}
                     </div>
                 </div>
@@ -29,26 +32,28 @@ function Reviews() {
                 </div>
             </div>
             <div className={styles.top_reviews}>
-                <h1>Customer Reviews</h1>
-                {
-                    reviews.map((review) =>
-                        <div className={styles.review}>
-                            <div className={styles.profile}>
-                                <img src={review.photo ? review.photo : "/account_circle.jpg"} />
-                                <span>{review.name}</span>
-                            </div>
-                            <div className={styles.rating}>
-                                {Array.from({ length: review.rating }, () => <img src={"/star.svg"} />)}
-                                <h2>{review.title}</h2>
+                <div className={styles.review_content}>
+                    <h1>Top reviews</h1>
+                    {
+                        reviews.map((review) =>
+                            <div className={styles.review}>
+                                <div className={styles.profile}>
+                                    <img src={review.photo ? review.photo : "/account_circle.jpg"} />
+                                    <span>{review.name}</span>
+                                </div>
+                                <div className={styles.rating}>
+                                    {Array.from({ length: review.rating }, () => <img src={"/star.svg"} />)}
+                                    <h2>{review.title}</h2>
+                                </div>
+                                <div className={styles.review_date}>Reviewed on {review.date}</div>
+                                <div className={styles.verified}>Verified Purchase</div>
+                                <div className={styles.review_disc}>{review.description}</div>
+                                <button className={styles.helpful}>Helpfull</button>
+                                <button className={styles.report}>Report</button>
                             </div>
-                            <span className={styles.review_date}>Reviewed on {review.date}</span>
-                            <span>Verified Purchase</span>
-                            <span className={styles.review_disc}>{review.description}</span>
-                            <button className={styles.helpful}>Helpfull</button>
-                            <button className={styles.report}>Report</button>
-                        </div>
-                    )
-                }
+                        )
+                    }
+                </div>
             </div>
         </div>
     )

src/css/common/product_carousel.module.css

@@ -41,7 +41,6 @@
 
 .items {
     display: flex;
-
     overflow: hidden;
     width: 90%;
     }
@@ -50,4 +49,17 @@
 }
 .item:not(:first-child){
     margin-left: 20px;
+}
+@media screen and (max-width:500px) {
+    .main{
+        width: 100%;
+    }
+    .items{
+        overflow: scroll;
+        width: 98%;
+    }
+    .back,.forward{
+        display: none;
+    }
+
 }

src/css/components/home/categories.module.css

@@ -36,4 +36,12 @@
     text-align: center;
     font-size: var(--font-size-mini);
     display: block;
+}
+@media screen and (max-width:500px) {
+.main{
+    width: 100%;
+}
+.categories{
+    overflow: scroll;
+}
 }

src/css/components/home/suggestion_box.module.css

@@ -1,4 +1,4 @@
-.main{
+.main {
     width: 95%;
     position: absolute;
     left: 1%;
@@ -9,16 +9,28 @@
     border-radius: 5px;
     border: 1px solid grey;
 }
-.hide{
+
+.hide {
     display: none;
 }
-.suggestion{
+
+.suggestion {
     display: flex;
     align-items: center;
+    padding: 2px 5px;
+    margin-bottom: 10px;
+
 }
-.icon{
 
+.icon {
+    height: 18px;
+    width: 18px;
 }
-.title{
 
+.title {
+    font-weight: 500;
+    font-size: 17px;
+    margin: 0px;
+    margin-left: 15px;
+    color: rgb(44, 44, 44);
 }

src/css/components/product/reviews.module.css

@@ -1,13 +1,193 @@
-.reviews{
+.reviews {
+    width: 90%;
+    display: flex;
+    margin-left: 10px;
+    margin: auto;
+}
+
+.review {
+    margin-bottom: 50px;
+}
+
+.top_reviews {
+    flex: 6;
+}
+
+.review_content {
+    margin-left: 120px;
+}
+
+.top_reviews h1 {
+    font-weight: 500;
+    font-size: 17px;
+}
+
+.summary {
+    flex: 2;
+}
+
+.summary h2 {
+    font-weight: 500;
+    font-size: 20px;
+    margin: 0px;
+}
+
+.rating_heading {
+    display: flex;
+    align-items: center;
+}
+
+.average_rating {
+    margin-left: 10px;
+}
+
+.global_ratings {
+    font-weight: 500;
+    font-size: small;
+    color: grey;
+    margin: 5px 0px;
+    display: block;
+}
+
+.rating_perc {
+    display: block;
+    width: 90%;
+}
+
+.star_numer {
+    color: #005ccc;
+    width: 80px;
+    display: block;
+    flex: 2;
+}
+
+.star_perc {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.percent_box {
     width: 100%;
+    height: 20px;
+    border: 1px solid rgb(60, 60, 60);
+    background-color: rgb(220, 220, 220);
+    border-radius: 5px;
+    overflow: hidden;
+    flex: 8;
+}
+
+.percent_fill {
+    background-color: rgb(226, 151, 3);
+    height: inherit;
+}
+
+.percent {
+    color: #005ccc;
+    margin-left: 10px;
+    flex: 2;
+}
+
+.get_review {
+    width: 90%;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    margin-top: 20px;
+}
+
+.get_review h3 {
+    font-weight: 500;
+    font-size: medium;
+    margin: 0px;
+    margin-bottom: 2px;
+    margin-top: 10px;
+}
+
+.get_review span {
+    display: block;
+}
+
+.get_review button {
+    background-color: white;
+    border: 1px solid black;
+    padding: 5px 20px;
+    width: 90%;
+    border-radius: 5px;
+    margin-top: 5px;
+    margin-bottom: 20px;
+}
+
+
+.top_reviews h1 {
+    font-weight: 500;
+}
+
+.review {
+    width: 100%;
+}
+
+.profile {
     display: flex;
+    align-items: center;
+    margin-bottom: 5px;
 }
-.top_reviews{
 
+.profile img {
+    width: 25px;
+    height: 25px;
 }
-.summary{
 
+.profile span {
+    margin-left: 10px;
 }
-.average_rating{
-    margin-right: 50px;
+
+.name {
+    margin-left: 15px;
+}
+
+.rating {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2px;
+    height: 24px;
+}
+
+.rating h2 {
+    font-weight: 500;
+    font-size: medium;
+}
+
+.review_date {
+    color: rgb(83, 83, 83);
+    margin-bottom: 2px;
+}
+
+.verified {
+    font-weight: 500;
+    font-size: medium;
+    display: block;
+    color: rgb(218, 144, 7);
+    margin-bottom: 3px;
+}
+
+.review_disc {
+    margin-bottom: 5px;
+}
+
+.helpful {
+    border: none;
+    outline: none;
+    background-color: white;
+    border: 1px solid black;
+    padding: 5px 20px;
+    border-radius: 4px;
+}
+
+.report {
+    border: none;
+    outline: none;
+    padding: 5px 20px;
+    border-radius: 4px;
+    margin-left: 15px;
+    background-color: rgba(191, 191, 191, 0.699);
 }

src/services/commonService.js

@@ -57,7 +57,7 @@ export function getFooter() {
 export function performSearch(keyword){
     const obj  = {
         icon:"/search.svg",
-        title:"This is the main component the best and solid"
+        title:"this is the main component the best and solid"
     }
     return([obj,obj,obj,obj,obj,obj,obj])
 }