Oct 5, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
 import {makeStyles} from "@mui/styles";
 import {FC } from "react";
 import {type FC} from "react";
 import {useTheme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { combineClasses } from "utils/combineClasses";
 import { CopyButton } from "../CopyButton/CopyButton";
 import { Theme } from "@mui/material/styles";

 export interface CodeExampleProps {
  code: string;
 /**
 * Component to show single-line code examples, with a copy button
 */
 export const CodeExample: FC<CodeExampleProps> = ({
  code,
  password,
  className,
 }) => {
  const styles = useStyles({ password });
 export const CodeExample: FC<CodeExampleProps> = (props) => {
  const { code, password, className } = props;
  const theme = useTheme();

  return (
    <div className={combineClasses([styles.root, className])}>
      <code className={styles.code}>{code}</code>
    <div
      css={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        background: "rgb(0 0 0 / 30%)",
        color: theme.palette.primary.contrastText,
        fontFamily: MONOSPACE_FONT_FAMILY,
        fontSize: 14,
        borderRadius: theme.shape.borderRadius,
        padding: theme.spacing(1),
        lineHeight: "150%",
        border: `1px solid ${theme.palette.divider}`,
      }}
      className={className}
    >
      <code
        css={{
          padding: theme.spacing(0, 1),
          width: "100%",
          display: "flex",
          alignItems: "center",
          wordBreak: "break-all",
          "-webkit-text-security": password ? "disc" : undefined,
        }}
      >
        {code}
      </code>
      <CopyButton text={code} />
    </div>
  );
 };

 interface styleProps {
  inline?: boolean;
  password?: boolean;
 }

 const useStyles = makeStyles<Theme, styleProps>((theme) => ({
  root: (props) => ({
    display: props.inline ? "inline-flex" : "flex",
    flexDirection: "row",
    alignItems: "center",
    background: "rgb(0 0 0 / 30%)",
    color: theme.palette.primary.contrastText,
    fontFamily: MONOSPACE_FONT_FAMILY,
    fontSize: 14,
    borderRadius: theme.shape.borderRadius,
    padding: theme.spacing(1),
    lineHeight: "150%",
    border: `1px solid ${theme.palette.divider}`,
  }),
  code: {
    padding: theme.spacing(0, 1),
    width: "100%",
    display: "flex",
    alignItems: "center",
    wordBreak: "break-all",
    "-webkit-text-security": (props) => (props.password ? "disc" : undefined),
  },
 }));
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
 import * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
 import { BorderedMenu } from "./BorderedMenu";
 import {
  CloseDropdown,
  OpenDropdown,
 } from "components/DropdownArrows/DropdownArrows";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { UserDropdownContent } from "./UserDropdownContent";
 import { BUTTON_SM_HEIGHT } from "theme/theme";
              avatarURL={user.avatar_url}
            />
          </Badge>
          {anchorEl ? (
            <CloseDropdown color={colors.gray[6]} />
          ) : (
            <OpenDropdown color={colors.gray[6]} />
          )}
          <DropdownArrow color={colors.gray[6]} close={Boolean(anchorEl)} />
        </div>
      </MenuItem>

diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
 import { type FC } from "react";
 import { type Theme } from "@emotion/react";

 interface ArrowProps {
  margin?: boolean;
  color?: string;
  close?: boolean;
 }

 export const DropdownArrow: FC<ArrowProps> = (props) => {
  const { margin = true, color, close } = props;

  const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;

  return (
    <Arrow
      aria-label={close ? "close-dropdown" : "open-dropdown"}
      css={(theme: Theme) => ({
        color: color ?? theme.palette.primary.contrastText,
        marginLeft: margin ? theme.spacing(1) : 0,
        width: 16,
        height: 16,
      })}
    />
  );
 };
diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
 import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
 import makeStyles from "@mui/styles/makeStyles";
 import {
  CloseDropdown,
  OpenDropdown,
 } from "components/DropdownArrows/DropdownArrows";
 import { PropsWithChildren, FC } from "react";
 import Collapse from "@mui/material/Collapse";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { type FC, type PropsWithChildren } from "react";
 import { combineClasses } from "utils/combineClasses";

 export interface ExpanderProps {
        <Link onClick={toggleExpanded} className={styles.expandLink}>
          <span className={styles.text}>
            Click here to learn more
            <OpenDropdown margin={false} />
            <DropdownArrow margin={false} />
          </span>
        </Link>
      )}
        >
          <span className={styles.text}>
            Click here to hide
            <CloseDropdown margin={false} />
            <DropdownArrow margin={false} close />
          </span>
        </Link>
      )}
