fix: ModalUser change active icon color

This commit is contained in:
IlyaDoronin 2023-07-27 17:21:06 +03:00
parent b1b267fdb7
commit 073fce8554
5 changed files with 23 additions and 20 deletions

@ -1,4 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black">
<path d="M9.08717 1.85277C9.51062 1.18151 10.4894 1.18151 10.9128 1.85277C11.5762 2.90442 12.8955 3.33307 14.0503 2.87221C14.7875 2.57804 15.5793 3.15335 15.5273 3.9453C15.4459 5.18603 16.2612 6.30826 17.4664 6.61422C18.2357 6.8095 18.5381 7.74037 18.0306 8.35052C17.2354 9.30642 17.2354 10.6936 18.0306 11.6495C18.5381 12.2596 18.2357 13.1905 17.4664 13.3858C16.2612 13.6917 15.4459 14.814 15.5273 16.0547C15.5793 16.8467 14.7875 17.422 14.0503 17.1278C12.8955 16.6669 11.5762 17.0956 10.9128 18.1472C10.4894 18.8185 9.51062 18.8185 9.08717 18.1472C8.42377 17.0956 7.10451 16.6669 5.94967 17.1278C5.21254 17.422 4.4207 16.8467 4.47269 16.0547C4.55413 14.814 3.73878 13.6917 2.53361 13.3858C1.76435 13.1905 1.46189 12.2596 1.96945 11.6495C2.76462 10.6936 2.76462 9.30643 1.96945 8.35052C1.46189 7.74037 1.76435 6.8095 2.53361 6.61422C3.73878 6.30826 4.55413 5.18604 4.47269 3.9453C4.4207 3.15335 5.21254 2.57804 5.94968 2.87221C7.10451 3.33307 8.42377 2.90442 9.08717 1.85277Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/> <path d="M9.08717 1.85277C9.51062 1.18151 10.4894 1.18151 10.9128 1.85277C11.5762 2.90442 12.8955 3.33307 14.0503 2.87221C14.7875 2.57804 15.5793 3.15335 15.5273 3.9453C15.4459 5.18603 16.2612 6.30826 17.4664 6.61422C18.2357 6.8095 18.5381 7.74037 18.0306 8.35052C17.2354 9.30642 17.2354 10.6936 18.0306 11.6495C18.5381 12.2596 18.2357 13.1905 17.4664 13.3858C16.2612 13.6917 15.4459 14.814 15.5273 16.0547C15.5793 16.8467 14.7875 17.422 14.0503 17.1278C12.8955 16.6669 11.5762 17.0956 10.9128 18.1472C10.4894 18.8185 9.51062 18.8185 9.08717 18.1472C8.42377 17.0956 7.10451 16.6669 5.94967 17.1278C5.21254 17.422 4.4207 16.8467 4.47269 16.0547C4.55413 14.814 3.73878 13.6917 2.53361 13.3858C1.76435 13.1905 1.46189 12.2596 1.96945 11.6495C2.76462 10.6936 2.76462 9.30643 1.96945 8.35052C1.46189 7.74037 1.76435 6.8095 2.53361 6.61422C3.73878 6.30826 4.55413 5.18604 4.47269 3.9453C4.4207 3.15335 5.21254 2.57804 5.94968 2.87221C7.10451 3.33307 8.42377 2.90442 9.08717 1.85277Z" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M6.65234 10.5977L8.68495 12.5107L13.2284 7.84766" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.65234 10.5977L8.68495 12.5107L13.2284 7.84766" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1,3 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black">
<path d="M12 8C12 7.5 12 6.1 12 4.5C12 2.5 11 1 9 1C7 1 6 3 6 4.5C6 5.7 6 7.33333 6 8M2.8 5.5H15.2L16.5 16.5H1.5L2.8 5.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 8C12 7.5 12 6.1 12 4.5C12 2.5 11 1 9 1C7 1 6 3 6 4.5C6 5.7 6 7.33333 6 8M2.8 5.5H15.2L16.5 16.5H1.5L2.8 5.5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 309 B

After

Width:  |  Height:  |  Size: 309 B

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black">
<path d="M1.66602 5.83268H16.666M13.3327 1.66602L17.4993 5.83268L13.3327 9.99935M18.3327 14.166H3.33268M6.66602 9.99935L2.49935 14.166L6.66602 18.3327" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.66602 5.83268H16.666M13.3327 1.66602L17.4993 5.83268L13.3327 9.99935M18.3327 14.166H3.33268M6.66602 9.99935L2.49935 14.166L6.66602 18.3327" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 338 B

