theme-ui#Flex JavaScript Examples

Header = props => {
  const { onOpen } = props
  const {
    repository,
    themeConfig: { showDarkModeSwitch, showMarkdownEditButton },
  } = useConfig()
  const { edit = true, ...doc } = useCurrentDoc()

  return (
    <div sx={styles.wrapper} data-testid="header">
      <Box sx={styles.menuIcon}>
        <button sx={styles.menuButton} onClick={onOpen}>
          <Menu size={25} />
        </button>
      </Box>
      <div sx={styles.innerContainer}>
        <Logo />
        <Flex sx={{alignItems: 'baseline'}}>
          <h5 sx={{m: '0', mr: '20px'}}>{'v' + data.version}</h5>
          {repository && (
            <Box sx={{ mr: 2 }}>
              <a
                href={repository}
                sx={styles.headerButton}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Github size={15} />
              </a>
            </Box>
          )}
        </Flex>
      </div>
    </div>
  )
}

decorators = [
  (Story) => (
    <Flex
      sx={{
        alignItems: "center",
        justifyContent: "center",
        padding: 4,
      }}
    >
      <GoogleFont typography={typography} />
      <Story />
    </Flex>
  ),
  withThemePlayground({
    provider: ThemeProvider,
    theme: [
      { name: "Kleros", theme: klerosTheme },
      { name: "Proof Of Humanity", theme },
    ],
  }),
]

App = () => {
  return (
    <Flex
      sx={{
        maxWidth: 1400,
        margin: 'auto',
        flexDirection: 'column',
        alignItems: 'center',
        paddingBottom: 20
      }}
    >
      <h1>Store</h1>
      <Flex sx={{ justifyContent: 'space-evenly', gap: 80 }}>
        <Box>
          <h2>Products not created in the Stripe Dashboard</h2>
          <Products products={fakeData} />
          <br />
          <br />
          <h2>Products made on Stripe Dashboard using Price API</h2>
          <PriceProducts products={priceProducts} />
        </Box>
        <CartDisplay />
      </Flex>
    </Flex>
  )
}

render() {
  const {memeURL} = this.state
  return (
  <Layout>
    <meta http-equiv="refresh" content="10;url=/" />
    <SEO title="404: Not found" />
    <Flex
    sx={{
      justifyContent:"center",
      alignItems:"center",
      flexDirection: "column",
    }}>
    <h1 sx={{
            fontFamily: "body",
            fontSize: ["1.3rem", "1.5rem", "2rem", "2rem", "2.5rem"],
            color: "white",
            textAlign: "center",
            letterSpacing: "0.05em",
          }}>404: You got lost in Mesopotamia</h1>
    <p
    sx={{
      fontFamily: "body",
      color: "white",
      textAlign: "center",
      width: "60%",
      fontSize: ["0.8rem", "1.2rem", "1.5rem", "1.5rem", "1.8rem"],
      lineHeight: "1.5",
    }}
    >
      Here's a programmer meme to cheer you up while we get you back to Ziggurat!</p>
    <Image sx={{
      width: ["80%", "60%", "40%", "45%", "40%", "25%"]
      }} src={memeURL}></Image>
    </Flex>
  </Layout>
)
  }

Row = ({ title, content }) => {
  const [open, setOpen] = useState(false);

  return (
    <Flex
      sx={{
        flexDirection: 'column',
        py: 3,
        border: 'light',
        borderColor: 'muted',
        borderWidth: '1px 0 0 0',
        '&:last-child': { borderWidth: '1px 0 1px 0' },
      }}
    >
      <Flex sx={{ justifyContent: 'space-between' }}>
        <Text>{title}</Text>
        <Flex sx={{ alignItems: 'center' }} onClick={() => setOpen(!open)}>
          <Icon color="primary" name={open ? 'arrow_up_thin' : 'arrow_down_thin'}></Icon>
          <Text sx={{ pl: 2 }}>{open ? 'View Less' : 'View More'}</Text>
        </Flex>
      </Flex>
      {open && <Text sx={{ py: 3, px: 6 }}>{content}</Text>}
    </Flex>
  );
}

EndpointContainer = ({ endpoints }) => {
  if (!endpoints) return null

  return (
    <CodeBox header="ENDPOINTS">
      <Flex
        py={2}
        sx={{
          flexDirection: "column",
        }}
      >
        {endpoints.map((e, i) => {
          const method = e.method.toUpperCase()
          const endpoint = e.endpoint
          return (
            <Flex
              key={i}
              sx={{ fontSize: "0", fontFamily: "monospace", px: "3", py: "2" }}
            >
              <Text
                variant={`labels.${method}`}
                sx={{
                  width: "55px",
                  textAlign: "right",
                }}
                mr={2}
              >
                {method}
              </Text>
              <Text sx={{ color: "dark" }}>
                {endpoint.replace(/{(.*?)}/g, ":$1")}
              </Text>
            </Flex>
          )
        })}
      </Flex>
    </CodeBox>
  )
}

AppFrame = ({ sx, ...props }) => {
  return (
    <Flex
      sx={{
        bg: 'white',
        height: ['initial', '', '100vh'],
        flexDirection: ['column', '', 'row'],
        overflow: ['initial', '', 'hidden'],
        ...sx
      }}
      {...props}
    />
  )
}

Logo = () => {
  const config = useConfig();
  const [colorMode] = useColorMode();
  const {width = '100%', src = ''} = config.themeConfig.logo || {};
  const len = (config.title || '').length;

  const imagePath = typeof src === 'object' ? src[colorMode] : src;

  return (
    <div sx={styles.logo} data-testid="logo">
      <Link to="/" sx={styles.link}>
        <Flex
          sx={{alignItems: 'center', flexDirection: 'row', lineHeight: 1.2}}
        >
          {imagePath ? (
            <Image
              className="logo"
              src={getPublicUrl(config.base, imagePath)}
              width={width}
              height="auto"
              alt={config.title}
            />
          ) : null}
          <span className={len > 12 && imagePath ? 'h-sm' : ''}>
            {config.title}
          </span>
        </Flex>
      </Link>
    </div>
  );
}

