rez-table-listing-mui/src/components/table-settings/style.ts

A rez table listing component built on TanStack Table

import { SxProps, Theme } from "@mui/material";

interface DialogStyleProps {
  dialogTitle: SxProps<Theme>;
  dialogContent: SxProps<Theme>;
  dialogActionsButton: SxProps<Theme>;
}

interface ListingValuesStyleProps {
  wrapper: SxProps<Theme>;
  heading: SxProps<Theme>;
  button: SxProps<Theme>;
  draggableContainer: SxProps<Theme>;
  draggableCover: SxProps<Theme>;
  itemLabel: SxProps<Theme>;
  headerContainer: SxProps<Theme>;
}
interface TabStyleProps {
  mainTabsHeader: SxProps<Theme>;
  mainTabSelect: SxProps<Theme>;
  mainTabDropdown: SxProps<Theme>;
  selectDropdownSeparator: SxProps<Theme>;
  checkboxStyle: SxProps<Theme>;
}

export const dialogStyles: DialogStyleProps = {
  dialogTitle: {
    backgroundColor: "#FBFBFC",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "0.75rem",
  },

  dialogContent: {
    display: "flex",
    gap: "1rem",
    paddingTop: "1rem !important",
  },

  dialogActionsButton: {
    backgroundColor: "#7A5AF8",
    color: "#fff",
  },
};

export const listingValuesStyles: ListingValuesStyleProps = {
  wrapper: {
    border: "0.5px solid #0E0C0B1F",
    borderRadius: "8px",
    minHeight: "10rem",
    backgroundColor: "#fdfdfc",
    zIndex: 1,
  },
  heading: { fontWeight: 400, color: "#0E0C0BB2", fontSize: "16px" },
  button: { fontSize: "13px", textTransform: "none", color: "#0E0C0BB2" },
  draggableContainer: {
    maxHeight: 200,
    borderRadius: 1,
    mt: 2,
    transition: "background-color 0.2s ease",
  },
  draggableCover: {
    minHeight: "200px",
    maxHeight: "200px",
    overflowY: "auto",
  },
  itemLabel: { display: "flex", alignItems: "center", flex: 1 },
  headerContainer: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    mb: 2,
  },
};

export const TabsStyles: TabStyleProps = {
  mainTabsHeader: {
    fontStyle: "italic",
    fontWeight: 400,
    fontSize: "12px",
    color: "#0E0C0BB2",
  },
  mainTabDropdown: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    width: "50%",
    paddingRight: 1,
  },
  mainTabSelect: {
    width: "65%",
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
        borderColor: "#7A5AF8",
      },
    },
  },

  selectDropdownSeparator: {
    width: "30%",
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
        borderColor: "#7A5AF8",
      },
    },
  },

  checkboxStyle: {
    display: "flex",
    flexDirection: "column",
  },
};