Merge pull request #3 from ubaid-patel/improve_UI

Improve UI made changes in product page

src/components/home/SuggestionBox.jsx

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

src/components/product/BuyBox.jsx

@@ -1,16 +1,15 @@
 import { useNavigate } from 'react-router-dom'
 import styles from '../../css/components/product/buybox.module.css'
 import { getProduct } from '../../services/productService'
-import { getSavedAddresses } from '../../services/accountService'
 function BuyBox() {
     const nav = useNavigate()
-    let product  = getProduct();
+    let product = getProduct();
     return (
         <div className={styles.buy_box}>
             <h2 className={styles.price}>₹{product.variants[0].options[0].price}</h2>
             <div className={styles.delivery}>
                 <span className={styles.delivery_charges}>
-                    {(product.delivery.charges == null) ? "FREE delivery" : product.delivery.charges + " delivery charges"}
+                    {(product.delivery.charges == null) ? "Free delivery" : product.delivery.charges + " delivery charges"}
                 </span>
                 <span className={styles.delivery_day}>Monday ,27 December</span>
                 <span className={styles.delivery_validity}>Order within 17 hrs 23mins</span>
@@ -22,21 +21,24 @@ function BuyBox() {
             <span className={styles.stock}>
                 {(product.variants[0].options[0].stock > 0) ? "IN STOCK" : "OUT OF Stock"}
             </span>
-            <div className={styles.quantity}>
-                <select>
-                    <option>1</option>
-                    <option>2</option>
-                    <option>3</option>
-                    <option>4</option>
-                </select>
+            <div className={styles.buttons}>
+                <button className={styles.add_cart}>
+                    <img src="/white_cart.svg" alt="" />
+                    <span>Add to Cart</span>
+                </button>
+                <button className={styles.buy_now} onClick={() => nav("/checkout/sss")}>
+                    <img src="/flash.svg" alt="" />
+                    <span>Buy Now</span>
+                </button>
             </div>
-            <button className={styles.add_cart}>Add to Cart</button>
-            <button className={styles.buy_now} onClick={()=>nav("/checkout/sss")}>Buy Now</button>
             <div className={styles.secure_transaction}>
-                <img src={'/lock.svg'}></img> Secure Transcation
+
+                <div><img src={'/lock.svg'}/> </div>
+                <div>Secure Transcation</div>
             </div>
             <div className={styles.add_wishlist}>
-                Add to wish List
+                <img src="/like.svg" alt="" />
+                <span>Add to wish List</span>
             </div>
         </div>
     )

src/components/product/ProductInfo.jsx

@@ -3,24 +3,28 @@ import styles from '../../css/components/product/product_Info.module.css'
 import { getProduct, getRatings, normalizeProduct } from '../../services/productService'
 function ProductInfo() {
 
-    const product = normalizeProduct(getProduct(),[0,0]);
+    const product = normalizeProduct(getProduct(), [0, 0]);
     const ratings = getRatings();
     const [activeColor, setActiveColor] = useState("Navy")
     const [activeSize, setActiveSize] = useState(0)
     return (
         <div className={styles.info}>
             <h2 className={styles.title}>{product.title}</h2>
             <div className={styles.ratings}>
-                {ratings.star}
-                {Array.from({ length: 5 }, () => <img src={'/star.svg'} className={styles.star} />)}
-                {ratings.reviews} Reviews
+                <div>
+                    <span>{ratings.star.toFixed(1)}</span>
+                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTYuNSA5LjQzOWwtMy42NzQgMi4yMy45NC00LjI2LTMuMjEtMi44ODMgNC4yNTQtLjQwNEw2LjUuMTEybDEuNjkgNC4wMSA0LjI1NC40MDQtMy4yMSAyLjg4Mi45NCA0LjI2eiIvPjwvc3ZnPg==" />
+                </div>
+                <span>{ratings.reviews * 50} Ratings & {ratings.reviews} Reviews</span>
+            </div>
+            <div className={styles.price_details}>
+                <span className={styles.price}>₹{product.price}</span>
+                <span className={styles.mrp}>₹{product.mrp}</span>
+                <span className={styles.discount}>{Math.ceil(((product.mrp - product.price) / product.mrp) * 100)}% off</span>
             </div>
-            <h2 className={styles.discount}>-{(((product.mrp - product.price) / product.mrp) * 100)}%</h2>
-            <h2 className={styles.price}>₹{product.price}</h2>
-            <span className={styles.mrp}>M.R.P: <span className={styles.mrp_span}>₹{product.mrp}</span></span>
 
             <div className={styles.color_heading}>
-                Colour:<span className={styles.active_color}>
+                <span className={styles.color_title}>Colour:</span><span className={styles.active_color}>
                     {activeColor}
                 </span>
             </div>
@@ -35,23 +39,22 @@ function ProductInfo() {
                 }
             </div>
             <div className={styles.size_heading}>
-                Size: <span className={styles.active_size}>
-                    {activeSize} IN
+                <span className={styles.size_title}>Size:</span> <span className={styles.active_size}>
+                    {activeSize}
                 </span>
             </div>
             <div className={styles.sizes}>
                 {
                     product.variants[1].options.map((size) => {
                         return (
-                            <div className={styles.size} onClick={()=>setActiveSize(size)}>{size.name} IN</div>
+                            <div className={styles.size} onClick={() => setActiveSize(size)}>{size.name}</div>
                         )
                     })
                 }
             </div>
-            <div className={styles.productDetails}>
+            <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/components/product_gallery/Filters.jsx

@@ -1,35 +1,19 @@
 import React from 'react'
 import styles from '../../css/components/product_gallery/filter.module.css'
 import { getFilters } from '../../services/commonService'
+import PriceRange from './PriceRange';
 function Filters() {
     const data = getFilters();
     return (
         <div className={styles.filters}>
             <div className={styles.heading}>
-                <h1>Filters</h1>
+                <h2>Filters</h2>
                 <button>CLEAR ALL</button>
             </div>
             <div className={styles.applied_filters}>
 
             </div>
-            <div className={styles.price_range}>
-                <h3>PRICE</h3> 
-                <button>CLEAR</button>
-                <input type="range" min={0} max={3500} step={500} />
-                <select name="min">
-                    <option value={500}>{'Min'}</option>
-                    {Array.from({ length: 6 }, (value) => {
-                        <option value={value * 500}>{value * 500}</option>
-                    })}
-                </select>
-                <span>to</span>
-                <select name="max">
-                    {Array.from({ length: 5 }, (value) => {
-                        <option value={value * 500}>{value * 500}</option>
-                    })}
-                    <option value={3000}>3000+</option>
-                </select>
-            </div>
+            <PriceRange/>
             {
                 data.map((item) => {
                     return (

src/components/product_gallery/PriceRange.jsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react'
+import styles from '../../css/components/product_gallery/price_range.module.css'
+export default function PriceRange() {
+    const slider1 = useRef(null);
+    const slider2 = useRef(null);
+    const sliderTrack = useRef(null);
+    useEffect(() => { updateRange(1) }, [])
+
+    function updateRange(slider) {
+        let min = slider1.current.value;
+        let max = slider2.current.value;
+        let gap = 500;
+
+        if (max - min >= gap) {
+            fillColor(min, max, gap);
+        } else {
+            if (slider === 1) {
+                slider1.current.value = max - gap;
+                fillColor(max - gap, max, gap);
+            } else {
+                slider2.current.value = parseInt(min) + gap;
+                fillColor(min, parseInt(min) + gap, gap);
+            }
+        }
+    }
+    function fillColor(min, max, gap) {
+        let start = (min / 3500) * 100;
+        let end = (max / 3500) * 100;
+        sliderTrack.current.style.background = `linear-gradient(to right, #dadae5 ${start}% , #3264fe ${start}% , #3264fe ${end}%, #dadae5 ${end}%)`;
+    }
+    return (
+        <div className={styles.price_range}>
+            <div className={styles.price_title}>
+                <h3>PRICE</h3>
+                <button>CLEAR</button>
+            </div>
+            <div className={styles.container}>
+                <div className={styles.graph} />
+                <input type="range" min={0} max={3500} step={500} defaultValue={0} ref={slider1} className={styles.slider} onInput={() => { updateRange(1) }} />
+                <input type="range" min={0} max={3500} step={500} defaultValue={3500} ref={slider2} className={styles.slider} onInput={() => { updateRange(2) }} />
+                <div className={styles.slider_track} ref={sliderTrack} />
+            </div>
+            <div className={styles.min_max}>
+                <select name="min">
+                    <option value={500}>{'Min'}</option>
+                    {Array.from({ length: 4 }, (_, index) => <option key={index} value={(index + 2) * 500}>₹{(index + 1) * 500}</option>)}
+                </select>
+                <span>to</span>
+                <select name="max">
+                    {Array.from({ length: 5 }, (_, index) => <option key={index} value={(index + 1) * 500}>₹{(index + 1) * 500}</option>)}
+                    <option value={3000}>3000+</option>
+                </select>
+            </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;
+}
 }