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/scenes/Archive.tsx
+++ b/app/scenes/Archive.tsx
@@ -13,7 +13,7 @@ function Archive() {
  const { t } = useTranslation();
  const { documents } = useStores();
  return (
-    <Scene icon={<ArchiveIcon color="currentColor" />} title={t("Archive")}>
+    <Scene icon={<ArchiveIcon />} title={t("Archive")}>
      <Heading>{t("Archive")}</Heading>
      <PaginatedDocumentList
        documents={documents.archived}
--- a/app/scenes/Collection/Empty.tsx
+++ b/app/scenes/Collection/Empty.tsx
@@ -42,7 +42,7 @@ function EmptyCollection({ collection }: Props) {
      {can.update && (
        <Empty>
          <Link to={newDocumentPath(collection.id)}>
-            <Button icon={<NewDocumentIcon color="currentColor" />} neutral>
+            <Button icon={<NewDocumentIcon />} neutral>
              {t("Create a document")}
            </Button>
          </Link>
--- a/app/scenes/Document/components/CommentThreadItem.tsx
+++ b/app/scenes/Document/components/CommentThreadItem.tsx
@@ -220,6 +220,7 @@ const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
  top: 4px;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
+  color: ${s("textSecondary")};

  &:hover,
  &[aria-expanded="true"] {
--- a/app/scenes/Document/components/DocumentMeta.tsx
+++ b/app/scenes/Document/components/DocumentMeta.tsx
@@ -59,7 +59,7 @@ function TitleDocumentMeta({ to, isDraft, document, ...rest }: Props) {
            to={documentUrl(document)}
            onClick={() => ui.toggleComments(document.id)}
          >
-            <CommentIcon color="currentColor" size={18} />
+            <CommentIcon size={18} />
            {commentsCount
              ? t("{{ count }} comment", { count: commentsCount })
              : t("Comment")}
--- a/app/scenes/Document/components/Header.tsx
+++ b/app/scenes/Document/components/Header.tsx
@@ -115,7 +115,6 @@ function DocumentHeader({
          ui.tocVisible ? ui.hideTableOfContents : ui.showTableOfContents
        }
        icon={<TableOfContentsIcon />}
-        iconColor="currentColor"
        borderOnHover
        neutral
      />
@@ -327,7 +326,6 @@ function DocumentHeader({
                    label={(props) => (
                      <Button
                        icon={<MoreIcon />}
-                        iconColor="currentColor"
                        {...props}
                        borderOnHover
                        neutral
--- a/app/scenes/Document/components/Notices.tsx
+++ b/app/scenes/Document/components/Notices.tsx
@@ -39,8 +39,7 @@ export default function Notices({ document, readOnly }: Props) {
          icon={<ShapesIcon />}
          description={
            <Trans>
-              Highlight some text and use the{" "}
-              <PlaceholderIcon color="currentColor" /> control to add
+              Highlight some text and use the <PlaceholderIcon /> control to add
              placeholders that can be filled out when creating new documents
            </Trans>
          }
--- a/app/scenes/Document/components/ReferenceListItem.tsx
+++ b/app/scenes/Document/components/ReferenceListItem.tsx
@@ -76,11 +76,7 @@ function ReferenceListItem({
      {...rest}
    >
      <Content gap={4} dir="auto">
-        {emoji ? (
-          <EmojiIcon emoji={emoji} />
-        ) : (
-          <DocumentIcon color="currentColor" />
-        )}
+        {emoji ? <EmojiIcon emoji={emoji} /> : <DocumentIcon />}
        <Title>
          {emoji ? document.title.replace(emoji, "") : document.title}
        </Title>
--- a/app/scenes/Document/components/SharePopover.tsx
+++ b/app/scenes/Document/components/SharePopover.tsx
@@ -222,11 +222,7 @@ function SharePopover({
  return (
    <>
      <Heading>
-        {isPubliclyShared ? (
-          <GlobeIcon size={28} color="currentColor" />
-        ) : (
-          <PadlockIcon size={28} color="currentColor" />
-        )}
+        {isPubliclyShared ? <GlobeIcon size={28} /> : <PadlockIcon size={28} />}
        <span>{t("Share this document")}</span>
      </Heading>

@@ -327,7 +323,7 @@ function SharePopover({
          <span />
        ) : (
          <MoreOptionsButton
-            icon={<ExpandedIcon color="currentColor" />}
+            icon={<ExpandedIcon />}
            onClick={() => setExpandedOptions(true)}
            neutral
            borderOnHover
--- a/app/scenes/Drafts.tsx
+++ b/app/scenes/Drafts.tsx
@@ -51,7 +51,7 @@ function Drafts() {

  return (
    <Scene
-      icon={<EditIcon color="currentColor" />}
+      icon={<EditIcon />}
      title={t("Drafts")}
      actions={
        <>
--- a/app/scenes/Home.tsx
+++ b/app/scenes/Home.tsx
@@ -34,7 +34,7 @@ function Home() {

  return (
    <Scene
-      icon={<HomeIcon color="currentColor" />}
+      icon={<HomeIcon />}
      title={t("Home")}
      left={
        <InputSearchPage source="dashboard" label={t("Search documents")} />
--- a/app/scenes/Login/index.tsx
+++ b/app/scenes/Login/index.tsx
@@ -43,7 +43,7 @@ function Header({ config }: { config?: Config | undefined }) {

  return (
    <Back href={isSubdomain ? env.URL : "https://www.getoutline.com"}>
-      <BackIcon color="currentColor" /> {t("Back to home")}
+      <BackIcon /> {t("Back to home")}
    </Back>
  );
 }
@@ -169,7 +169,7 @@ function Login({ children }: Props) {
        <Header config={config} />
        <Centered align="center" justify="center" column auto>
          <PageTitle title={t("Check your email")} />
-          <CheckEmailIcon size={38} color="currentColor" />
+          <CheckEmailIcon size={38} />
          <Heading centered>{t("Check your email")}</Heading>
          <Note>
            <Trans
--- a/app/scenes/Search/components/RecentSearches.tsx
+++ b/app/scenes/Search/components/RecentSearches.tsx
@@ -37,7 +37,7 @@ function RecentSearches() {
                    searchQuery.delete();
                  }}
                >
-                  <CloseIcon color="currentColor" />
+                  <CloseIcon />
                </RemoveButton>
              </Tooltip>
            </RecentSearch>
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -133,7 +133,7 @@ function Details() {

  return (
    <ThemeProvider theme={newTheme}>
-      <Scene title={t("Details")} icon={<TeamIcon color="currentColor" />}>
+      <Scene title={t("Details")} icon={<TeamIcon />}>
        <Heading>{t("Details")}</Heading>
        <Text type="secondary">
          <Trans>
--- a/app/scenes/Settings/Export.tsx
+++ b/app/scenes/Settings/Export.tsx
@@ -48,7 +48,7 @@ function Export() {
  );

  return (
-    <Scene title={t("Export")} icon={<DownloadIcon color="currentColor" />}>
+    <Scene title={t("Export")} icon={<DownloadIcon />}>
      <Heading>{t("Export")}</Heading>
      <Text type="secondary">
        <Trans
--- a/app/scenes/Settings/Features.tsx
+++ b/app/scenes/Settings/Features.tsx
@@ -35,7 +35,7 @@ function Features() {
  };

  return (
-    <Scene title={t("Features")} icon={<BeakerIcon color="currentColor" />}>
+    <Scene title={t("Features")} icon={<BeakerIcon />}>
      <Heading>{t("Features")}</Heading>
      <Text type="secondary">
        <Trans>
--- a/app/scenes/Settings/GoogleAnalytics.tsx
+++ b/app/scenes/Settings/GoogleAnalytics.tsx
@@ -80,10 +80,7 @@ function GoogleAnalytics() {
  );

  return (
-    <Scene
-      title={t("Google Analytics")}
-      icon={<GoogleIcon color="currentColor" />}
-    >
+    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
      <Heading>{t("Google Analytics")}</Heading>

      <Text type="secondary">
--- a/app/scenes/Settings/Groups.tsx
+++ b/app/scenes/Settings/Groups.tsx
@@ -33,7 +33,7 @@ function Groups() {
  return (
    <Scene
      title={t("Groups")}
-      icon={<GroupIcon color="currentColor" />}
+      icon={<GroupIcon />}
      actions={
        <>
          {can.createGroup && (
--- a/app/scenes/Settings/Import.tsx
+++ b/app/scenes/Settings/Import.tsx
@@ -26,7 +26,7 @@ function Import() {
  const appName = env.APP_NAME;

  return (
-    <Scene title={t("Import")} icon={<NewDocumentIcon color="currentColor" />}>
+    <Scene title={t("Import")} icon={<NewDocumentIcon />}>
      <Heading>{t("Import")}</Heading>
      <Text type="secondary">
        <Trans>
--- a/app/scenes/Settings/Members.tsx
+++ b/app/scenes/Settings/Members.tsx
@@ -148,7 +148,7 @@ function Members() {
  return (
    <Scene
      title={t("Members")}
-      icon={<UserIcon color="currentColor" />}
+      icon={<UserIcon />}
      actions={
        <>
          {can.inviteUser && (
--- a/app/scenes/Settings/Notifications.tsx
+++ b/app/scenes/Settings/Notifications.tsx
@@ -35,7 +35,7 @@ function Notifications() {
  const options = [
    {
      event: NotificationEventType.PublishDocument,
-      icon: <PublishIcon color="currentColor" />,
+      icon: <PublishIcon />,
      title: t("Document published"),
      description: t(
        "Receive a notification whenever a new document is published"
@@ -43,7 +43,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.UpdateDocument,
-      icon: <EditIcon color="currentColor" />,
+      icon: <EditIcon />,
      title: t("Document updated"),
      description: t(
        "Receive a notification when a document you are subscribed to is edited"
@@ -51,7 +51,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.CreateComment,
-      icon: <CommentIcon color="currentColor" />,
+      icon: <CommentIcon />,
      title: t("Comment posted"),
      description: t(
        "Receive a notification when a document you are subscribed to or a thread you participated in receives a comment"
@@ -59,7 +59,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.MentionedInComment,
-      icon: <EmailIcon color="currentColor" />,
+      icon: <EmailIcon />,
      title: t("Mentioned"),
      description: t(
        "Receive a notification when someone mentions you in a document or comment"
@@ -67,7 +67,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.CreateCollection,
-      icon: <CollectionIcon color="currentColor" />,
+      icon: <CollectionIcon />,
      title: t("Collection created"),
      description: t(
        "Receive a notification whenever a new collection is created"
@@ -75,7 +75,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.InviteAccepted,
-      icon: <UserIcon color="currentColor" />,
+      icon: <UserIcon />,
      title: t("Invite accepted"),
      description: t(
        "Receive a notification when someone you invited creates an account"
@@ -83,7 +83,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.ExportCompleted,
-      icon: <CheckboxIcon checked color="currentColor" />,
+      icon: <CheckboxIcon checked />,
      title: t("Export completed"),
      description: t(
        "Receive a notification when an export you requested has been completed"
@@ -91,14 +91,14 @@ function Notifications() {
    },
    {
      visible: isCloudHosted,
-      icon: <AcademicCapIcon color="currentColor" />,
+      icon: <AcademicCapIcon />,
      event: NotificationEventType.Onboarding,
      title: t("Getting started"),
      description: t("Tips on getting started with features and functionality"),
    },
    {
      visible: isCloudHosted,
-      icon: <StarredIcon color="currentColor" />,
+      icon: <StarredIcon />,
      event: NotificationEventType.Features,
      title: t("New features"),
      description: t("Receive an email when new features of note are added"),
@@ -124,7 +124,7 @@ function Notifications() {
  const showSuccessNotice = window.location.search === "?success";

  return (
-    <Scene title={t("Notifications")} icon={<EmailIcon color="currentColor" />}>
+    <Scene title={t("Notifications")} icon={<EmailIcon />}>
      <Heading>{t("Notifications")}</Heading>

      {showSuccessNotice && (
--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -51,10 +51,7 @@ function Preferences() {
  };

  return (
-    <Scene
-      title={t("Preferences")}
-      icon={<SettingsIcon color="currentColor" />}
-    >
+    <Scene title={t("Preferences")} icon={<SettingsIcon />}>
      <Heading>{t("Preferences")}</Heading>
      <Text type="secondary">
        <Trans>Manage settings that affect your personal experience.</Trans>
--- a/app/scenes/Settings/Profile.tsx
+++ b/app/scenes/Settings/Profile.tsx
@@ -61,7 +61,7 @@ const Profile = () => {
  const { isSaving } = auth;

  return (
-    <Scene title={t("Profile")} icon={<ProfileIcon color="currentColor" />}>
+    <Scene title={t("Profile")} icon={<ProfileIcon />}>
      <Heading>{t("Profile")}</Heading>
      <Text type="secondary">
        <Trans>Manage how you appear to other members of the workspace.</Trans>
--- a/app/scenes/Settings/Security.tsx
+++ b/app/scenes/Settings/Security.tsx
@@ -137,7 +137,7 @@ function Security() {
  );

  return (
-    <Scene title={t("Security")} icon={<PadlockIcon color="currentColor" />}>
+    <Scene title={t("Security")} icon={<PadlockIcon />}>
      <Heading>{t("Security")}</Heading>
      <Text type="secondary">
        <Trans>
@@ -155,8 +155,7 @@ function Security() {
            key={provider.name}
            label={
              <Flex gap={8} align="center">
-                <PluginIcon id={provider.name} color="currentColor" />{" "}
-                {provider.displayName}
+                <PluginIcon id={provider.name} /> {provider.displayName}
              </Flex>
            }
            name={provider.name}
@@ -178,7 +177,7 @@ function Security() {
      <SettingRow
        label={
          <Flex gap={8} align="center">
-            <EmailIcon color="currentColor" /> {t("Email")}
+            <EmailIcon /> {t("Email")}
          </Flex>
        }
        name="guestSignin"
--- a/app/scenes/Settings/SelfHosted.tsx
+++ b/app/scenes/Settings/SelfHosted.tsx
@@ -79,10 +79,7 @@ function SelfHosted() {
  );

  return (
-    <Scene
-      title={t("Self Hosted")}
-      icon={<BuildingBlocksIcon color="currentColor" />}
-    >
+    <Scene title={t("Self Hosted")} icon={<BuildingBlocksIcon />}>
      <Heading>{t("Self Hosted")}</Heading>

      <form onSubmit={formHandleSubmit(handleSubmit)}>
--- a/app/scenes/Settings/Shares.tsx
+++ b/app/scenes/Settings/Shares.tsx
@@ -67,12 +67,12 @@ function Shares() {
  }, [shares.orderedData, shareIds]);

  return (
-    <Scene title={t("Shared Links")} icon={<LinkIcon color="currentColor" />}>
+    <Scene title={t("Shared Links")} icon={<LinkIcon />}>
      <Heading>{t("Shared Links")}</Heading>

      {can.manage && !canShareDocuments && (
        <>
-          <Notice icon={<WarningIcon color="currentColor" />}>
+          <Notice icon={<WarningIcon />}>
            {t("Sharing is currently disabled.")}{" "}
            <Trans
              defaults="You can globally enable and disable public document sharing in the <em>security settings</em>."
--- a/app/scenes/Settings/Tokens.tsx
+++ b/app/scenes/Settings/Tokens.tsx
@@ -27,7 +27,7 @@ function Tokens() {
  return (
    <Scene
      title={t("API Tokens")}
-      icon={<CodeIcon color="currentColor" />}
+      icon={<CodeIcon />}
      actions={
        <>
          {can.createApiKey && (
--- a/app/scenes/Settings/Zapier.tsx
+++ b/app/scenes/Settings/Zapier.tsx
@@ -14,7 +14,7 @@ function Zapier() {
  const appName = env.APP_NAME;

  return (
-    <Scene title="Zapier" icon={<ZapierIcon color="currentColor" />}>
+    <Scene title="Zapier" icon={<ZapierIcon />}>
      <Heading>Zapier</Heading>
      <Helmet>
        <script
--- a/app/scenes/Templates.tsx
+++ b/app/scenes/Templates.tsx
@@ -25,7 +25,7 @@ function Templates(props: RouteComponentProps<{ sort: string }>) {

  return (
    <Scene
-      icon={<ShapesIcon color="currentColor" />}
+      icon={<ShapesIcon />}
      title={t("Templates")}
      actions={
        <Action>
--- a/app/scenes/Trash.tsx
+++ b/app/scenes/Trash.tsx
@@ -13,7 +13,7 @@ function Trash() {
  const { t } = useTranslation();
  const { documents } = useStores();
  return (
-    <Scene icon={<TrashIcon color="currentColor" />} title={t("Trash")}>
+    <Scene icon={<TrashIcon />} title={t("Trash")}>
      <Heading>{t("Trash")}</Heading>
      <PaginatedDocumentList
        documents={documents.deleted}