function EvidenceItem({
  useEvidenceFile,
  evidence: { URI, sender, creationTime },
  index,
}) {
  const evidence = useEvidenceFile()(URI);
  if (evidence?.fileURIError) return null;
  return (
    <Card
      sx={{ marginBottom: 2 }}
      mainSx={{ alignItems: "flex-start", flexDirection: "column" }}
      footer={
        <>
          <Flex sx={{ alignItems: "center" }}>
            <Identicon address={sender} />
            <Box sx={{ marginLeft: 1 }}>
              <Text>
                <Text as="span" sx={{ fontWeight: "bold" }}>
                  #{index}
                </Text>{" "}
                submitted by{" "}
                <NextETHLink address={sender}>{sender}</NextETHLink>
              </Text>
              <Text>
                {intlDateTimeFormat.format(new Date(creationTime * 1000))}
              </Text>
            </Box>
          </Flex>
          {evidence?.fileURI && (
            <Link newTab href={evidence?.fileURI}>
              <File sx={{ stroke: "background", path: { fill: "primary" } }} />
            </Link>
          )}
        </>
      }
      footerSx={{ justifyContent: "space-between", paddingX: 3 }}
    >
      <Text
        sx={{
          fontSize: 2,
          fontWeight: "bold",
        }}
      >
        {evidence?.name}
      </Text>
      <Text>
        {evidence?.description || (evidence ? "No description." : undefined)}
      </Text>
    </Card>
  );
}