Original file line number	Diff line number	Diff line change
		@@ -1,9 +1,7 @@
		import {makeStyles} from "@mui/styles";
		import {FC } from "react";
		import {type FC} from "react";
		import {useTheme } from "@emotion/react";
		import { MONOSPACE_FONT_FAMILY } from "theme/constants";
		import { combineClasses } from "utils/combineClasses";
		import { CopyButton } from "../CopyButton/CopyButton";
		import { Theme } from "@mui/material/styles";

		export interface CodeExampleProps {
		code: string;
Expand All		@@ -14,46 +12,40 @@ export interface CodeExampleProps {
		/**
		* Component to show single-line code examples, with a copy button
		*/
		export const CodeExample: FC<CodeExampleProps> = ({
		code,
		password,
		className,
		}) => {
		const styles = useStyles({ password });
		export const CodeExample: FC<CodeExampleProps> = (props) => {
		const { code, password, className } = props;
		const theme = useTheme();

		return (
		<div className={combineClasses([styles.root, className])}>
		<code className={styles.code}>{code}</code>
		<div
		css={{
		display: "flex",
		flexDirection: "row",
		alignItems: "center",
		background: "rgb(0 0 0 / 30%)",
		color: theme.palette.primary.contrastText,
		fontFamily: MONOSPACE_FONT_FAMILY,
		fontSize: 14,
		borderRadius: theme.shape.borderRadius,
		padding: theme.spacing(1),
		lineHeight: "150%",
		border: `1px solid ${theme.palette.divider}`,
		}}
		className={className}
		>
		<code
		css={{
		padding: theme.spacing(0, 1),
		width: "100%",
		display: "flex",
		alignItems: "center",
		wordBreak: "break-all",
		"-webkit-text-security": password ? "disc" : undefined,
		}}
		>
		{code}
		</code>
		<CopyButton text={code} />
		</div>
		);
		};

		interface styleProps {
		inline?: boolean;
		password?: boolean;
		}

		const useStyles = makeStyles<Theme, styleProps>((theme) => ({
		root: (props) => ({
		display: props.inline ? "inline-flex" : "flex",
		flexDirection: "row",
		alignItems: "center",
		background: "rgb(0 0 0 / 30%)",
		color: theme.palette.primary.contrastText,
		fontFamily: MONOSPACE_FONT_FAMILY,
		fontSize: 14,
		borderRadius: theme.shape.borderRadius,
		padding: theme.spacing(1),
		lineHeight: "150%",
		border: `1px solid ${theme.palette.divider}`,
		}),
		code: {
		padding: theme.spacing(0, 1),
		width: "100%",
		display: "flex",
		alignItems: "center",
		wordBreak: "break-all",
		"-webkit-text-security": (props) => (props.password ? "disc" : undefined),
		},
		}));
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,10 +5,7 @@ import { colors } from "theme/colors";
		import * as TypesGen from "api/typesGenerated";
		import { navHeight } from "theme/constants";
		import { BorderedMenu } from "./BorderedMenu";
		import {
		CloseDropdown,
		OpenDropdown,
		} from "components/DropdownArrows/DropdownArrows";
		import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
		import { UserAvatar } from "components/UserAvatar/UserAvatar";
		import { UserDropdownContent } from "./UserDropdownContent";
		import { BUTTON_SM_HEIGHT } from "theme/theme";
Expand DownExpand Up		@@ -69,11 +66,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
		avatarURL={user.avatar_url}
		/>
		</Badge>
		{anchorEl ? (
		<CloseDropdown color={colors.gray[6]} />
		) : (
		<OpenDropdown color={colors.gray[6]} />
		)}
		<DropdownArrow color={colors.gray[6]} close={Boolean(anchorEl)} />
		</div>
		</MenuItem>

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,28 @@
		import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
		import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
		import { type FC } from "react";
		import { type Theme } from "@emotion/react";

		interface ArrowProps {
		margin?: boolean;
		color?: string;
		close?: boolean;
		}

		export const DropdownArrow: FC<ArrowProps> = (props) => {
		const { margin = true, color, close } = props;

		const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;

		return (
		<Arrow
		aria-label={close ? "close-dropdown" : "open-dropdown"}
		css={(theme: Theme) => ({
		color: color ?? theme.palette.primary.contrastText,
		marginLeft: margin ? theme.spacing(1) : 0,
		width: 16,
		height: 16,
		})}
		/>
		);
		};
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,8 @@
		import Collapse from "@mui/material/Collapse";
		import Link from "@mui/material/Link";
		import makeStyles from "@mui/styles/makeStyles";
		import {
		CloseDropdown,
		OpenDropdown,
		} from "components/DropdownArrows/DropdownArrows";
		import { PropsWithChildren, FC } from "react";
		import Collapse from "@mui/material/Collapse";
		import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
		import { type FC, type PropsWithChildren } from "react";
		import { combineClasses } from "utils/combineClasses";

		export interface ExpanderProps {
Expand All		@@ -28,7 +25,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
		<Link onClick={toggleExpanded} className={styles.expandLink}>
		<span className={styles.text}>
		Click here to learn more
		<OpenDropdown margin={false} />
		<DropdownArrow margin={false} />
		</span>
		</Link>
		)}
Expand All		@@ -42,7 +39,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
		>
		<span className={styles.text}>
		Click here to hide
		<CloseDropdown margin={false} />
		<DropdownArrow margin={false} close />
		</span>
		</Link>
		)}
Expand Down