From 642f14406c246b6b8ef176cf9514d99c3fd5b434 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Mon, 31 Jan 2022 16:05:40 +0330 Subject: [PATCH] Product Page Issues Fixed --- src/assets/icons/starGray.svg | 8 ++++ src/assets/icons/starYellow.svg | 8 ++++ src/components/Button/index.js | 2 +- src/components/Navbar/index.js | 10 ++--- src/components/ProductTab/table/index.css | 2 +- src/components/Progress/index.js | 6 +-- src/components/Search/index.js | 36 +++++------------- src/components/Search/search.png | Bin 0 -> 857 bytes src/components/StarRating/index.js | 15 +++++++- .../Product/Desktop/ProductOverAll/index.js | 6 +-- src/views/Product/Desktop/index.js | 4 +- src/views/Product/Rate/index.js | 33 +++++++++++----- 12 files changed, 76 insertions(+), 54 deletions(-) create mode 100644 src/assets/icons/starGray.svg create mode 100644 src/assets/icons/starYellow.svg create mode 100644 src/components/Search/search.png diff --git a/src/assets/icons/starGray.svg b/src/assets/icons/starGray.svg new file mode 100644 index 0000000..c9803c8 --- /dev/null +++ b/src/assets/icons/starGray.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/starYellow.svg b/src/assets/icons/starYellow.svg new file mode 100644 index 0000000..a79a67c --- /dev/null +++ b/src/assets/icons/starYellow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 7262f1a..f205980 100644 --- a/src/components/Button/index.js +++ b/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: `${ diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 7e8ead5..d1e4424 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -228,7 +228,7 @@ function Navbar({ ) : (
-
+
{/* انتخاب کشور @@ -251,7 +251,7 @@ function Navbar({
-
+
@@ -267,8 +267,8 @@ function Navbar({ style={{ maxWidth: "calc(100vw / 2)" }} >
@@ -284,7 +284,7 @@ function Navbar({
{ setTimeout(() => { @@ -8,9 +8,9 @@ function Progress({ percent }) { }, 1000); }, [percent]); return ( -
+
diff --git a/src/components/Search/index.js b/src/components/Search/index.js index bc94a64..25a8936 100644 --- a/src/components/Search/index.js +++ b/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 ( -
-
- +
+
+
diff --git a/src/components/Search/search.png b/src/components/Search/search.png new file mode 100644 index 0000000000000000000000000000000000000000..81d586c7fa7862e5d51c832c1c1a94814283778a GIT binary patch literal 857 zcmV-f1E&0mP)(+L_Ts5c;; zpmc)L3DW=bJ>?Wfw(L0WrFZD=9SN57KK*)6eoAt3#4R~uwv$0{v)SyUEpD=2uix`I zNs^WRyz2Xp`F#F5WbwV>1av3Ishr-(Dxj9O6l|&fU-tp+43}jYK!t1~`y*SLq0Y)V zS3jNu4LoB$prj!4q9`8wC>e#5GaLammHm?C0$Fr*Vz6`dCj{8?dyVIBw6($+*mqNF zrb%(KS2N{Ndo8=wRAp?UMmPiesR`(F(`B-lGtGIfJ^-@S0P?x91>ro!E;KUjx(zWn zp4;50b|$-Oo4X0_iv~_@a8&*-P<|f+e9`}Y%PyNTc?Zs7gE$)$V=-V$lxOw(EVw+> zKLp2sQw<q-}kpQEs<|s_P zYxz8l!4aTOp;e3}p|@Kk#@6Ay*;X$RqUX;cK`nC;WhXI0aGX8mApv4@36Qr&D_o`y zg}|ck+nBSy&jnYBA>XM#)>kgqgHLa8HEFvjNB#9pwv#n|x2bP`!I2OYq=eR{{Wl3g zQOOD(>nrH1M4$dr&F$FE5mtYFQD2=2?y`@AA$h`<^-bYj15hmuEvBgw<^@a{&9Q=#2XBI- zpe42^O+K37xOo8<555OTzfzGoNLUJfo&G%6}St{b6;1#6Pz1l7m{4x+3t7VWTp3+Wa7MZ z4Ji2z7qH$9YzMFxoWC;LZg;Au-ZK&iHCIjBRadA9aBsM}gQ4F&z)b;gG;kK%Q{vgh j@lnAIN{FFb*LVD1*@<&E6n{BQ00000NkvXXu0mjfUL%A| literal 0 HcmV?d00001 diff --git a/src/components/StarRating/index.js b/src/components/StarRating/index.js index 7fd1e0e..458feb9 100644 --- a/src/components/StarRating/index.js +++ b/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 ( { + if (index <= value){ + return ( + + ); + } + return (); + }} + value={rate} + size='35' onStarHover={(value) => setRating(value)} - /> ); } diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js index 0734618..83bb1c3 100644 --- a/src/views/Product/Desktop/ProductOverAll/index.js +++ b/src/views/Product/Desktop/ProductOverAll/index.js @@ -109,7 +109,7 @@ export const ProductOverAll = ({
-
+
diff --git a/src/views/Product/Desktop/index.js b/src/views/Product/Desktop/index.js index dcea734..b00095a 100644 --- a/src/views/Product/Desktop/index.js +++ b/src/views/Product/Desktop/index.js @@ -15,8 +15,8 @@ const DesktopProductLayout = () =>{
-
- +
+
diff --git a/src/views/Product/Rate/index.js b/src/views/Product/Rate/index.js index 8fc68ae..ccc0df6 100644 --- a/src/views/Product/Rate/index.js +++ b/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 (
- - {avarage} - + { + desktop ? +

+ {avarage} +

+ : + + {avarage} + + } +
+
{all}
    {fields.map((item, index) => (
  • {item.name} - + + { + desktop ? : + } + {item.percent + "%"}
    • ))} @@ -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, }, ], };