chore: Bump outline-icons (#5170

* Bump outline-icons to default use currentColor * wip
2023-04-08 11:16:05 -04:00
parent 489cfcd0b0
commit aab3a49f2c
70 changed files with 113 additions and 190 deletions
--- a/app/components/Arrow.tsx
+++ b/app/components/Arrow.tsx
@@ -6,17 +6,11 @@ export default function Arrow() {
      width="13"
      height="30"
      viewBox="0 0 13 30"
-      fill="none"
+      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <path
-        fill="currentColor"
-        d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
-      />
-      <path
-        fill="currentColor"
-        d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
-      />
+      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
+      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
    </svg>
  );
 }
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -14,7 +14,6 @@ type RealProps = {
  $borderOnHover?: boolean;
  $neutral?: boolean;
  $danger?: boolean;
-  $iconColor?: string;
 };

 const RealButton = styled(ActionButton)<RealProps>`
@@ -37,14 +36,6 @@ const RealButton = styled(ActionButton)<RealProps>`
  appearance: none !important;
  ${undraggableOnDesktop()}

-  ${(props) =>
-    !props.$borderOnHover &&
-    `
-      svg {
-        fill: ${props.$iconColor || "currentColor"};
-      }
-    `}
-
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
@@ -77,15 +68,6 @@ const RealButton = styled(ActionButton)<RealProps>`
        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
    };

-    ${
-      props.$borderOnHover
-        ? ""
-        : `svg {
-      fill: ${props.$iconColor || "currentColor"};
-    }`
-    }
-
-
    &:hover:not(:disabled),
    &[aria-expanded="true"] {
      background: ${
@@ -156,7 +138,6 @@ export const Inner = styled.span<{

 export type Props<T> = ActionButtonProps & {
  icon?: React.ReactNode;
-  iconColor?: string;
  children?: React.ReactNode;
  disclosure?: boolean;
  neutral?: boolean;
@@ -184,7 +165,6 @@ const Button = <T extends React.ElementType = "button">(
    neutral,
    action,
    icon,
-    iconColor,
    borderOnHover,
    hideIcon,
    fullwidth,
@@ -204,13 +184,12 @@ const Button = <T extends React.ElementType = "button">(
      $danger={danger}
      $fullwidth={fullwidth}
      $borderOnHover={borderOnHover}
-      $iconColor={iconColor}
      {...rest}
    >
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && ic}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon color="currentColor" />}
+        {disclosure && <ExpandedIcon />}
      </Inner>
    </RealButton>
  );
--- a/app/components/CommandBarItem.tsx
+++ b/app/components/CommandBarItem.tsx
@@ -39,10 +39,9 @@ function CommandBarItem(
            // @ts-expect-error no icon on ActionImpl
            React.cloneElement(action.icon, {
              size: 22,
-              color: "currentColor",
            })
          ) : (
-            <ArrowIcon color="currentColor" />
+            <ArrowIcon />
          )}
        </Icon>

--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -78,15 +78,11 @@ const MenuItem = (
        >
          {selected !== undefined && (
            <>
-              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
+              {selected ? <CheckmarkIcon /> : <Spacer />}
              &nbsp;
            </>
          )}
-          {icon && (
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
          {children}
        </MenuAnchor>
      )}
--- a/app/components/ContextMenu/OverflowMenuButton.tsx
+++ b/app/components/ContextMenu/OverflowMenuButton.tsx
@@ -5,19 +5,14 @@ import NudeButton from "~/components/NudeButton";

 type Props = React.ComponentProps<typeof MenuButton> & {
  className?: string;
-  iconColor?: string;
 };

-export default function OverflowMenuButton({
-  iconColor,
-  className,
-  ...rest
-}: Props) {
+export default function OverflowMenuButton({ className, ...rest }: Props) {
  return (
    <MenuButton {...rest}>
      {(props) => (
        <NudeButton className={className} {...props}>
-          <MoreIcon color={iconColor} />
+          <MoreIcon />
        </NudeButton>
      )}
    </MenuButton>
--- a/app/components/DefaultCollectionInputSelect.tsx
+++ b/app/components/DefaultCollectionInputSelect.tsx
@@ -73,7 +73,7 @@ const DefaultCollectionInputSelect = ({
            label: (
              <Flex align="center">
                <IconWrapper>
-                  <HomeIcon color="currentColor" />
+                  <HomeIcon />
                </IconWrapper>
                {t("Home")}
              </Flex>
--- a/app/components/DocumentBreadcrumb.tsx
+++ b/app/components/DocumentBreadcrumb.tsx
@@ -22,7 +22,7 @@ function useCategory(document: Document): MenuInternalLink | null {
  if (document.isDeleted) {
    return {
      type: "route",
-      icon: <TrashIcon color="currentColor" />,
+      icon: <TrashIcon />,
      title: t("Trash"),
      to: "/trash",
    };
@@ -31,7 +31,7 @@ function useCategory(document: Document): MenuInternalLink | null {
  if (document.isArchived) {
    return {
      type: "route",
-      icon: <ArchiveIcon color="currentColor" />,
+      icon: <ArchiveIcon />,
      title: t("Archive"),
      to: "/archive",
    };
@@ -40,7 +40,7 @@ function useCategory(document: Document): MenuInternalLink | null {
  if (document.isTemplate) {
    return {
      type: "route",
-      icon: <ShapesIcon color="currentColor" />,
+      icon: <ShapesIcon />,
      title: t("Templates"),
      to: "/templates",
    };
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -128,7 +128,7 @@ function DocumentCard(props: Props) {
                  : document.titleWithDefault}
              </Heading>
              <DocumentMeta size="xsmall">
-                <Clock color="currentColor" size={18} />
+                <Clock size={18} />
                <Time
                  dateTime={document.updatedAt}
                  tooltipDelay={500}
@@ -143,7 +143,7 @@ function DocumentCard(props: Props) {
              {!isDragging && pin && (
                <Tooltip tooltip={t("Unpin")}>
                  <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                    <CloseIcon color="currentColor" />
+                    <CloseIcon />
                  </PinButton>
                </Tooltip>
              )}
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -178,6 +178,7 @@ const Actions = styled(EventBoundary)`
  margin: 8px;
  flex-shrink: 0;
  flex-grow: 0;
