Product Page Issues Fixed

src/assets/icons/starGray.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.705" height="38.705" viewBox="0 0 38.705 38.705">
+  <g id="vuesax_linear_star" data-name="vuesax/linear/star" transform="translate(-108 -188)">
+    <g id="star" transform="translate(108 188)">
+      <path id="Vector" d="M18.916,2.31l2.838,5.677a3.5,3.5,0,0,0,2.29,1.693l5.145.855c3.29.548,4.064,2.935,1.693,5.29l-4,4a3.5,3.5,0,0,0-.839,2.919l1.145,4.951c.9,3.919-1.177,5.435-4.645,3.387l-4.822-2.855a3.486,3.486,0,0,0-3.193,0L9.707,31.081c-3.451,2.048-5.548.516-4.645-3.387l1.145-4.951a3.5,3.5,0,0,0-.839-2.919l-4-4c-2.355-2.355-1.6-4.741,1.693-5.29L8.207,9.68a3.512,3.512,0,0,0,2.274-1.693L13.319,2.31C14.868-.77,17.383-.77,18.916,2.31Z" transform="translate(3.227 3.35)" fill="#dbdbdb"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H38.705V38.705H0Z" fill="#dbdbdb" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/starYellow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.705" height="38.705" viewBox="0 0 38.705 38.705">
+  <g id="vuesax_linear_star" data-name="vuesax/linear/star" transform="translate(-108 -188)">
+    <g id="star" transform="translate(108 188)">
+      <path id="Vector" d="M18.916,2.31l2.838,5.677a3.5,3.5,0,0,0,2.29,1.693l5.145.855c3.29.548,4.064,2.935,1.693,5.29l-4,4a3.5,3.5,0,0,0-.839,2.919l1.145,4.951c.9,3.919-1.177,5.435-4.645,3.387l-4.822-2.855a3.486,3.486,0,0,0-3.193,0L9.707,31.081c-3.451,2.048-5.548.516-4.645-3.387l1.145-4.951a3.5,3.5,0,0,0-.839-2.919l-4-4c-2.355-2.355-1.6-4.741,1.693-5.29L8.207,9.68a3.512,3.512,0,0,0,2.274-1.693L13.319,2.31C14.868-.77,17.383-.77,18.916,2.31Z" transform="translate(3.227 3.35)" fill="#fe0"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H38.705V38.705H0Z" fill="#fe0" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/Button/index.js

