All files / src/theme/components tabs.tsx

100% Statements 3/3
50% Branches 2/4
100% Functions 1/1
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77    484x                     484x                                                                                                 30x                            
import { Components } from "@mui/material";
 
export const tabs: Components["MuiTabs"] = {
  styleOverrides: {
    root: {
      minHeight: 36,
    },
    indicator: {
      display: "none",
    },
  },
};
 
export const tab: Components["MuiTab"] = {
  styleOverrides: {
    root: {
      minWidth: 121,
      minHeight: 36,
      padding: "10px 16px",
      background: "#ffffff",
      boxShadow:
        "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06)",
 
      "&.Mui-selected": {
        background: "#F9FAFB",
        boxShadow: "inset 0px 2px 5px rgba(90, 101, 113, 0.4)",
      },
 
      "&:first-of-type": {
        borderRadius: "8px 0px 0px 8px",
      },
      "&:last-of-type": {
        borderRadius: "0px 8px 8px 0px",
      },
 
      // Button Tab
      "&.MuiButtonTab-root": {
        border: "2px solid #dddce5",
        borderRadius: 8,
        height: 50,
        padding: "16px",
        boxShadow: "none",
        backgroundColor: "#fff",
 
        "&.Mui-selected": {
          background: "#F9F5FF",
          border: "3px solid #915CA7",
 
          svg: {
            "& > path": {
              fill: "#734089",
            },
            // ShareIcon
            g: {
              path: {
                stroke: "#734089",
              },
            },
          },
        },
      },
    },
    labelIcon: ({ ownerState }) => ({
      ...(ownerState.iconPosition === "start" && {
        svg: {
          marginRight: "8px",
        },
      }),
      ...(ownerState.iconPosition === "end" && {
        svg: {
          marginLeft: "8px",
        },
      }),
    }),
  },
};