FPSMS-frontend/src/theme/devias-material-kit/components.ts

import { ThemeOptions, createTheme } from "@mui/material";
import palette from "./palette";

// Used only to create transitions
const defaultFontSize = 18;
const muiTheme = createTheme();

const components: ThemeOptions["components"] = {
  MuiAppBar: {
    styleOverrides: {
      colorDefault: {
        backgroundColor: palette.background.paper,
      },
    },
  },
  MuiAvatar: {
    styleOverrides: {
      root: {
        fontSize: defaultFontSize,
        fontWeight: 600,
        letterSpacing: 0,
      },
    },
  },
  MuiButton: {
    styleOverrides: {
      root: {
        borderRadius: "12px",
        textTransform: "none",
      },
      sizeSmall: {
        padding: "6px 16px",
      },
      sizeMedium: {
        padding: "8px 20px",
      },
      sizeLarge: {
        padding: "11px 24px",
      },
      textSizeSmall: {
        padding: "7px 12px",
      },
      textSizeMedium: {
        padding: "9px 16px",
      },
      textSizeLarge: {
        padding: "12px 16px",
      },
    },
  },
  MuiAlert: {
    styleOverrides: {
      root: {
        borderRadius: 8,
      },
    },
  },
  MuiPaper: {
    styleOverrides: {
      rounded: {
        borderRadius: 20,
        [`&.MuiPaper-elevation1`]: {
          boxShadow:
            "0px 5px 22px rgba(0, 0, 0, 0.04), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.03)",
        },
      },
      outlined: {
        borderStyle: "solid",
        borderWidth: 1,
        overflow: "hidden",
        borderColor: palette.neutral[200],
        "&.MuiPaper-rounded": {
          borderRadius: 8,
        },
      },
    },
  },
  MuiCard: {
    styleOverrides: {
      root: {
        borderRadius: 20,
        [`&.MuiPaper-elevation1`]: {
          boxShadow:
            "0px 5px 22px rgba(0, 0, 0, 0.04), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.03)",
        },
      },
    },
  },
  MuiCardContent: {
    styleOverrides: {
      root: {
        padding: "32px 24px",
        "&:last-child": {
          paddingBottom: "32px",
        },
      },
    },
  },
  MuiCardHeader: {
    defaultProps: {
      titleTypographyProps: {
        variant: "h6",
      },
      subheaderTypographyProps: {
        variant: "body2",
      },
    },
    styleOverrides: {
      root: {
        padding: "32px 24px 16px",
      },
    },
  },
  MuiCssBaseline: {
    styleOverrides: {
      "*": {
        boxSizing: "border-box",
      },
      html: {
        MozOsxFontSmoothing: "grayscale",
        WebkitFontSmoothing: "antialiased",
        display: "flex",
        flexDirection: "column",
        minHeight: "100%",
        width: "100%",
      },
      body: {
        display: "flex",
        flex: "1 1 auto",
        flexDirection: "column",
        minHeight: "100%",
        width: "100%",
      },
      "#__next": {
        display: "flex",
        flex: "1 1 auto",
        flexDirection: "column",
        height: "100%",
        width: "100%",
      },
      "#nprogress": {
        pointerEvents: "none",
      },
      "#nprogress .bar": {
        backgroundColor: palette.primary.main,
        height: 3,
        left: 0,
        position: "fixed",
        top: 0,
        width: "100%",
        zIndex: 2000,
      },
      ".swal2-custom-zindex": {
        zIndex: 10000, // Set z-index for SweetAlert2 modals
      },
    },
  },
  MuiInputBase: {
    styleOverrides: {
      root: {
        "&:not(.Mui-disabled)": {
          backgroundColor: "rgba(200, 230, 255, 0.2)", // Slightly cyan-ish background
          "&:hover": {
            backgroundColor: "rgba(200, 230, 255, 0.25)", // Slightly darker on hover
          },
          "&.Mui-focused": {
            backgroundColor: "rgba(200, 230, 255, 0.3)", // More pronounced on focus
          },
        },
        "&.Mui-disabled": {
          backgroundColor: "#ffffff", // White background
          opacity: 1, // Remove MUI's default opacity reduction
          "& .MuiInputBase-input": {
            color: "#000", // Black text
            cursor: "default", // Default cursor
            WebkitTextFillColor: "#000", // Ensure text color isn't grayed out in WebKit browsers
          },
          "& fieldset": {
            backgroundColor: "transparent", // Ensure no extra background effects
            boxShadow: "none", // Remove any box-shadow
          },
        },
      },
      input: {
        "&::placeholder": {
          opacity: 1,
        },
      },
    },
  },
  MuiInput: {
    styleOverrides: {
      input: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: "24px",
        "&::placeholder": {
          color: palette.text.secondary,
        },
      },
    },
  },
  MuiAutocomplete: {
    styleOverrides: {
      root: {
        "& .MuiFilledInput-root": {
          paddingTop: 16,
          paddingBottom: 8,
        },
      },
    },
  },
  MuiFilledInput: {
    styleOverrides: {
      root: {
        backgroundColor: "transparent",
        borderRadius: 8,
        borderStyle: "solid",
        borderWidth: 1,
        overflow: "hidden",
        borderColor: palette.neutral[200],
        transition: muiTheme.transitions.create(["border-color", "box-shadow"]),
        "&:hover": {
          backgroundColor: palette.action.hover,
        },
        "&:before": {
          display: "none",
        },
        "&:after": {
          display: "none",
        },
        [`&.Mui-disabled`]: {
          backgroundColor: "transparent",
        },
        [`&.Mui-focused`]: {
          backgroundColor: "transparent",
          borderColor: palette.primary.main,
          boxShadow: `${palette.primary.main} 0 0 0 2px`,
        },
        [`&.Mui-error`]: {
          borderColor: palette.error.main,
          boxShadow: `${palette.error.main} 0 0 0 2px`,
        },
      },
      input: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: "24px",
      },
    },
  },
  MuiOutlinedInput: {
    styleOverrides: {
      root: {
        "&:hover": {
          backgroundColor: palette.action.hover,
          [`& .MuiOutlinedInput-notchedOutline`]: {
            borderColor: palette.neutral[200],
          },
        },
        [`&.Mui-focused`]: {
          backgroundColor: "transparent",
          [`& .MuiOutlinedInput-notchedOutline`]: {
            borderColor: palette.primary.main,
            boxShadow: `${palette.primary.main} 0 0 0 2px`,
          },
        },
        [`&.Mui-error`]: {
          [`& .MuiOutlinedInput-notchedOutline`]: {
            borderColor: palette.error.main,
            boxShadow: `${palette.error.main} 0 0 0 2px`,
          },
        },
        "&:not(.Mui-disabled)": {
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "rgba(0, 0, 0, 0.6)", // Darker border on hover
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "rgba(0, 0, 0, 0.7)", // Darkest border when focused
          },
        },
        "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
          border: "1px solid #ccc", // Simple gray border for disabled
        },
      },
      input: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: "24px",
      },
      notchedOutline: {
        borderColor: palette.neutral[200],
        transition: muiTheme.transitions.create(["border-color", "box-shadow"]),
        legend: { width: 0 },
      },
    },
  },
  MuiFormLabel: {
    styleOverrides: {
      root: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        [`&.MuiInputLabel-filled`]: {
          transform: "translate(12px, 18px) scale(1)",
        },
        [`&.MuiInputLabel-shrink`]: {
          [`&.MuiInputLabel-standard`]: {
            transform: "translate(0, -1.5px) scale(0.85)",
          },
          [`&.MuiInputLabel-filled`]: {
            transform: "translate(12px, 6px) scale(0.85)",
          },
          [`&.MuiInputLabel-outlined`]: {
            transform: "translate(14px, -9px) scale(0.85)",
            padding: "0 0.25rem",
            background: palette.primary.contrastText,
          },
        },
        "&.Mui-disabled": {
          color: "rgba(0, 0, 0, 0.6)", // Black label
          transform: "translate(14px, 16px) scale(1)", // Position like placeholder
          "&.Mui-focused": {
            transform: "translate(14px, 16px) scale(1)", // Keep label in place when "focused"
          },
        },
      },
    },
  },
  MuiTab: {
    styleOverrides: {
      root: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: 1.71,
        minWidth: "auto",
        minHeight: 48,
        paddingLeft: 0,
        paddingRight: 0,
        textTransform: "none",
        "& + &": {
          marginLeft: 24,
        },
      },
    },
  },
  MuiTableRow: {
    styleOverrides: {
      root: {
        // '&:nth-of-type(odd)': {
        //   backgroundColor: 'rgba(0, 0, 0, 0.04)', // Example for odd rows
        // },
        '&:nth-of-type(even)': {
          backgroundColor: palette.neutral[50], // Example for even rows
        },
      },
    },
  },
  MuiTableCell: {
    styleOverrides: {
      root: {
        borderBottomColor: palette.divider,
        padding: "10px 6px",
        fontSize: defaultFontSize - 2,
        // padding: "15px 16px",
        // lineHeight: 1.5,
      },
    },
  },
  MuiTableHead: {
    styleOverrides: {
      root: {
        borderBottom: "none",
        [`& .MuiTableCell-root`]: {
          borderBottom: "none",
          backgroundColor: palette.neutral[50],
          color: palette.neutral[700],
          fontSize: defaultFontSize - 2,
          fontWeight: 600,
          lineHeight: 2,
          letterSpacing: 0.5,
          textTransform: "uppercase",
        },
        [`& .MuiTableCell-paddingCheckbox`]: {
          paddingTop: 4,
          paddingBottom: 4,
        },
      },
    },
  },
  // MuiTableFooter: {
  //   styleOverrides: {
  //     root: {
  //       padding: "1px 6px",
  //     },
  //   },
  // },
  MuiTextField: {
    defaultProps: {
      variant: "filled",
    },
  },
  MuiMenu: {
    styleOverrides: {
      list: {
        padding: 0,
      },
    },
  },
  MuiMenuItem: {
    styleOverrides: {
      root: {
        margin: "0.5rem",
        borderRadius: 8,
      },
    },
  },
  MuiList: {
    styleOverrides: {
      padding: {
        paddingBlock: "1rem",
        paddingInline: "1rem",
        "&.MuiDataGrid-menuList": {
          paddingBlock: "0.25rem",
          paddingInline: "0.25rem",
        },
      },
    },
  },
  MuiListItem: {
    styleOverrides: {
      root: {
        ":hover": {
          backgroundColor: palette.neutral[100],
        },
      },
    },
  },
  MuiListItemButton: {
    styleOverrides: {
      root: {
        borderRadius: 8,
        marginBlockEnd: "0.5rem",
      },
    },
  },
  MuiListItemText: {
    styleOverrides: {
      root: {
        marginInlineEnd: "2rem",
      },
      primary: {
        fontWeight: 500,
      },
    },
  },
  MuiListItemIcon: {
    styleOverrides: {
      root: {
        color: "inherit",
      },
    },
  },
  MuiSelect: {
    styleOverrides: {
      select: {
        borderRadius: 8,
      },
    },
  },
};

export default components;