After

Width:  |  Height:  |  Size: 338 B

@ -1,4 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black">
<path d="M17.25 9C17.25 11.4433 16.1888 13.6378 14.4998 15.1495C13.0397 16.4563 11.1135 17.25 9 17.25C6.88655 17.25 4.96026 16.4563 3.50019 15.1495C1.81118 13.6378 0.75 11.4433 0.75 9C0.75 4.44365 4.44365 0.75 9 0.75C13.5563 0.75 17.25 4.44365 17.25 9Z" stroke="black" stroke-width="1.5"/> <path d="M17.25 9C17.25 11.4433 16.1888 13.6378 14.4998 15.1495C13.0397 16.4563 11.1135 17.25 9 17.25C6.88655 17.25 4.96026 16.4563 3.50019 15.1495C1.81118 13.6378 0.75 11.4433 0.75 9C0.75 4.44365 4.44365 0.75 9 0.75C13.5563 0.75 17.25 4.44365 17.25 9Z" stroke-width="1.5"/>
<circle cx="9" cy="7.6001" r="2.25" stroke="black" stroke-width="1.5"/> <circle cx="9" cy="7.6001" r="2.25" stroke-width="1.5"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 465 B

After

Width:  |  Height:  |  Size: 450 B

@ -17,19 +17,20 @@ import { PurchaseTab } from "./PurchaseTab";
import { TransactionsTab } from "./TransactionsTab"; import { TransactionsTab } from "./TransactionsTab";
import { VerificationTab } from "./VerificationTab"; import { VerificationTab } from "./VerificationTab";
import userIcon from "@root/assets/icons/user.svg"; import { ReactComponent as UserIcon } from "@root/assets/icons/user.svg";
import packageIcon from "@root/assets/icons/package.svg"; import { ReactComponent as PackageIcon } from "@root/assets/icons/package.svg";
import transactionsIcon from "@root/assets/icons/transactions.svg"; import { ReactComponent as TransactionsIcon } from "@root/assets/icons/transactions.svg";
import checkIcon from "@root/assets/icons/check.svg"; import { ReactComponent as CheckIcon } from "@root/assets/icons/check.svg";
import forwardIcon from "@root/assets/icons/forward.svg"; import forwardIcon from "@root/assets/icons/forward.svg";
import type { SyntheticEvent } from "react"; import type { SyntheticEvent } from "react";
const TABS = [ const TABS = [
{ name: "Пользователь", icon: userIcon }, { name: "Пользователь", icon: UserIcon },
{ name: "Покупка товаров и услуг", icon: packageIcon }, { name: "Покупка товаров и услуг", icon: PackageIcon },
{ name: "Транзакции", icon: transactionsIcon }, { name: "Транзакции", icon: TransactionsIcon },
{ name: "Верификация", icon: checkIcon }, { name: "Верификация", icon: CheckIcon },
]; ];
const ModalUser = () => { const ModalUser = () => {
@ -127,9 +128,9 @@ const ModalUser = () => {
}} }}
TabIndicatorProps={{ style: { background: "transparent" } }} TabIndicatorProps={{ style: { background: "transparent" } }}
> >
{TABS.map(({ name, icon }) => ( {TABS.map(({ name, icon: Icon }) => (
<Tab <Tab
icon={<img src={icon} alt={name} />} icon={<Icon />}
iconPosition="start" iconPosition="start"
key={name} key={name}
label={mobile ? (openNavigation ? name : "") : name} label={mobile ? (openNavigation ? name : "") : name}
@ -144,10 +145,12 @@ const ModalUser = () => {
color: theme.palette.common.black, color: theme.palette.common.black,
whiteSpace: "nowrap", whiteSpace: "nowrap",
lineHeight: "18px", lineHeight: "18px",
transition: ".2s",
"&.MuiButtonBase-root.Mui-selected": { "&.MuiButtonBase-root.Mui-selected": {
borderRadius: "12px", borderRadius: "12px",
color: "#7E2AEA", color: "#7E2AEA",
background: "rgba(126, 42, 234, 0.07)", background: "rgba(126, 42, 234, 0.07)",
"& svg": { stroke: "#7E2AEA" },
}, },
}} }}
/> />