From c60776819bec3cc23f46c94216eeccd40d3a8ba4 Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 16 Jun 2023 22:04:59 +0300
Subject: [PATCH] refactor card shadow

---
 src/components/AccordionWrapper.tsx           |  8 ++------
 src/components/CustomWrapperDrawer.tsx        |  9 ++-------
 src/pages/AccountSetup/AccountSetup.tsx       | 10 ++--------
 src/pages/Basket/CustomWrapper.tsx            |  9 ++-------
 src/pages/Faq/AccordionWrapper.tsx            |  8 ++------
 src/pages/Payment/Payment.tsx                 |  8 ++------
 src/pages/PaymentHistory/AccordionWrapper.tsx |  8 ++------
 src/pages/Support/CreateTicket.tsx            |  8 ++------
 src/pages/Support/SupportChat.tsx             |  8 ++------
 src/pages/Support/TicketList/TicketCard.tsx   |  8 ++------
 src/pages/Wallet.tsx                          |  8 ++------
 src/pages/auth/Signin.tsx                     | 10 ++--------
 src/pages/auth/Signup.tsx                     | 10 ++--------
 src/utils/themes/shadow.ts                    |  8 ++++++++
 14 files changed, 34 insertions(+), 86 deletions(-)
 create mode 100644 src/utils/themes/shadow.ts

diff --git a/src/components/AccordionWrapper.tsx b/src/components/AccordionWrapper.tsx
index a06961d..1cf9cfb 100644
--- a/src/components/AccordionWrapper.tsx
+++ b/src/components/AccordionWrapper.tsx
@@ -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) => (
diff --git a/src/components/CustomWrapperDrawer.tsx b/src/components/CustomWrapperDrawer.tsx
index 92614a2..a16ad96 100644
--- a/src/components/CustomWrapperDrawer.tsx
+++ b/src/components/CustomWrapperDrawer.tsx
@@ -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
diff --git a/src/pages/AccountSetup/AccountSetup.tsx b/src/pages/AccountSetup/AccountSetup.tsx
index 1f9e571..7cde1ea 100644
--- a/src/pages/AccountSetup/AccountSetup.tsx
+++ b/src/pages/AccountSetup/AccountSetup.tsx
@@ -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",
diff --git a/src/pages/Basket/CustomWrapper.tsx b/src/pages/Basket/CustomWrapper.tsx
index 6543155..b8617b7 100644
--- a/src/pages/Basket/CustomWrapper.tsx
+++ b/src/pages/Basket/CustomWrapper.tsx
@@ -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
diff --git a/src/pages/Faq/AccordionWrapper.tsx b/src/pages/Faq/AccordionWrapper.tsx
index 824ff0e..c31bc0a 100644
--- a/src/pages/Faq/AccordionWrapper.tsx
+++ b/src/pages/Faq/AccordionWrapper.tsx
@@ -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) => (
diff --git a/src/pages/Payment/Payment.tsx b/src/pages/Payment/Payment.tsx
index 5f25a55..b3bebd1 100644
--- a/src/pages/Payment/Payment.tsx
+++ b/src/pages/Payment/Payment.tsx
@@ -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,
         }}
       >
diff --git a/src/pages/PaymentHistory/AccordionWrapper.tsx b/src/pages/PaymentHistory/AccordionWrapper.tsx
index c64adc1..ed520ca 100644
--- a/src/pages/PaymentHistory/AccordionWrapper.tsx
+++ b/src/pages/PaymentHistory/AccordionWrapper.tsx
@@ -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) => (
diff --git a/src/pages/Support/CreateTicket.tsx b/src/pages/Support/CreateTicket.tsx
index 8391573..35e8e5c 100644
--- a/src/pages/Support/CreateTicket.tsx
+++ b/src/pages/Support/CreateTicket.tsx
@@ -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,
             }}
         >
diff --git a/src/pages/Support/SupportChat.tsx b/src/pages/Support/SupportChat.tsx
index fb70f3a..f1dbb64 100644
--- a/src/pages/Support/SupportChat.tsx
+++ b/src/pages/Support/SupportChat.tsx
@@ -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
diff --git a/src/pages/Support/TicketList/TicketCard.tsx b/src/pages/Support/TicketList/TicketCard.tsx
index 1439791..45599a3 100644
--- a/src/pages/Support/TicketList/TicketCard.tsx
+++ b/src/pages/Support/TicketList/TicketCard.tsx
@@ -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}
diff --git a/src/pages/Wallet.tsx b/src/pages/Wallet.tsx
index 4355c90..dc934e5 100644
--- a/src/pages/Wallet.tsx
+++ b/src/pages/Wallet.tsx
@@ -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
diff --git a/src/pages/auth/Signin.tsx b/src/pages/auth/Signin.tsx
index cedba04..c0d4fd8 100644
--- a/src/pages/auth/Signin.tsx
+++ b/src/pages/auth/Signin.tsx
@@ -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
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index 6626bf0..000d0fc 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -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
diff --git a/src/utils/themes/shadow.ts b/src/utils/themes/shadow.ts
new file mode 100644
index 0000000..bc63a30
--- /dev/null
+++ b/src/utils/themes/shadow.ts
@@ -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)
+`;
\ No newline at end of file