Function AboutModal

AboutModal(
props: { aboutOpen: boolean; setAboutOpen: (open: boolean) => void },
): Element

AboutModal component that displays information about the application. Shows the application title, description, and contributor information in a modal dialog.

The contributor list is loaded from src/data/contributors.json; entries render in the order they appear in that file. Static layout styles (positioning, text alignment, contributor font size) live in the sibling AboutModal.module.scss. Theme-dependent styles (palette, spacing, radius, shadow, typography scale) live in the AboutModalBox / AboutContributorItem styled components in StyledComponents.ts.

Parameters

props: { aboutOpen: boolean; setAboutOpen: (open: boolean) => void }
Component props.
- aboutOpen: boolean
  Whether the modal is open.
- setAboutOpen: (open: boolean) => void
  Setter to close the modal.

Returns Element

Component

Example

<AboutModal aboutOpen={isOpen} setAboutOpen={setIsOpen} />

Source

export default function AboutModal({
  aboutOpen,
  setAboutOpen,
}: {
  aboutOpen: boolean;
  setAboutOpen: (open: boolean) => void;
}) {
  const entries = contributors as Contributor[];
  const themeContext = useContext(ThemeContext);
  const logoSrc =
    themeContext?.mode === "dark"
      ? "/static/images/logo/ChemPal-logo-v2-inverted.svg"
      : "/static/images/logo/ChemPal-logo-v2.svg";

  return (
    <Modal
      data-testid="about-modal"
      open={aboutOpen}
      onClose={() => setAboutOpen(false)}
      aria-labelledby="application-title"
      aria-describedby="application-description"
    >
      <AboutModalBox className={styles["about-box"]} onClick={(e) => e.stopPropagation()}>
        <img src={logoSrc} alt="ChemPal logo" className={styles["about-logo"]} />
        <Typography
          id="application-title"
          variant="h6"
          component="h2"
          className={styles["about-title"]}
        >
          About ChemPal
          <IconButton
            data-testid="github-button"
            href="https://github.com/justinhyland/chem-pal"
            target="_blank"
            rel="noopener noreferrer"
            sx={{
              ml: 1.25,
              color: "text.secondary",
              "&:hover": {
                color: "primary.main",
                backgroundColor: "action.hover",
              },
            }}
          >
            <GitHubIcon />
          </IconButton>
        </Typography>
        <Typography
          id="application-description"
          variant="subtitle2"
          gutterBottom
          sx={{ mt: 0.5, display: "block" }}
        >
          Open source project aimed at helping amateur chemistry hobbyists find the best deals on
          chemical reagents. There are plenty of similar services out there for businesses,
          universities and research institutions, but none are available for individuals and
          hobbyists. ChemPal only searches suppliers that sell to individuals and ship to
          residences.
        </Typography>
        <Divider sx={{ color: "primary.main", my: 2 }}>
          <Typography variant="overline" gutterBottom sx={{ display: "block" }}>
            Contributors
          </Typography>
        </Divider>

        <Stack
          direction="row"
          useFlexGap
          className={styles["about-contributor-stack"]}
          sx={{ gap: 2 }}
        >
          {entries.map((entry) => (
            <AboutContributorItem key={entry.testId}>
              <Link data-testid={entry.testId} href={entry.github}>
                <Typography
                  sx={{ color: "text.secondary" }}
                  className={styles["about-contributor-link"]}
                >
                  {entry.name}
                </Typography>
              </Link>
            </AboutContributorItem>
          ))}
        </Stack>
      </AboutModalBox>
    </Modal>
  );
}