@@ -20,7 +20,7 @@ export default function Button({
       className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} justify-center text-sm lg:text-tiny cursor-pointer  lg:py-4 ${
         selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
       } ${selectable ? (active ? "text-blueC0" : color) : color} ${
-        selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity
+        selectable ? (active ? "bg-blue-100" : bgOpacity) : bgOpacity
       } `}
       style={{
         border: `${

src/components/Navbar/index.js

@@ -228,7 +228,7 @@ function Navbar({
     </div>
   ) : (
     <header className={`rounded-b-md w-full bg-transparent pb-4`}>
-      <div className="flex flex-row justify-between items-center  px-20 border-b border-gray-200 border-solid h-16 ">
+      <div className="flex flex-row justify-between items-center  px-20 border-b border-gray-200 border-solid py-4 ">
         <div className="divide-x flex flex-row transform gap-4">
           {/* <span className="text-sm font-normal text-blue52">
             انتخاب کشور
@@ -251,7 +251,7 @@ function Navbar({
       <div
         className={`w-full flex flex-col z-20 ${desktopMiddleFix ? "" : ""}`}
       >
-        <div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-2 px-20 z-20 border-b border-gray-200 border-solid ">
+        <div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-5 px-20 z-20 border-b border-gray-200 border-solid ">
           <div className="ml-10">
             <Link to="/" className="flex flex-row items-center">
               <img src={logoIcon} className="w-6" />
@@ -267,8 +267,8 @@ function Navbar({
             style={{ maxWidth: "calc(100vw / 2)" }}
           ></div>
           <div
-            className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
-            style={{ maxWidth: "calc(100vw / 2)" }}
+            className="flex w-full  absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            style={{ maxWidth: "calc(100vw / 3)" }}
           >
             <Search />
           </div>
@@ -284,7 +284,7 @@ function Navbar({
         </div>
 
         <div
-          className={`flex items-center relative w-full h-10 px-20  border-b border-solid border-gray-200 transform bg-white ${
+          className={`flex items-center relative w-full py-4 px-20  border-b border-solid border-gray-200 transform bg-white ${
             desktopEndTransform ? "" : ""
           }`}
           style={

src/components/ProductTab/table/index.css

@@ -1,5 +1,5 @@
 .specifications-li:hover div{
-    background-color: rgba(25,110,192,0.2);
+    background-color: rgba(25,110,192,0.15);
 }
 .specifications-li div{
     transition: all 0.2s;

src/components/Progress/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-function Progress({ percent }) {
+function Progress({ percent, deskTop }) {
   const [delayPercent, setDelayPercent] = useState(0);
   useEffect(() => {
     setTimeout(() => {
@@ -8,9 +8,9 @@ function Progress({ percent }) {
     }, 1000);
   }, [percent]);
   return (
-    <div className="flex-1 h-1.5 rounded-full overflow-hidden my-3" style={{ backgroundColor: '#D3E9FF' }}>
+    <div className={`flex-1 ${deskTop ? 'h-3' : 'h-1.5'} rounded-full overflow-hidden my-3`} style={{ backgroundColor: '#D3E9FF' }}>
       <div
-        className="h-full bg-blueEB transition-all duration-500 rounded-full"
+        className="h-full bg-blueEB float-left transition-all duration-500 rounded-full"
         style={{ width: delayPercent + "%" }}
       ></div>
     </div>

src/components/Search/index.js

@@ -1,46 +1,28 @@
 import React from "react";
 import _ from "lodash";
+import searchIcon from "./search.png";
 
-const langDetector = (lang = "fa", option1, option2) => {
+const langDetector = (lang = 'fa', option1, option2) => {
   return lang === "fa" ? option1 : option2;
 };
 
-export default function Search({
-  lang,
-  backgroundColor,
-  borderColor,
-  textColor,
-  icon,
-}) {
+export default function Search(props) {
   return (
-    <div
-      className={`flex items-center justify-center border-solid w-full border rounded-md overflow-hidden ${backgroundColor} border-gray-300`}
-    >
-      <div className="relative text-gray-600 w-full bg-transparent">
-        <span
-          className={_.join(
-            [
-              "absolute inset-y-0 flex items-center pl-2",
-              langDetector(lang, "left-0", "right-0"),
-            ],
-            " "
-          )}
-        >
+    <div className="flex items-center justify-center w-full my-3">
+      <div className="relative text-gray-600 focus-within:text-gray-400 w-full">
+        <span className={_.join(["absolute inset-y-0 flex items-center pl-2", langDetector(props.lang, "left-0", "right-0")], " ")}>
           <button
             type="submit"
             className="p-1 focus:outline-none focus:shadow-outline"
           >
-            {icon && <img src={icon} className="w-6 h-6" alt="" />}
+            <img src={searchIcon} className="w-6 h-6" alt="" />
           </button>
         </span>
         <input
           type="search"
           name="q"
-          className={`w-full py-2 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`}
-          placeholder={_.join(
-            [langDetector(lang, "جستجو...", "Search...")],
-            " "
-          )}
+          className="w-full py-3 text-sm text-white border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 "
+          placeholder={_.join([langDetector(props.lang , "جستجو...", "Search...")], " ")}
           autoComplete="off"
         />
       </div>

src/components/StarRating/index.js

@@ -1,15 +1,26 @@
 import React, { useState } from "react";
 import StarRatingComponent from "react-star-rating-component";
+import starGrayIcon from '../../assets/icons/starGray.svg';
+import starYellowIcon from '../../assets/icons/starYellow.svg';
 
 function StarRating() {
   const [rate, setRating] = useState(2);
   return (
     <StarRatingComponent
       name="rate1"
-      starCount={5}
+     
+      renderStarIcon={(index, value)=> {
+        if (index <= value){
+        return (
+        <img src={starYellowIcon} className="w-5"/>
+        );
+        }
+        return (<img src={starGrayIcon} className="w-5"/>);
+        }}
+
       value={rate}
+      size='35'
       onStarHover={(value) => setRating(value)}
-      
     />
   );
 }

src/views/Product/Desktop/ProductOverAll/index.js

@@ -109,7 +109,7 @@ export const ProductOverAll = ({
           <div className="flex py-4">
             <Button
               title="مشاهده دوره ویدیویی این محصول       >"
-              backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"}
+              backgroundColor={isDark ? "bg-transparent" : "bg-blue-100'"}
               border={{
                 color: isDark ? "#ffffff55" : "#196EC055",
                 width: "2px",
@@ -117,13 +117,13 @@ export const ProductOverAll = ({
               color={isDark ? "text-white" : "text-blue52"}
               selectable={true}
               onClick={() => setType("physical")}
-              customStyle="bg-black bg-opacity-10"
+              customStyle=" bg-blue-100"
               twPaddings="py-4 px-32"
               radius={false}
             />
           </div>
         </div>
-        <div className="flex flex-col w-1/4">
+        <div className="flex flex-col w-1/3">
           <ProductStatusCard />
         </div>
       </header>

src/views/Product/Desktop/index.js

@@ -15,8 +15,8 @@ const DesktopProductLayout = () =>{
             <div className="w-full">
             <ProductSuggestions />
             </div>
-            <div className="w-2/3 my-8">
-            <Rate />
+            <div className="w-2/5 my-8">
+            <Rate desktop />
             </div>
             <div className="w-4/5">
             <Comments />

src/views/Product/Rate/index.js

@@ -2,21 +2,34 @@ import React from "react";
 import StarRating from "../../../components/StarRating";
 import Progress from "../../../components/Progress";
 
-function Rate({ avarage, all, fields }) {
+function Rate({ avarage, all, fields, desktop }) {
   return (
     <div className="w-full flex flex-row justify-between items-center mt-2">
       <div className="flex flex-col items-center justify-center h-full ml-4">
-        <strong className="text-3xl text-blue5F mb-2 font-bold dark:text-white">
-          {avarage}
-        </strong>
+        {
+          desktop ?
+            <h1 className={`text-7xl text-gray-600 mb-2 font-bold dark:text-white`}>
+              {avarage}
+            </h1>
+            :
+            <strong className={`text-3xl text-blue5F mb-2 font-bold dark:text-white`}>
+              {avarage}
+            </strong>
+        }
+        <div className="">
         <StarRating />
+        </div>
         <span className="text-xs text-gray70 mt-2 dark:text-white">{all}</span>
       </div>
       <ul className="p-0 m-0 list-none flex flex-col flex-1">
         {fields.map((item, index) => (
           <li key={index} className="w-full flex flex-row-reverse items-center justify-between">
             <span className="mr-2 text-xs text-blue5F dark:text-white">{item.name}</span>
-            <Progress percent={item.percent} />
+
+            {
+              desktop ? <Progress deskTop percent={item.percent} /> : <Progress percent={item.percent} />
+            }
+
             <span className="ml-2 text-xs text-blue5F dark:text-white">{item.percent + "%"}</span>
           </li>
         ))}
@@ -33,23 +46,23 @@ Rate.defaultProps = {
   fields: [
     {
       name: "5 ستاره",
-      percent: 50,
+      percent: 49,
     },
     {
       name: "4 ستاره",
-      percent: 50,
+      percent: 31,
     },
     {
       name: "3 ستاره",
-      percent: 50,
+      percent: 9,
     },
     {
       name: "2 ستاره",
-      percent: 50,
+      percent: 5,
     },
     {
       name: "1 ستاره",
-      percent: 50,
+      percent: 6,
     },
   ],
 };