reza fixed something

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/Comments/index.js

@@ -68,7 +68,7 @@ export const Comments = ({ comments }) => {
                 )}
               </div>
             </header>
-            <p className="text-gray-500 mt-2">{comment.text}</p>
+            <p className="text-gray-500 h-auto leading-7 mt-2">{comment.text}</p>
             <div className="self-end mt-4">
               {/* <Button title='اطلاعات بیشتر' backgroundColor='bg-gray-200' width={}/> */}
             </div>

src/components/Navbar/index.js

@@ -213,7 +213,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-10 ">
+      <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">
             انتخاب کشور
@@ -236,7 +236,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-4 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" />
@@ -252,8 +252,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>
@@ -269,7 +269,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

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

src/components/ProductTab/table/index.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+import './index.css';
 
 const persian = {
   weight: "وزن",
@@ -12,17 +13,18 @@ const persian = {
 };
 
 const Table = ({ specifications }) => {
+
   return (
-    <ul className="w-full">
+    <ul className={`w-full`} >
       {Object.keys(specifications).map((specification, index) => (
-        <li className="flex my-3">
+        <li className={`flex my-3 cursor-pointer specifications-li`} >
           <div
-            className="bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm"
+            className={` bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm`}
             style={{ flex: 2 }}
           >
             {persian[specification]}
           </div>
-          <div className="bg-grayF9 rounded p-3 text-sm" style={{ flex: 8 }}>
+          <div className={`bg-grayF9 rounded p-3 text-sm`} style={{ flex: 8 }}>
             {specifications[specification]}
           </div>
         </li>

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/QandA/index.js

@@ -9,18 +9,18 @@ import Button from "../Button";
 const QandA = ({ comments }) => {
   const Comment = ({ comment }) => {
     const [open, Setopen] = useState(true);
-    const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر");
+    const [viewmore, setViewMore] = useState("مشاهده پاسخ های بیشتر");
     const [numberOfAnswers, setNumberOfAnswers] = useState(1);
     const [isOpen, setIsOpen] = useState(false);
     return (
       <>
-        <div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200">
+        <div className="flex flex-col leading-7 w-full py-6 border-t-2 border-solid border-gray-200">
           <header className="w-full flex flex-row justify-between py-1">
             <div className="flex flex-row items-end">
               <div className="flex items-center">
                 <strong className="text-lg mx-2">{comment.username}</strong>
                 {comment.isCostumer ? (
-                  <p className="text-blueC0">خریدار محصول</p>
+                  <p className="text-greenBA font-light">خریدار محصول</p>
                 ) : null}
               </div>
             </div>
@@ -43,7 +43,7 @@ const QandA = ({ comments }) => {
               <header className="w-full flex flex-row justify-between items-center">
                 <div className="flex flex-row items-center">
                   <div className="py-4 px-6 bg-blue-100 text-gray-400 rounded">
-                    <h1>برسش</h1>
+                    <h1>پرسش</h1>
                   </div>
                 </div>
               </header>
@@ -63,7 +63,7 @@ const QandA = ({ comments }) => {
                   <header className="w-full flex flex-row justify-between items-center">
                     <div className="flex flex-row items-center">
                       <div className="py-4 px-6 bg-green-100 text-gray-400 rounded">
-                        <h1>باسخ</h1>
+                        <h1>پاسخ</h1>
                       </div>
                     </div>
                   </header>
@@ -81,7 +81,7 @@ const QandA = ({ comments }) => {
             <header className="w-full flex flex-row justify-between items-center">
               <div className="flex w-4/5 flex-row items-center">
                 <div className="py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded">
-                  <h1>ارسال باسخ</h1>
+                  <h1>ارسال پاسخ</h1>
                 </div>
               </div>
             </header>
@@ -102,12 +102,12 @@ const QandA = ({ comments }) => {
                     isOpen
                       ? () => {
                           setNumberOfAnswers(1);
-                          setViewMore("مشاهده باسخ های بیشتر");
+                          setViewMore("مشاهده پاسخ های بیشتر");
                           setIsOpen(false);
                         }
                       : () => {
                           setNumberOfAnswers(comment.answers.length);
-                          setViewMore("بستن باسخ ها");
+                          setViewMore("بستن پاسخ ها");
                           setIsOpen(true);
                         }
                   }

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/router.js

@@ -363,7 +363,7 @@ function Router({
                     title: false,
                     back: false,
                     shown: true,
-                    menu: false,
+                    menu: true,
                   }}
                 />
               }

src/views/Contact/index.js

@@ -48,8 +48,8 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
 
   return (
     <div
-      className="w-full flex h-full flex-col bg-transparent"
-      style={{ height: "calc(100vh - 145px)" }}
+      className="w-full flex h-auto flex-col bg-transparent"
+      // style={{ height: "calc(100vh - 140px)" }}
     >
       <Header
         bg={isMobile ? contactBgImage : desktopContactBgImage}
@@ -85,7 +85,7 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
               link="/faq"
             />
           </div>
-          <div className="w-1/3 rounded-md overflow-hidden">
+          <div className="w-1/3 rounded-md overflow-hidden" style={{height:'400px'}}>
             <Map />
           </div>
         </div>

src/views/Home/Desktop/Part2/index.js

@@ -23,7 +23,7 @@ const Part2 = (
       }, []);
     return (
         <div className="w-full my-6" style={{
-          height: '500px'
+          height: '550px'
         }}>
             <div className="w-full flex justify-between items-center">
                 <div className="flex items-center text-4xl font-black text-blue52">
@@ -39,7 +39,7 @@ const Part2 = (
                             backgroundColor="bg-blue-100"
                             border={{
                                 color: "#196EC055",
-                                width: "0px",
+                                width: "0px", 
                               }}
                             width="100%"
                             selectable={true}

src/views/Home/Desktop/index.js

@@ -8,7 +8,7 @@ import SalesContainer from "../../../components/SalesContainer";
 
 import { book, publicApi } from "../../../redux/actions";
 import Part2 from "./Part2";
-import HomeImg from '../../../assets/images/HomeImg.svg';
+import HomeImg from '../../../assets/images/HomeImg.png';
 import Part4 from "./Part4";
 import Design2D from "../../../components/Design2D";
 

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

@@ -95,13 +95,13 @@ export const ProductOverAll = ({
                 title="مشاهده نمونه"
                 backgroundColor={isDark ? "bg-transparent" : "bg-white"}
                 border={{
-                  color: isDark ? "#ffffff55" : "#C01919",
+                  color: isDark ? "#ffffff55" : "rgba(192,57,25,0.24)",
                   width: "1px",
                 }}
                 width="24%"
                 radius={false}
                 twPaddings="py-4 px-6"
-                color={isDark ? "text-white" : "text-red19"}
+                color={isDark ? "text-white" : "font-bold text-red19"}
                 onClick={() => {}}
               />
             </div>
@@ -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

@@ -9,14 +9,14 @@ import QandA from "../../../components/QandA";
 
 const DesktopProductLayout = () =>{
     return (
-        <div className="w-4/5 flex flex-col overflow-y-hidden mt-3 mb-64 items-center">
+        <div className="w-11/12 flex flex-col overflow-y-hidden mt-3 mb-64 items-center">
             <ProductOverAll />
             <ProductTab />
             <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,
     },
   ],
 };