Style СardPrivilegie

src/pages/Setting/CardPrivilegie.tsx

@@ -67,14 +67,14 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
       key={type}
       sx={{
         px: "20px",
-        py: "25px",
+
         display: "flex",
         alignItems: "center",
         border: "1px solid gray",
       }}
     >
-      <Box sx={{ display: "flex" }}>
+      <Box sx={{ display: "flex", borderRight: "1px solid gray" }}>
-        <Box sx={{ width: "200px", borderRight: "1px solid black" }}>
+        <Box sx={{ width: "200px", py: "25px" }}>
           <Typography
             variant="h6"
             sx={{
@@ -85,9 +85,17 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
           >
             {name}
           </Typography>
-          <Tooltip placement="top" title={description}>
+          <Tooltip
-            <IconButton>
+            sx={{
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              span: {
+                fontSize: "1rem",
+              },
+            }}
+            placement="top"
+            title={<Typography sx={{ fontSize: "16px" }}>{description}</Typography>}
+          >
+            <IconButton disableRipple>
+              <svg width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M9.25 9.25H10V14.5H10.75"
                   stroke="#7E2AEA"
@@ -103,7 +111,7 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
             </IconButton>
           </Tooltip>
           <IconButton onClick={() => setInputOpen(!inputOpen)}>
-            <ModeEditOutlineOutlinedIcon />
+            <ModeEditOutlineOutlinedIcon sx={{ color: "gray" }} />
           </IconButton>
         </Box>
       </Box>

src/theme.ts

@@ -1,57 +1,57 @@
-import { Theme } from '@mui/material/styles';
+import { Theme } from "@mui/material/styles";
 import { createTheme, PaletteColorOptions, ThemeOptions } from "@mui/material";
-import { deepmerge } from '@mui/utils';
+import { deepmerge } from "@mui/utils";
 //import { createTheme } from "./types";
 
-declare module '@mui/material/Button' {
+declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     enter: true;
   }
 }
-declare module '@mui/material/Paper' {
+declare module "@mui/material/Paper" {
   interface PaperPropsVariantOverrides {
     bar: true;
   }
 }
-declare module '@mui/material/styles' {
+declare module "@mui/material/styles" {
   interface Theme {
     palette: {
       primary: {
         main: string;
-            },
+      };
       secondary: {
         main: string;
-            },
+      };
       menu: {
         main: string;
-            },
+      };
       content: {
         main: string;
-            },
+      };
       hover: {
         main: string;
-            },
+      };
       grayLight: {
         main: string;
-            },
+      };
       grayDark: {
         main: string;
-            },
+      };
       grayMedium: {
         main: string;
-            },
+      };
       grayDisabled: {
         main: string;
-            },
+      };
       golden: {
         main: string;
-            },
+      };
       goldenDark: {
         main: string;
-            },
+      };
       goldenMedium: {
         main: string;
-            },
+      };
       caption: {
         main: string;
       };
@@ -89,83 +89,83 @@ const fontWeight: string = "600";
 const paletteColor = {
   palette: {
     primary: {
-            main: "#111217"
+      main: "#111217",
     },
     secondary: {
-            main: "#e6e8ec"
+      main: "#e6e8ec",
     },
     menu: {
-            main: "#2f3339"
+      main: "#2f3339",
     },
     content: {
-            main: "#26272c"
+      main: "#26272c",
     },
     hover: {
-            main: "#191a1e"
+      main: "#191a1e",
     },
     grayLight: {
-            main: "#707070"
+      main: "#707070",
     },
     grayDark: {
-            main: "#45494c"
+      main: "#45494c",
     },
     grayMedium: {
-            main: "#424242"
+      main: "#424242",
     },
     grayDisabled: {
-            main: "#c0c1c3"
+      main: "#c0c1c3",
     },
     golden: {
-            main: "#eaba5b"
+      main: "#eaba5b",
     },
     goldenDark: {
-            main: "#fe9903"
+      main: "#fe9903",
     },
     goldenMedium: {
-            main: "#2a2b1d"
+      main: "#2a2b1d",
-        }
+    },
   },
 };
 const theme: ThemeOptions = {
   typography: {
     body1: {
-            fontFamily: fontFamily
+      fontFamily: fontFamily,
     },
     subtitle1: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-            fontSize: 25
+      fontSize: 25,
     },
     subtitle2: {
       fontFamily: fontFamily,
       fontSize: 25,
-            textAlign: "center"
+      textAlign: "center",
     },
     caption: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-            fontSize: 21
+      fontSize: 21,
     },
     h5: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-            fontSize: 35
+      fontSize: 35,
     },
     h6: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-            fontSize: 18
+      fontSize: 18,
     },
     button: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-            fontSize: 22
+      fontSize: 22,
     },
     h4: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-            fontSize: 16
+      fontSize: 16,
-        }
+    },
   },
 
   components: {
@@ -178,22 +178,21 @@ const theme: ThemeOptions = {
           fontSize: "13px",
           "&:hover": {
             backgroundColor: paletteColor.palette.hover.main,
-                    }
+          },
-                }
+        },
       },
       variants: [
         {
           props: {
-                        variant: 'enter'
+            variant: "enter",
           },
           style: {
             color: paletteColor.palette.secondary.main,
             backgroundColor: paletteColor.palette.content.main,
-                        padding: '12px 48px',
+            padding: "12px 48px",
             "&:hover": {
               backgroundColor: paletteColor.palette.hover.main,
-                        }
+            },
-
           },
         },
       ],
@@ -202,22 +201,22 @@ const theme: ThemeOptions = {
       variants: [
         {
           props: {
-                        variant: "bar"
+            variant: "bar",
           },
           style: {
             backgroundColor: paletteColor.palette.grayMedium.main,
             padding: "15px",
-                        width: "100%"
+            width: "100%",
-                    }
+          },
-                }
+        },
-            ]
+      ],
     },
     MuiButtonBase: {
       styleOverrides: {
         root: {
           fontFamily,
           fontSize: "16px",
-                }
+        },
       },
     },
   },