PriceProduct = (product) => {
  const { addItem, redirectToCheckout } = useShoppingCart()
  const { name, price, image, currency } = product

  async function handleCheckout() {
    const response = await fetch('/.netlify/functions/prices-create-session', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ [product.price_id]: { ...product, quantity: 1 } })
    })
      .then((res) => {
        return res.json()
      })
      .catch((error) => console.log(error))

    redirectToCheckout({ sessionId: response.sessionId })
  }

  return (
    <Flex
      sx={{
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <Image
        src={image}
        sx={{ width: 200, height: 200, objectFit: 'contain' }}
      />
      <Box>
        <h3>{name}</h3>
        <p>{formatCurrencyString({ value: price, currency })}</p>
      </Box>
      <Flex sx={{ flexDirection: 'column' }}>
        <Button
          onClick={() => addItem(product)}
          backgroundColor={'black'}
          marginBottom={10}
        >
          Add To Cart
        </Button>
        <Button onClick={handleCheckout} backgroundColor={'black'}>
          Buy Now
        </Button>
      </Flex>
    </Flex>
  )
}

Header = props => {
  const { onOpen } = props
  const {
    repository,
    themeConfig: { showDarkModeSwitch, showMarkdownEditButton },
  } = useConfig()
  const { edit = true, ...doc } = useCurrentDoc()
  const [colorMode, setColorMode] = useColorMode()

  const toggleColorMode = () => {
    setColorMode(colorMode === 'light' ? 'dark' : 'light')
  }

  return (
    <div sx={styles.wrapper} data-testid="header">
      <Container>
        <Box sx={styles.menuIcon}>
          <button sx={styles.menuButton} onClick={onOpen}>
            <Menu size={25} />
          </button>
        </Box>
        <div sx={styles.innerContainer}>
          <Logo />
          <Flex>
            {repository && (
              <Box sx={{ mr: 2 }}>
                <a
                  href={repository}
                  sx={styles.headerButton}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Github size={15} />
                </a>
              </Box>
            )}
            {showDarkModeSwitch && (
              <button
                sx={styles.headerButton}
                onClick={toggleColorMode}
                aria-label={`Switch to ${colorMode} mode`}
              >
                <Sun size={15} />
              </button>
            )}
          </Flex>
          {showMarkdownEditButton && edit && doc.link && (
            <a
              sx={styles.editButton}
              href={doc.link}
              target="_blank"
              rel="noopener noreferrer"
            >
              <Edit width={14} />
              <Box sx={{ pl: 2 }}>Edit page</Box>
            </a>
          )}
        </div>
      </Container>
    </div>
  )
}

Footer = () => {
  return (
    <Box
      sx={{
        borderTop: '1px solid',
        borderColor: 'cardBorder',
        py: '5px',
      }}
    >
      <Flex
        as="footer"
        sx={{
          flexDirection: ['column', 'row'],
          alignItems: 'center',
          justifyContent: 'space-between',
          maxWidth: ['100%', '768px', '992px', '1400px'],
          py: '15px',
          margin: '0 auto',
        }}
      >
        <Text
          sx={{
            fontSize: '12px',
            color: 'text',
            fontFamily: 'inter',
            textAlign: 'center',
          }}
        >
          <a href="https://www.netlify.com">This site is powered by Netlify</a>
        </Text>
        <a
          href="https://www.helpfulengineering.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Text
            sx={{
              letterSpacing: '2px',
              fontSize: '14px',
              color: 'text',
              fontFamily: 'inter',
              textAlign: 'center',
              my: 10,
            }}
          >
            Get involved
          </Text>
        </a>
        <Text
          sx={{
            fontSize: '12px',
            color: 'text',
            fontFamily: 'inter',
            textAlign: 'center',
          }}
        >
          <a href="https://twitter.com/_luisFilipePT">@_luisFilipePT</a>
          &nbsp;|&nbsp;
          <a href="https://github.com/luisFilipePT/github-covid-finder/blob/master/CODE_OF_CONDUCT.md">
            Code of Conduct
          </a>
        </Text>
      </Flex>
    </Box>
  )
}

AboutThisSite = ({ preview }) => {
  return (
    <Container>
      <Grid columns={[1, 2]}>
        <Flex sx={{ flexDirection: 'column', alignSelf: 'end' }}>
          <Heading
            variant="megaHeading"
            sx={{
              color: 'onBackgroundMuted',
            }}
          >
            About
          </Heading>
          <Heading variant="megaHeading">This Site</Heading>
        </Flex>
        <Heading sx={{ alignSelf: 'end', pb: 3 }}>
          <InlineTextarea name="aboutThisSiteSubheading" />
        </Heading>
      </Grid>
      <Flex>
        <Text
          sx={{
            py: [0, 4],
            color: 'onBackgroundMuted',
            columns: preview ? undefined : '2 200px',
            width: '100%',
          }}
        >
          <InlineTextarea name="aboutThisSiteSubtext" />
        </Text>
      </Flex>
      <Flex sx={{ width: '100%', justifyContent: 'center' }}>
        <Flex sx={{ flexDirection: 'column', pt: 2, justifyContent: 'center' }}>
          <Box
            sx={{
              ml: [0, 'auto'],
              px: [0, 4],
              py: [3, 3, 4],
            }}
          >
            <EditLink />
          </Box>
          <ThemeLink href={`${GITHUB_EDIT_LINK}/data/landingPage.json`} target="_blank">
            <Flex sx={{ alignItems: 'center', justifyContent: 'center' }}>
              <Icon sx={{ mr: 2 }} color="primary" name="github"></Icon>
              <Text sx={{ color: 'text', cursor: 'pointer' }}>Edit on Github</Text>
            </Flex>
          </ThemeLink>
        </Flex>
      </Flex>
    </Container>
  );
}

CodeBox = ({ header, children, shell, content, allowCopy }) => {
  return (
    <Box
      sx={{
        background: "fadedContrast",
        borderRadius: "small",
        boxShadow: "0 0 0 1px var(--theme-ui-colors-primaryLight)",
        alignSelf: "flex-start",
        marginLeft: "auto",
        marginRight: "auto",
        width: "100%",
        mb: "4",
      }}
    >
      <Box
        sx={{
          bg: "primary",
          p: "8px 10px",
          letterSpacing: "0.01em",
          borderRadius: "8px 8px 0 0",
        }}
      >
        <Flex
          sx={{
            height: "100%",
            justifyContent: "space-between",
            alignItems: "baseline",
          }}
        >
          <Text variant="small" sx={{ fontWeight: "400", color: "light" }}>
            {header.toUpperCase()}
          </Text>
          {allowCopy ? (
            <CopyToClipboard
              copyText={content}
              tooltipText={"Copy to clipboard"}
            />
          ) : (
            <></>
          )}
        </Flex>
      </Box>
      <Box
        sx={{
          position: "relative",
          boxSizing: "content-box",
          maxHeight: "calc(90vh - 20px)",
          minHeight: "10px",
        }}
      >
        <Flex
          sx={{
            flexDirection: "column",
            position: "relative",
            minHeight: "inherit",
            maxHeight: "inherit",
            overflowY: "auto",
          }}
        >
          {children}
        </Flex>
      </Box>
    </Box>
  )
}

Layout = ({children, /*pageContext = {},*/ doc = {}, ...rest}) => {
  const {
    themeConfig: {mainContainer: {fullscreen, align = 'center'} = {}},
  } = useConfig();
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
  const ref = useRef();
  const menus = useExtendedMenus({query});

  const handleChange = (ev) => {
    setQuery(ev.target.value);
  };

  const {updated} = doc.value || {};
  const mainStyles = {
    marginLeft: align !== 'left' ? 'auto' : 0,
    marginRight: align !== 'right' ? 'auto' : 0,
    ...(fullscreen ? {maxWidth: 'none'} : undefined),
  };

  return (
    <Flex sx={{'& > div': {flex: '1 1 auto'}}} data-testid="layout">
      <Global styles={globalStyles} />
      <Box sx={styles.main}>
        <Header onOpen={() => setOpen((s) => !s)} />
        <div sx={styles.wrapper}>
          <Sidebar
            ref={ref}
            open={open}
            menus={menus}
            handleChange={handleChange}
            onFocus={() => setOpen(true)}
            onBlur={() => setOpen(false)}
            onClick={() => setOpen(false)}
          />
          <MainContainer
            style={mainStyles}
            data-testid="main-container"
            doc={doc}
            {...rest}
          >
            <Flex
              sx={{
                width: '100%',
                justifyContent: 'stretch',
                [`@media screen and (max-width: ${breakpoints.desktop}px)`]: {
                  flexDirection: 'column',
                },
              }}
            >
              <Content>
                <div>{children}</div>
                <Footer updated={updated} menus={menus} />
              </Content>
              <NavHeadings />
            </Flex>
          </MainContainer>
        </div>
      </Box>
    </Flex>
  );
}

PreferencesRoute = ({ preferences, updatePreferences }) => {
  const history = useHistory();

  const fontFamilyChange = e => {
    updatePreferences({
      fontFamily: e.target.value,
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const fontSizeChange = e => {
    updatePreferences({
      fontSize: Number(e.target.value),
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const fontWeightChange = e => {
    updatePreferences({
      fontWeight: e.target.value,
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const lineHeightChange = e => {
    updatePreferences({
      lineHeight: Number(e.target.value),
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const lineNumbersChange = e => {
    updatePreferences({
      lineNumbers: e.target.value,
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const autoLaunchChange = e => {
    updatePreferences({
      autoLaunch: e.target.value === 'true',
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const nmlEnabledChange = e => {
    updatePreferences({
      nmlEnabled: e.target.value === 'true',
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const fontLigaturesChange = e => {
    updatePreferences({
      fontLigatures: e.target.value === 'true',
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const nmlBaseCurrencyChange = e => {
    updatePreferences({
      nmlBaseCurrency: e.target.value,
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const wrappingIndentChange = e => {
    updatePreferences({
      wrappingIndent: e.target.value,
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const editorThemeChange = e => {
    updatePreferences({
      editorTheme: e.target.value,
      // HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
      // since the file was read from the disk into memory.
      editorContent: preferences.autosaveContent
    });
  };

  const navigateToNotes = e => {
    updatePreferences({
      editorContent: preferences.autosaveContent
    });

    history.push('/');
  };

  const {
    editorTheme,
    fontFamily,
    fontSize,
    fontWeight,
    lineNumbers,
    lineHeight,
    fontLigatures,
    autoLaunch,
    nmlEnabled,
    nmlBaseCurrency,
    wrappingIndent
  } = preferences;

  const renderNmlOptions = () => {
    return (
      <Box
        className={
          nmlEnabled ? styles.smartOptionsActive : styles.smartOptionsHidden
        }
        mb="2"
      >
        <Flex mt="3">
          <Box sx={{ flex: '1 1 auto' }}>
            <TooltipComponent content="Set this value to your most commonly used currency. The default is: USD.">
              <Label mt="2" variant="labelTooltip">
                Base Currency
              </Label>
            </TooltipComponent>
          </Box>
          <Box>
            <Select
              disabled={!nmlEnabled}
              defaultValue={nmlBaseCurrency}
              onChange={nmlBaseCurrencyChange}
            >
              <option value="USD">USD</option>
              <option value="GBP">GBP</option>
              <option value="EUR">EUR</option>
            </Select>
          </Box>
        </Flex>
      </Box>
    );
  };

  return (
    <div className={styles.container} data-tid="container">
      <div className={styles.header}>
        <TitlebarComponent />
      </div>
      <div className={styles.preferences}>
        <ContainerComponent padding="0 8px 0 0">
          <Button variant="linkUpper" mb="0" onClick={navigateToNotes}>
            <i className="ri-arrow-left-line" /> Return to Notes
          </Button>
        </ContainerComponent>
        <ScrollableContentComponent>
          <ContainerComponent padding="0 8px 0 0">
            <Heading mt="0" as="h1">
              Preferences
            </Heading>
            <Text mt="1" mb="3" variant="muted">
              Customize NoteMaster to your desire. You can request features on{' '}
              <Link
                href="https://github.com/LiamRiddell/NoteMaster"
                target="_blank"
                rel="noreferer"
              >
                NoteMaster GitHub
              </Link>
              .
            </Text>

            {/* Editor */}
            <Box mb="4">
              <Text mb="2" variant="group">
                Editor
              </Text>

              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="When enabled, NoteMaster Smart Mode automatically recognizes keywords, and intelligently provides results as you type. The default is: Enabled.">
                    <Label mt="2" variant="labelTooltip">
                      Smart Mode
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Select
                    defaultValue={nmlEnabled ? 'true' : 'false'}
                    onChange={nmlEnabledChange}
                  >
                    <option value="true">Enabled</option>
                    <option value="false">Disabled</option>
                  </Select>
                </Box>
              </Flex>

              {/* NoteMaster Language */}
              {renderNmlOptions()}

              {/* Line Numbers */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="When enabled, line numbers will be displayed on the left side of the editor. The default is: Off.">
                    <Label mt="2" variant="labelTooltip">
                      Line Numbers
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Select
                    defaultValue={lineNumbers}
                    onChange={lineNumbersChange}
                  >
                    <option value="off">Off</option>
                    <option value="on">On</option>
                    <option value="relative">Relative</option>
                    <option value="interval">Interval</option>
                  </Select>
                </Box>
              </Flex>

              {/* Text Wrap Indentation */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="This effects how long sentences wrap onto a new line. The default is: Same.">
                    <Label mt="2" variant="labelTooltip">
                      Text Wrap Indent
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Select
                    defaultValue={wrappingIndent}
                    onChange={wrappingIndentChange}
                  >
                    <option value="same">Same</option>
                    <option value="indent">Indent</option>
                    <option value="deepIndent">Deep Indent</option>
                    <option value="none">None</option>
                  </Select>
                </Box>
              </Flex>

              {/* Editor Theme */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="Using the Dark theme will enable rich text highlighting, which compliments Smart Mode. Use Dark Basic, if you find the rich text highlighting distrating. The default is: Dark.">
                    <Label mt="2" variant="labelTooltip">
                      Theme
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Select
                    defaultValue={editorTheme}
                    onChange={editorThemeChange}
                  >
                    <option value="notemaster-dark-nml-enabled">Dark</option>
                    <option value="notemaster-dark-nml-disabled">
                      Dark Basic
                    </option>
                  </Select>
                </Box>
              </Flex>
            </Box>

            {/* Typography Settings */}
            <Box mb="4">
              <Text mb="2" variant="group">
                Typography
              </Text>

              {/* Font */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="Changes the font within the editor. The default is: Roboto.">
                    <Label mt="2" variant="labelTooltip">
                      Font
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Select defaultValue={fontFamily} onChange={fontFamilyChange}>
                    <option value="Roboto">Roboto</option>
                    <option value="Arial">Arial</option>
                    <option value="Helvetica Neue">Helvetica Neue</option>
                    <option value="Monospace">Monospace</option>
                    <option value="Ubuntu">Ubuntu</option>
                    <option value="Segoe UI">Segoe UI</option>
                  </Select>
                </Box>
              </Flex>

              {/* Font Size */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="You can adjust the font size within the editor. The default is: 16.">
                    <Label mt="2" variant="labelTooltip">
                      Font Size
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Input
                    type="number"
                    defaultValue={fontSize}
                    onChange={fontSizeChange}
                    sx={{ width: '72px' }}
                  />
                </Box>
              </Flex>

              {/* Font Weight */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="Changes the font thickness within the editor. The default is: Regular.">
                    <Label mt="2" variant="labelTooltip">
                      Font Weight
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Select defaultValue={fontWeight} onChange={fontWeightChange}>
                    <option value="100">Thin</option>
                    <option value="200">Extra Light</option>
                    <option value="300">Light</option>
                    <option value="400">Regular</option>
                    <option value="500">Medium</option>
                    <option value="600">Semi-Bold</option>
                    <option value="700">Bold</option>
                    <option value="800">Extra Bold</option>
                    <option value="900">Black</option>
                  </Select>
                </Box>
              </Flex>

              {/* Line Height */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="Change the line height within the editor. The default is: 24.">
                    <Label mt="2" variant="labelTooltip">
                      Line Height
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Input
                    type="number"
                    defaultValue={lineHeight}
                    onChange={lineHeightChange}
                    sx={{ width: '72px' }}
                  />
                </Box>
              </Flex>

              {/*
              <Label mt="2" mb="1">
                Font Ligatures
              </Label>
              <Select
                defaultValue={fontLigatures ? 'true' : 'false'}
                onChange={fontLigaturesChange}
              >
                <option value="true">On</option>
                <option value="false">Off</option>
              </Select> */}
            </Box>

            {/* System */}
            <Box mb="4">
              <Text mb="2" variant="group">
                SYSTEM
              </Text>

              {/* Auto Launch */}
              <Flex mt="3">
                <Box sx={{ flex: '1 1 auto' }}>
                  <TooltipComponent content="When enabled, NoteMaster will be launched on startup. The default is: On.">
                    <Label mt="2" variant="labelTooltip">
                      Auto Launch
                    </Label>
                  </TooltipComponent>
                </Box>
                <Box>
                  <Select
                    defaultValue={autoLaunch ? 'true' : 'false'}
                    onChange={autoLaunchChange}
                  >
                    <option value="false">Off</option>
                    <option value="true">On</option>
                  </Select>
                </Box>
              </Flex>
            </Box>

            {/* Creation Rights */}
            <Box
              p={3}
              color="text"
              bg="#27292C"
              mb="1"
              sx={{ borderRadius: 3 }}
            >
              Thank you for downloading NoteMaster, an open-source project
              created and maintained by{' '}
              <Link href="https://github.com/LiamRiddell" target="_blank">
                Liam Riddell
              </Link>{' '}
              ❤️
            </Box>
          </ContainerComponent>
        </ScrollableContentComponent>
      </div>
    </div>
  );
}

export default function AccountSettingsPopup({
  name,
  photo,
  userSettingsURL,
  settings,
  parseSettings,
  normalizeSettings,
}) {
  const [accounts] = useWeb3("eth", "getAccounts");
  const { connect, web3 } = useWeb3();
  const { props } = useQuery(appQuery, {
    contributor: accounts?.[0] || zeroAddress,
    id: accounts?.[0] || zeroAddress,
  });
  const changeWallet = useCallback(() => {
    // Delete walletconnect connection, if any.
    // Otherwise users can get stuck with a buggy connection.
    localStorage.removeItem("WEB3_CONNECT_CACHED_PROVIDER");
    localStorage.removeItem("walletconnect");
    connect();
  }, [connect]);

  const { contributions: withdrawableContributions } = props ?? {};
  const { send: batchSend } = useContract("transactionBatcher", "batchSend");
  const pohInstance = useMemo(() => {
    if (!ProofOfHumanityAbi || !pohAddress) return;
    return new web3.eth.Contract(ProofOfHumanityAbi, pohAddress);
  }, [web3.eth.Contract]);

  const withdrawFeesAndRewards = useCallback(() => {
    if (!batchSend || withdrawableContributions?.length === 0) return;
    const withdrawCalls = withdrawableContributions.map(
      (withdrawableContribution) => {
        const { requestIndex, roundIndex, round } = withdrawableContribution;
        const { challenge } = round;
        const { request, challengeID } = challenge;
        const { submission } = request;
        const { id } = submission;
        return pohInstance.methods
          .withdrawFeesAndRewards(
            accounts[0],
            id,
            requestIndex,
            challengeID,
            roundIndex
          )
          .encodeABI();
      }
    );
    batchSend(
      [...new Array(withdrawCalls.length).fill(pohAddress)],
      [...new Array(withdrawCalls.length).fill(web3.utils.toBN(0))],
      withdrawCalls
    );
  }, [
    accounts,
    batchSend,
    pohInstance.methods,
    web3.utils,
    withdrawableContributions,
  ]);

  return (
    <Popup
      contentStyle={{ width: 490 }}
      trigger={
        <IconButton>
          <Settings size="auto" />
        </IconButton>
      }
      position="bottom right"
    >
      <Box
        sx={{
          color: "text",
          paddingX: 1,
          paddingY: 2,
        }}
      >
        <Text
          sx={{
            fontWeight: "bold",
            textAlign: "center",
          }}
        >
          Settings
        </Text>
        <Tabs>
          <TabList>
            <Tab>Account</Tab>
            <Tab>Notifications</Tab>
          </TabList>
          <TabPanel>
            <Text
              sx={{
                fontSize: 10,
                marginBottom: 3,
              }}
            >
              {accounts &&
                (accounts.length === 0 ? (
                  "Connected to Infura"
                ) : (
                  <Flex sx={{ alignItems: "center" }}>
                    {photo ? (
                      <Image
                        sx={{
                          objectFit: "contain",
                          width: 32,
                          height: 32,
                        }}
                        variant="avatar"
                        src={photo}
                      />
                    ) : (
                      <Identicon address={accounts[0]} />
                    )}
                    <Box sx={{ marginLeft: 1 }}>
                      {name && (
                        <Text sx={{ fontSize: 0, marginBottom: "4px" }}>
                          {name}
                        </Text>
                      )}
                      <NextETHLink address={accounts[0]}>
                        {accounts[0]}
                      </NextETHLink>
                    </Box>
                  </Flex>
                ))}
            </Text>
            <NetworkTag sx={{ mb: 1 }} />
            <Divider />
            <Button
              sx={{
                display: "block",
                marginTop: -2,
                marginX: "auto",
              }}
              onClick={changeWallet}
            >
              {accounts &&
                `${accounts.length === 0 ? "Connect" : "Change"} Wallet`}
            </Button>
            {withdrawableContributions?.length > 0 && (
              <Button
                sx={{
                  display: "block",
                  marginTop: 2,
                  marginX: "auto",
                }}
                onClick={withdrawFeesAndRewards}
              >
                Withdraw Fees and Rewards
              </Button>
            )}
          </TabPanel>
          <TabPanel>
            <UserSettings
              userSettingsURL={userSettingsURL}
              settings={settings}
              parseSettings={parseSettings}
              normalizeSettings={normalizeSettings}
            />
          </TabPanel>
        </Tabs>
      </Box>
    </Popup>
  );
}

CartDisplay = () => {
  const {
    cartDetails,
    cartCount,
    formattedTotalPrice,
    redirectToCheckout,
    clearCart,
    setItemQuantity
  } = useShoppingCart()

  async function handleSubmit(event) {
    event.preventDefault()

    const response = await fetch('/.netlify/functions/create-session', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(cartDetails)
    })
      .then((res) => res.json())
      .catch((error) => console.log(error))

    redirectToCheckout({ sessionId: response.sessionId })
  }

  async function handleCheckout(event) {
    event.preventDefault()

    const response = await fetch('/.netlify/functions/redirect-to-checkout', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(cartDetails)
    })
      .then((res) => res.json())
      .catch((error) => console.log(error))

    console.log('Checkout result:', response)
  }

  if (cartCount === 0) {
    return (
      <Flex
        sx={{
          textAlign: 'center',
          flexDirection: 'column',
          alignItems: 'center'
        }}
      >
        <h2>Shopping Cart Display Panel</h2>
        <p style={{ maxWidth: 300 }}>
          You haven't added any items to your cart yet. That's a shame.
        </p>
      </Flex>
    )
  } else {
    return (
      <Flex
        sx={{
          flexDirection: 'column'
        }}
      >
        <h2>Shopping Cart Display Panel</h2>
        {Object.keys(cartDetails).map((sku, index) => {
          const { name, quantity, image } = cartDetails[sku]
          return (
            <Flex
              key={sku}
              sx={{
                flexDirection: 'column',
                width: '100%',
                marginBottom: 25,
                paddingLeft: 20
              }}
            >
              <Flex sx={{ alignItems: 'center' }}>
                <Image
                  sx={{ width: 50, height: 'auto', marginRight: 10 }}
                  src={image}
                />
                <p>{name}</p>
              </Flex>
              <Input
                type={'number'}
                max={99}
                sx={{ width: 60 }}
                value={quantity}
                onChange={(event) => {
                  setItemQuantity(sku, event.target.valueAsNumber)
                }}
              />
            </Flex>
          )
        })}
        <Box>
          <p aria-live="polite" aria-atomic="true">
            Total Item Count: {cartCount}
          </p>
          <p aria-live="polite" aria-atomic="true">
            Total Price: {formattedTotalPrice}
          </p>
        </Box>
        <Button
          sx={{ backgroundColor: 'black' }}
          marginBottom={10}
          onClick={handleSubmit}
        >
          Checkout
        </Button>
        <Button
          sx={{ backgroundColor: 'black' }}
          marginBottom={10}
          onClick={() => clearCart()}
        >
          Clear Cart Items
        </Button>
        <Button sx={{ backgroundColor: 'black' }} onClick={handleCheckout}>
          Redirect To Checkout
        </Button>
      </Flex>
    )
  }
}

Header = ({ siteTitle }) => (
  <header
    sx={{
      marginBottom: `1.45rem`,
    }}
  >
    <Flex
      sx={{
        padding: "7vh 7vw 0vh 7vw",
        paddingBottom: ["7vh", "7vh", "7vh", "7vh", "0vh"],
        maxWidth: "100%",
        justifyContent: ["center", "center", "left", "left", "left"],
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: ["center", "center", "left", "left", "left"],
          width: "65%",
        }}
      >
        <h2
          sx={{
            margin: 0,
            fontSize: ["1.7rem", "2rem", "1.5rem", "2rem", "1.8rem"],
          }}
        >
          <Link
            to="/"
            sx={{
              color: "primary",
              textDecoration: `none`,
              fontFamily: "body",
            }}
          >
            {siteTitle}
          </Link>
        </h2>
      </Box>
      <Box
        sx={{
          display: ["none", "none", "flex", "flex", "flex"],
          alignItems: "center",
          justifyContent: "flex-end",
          width: "10%",
        }}
      >
        <h3
          sx={{
            marginBottom: "0px",
            color: "white",
            fontFamily: "body",
            fontSize: ["0.8rem", "0.8rem", "1rem", "1.2rem", "1.3rem"],
          }}
        >
          <a
            href="#description"
            style={{
              textDecoration: "none",
              color: "white",
            }}
          >
            About
          </a>
        </h3>
      </Box>
      <Box
        sx={{
          display: ["none", "none", "flex", "flex", "flex"],
          alignItems: "center",
          justifyContent: "flex-end",
          width: "12%",
        }}
      >
        <h3
          sx={{
            marginBottom: "0px",
            fontFamily: "body",
            fontSize: ["0.8rem", "0.8rem", "1rem", "1.2rem", "1.3rem"],
          }}
        >
          <a
            target="_blank"
            rel="noreferrer"
            href="https://github.com/gojek/ziggurat"
            style={{
              color: "white",
              textDecoration: "none",
            }}
          >
            Source
          </a>
        </h3>
      </Box>
      <Box
        sx={{
          display: ["none", "none", "flex", "flex", "flex"],
          alignItems: "center",
          justifyContent: "flex-end",
          width: "10%",
        }}
      >
        <h3
          sx={{
            marginBottom: "0px",
            color: "white",
            fontFamily: "body",
            fontSize: ["0.8rem", "0.8rem", "1rem", "1.2rem", "1.3rem"],
          }}
        >
          <a
            href="/docs/home"
            style={{
              color: "white",
              textDecoration: "none",
            }}
          >
            Docs
          </a>
        </h3>
      </Box>
    </Flex>
  </header>
)

Header = ({ isShowSearch, searchCompProps, toggleModal }) => {
  const [colorMode, setColorMode] = useColorMode()
  return (
    <Box
      sx={{
        borderBottom: "1px solid",
        borderColor: 'cardBorder',
        marginBottom: '24px'
      }}>
      <Flex
        as="header"
        sx={{
          height: '120px',
          alignItems: 'center',
          justifyContent: 'space-between',
          margin: '0 auto',
          maxWidth: ['100%', '768px', '992px', '1400px'],
          px: '15px',
        }}
      >
        <Flex
          sx={{
            flex: 1,
            alignItems: 'center',
          }}
        >
          <Text
            sx={{
              fontSize: '24px',
              color: 'white',
              fontFamily: 'inter',
              textAlign: 'center',
            }}
          >
            <Link to="/" style={{ display: 'block', lineHeight: 0 }} >
              <Image style={{ fill: '#FF4136', width: 180 }} src={colorMode === 'dark' ? logoWhite : logoBlack} />
            </Link>
          </Text>
          { isShowSearch &&
            <Box
              sx={{
                width: '76%',
                margin: '16px 16px 0px 16px',
                '@media only screen and (max-width: 916px)': {
                  marginTop: 0,
                  width: 'auto',
                  display: 'flex',
                  justifyContent: 'flex-end',
                  margin: '0px 16px 0px auto',
                },
                '@media only screen and (max-width: 320px)': {
                  margin: '0px 6px',
                },
              }}
            >
              <Box
                sx={{
                  '@media only screen and (max-width: 916px)': {
                    display: 'none',
                  },
                }}
              >
                <Search {...searchCompProps}/>
              </Box>
              <Button
                name="toggle-modal-with-search"
                onClick={toggleModal}
                backgroundColor="rgb(157, 31, 30)"
                sx={{
                  padding: '6px 12px',
                  '@media only screen and (min-width: 916px)': {
                    display: 'none',
                  },
                }}
              >
                <SearchIcon
                  style={{
                    width: 16,
                    height: 16,
                  }}
                />
              </Button>
            </Box>
          }
        </Flex>
        <Flex
          sx={{
            alignItems: 'center',
            justifyContent: 'space-between',
            '@media only screen and (min-width: 916px)': {
              marginBottom: 9,
            },
          }}
        >
          <Link to="/about">
            <Text
              sx={{
                fontSize: '16px',
                color: 'text',
                fontFamily: 'inter',
                textAlign: 'center',
                mr: '1em'
              }}
            >
              About
          </Text>
          </Link>
          <a href="https://github.com/luisFilipePT/github-covid-finder" target="_blank" rel="noopener noreferrer">
            <Text sx={{color: 'text', marginTop: '4px'}}>
              <GithubIcon />
            </Text>
          </a>
          <Button sx={{
            fontFamily: 'inter',
            marginLeft: '24px',
            cursor: 'pointer'
          }} 
          variant='selectTheme'
          onClick={e => {
            setColorMode(colorMode === 'default' ? 'dark' : 'default')
          }}>
            {colorMode === 'default' ? 'Dark' : 'Light'}
          </Button>
        </Flex>
      </Flex>
    </Box>
  )
}

CommunitySection = ({ mobile }) => {
  const ctaContent = [
    {
      title: 'Join our dev community',
      link: 'https://chat.makerdao.com/channel/dev',
      text: 'Join our chat',
    },
    {
      title: 'Join the conversation',
      link: 'https://forum.makerdao.com/c/devs/19',
      text: 'Join our forum',
    },
    {
      title: 'Be a contributor',
      link: 'https://github.com/makerdao/developer-portal',
      text: 'Github',
    },
  ];

  return (
    <Container>
      <Card sx={{ p: 0, display: 'flex', width: '100%', position: 'relative', zIndex: 0 }}>
        <Icon
          color="textMuted"
          name="tri_1"
          size="150px"
          sx={{
            position: 'absolute',
            top: '-70px',
            left: '60px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="tri_2"
          size="250px"
          sx={{
            position: 'absolute',
            alignSelf: 'flex-end',
            right: '5px',
            top: '-120px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="tri_3"
          size="240px"
          sx={{
            position: 'absolute',
            left: '-130px',
            top: '240px',
          }}
        />
        <Icon
          color="textMuted"
          name="tri_4"
          size="90px"
          sx={{
            position: 'absolute',
            alignSelf: 'flex-end',
            right: '60px',
            bottom: '-50px',
          }}
        />
        <Grid sx={{ p: 4, rowGap: 4 }}>
          <Flex sx={{ justifyContent: 'center' }}>
            <Heading variant="largeHeading">
              <InlineText name="joinUs" />
            </Heading>
          </Flex>

          <Grid columns={[1, 3]} sx={{ py: 4 }}>
            {ctaContent.map(({ title, link, text }) => (
              <Card sx={{ p: [3, 3, 4], bg: 'onBackground' }} key={title}>
                <Grid sx={{ height: '100%' }}>
                  <Heading sx={{ color: 'background' }}>{title}</Heading>
                  <ThemeLink sx={{ alignSelf: 'end' }} href={link} target="_blank">
                    <Flex sx={{ alignItems: 'center' }}>
                      <Icon name="increase" color="primary"></Icon>
                      <Text variant="largeText" sx={{ color: 'background', px: 2 }}>
                        {text}
                      </Text>
                    </Flex>
                  </ThemeLink>
                </Grid>
              </Card>
            ))}
          </Grid>
        </Grid>
      </Card>
      <Flex
        sx={{
          justifyContent: mobile ? 'space-between' : 'center',
          alignItems: 'center',
          px: [0, 5, 4],
          py: [5, 4],
        }}
      >
        <Icon color="textMuted" name="smiley" size={6} />
        <Flex sx={{ width: ['50%', '100%', '50%'], p: [0, 4] }}>
          <Heading>
            <InlineTextarea name="communityCallout" />
          </Heading>
        </Flex>
      </Flex>
    </Container>
  );
}

NestedCollapsible = ({ properties, title }) => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <Box
      mt={2}
      sx={{
        "& .child-attrs": {
          cursor: "pointer",
          fontSize: "12px",
          p: "6px 10px",
          boxSizing: "border-box",
          width: "max-content",
          borderRadius: "small",
          border: "1px solid",
          borderColor: "faded",
        },

        "& .child-attrs.is-open": {
          width: "100%",
          borderBottom: "none",
          borderBottomLeftRadius: "0",
          borderBottomRightRadius: "0",
        },
      }}
    >
      <Collapsible
        transitionTime={50}
        triggerClassName={"child-attrs"}
        triggerOpenedClassName={"child-attrs"}
        triggerTagName="div"
        trigger={
          <Flex
            sx={{
              alignItems: "baseline",
              fontSize: "13px",
              fontWeight: "400",
            }}
          >
            <Box
              mr={1}
              className={isOpen ? "rotated" : null}
              sx={{
                userSelect: "none",
                transition: "all 0.2s ease",
                transform: "rotate(45deg)",
                "&.rotated": {
                  transform: "rotate(0deg)",
                },
              }}
            >
              &times;
            </Box>{" "}
            <Text
              sx={{ fontSize: "0", fontFamily: "body", userSelect: "none" }}
            >{`${isOpen ? "Hide" : "Show"} child attributes`}</Text>
          </Flex>
        }
        onTriggerOpening={() => setIsOpen(true)}
        onTriggerClosing={() => setIsOpen(false)}
      >
        <Box
          sx={{
            padding: "2",
            borderRadius: "small",
            borderTopLeftRadius: 0,
            borderTopRightRadius: 0,
            border: "hairline",
            borderColor: "faded",
          }}
          mb="2"
        >
          <Heading as="h3" p={2} sx={{ fontFamily: "body", fontWeight: "500" }}>
            {title}
          </Heading>
          {properties.map((param, i) => {
            return (
              <Box
                p={2}
                sx={{
                  borderTop: "hairline",
                }}
                key={i}
              >
                <Flex
                  sx={{
                    fontSize: "0",
                    alignItems: "baseline",
                    pb: "1",
                    fontFamily: "monospace",
                  }}
                >
                  <Box mr={2} fontSize={"12px"}>
                    {param.property}
                  </Box>
                  <Text color={"gray"} fontSize={"10px"}>
                    {param.type}
                  </Text>
                  {param.required && (
                    <Text ml={1} fontSize={"10px"} variant="labels.required">
                      required
                    </Text>
                  )}
                </Flex>
                <Description>
                  <Text
                    sx={{
                      fontSize: "0",
                      lineHeight: "26px",
                      fontFamily: "body",
                    }}
                  >
                    <Markdown>{param.description}</Markdown>
                  </Text>
                </Description>
              </Box>
            )
          })}
        </Box>
      </Collapsible>
    </Box>
  )
}

export default function OverlayKeyBindings () {
  const { theme } = useContext(AppContext)
  const { borderColor, color } = theme

  return (
    <>
      <Box sx={{ width: '100%' }}>
        <Flex
          as='header'
          sx={{
            p: '10px',
            fontWeight: 'bold',
            borderBottom: 1,
            borderColor
          }}
        >
          <Box sx={{ width: '25%', mr: 3 }}>Combination</Box>
          <Box sx={{ width: '75%' }}>Description</Box>
        </Flex>
        {[
          {
            combination: [ctrl, ' + ', 'j'],
            description: 'Show keybindings information'
          },
          {
            combination: [ctrl, ' + ', 'k'],
            description: 'Show information about the project'
          },
          {
            combination: [ctrl, ' + ', 's'],
            description: 'Get the current image URL'
          },
          {
            combination: [ctrl, ' + ', 'click'],
            description: 'Edit the selected value on query variables'
          },
          {
            combination: [ctrl, ' + ', 'p'],
            description: 'Change the editor theme'
          },
          {
            combination: ['esc'],
            description: 'Close the active modal'
          }
        ].map(({ combination, description }) => (
          <Flex
            as='section'
            key={combination}
            sx={{ lineHeight: 2, p: 3, borderBottom: 1, borderColor }}
          >
            <Box sx={{ width: '25%', mr: 3 }}>
              <Box
                sx={{
                  display: 'inline',
                  py: '3px',
                  px: '6px',
                  border: 1,
                  borderColor,
                  borderRadius: 4
                }}
              >
                {combination.map(key => (
                  <Text
                    sx={{
                      fontSize: 0,
                      textTransform: 'uppercase',
                      color,
                      display: 'inherit'
                    }}
                    key={key}
                  >
                    {key}
                  </Text>
                ))}
              </Box>
            </Box>
            <Box sx={{ width: '75%' }}>{description}</Box>
          </Flex>
        ))}
      </Box>
    </>
  )
}