PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor card shadow

Browse Source
This commit is contained in:
nflnkr 2023-06-16 22:04:59 +03:00
parent 49f9795f86
commit c60776819b
14 changed files with 34 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AccordionWrapper.tsx
View File

@ -1,5 +1,6 @@
import { Box } from "@mui/material";
import CustomAccordionBasket from "./CustomAccordionBasket";
import { cardShadow } from "@root/utils/themes/shadow";
interface Props {
content: { title: string; data: [string, number][] }[];
@ -11,12 +12,7 @@ export default function AccordionWrapperBasket({ content }: Props) {
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
boxShadow: cardShadow,
}}
>
{content.map((accordionItem, index) => (

9
src/components/CustomWrapperDrawer.tsx
View File

@ -3,6 +3,7 @@ import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
import { cardShadow } from "@root/utils/themes/shadow";
interface Props {
type: "templ" | "squiz" | "reducer";
@ -32,13 +33,7 @@ export default function CustomWrapperDrawer({ type, content }: Props) {
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
4749)`,
boxShadow: cardShadow,
}}
>
<Box

10
src/pages/AccountSetup/AccountSetup.tsx
View File

@ -9,6 +9,7 @@ import UploadIcon from "@root/components/icons/UploadIcon";
import { VerificationStatus } from "@root/model/user";
import DocumentsDialog from "./DocumentsDialog/DocumentsDialog";
import EyeIcon from "@root/components/icons/EyeIcon";
import { cardShadow } from "@root/utils/themes/shadow";
export default function AccountSetup() {
@ -45,14 +46,7 @@ export default function AccountSetup() {
borderRadius: "12px",
p: "20px",
gap: "40px",
boxShadow: `
0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
`,
boxShadow: cardShadow,
}}>
<Box sx={{
display: "flex",

9
src/pages/Basket/CustomWrapper.tsx
View File

@ -5,6 +5,7 @@ import ExpandIcon from "@components/icons/ExpandIcon";
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
import { cardShadow } from "@root/utils/themes/shadow";
interface Templ {
name: string;
@ -36,13 +37,7 @@ export default function CustomWrapper({ type, content }: Props) {
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
4749)`,
boxShadow: cardShadow,
}}
>
<Box

8
src/pages/Faq/AccordionWrapper.tsx
View File

@ -1,6 +1,7 @@
import { Box } from "@mui/material";
import CustomAccordion from "@components/CustomAccordion";
import { cardShadow } from "@root/utils/themes/shadow";
interface Props {
content: [string, string][];
@ -12,12 +13,7 @@ export default function AccordionWrapper({ content }: Props) {
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
boxShadow: cardShadow,
}}
>
{content.map((accordionItem, index) => (

8
src/pages/Payment/Payment.tsx
View File

@ -11,6 +11,7 @@ import visaLogo from "../../assets/bank-logo/logo-visa.png";
import qiwiLogo from "../../assets/bank-logo/logo-qiwi.png";
import mirLogo from "../../assets/bank-logo/logo-mir.png";
import tinkoffLogo from "../../assets/bank-logo/logo-tinkoff.png";
import { cardShadow } from "@root/utils/themes/shadow";
export default function Payment() {
const theme = useTheme();
@ -53,12 +54,7 @@ export default function Payment() {
flexDirection: upMd ? "row" : "column",
borderRadius: "12px",
boxShadow: upMd
? `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
? cardShadow
: undefined,
}}
>

8
src/pages/PaymentHistory/AccordionWrapper.tsx
View File

@ -1,5 +1,6 @@
import { Box } from "@mui/material";
import CustomAccordion from "./CustomAccordionPayHistory";
import { cardShadow } from "@root/utils/themes/shadow";
interface Props {
@ -13,12 +14,7 @@ export default function AccordionWrapper({content}:Props) {
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
boxShadow: cardShadow,
}}
>
{content.map((accordionItem, index) => (

8
src/pages/Support/CreateTicket.tsx
View File

@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
import CustomButton from "@components/CustomButton";
import { createTicket } from "@root/api/tickets";
import { enqueueSnackbar } from "notistack";
import { cardShadow } from "@root/utils/themes/shadow";
export default function CreateTicket() {
@ -37,12 +38,7 @@ export default function CreateTicket() {
p: upMd ? "20px" : undefined,
gap: upMd ? "40px" : "20px",
boxShadow: upMd
? `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
? cardShadow
: undefined,
}}
>

8
src/pages/Support/SupportChat.tsx
View File

@ -12,6 +12,7 @@ import { getTicketMessages, sendTicketMessage, subscribeToTicketMessages } from
import { GetMessagesRequest, TicketMessage } from "@root/model/ticket";
import { authStore } from "@root/stores/makeRequest";
import ChatMessage from "@root/components/ChatMessage";
import { cardShadow } from "@root/utils/themes/shadow";
export default function SupportChat() {
@ -168,12 +169,7 @@ export default function SupportChat() {
p: upMd ? "20px" : undefined,
gap: "40px",
boxShadow: upMd
? `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
? cardShadow
: undefined,
}}>
<Box

8
src/pages/Support/TicketList/TicketCard.tsx
View File

@ -3,6 +3,7 @@ import { useMemo } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "@components/CustomButton";
import { cardShadow } from "@root/utils/themes/shadow";
interface Props {
name: string;
@ -44,12 +45,7 @@ export default function TicketCard({ name, body, time, ticketId }: Props) {
flexDirection: upMd ? "row" : "column",
justifyContent: "space-between",
gap: upMd ? "40px" : "20px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
boxShadow: cardShadow,
}}
>
{!upMd && timeText}

8
src/pages/Wallet.tsx
View File

@ -5,6 +5,7 @@ import CustomButton from "@components/CustomButton";
import WalletIcon from "@components/icons/WalletIcon";
import SectionWrapper from "@components/SectionWrapper";
import ComplexNavText from "@components/ComplexNavText";
import { cardShadow } from "@root/utils/themes/shadow";
export default function Wallet() {
const theme = useTheme();
@ -76,12 +77,7 @@ export default function Wallet() {
gap: "9%",
borderRadius: "12px",
mb: "40px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
boxShadow: cardShadow,
}}
>
<Box

10
src/pages/auth/Signin.tsx
View File

@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
import { LoginRequest, LoginResponse } from "@root/model/auth";
import { setUserId, useUserStore } from "@root/stores/user";
import { getMessageFromFetchError } from "@root/utils/backendMessageHandler";
import { cardShadow } from "@root/utils/themes/shadow";
interface Values {
login: string;
@ -108,14 +109,7 @@ export default function SigninDialog() {
pb: upMd ? "40px" : "30px",
gap: "15px",
borderRadius: "12px",
boxShadow: `
0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
`,
boxShadow: cardShadow,
}}
>
<IconButton

10
src/pages/auth/Signup.tsx
View File

@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
import { RegisterRequest, RegisterResponse } from "@root/model/auth";
import { setUserId, useUserStore } from "@root/stores/user";
import { getMessageFromFetchError } from "@root/utils/backendMessageHandler";
import { cardShadow } from "@root/utils/themes/shadow";
interface Values {
@ -107,14 +108,7 @@ export default function SignupDialog() {
pb: upMd ? "40px" : "30px",
gap: "15px",
borderRadius: "12px",
boxShadow: `
0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
`,
boxShadow: cardShadow,
}}
>
<IconButton

8
src/utils/themes/shadow.ts Normal file
View File

@ -0,0 +1,8 @@
export const cardShadow = `
0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
`;