+  color: ${s("textSecondary")};

  ${NudeButton} {
    &:hover,
--- a/app/components/EventListItem.tsx
+++ b/app/components/EventListItem.tsx
@@ -58,7 +58,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {

  switch (event.name) {
    case "revisions.create":
-      icon = <EditIcon color="currentColor" size={16} />;
+      icon = <EditIcon size={16} />;
      meta = t("{{userName}} edited", opts);
      to = {
        pathname: documentHistoryUrl(document, event.modelId || ""),
@@ -67,7 +67,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.live_editing":
-      icon = <LightningIcon color="currentColor" size={16} />;
+      icon = <LightningIcon size={16} />;
      meta = t("Latest");
      to = {
        pathname: documentHistoryUrl(document),
@@ -76,7 +76,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.archive":
-      icon = <ArchiveIcon color="currentColor" size={16} />;
+      icon = <ArchiveIcon size={16} />;
      meta = t("{{userName}} archived", opts);
      break;

@@ -85,7 +85,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.delete":
-      icon = <TrashIcon color="currentColor" size={16} />;
+      icon = <TrashIcon size={16} />;
      meta = t("{{userName}} deleted", opts);
      break;

@@ -94,17 +94,17 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.publish":
-      icon = <PublishIcon color="currentColor" size={16} />;
+      icon = <PublishIcon size={16} />;
      meta = t("{{userName}} published", opts);
      break;

    case "documents.unpublish":
-      icon = <UnpublishIcon color="currentColor" size={16} />;
+      icon = <UnpublishIcon size={16} />;
      meta = t("{{userName}} unpublished", opts);
      break;

    case "documents.move":
-      icon = <MoveIcon color="currentColor" size={16} />;
+      icon = <MoveIcon size={16} />;
      meta = t("{{userName}} moved", opts);
      break;

--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -63,7 +63,6 @@ function Header({ left, title, actions, hasSidebar }: Props) {
            <MobileMenuButton
              onClick={ui.toggleMobileSidebar}
              icon={<MenuIcon />}
-              iconColor="currentColor"
              neutral
            />
          )}
--- a/app/components/List/Error.tsx
+++ b/app/components/List/Error.tsx
@@ -21,11 +21,11 @@ export default function LoadingError({ error, retry, ...rest }: Props) {
  const message =
    error instanceof OfflineError ? (
      <>
-        <DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
+        <DisconnectedIcon /> {t("You’re offline.")}
      </>
    ) : (
      <>
-        <WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
+        <WarningIcon /> {t("Sorry, an error occurred.")}
      </>
    );

--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -94,7 +94,7 @@ const Modal: React.FC<Props> = ({
                      )}
                      <Text as="span" size="large">
                        <NudeButton onClick={onRequestClose}>
-                          <CloseIcon color="currentColor" />
+                          <CloseIcon />
                        </NudeButton>
                      </Text>
                    </Header>
@@ -119,10 +119,10 @@ const Modal: React.FC<Props> = ({
                    </Centered>
                  </Content>
                  <Close onClick={onRequestClose}>
-                    <CloseIcon size={32} color="currentColor" />
+                    <CloseIcon size={32} />
                  </Close>
                  <Back onClick={onRequestClose}>
-                    <BackIcon size={32} color="currentColor" />
+                    <BackIcon size={32} />
                    <Text as="span">{t("Back")} </Text>
                  </Back>
                </Fullscreen>
--- a/app/components/Sidebar/App.tsx
+++ b/app/components/Sidebar/App.tsx
@@ -88,20 +88,20 @@ function AppSidebar() {
            <Section>
              <SidebarLink
                to={homePath()}
-                icon={<HomeIcon color="currentColor" />}
+                icon={<HomeIcon />}
                exact={false}
                label={t("Home")}
              />
              <SidebarLink
                to={searchPath()}
-                icon={<SearchIcon color="currentColor" />}
+                icon={<SearchIcon />}
                label={t("Search")}
                exact={false}
              />
              {can.createDocument && (
                <SidebarLink
                  to={draftsPath()}
-                  icon={<EditIcon color="currentColor" />}
+                  icon={<EditIcon />}
                  label={
                    <Flex align="center" justify="space-between">
                      {t("Drafts")}
@@ -124,7 +124,7 @@ function AppSidebar() {
                <>
                  <SidebarLink
                    to={templatesPath()}
-                    icon={<ShapesIcon color="currentColor" />}
+                    icon={<ShapesIcon />}
                    exact={false}
                    label={t("Templates")}
                    active={
--- a/app/components/Sidebar/Settings.tsx
+++ b/app/components/Sidebar/Settings.tsx
@@ -33,7 +33,7 @@ function SettingsSidebar() {
      <HistoryNavigation />
      <HeaderButton
        title={t("Return to App")}
-        image={<StyledBackIcon color="currentColor" />}
+        image={<StyledBackIcon />}
        onClick={returnToApp}
        minHeight={Desktop.hasInsetTitlebar() ? undefined : 48}
      />
@@ -47,7 +47,7 @@ function SettingsSidebar() {
                  <SidebarLink
                    key={item.path}
                    to={item.path}
-                    icon={<item.icon color="currentColor" />}
+                    icon={<item.icon />}
                    label={item.name}
                  />
                ))}
--- a/app/components/Sidebar/components/ArchiveLink.tsx
+++ b/app/components/Sidebar/components/ArchiveLink.tsx
@@ -32,7 +32,7 @@ function ArchiveLink() {
    <div ref={dropToArchiveDocument}>
      <SidebarLink
        to={archivePath()}
-        icon={<ArchiveIcon color="currentColor" open={isDocumentDropping} />}
+        icon={<ArchiveIcon open={isDocumentDropping} />}
        exact={false}
        label={t("Archive")}
        active={documents.active?.isArchived && !documents.active?.isDeleted}
--- a/app/components/Sidebar/components/Disclosure.tsx
+++ b/app/components/Sidebar/components/Disclosure.tsx
@@ -22,7 +22,7 @@ function Disclosure({ onClick, root, expanded, ...rest }: Props) {
      aria-label={expanded ? t("Collapse") : t("Expand")}
      {...rest}
    >
-      <StyledCollapsedIcon expanded={expanded} size={20} color="currentColor" />
+      <StyledCollapsedIcon expanded={expanded} size={20} />
    </Button>
  );
 }
--- a/app/components/Sidebar/components/Header.tsx
+++ b/app/components/Sidebar/components/Header.tsx
@@ -36,9 +36,7 @@ export const Header: React.FC<Props> = ({ id, title, children }) => {
      <H3>
        <Button onClick={handleClick} disabled={!id}>
          {title}
-          {id && (
-            <Disclosure expanded={expanded} color="currentColor" size={20} />
-          )}
+          {id && <Disclosure expanded={expanded} size={20} />}
        </Button>
      </H3>
      {expanded && (firstRender ? children : <Fade>{children}</Fade>)}
--- a/app/components/Sidebar/components/HeaderButton.tsx
+++ b/app/components/Sidebar/components/HeaderButton.tsx
@@ -40,8 +40,8 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
        {image}
        {title}
      </Title>
-      {showDisclosure && <ExpandedIcon color="currentColor" />}
-      {showMoreMenu && <MoreIcon color="currentColor" />}
+      {showDisclosure && <ExpandedIcon />}
+      {showMoreMenu && <MoreIcon />}
    </Wrapper>
  )
 );
--- a/app/components/Sidebar/components/HistoryNavigation.tsx
+++ b/app/components/Sidebar/components/HistoryNavigation.tsx
@@ -45,12 +45,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {
    <Navigation gap={4} {...props}>
      <Tooltip tooltip={t("Go back")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge.goBack()}>
-          <Back color="currentColor" $active={back} />
+          <Back $active={back} />
        </NudeButton>
      </Tooltip>
      <Tooltip tooltip={t("Go forward")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge.goForward()}>
-          <Forward color="currentColor" $active={forward} />
+          <Forward $active={forward} />
        </NudeButton>
      </Tooltip>
    </Navigation>
--- a/app/components/Sidebar/components/TrashLink.tsx
+++ b/app/components/Sidebar/components/TrashLink.tsx
@@ -36,7 +36,7 @@ function TrashLink() {
      <div ref={dropToTrashDocument}>
        <SidebarLink
          to={trashPath()}
-          icon={<TrashIcon color="currentColor" open={isDocumentDropping} />}
+          icon={<TrashIcon open={isDocumentDropping} />}
          exact={false}
          label={t("Trash")}
          active={documents.active?.isDeleted}
--- a/app/components/Toast.tsx
+++ b/app/components/Toast.tsx
@@ -58,12 +58,10 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
      onMouseLeave={handleResume}
    >
      <Container onClick={action ? undefined : onRequestClose}>
-        {type === "loading" && <Spinner color="currentColor" />}
-        {type === "info" && <InfoIcon color="currentColor" />}
-        {type === "success" && <CheckboxIcon checked color="currentColor" />}
-        {(type === "warning" || type === "error") && (
-          <WarningIcon color="currentColor" />
-        )}
+        {type === "loading" && <Spinner />}
+        {type === "info" && <InfoIcon />}
+        {type === "success" && <CheckboxIcon checked />}
+        {(type === "warning" || type === "error") && <WarningIcon />}
        <Message>{toast.message}</Message>
        {action && <Action onClick={action.onClick}>{action.text}</Action>}
      </Container>