update loyalty icon place
This commit is contained in:
@@ -6,16 +6,17 @@ interface StarIconType {
|
||||
const StarIcon = ({ className, onClick }: StarIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width="17"
|
||||
height="16"
|
||||
viewBox="0 0 17 16"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<rect width="20" height="20" rx="10" fill="#F5F5F6" />
|
||||
<path
|
||||
d="M7.8951 0.97117C7.92797 0.904766 7.97874 0.84887 8.04169 0.809789C8.10464 0.770709 8.17726 0.75 8.25135 0.75C8.32544 0.75 8.39806 0.770709 8.46101 0.809789C8.52396 0.84887 8.57473 0.904766 8.6076 0.97117L10.3401 4.48042C10.4541 4.71151 10.6225 4.91144 10.8309 5.063C11.0393 5.21455 11.2814 5.31319 11.5363 5.35042L15.4109 5.91742C15.4843 5.92806 15.5532 5.95902 15.61 6.00682C15.6667 6.05462 15.7089 6.11733 15.7319 6.18788C15.7548 6.25842 15.7576 6.33397 15.7398 6.406C15.722 6.47802 15.6845 6.54363 15.6314 6.59542L12.8294 9.32392C12.6444 9.50388 12.506 9.72616 12.4262 9.97155C12.3464 10.2169 12.3274 10.4781 12.3711 10.7324L13.0326 14.5874C13.0456 14.6608 13.0376 14.7363 13.0097 14.8054C12.9818 14.8745 12.935 14.9344 12.8748 14.9782C12.8145 15.022 12.7431 15.0479 12.6687 15.0531C12.5944 15.0583 12.5201 15.0424 12.4543 15.0074L8.99085 13.1864C8.76268 13.0665 8.50876 13.0038 8.25097 13.0038C7.99319 13.0038 7.73927 13.0665 7.5111 13.1864L4.04835 15.0074C3.9826 15.0422 3.9084 15.0579 3.83419 15.0526C3.75998 15.0473 3.68874 15.0213 3.62857 14.9776C3.5684 14.9338 3.52172 14.8741 3.49384 14.8051C3.46596 14.7361 3.45799 14.6607 3.47085 14.5874L4.1316 10.7332C4.17538 10.4787 4.15653 10.2174 4.07669 9.9719C3.99685 9.72636 3.85841 9.50396 3.67335 9.32392L0.87135 6.59617C0.817795 6.54444 0.779845 6.47872 0.761822 6.40648C0.743799 6.33423 0.746427 6.25838 0.769409 6.18756C0.79239 6.11674 0.8348 6.0538 0.891807 6.00591C0.948815 5.95801 1.01813 5.92709 1.09185 5.91667L4.9656 5.35042C5.22083 5.31342 5.46324 5.21488 5.6719 5.06332C5.88057 4.91175 6.04923 4.7117 6.16335 4.48042L7.8951 0.97117Z"
|
||||
d="M9.76242 5.14751C9.78433 5.10324 9.81818 5.06597 9.86015 5.03992C9.90212 5.01387 9.95053 5.00006 9.99992 5.00006C10.0493 5.00006 10.0977 5.01387 10.1397 5.03992C10.1817 5.06597 10.2155 5.10324 10.2374 5.14751L11.3924 7.48701C11.4684 7.64107 11.5807 7.77436 11.7196 7.87539C11.8585 7.97643 12.0199 8.04219 12.1899 8.06701L14.7729 8.44501C14.8219 8.4521 14.8678 8.47274 14.9057 8.50461C14.9435 8.53647 14.9716 8.57828 14.9869 8.62531C15.0022 8.67234 15.0041 8.72271 14.9922 8.77073C14.9804 8.81874 14.9553 8.86248 14.9199 8.89701L13.0519 10.716C12.9286 10.836 12.8364 10.9842 12.7832 11.1478C12.7299 11.3114 12.7173 11.4855 12.7464 11.655L13.1874 14.225C13.1961 14.2739 13.1908 14.3243 13.1722 14.3704C13.1536 14.4164 13.1224 14.4563 13.0822 14.4855C13.042 14.5147 12.9944 14.532 12.9449 14.5355C12.8953 14.5389 12.8458 14.5284 12.8019 14.505L10.4929 13.291C10.3408 13.211 10.1715 13.1693 9.99967 13.1693C9.82782 13.1693 9.65854 13.211 9.50642 13.291L7.19792 14.505C7.15409 14.5282 7.10462 14.5387 7.05515 14.5351C7.00568 14.5316 6.95818 14.5143 6.91807 14.4851C6.87796 14.4559 6.84684 14.4161 6.82825 14.3701C6.80966 14.3241 6.80435 14.2739 6.81292 14.225L7.25342 11.6555C7.28261 11.4859 7.27004 11.3117 7.21682 11.148C7.16359 10.9843 7.0713 10.836 6.94792 10.716L5.07992 8.89751C5.04422 8.86302 5.01892 8.81921 5.0069 8.77105C4.99489 8.72288 4.99664 8.67232 5.01196 8.6251C5.02728 8.57789 5.05556 8.53593 5.09356 8.504C5.13157 8.47207 5.17778 8.45146 5.22692 8.44451L7.80942 8.06701C7.97958 8.04234 8.14118 7.97665 8.28029 7.87561C8.4194 7.77456 8.53184 7.6412 8.60792 7.48701L9.76242 5.14751Z"
|
||||
fill="#FFC600"
|
||||
stroke="#FFC600"
|
||||
strokeWidth="1.5"
|
||||
|
||||
@@ -7,8 +7,8 @@ interface DescIcon1Type {
|
||||
const DescIcon1 = ({ className, onClick,pathColor }: DescIcon1Type) => {
|
||||
return (
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -7,8 +7,8 @@ interface DescIcon2Type {
|
||||
const DescIcon2 = ({ className, onClick, pathColor }: DescIcon2Type) => {
|
||||
return (
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -7,8 +7,8 @@ interface DescIcon3Type {
|
||||
const DescIcon3 = ({ className, onClick, pathColor }: DescIcon3Type) => {
|
||||
return (
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -1,3 +1,14 @@
|
||||
.descIcon {
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.descIconsContainer {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.itemDescriptionIconsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@@ -3,15 +3,19 @@ import DescIcon2 from "components/Icons/item/DescIcon2";
|
||||
import DescIcon3 from "components/Icons/item/DescIcon3";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import styles from "./ItemDescriptionIcons.module.css";
|
||||
import StarIcon from "components/Icons/StarIcon";
|
||||
|
||||
export function ItemDescriptionIcons({ className }: { className?: string }) {
|
||||
export function ItemDescriptionIcons({ className, hasLoyalty }: { className?: string, hasLoyalty?: boolean }) {
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const pathColor = themeName === "dark" ? "white" : "#000044";
|
||||
return (
|
||||
<div className={className}>
|
||||
<DescIcon1 className={styles.descIcon} pathColor={pathColor} />
|
||||
<DescIcon2 className={styles.descIcon} pathColor={pathColor} />
|
||||
<DescIcon3 className={styles.descIcon} pathColor={pathColor} />
|
||||
<div className={className + " " + styles.itemDescriptionIconsContainer}>
|
||||
{hasLoyalty && <StarIcon className={styles.starIcon} />}
|
||||
<span className={styles.descIconsContainer}>
|
||||
<DescIcon1 className={styles.descIcon} pathColor={pathColor} />
|
||||
<DescIcon2 className={styles.descIcon} pathColor={pathColor} />
|
||||
<DescIcon3 className={styles.descIcon} pathColor={pathColor} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -105,11 +105,6 @@
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.itemDescriptionIcons svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.arrowButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -84,7 +84,6 @@ export default function ProductCard({ item }: Props) {
|
||||
gap: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<StarIcon />
|
||||
<ProText
|
||||
style={{
|
||||
margin: 0,
|
||||
@@ -156,7 +155,7 @@ export default function ProductCard({ item }: Props) {
|
||||
...(isRTL ? { right: -5 } : {}),
|
||||
}}
|
||||
>
|
||||
<ItemDescriptionIcons className={styles.itemDescriptionIcons} />
|
||||
<ItemDescriptionIcons className={styles.itemDescriptionIcons} hasLoyalty={item.isHasLoyalty} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user