chore: Refactor icon components

fix: Alignment of Outline logo component

app/actions/definitions/collections.tsx

@@ -12,7 +12,7 @@ import Collection from "~/models/Collection";
 import CollectionEdit from "~/scenes/CollectionEdit";
 import CollectionNew from "~/scenes/CollectionNew";
 import CollectionPermissions from "~/scenes/CollectionPermissions";
-import DynamicCollectionIcon from "~/components/CollectionIcon";
+import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
 import history from "~/utils/history";

app/components/Branding.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths } from "@shared/styles";
 import env from "~/env";
-import OutlineLogo from "./OutlineLogo";
+import OutlineIcon from "./Icons/OutlineIcon";
 
 type Props = {
   href?: string;
@@ -12,7 +12,7 @@ type Props = {
 function Branding({ href = env.URL }: Props) {
   return (
     <Link href={href}>
-      <OutlineLogo size={16} />
+      <OutlineIcon size={20} />
       &nbsp;Outline
     </Link>
   );

app/components/DefaultCollectionInputSelect.tsx

@@ -2,8 +2,8 @@ import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Optional } from "utility-types";
-import CollectionIcon from "~/components/CollectionIcon";
 import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSelect from "~/components/InputSelect";
 import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";

app/components/DocumentBreadcrumb.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
-import CollectionIcon from "~/components/CollectionIcon";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink, NavigationNode } from "~/types";
 import { collectionUrl } from "~/utils/routeHelpers";

app/components/DocumentCard.tsx

@@ -13,8 +13,8 @@ import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
-import CollectionIcon from "./CollectionIcon";
-import EmojiIcon from "./EmojiIcon";
+import CollectionIcon from "./Icons/CollectionIcon";
+import EmojiIcon from "./Icons/EmojiIcon";
 import Squircle from "./Squircle";
 import Text from "./Text";
 import Tooltip from "./Tooltip";

app/components/ExportDialog.tsx

@@ -7,7 +7,7 @@ import { FileOperationFormat } from "@shared/types";
 import Collection from "~/models/Collection";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Flex from "~/components/Flex";
-import MarkdownIcon from "~/components/Icons/Markdown";
+import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";

app/components/GithubLogo.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function GithubLogo({ size = 34, fill = "#FFF", className }: Props) {
-  return (
-    <svg
-      fill={fill}
-      width={size}
-      height={size}
-      viewBox="0 0 36 36"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        fill="#191717"
-        d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5  c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1  c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4  c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7  c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5  c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"
-      />
-    </svg>
-  );
-}
-
-export default GithubLogo;

app/components/Icons/CollectionIcon.tsx

@@ -8,9 +8,13 @@ import useStores from "~/hooks/useStores";
 import Logger from "~/utils/Logger";
 
 type Props = {
+  /** The collection to show an icon for */
   collection: Collection;
+  /** Whether the icon should be the "expanded" graphic when displaying the default collection icon */
   expanded?: boolean;
+  /** The size of the icon, 24px is default to match standard icons */
   size?: number;
+  /** The color of the icon, defaults to the collection color */
   color?: string;
 };
 

app/components/Icons/MarkdownIcon.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 
 type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
   size?: number;
+  /** The color of the icon, defaults to the current text color */
   color?: string;
 };
 

app/components/Icons/OutlineIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+  /* Whether the safe area should be removed and have graphic across full size */
+  cover?: boolean;
+};
+
+export default function OutlineIcon({
+  size = 24,
+  cover,
+  color = "currentColor",
+}: Props) {
+  return (
+    <svg
+      fill={color}
+      width={size}
+      height={size}
+      viewBox={cover ? "2 2 20 20" : "0 0 24 24"}
+      version="1.1"
+    >
+      <path d="M14.6667 20.2155V20.7163C14.6667 21.4253 14.0697 22 13.3333 22C13.1044 22 12.8792 21.9432 12.6797 21.8351L4.67965 17.5028C4.25982 17.2754 4 16.8478 4 16.384V7.61623C4 7.15248 4.25982 6.72478 4.67965 6.49742L12.6797 2.16508C13.3215 1.81751 14.1344 2.03666 14.4954 2.65456C14.6077 2.8467 14.6667 3.06343 14.6667 3.28388V3.78471L15.6169 3.51027C16.3222 3.30655 17.0655 3.69189 17.2771 4.37093C17.3144 4.49059 17.3333 4.61486 17.3333 4.73979V5.26091L18.5013 5.12036C19.232 5.03242 19.8984 5.53141 19.9897 6.23488C19.9966 6.2877 20 6.34088 20 6.3941V17.6061C20 18.3151 19.403 18.8898 18.6667 18.8898C18.6114 18.8898 18.5561 18.8865 18.5013 18.8799L17.3333 18.7393V19.2604C17.3333 19.9694 16.7364 20.5441 16 20.5441C15.8702 20.5441 15.7412 20.5259 15.6169 20.49L14.6667 20.2155ZM14.6667 18.8753L16 19.2604V4.73979L14.6667 5.12488V18.8753ZM17.3333 6.55456V17.4457L18.6667 17.6061V6.3941L17.3333 6.55456ZM5.33333 7.61623V16.384L13.3333 20.7163V3.28388L5.33333 7.61623ZM6.66667 8.47006L8 7.82823V16.172L6.66667 15.5302V8.47006Z" />
+    </svg>
+  );
+}

app/components/Icons/SlackIcon.tsx

@@ -1,15 +1,21 @@
 import * as React from "react";
 
 type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
   color?: string;
 };
 
-export default function SlackIcon({ color = "#4E5C6E" }: Props) {
+export default function SlackIcon({
+  size = 24,
+  color = "currentColor",
+}: Props) {
   return (
     <svg
       fill={color}
-      width="24px"
-      height="24px"
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       version="1.1"
     >

app/components/Icons/ZapierIcon.tsx

@@ -1,15 +1,21 @@
 import * as React from "react";
 
 type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
   color?: string;
 };
 
-export default function ZapierIcon({ color = "#4E5C6E" }: Props) {
+export default function ZapierIcon({
+  size = 24,
+  color = "currentColor",
+}: Props) {
   return (
     <svg
+      width={size}
+      height={size}
       fill={color}
-      width="24px"
-      height="24px"
       viewBox="0 0 24 24"
       version="1.1"
     >

app/components/OutlineLogo.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function OutlineLogo({ size = 32, fill = "#333", className }: Props) {
-  return (
-    <svg
-      fill={fill}
-      width={size}
-      height={size}
-      viewBox="0 0 64 64"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path d="M32,57.6 L32,59.1606101 C32,61.3697491 30.209139,63.1606101 28,63.1606101 C27.3130526,63.1606101 26.6376816,62.9836959 26.038955,62.6469122 L2.03895504,49.1469122 C0.779447116,48.438439 -4.3614532e-15,47.1057033 -7.10542736e-15,45.6606101 L-7.10542736e-15,18.3393899 C-7.28240024e-15,16.8942967 0.779447116,15.561561 2.03895504,14.8530878 L26.038955,1.35308779 C27.9643866,0.270032565 30.4032469,0.952913469 31.4863021,2.87834498 C31.8230858,3.47707155 32,4.15244252 32,4.83938994 L32,6.4 L34.8506085,5.54481746 C36.9665799,4.91002604 39.1965137,6.11075966 39.8313051,8.22673106 C39.9431692,8.59961116 40,8.98682435 40,9.3761226 L40,11 L43.5038611,10.5620174 C45.6959408,10.2880074 47.6951015,11.8429102 47.9691115,14.0349899 C47.9896839,14.1995692 48,14.3652688 48,14.5311289 L48,49.4688711 C48,51.6780101 46.209139,53.4688711 44,53.4688711 C43.8341399,53.4688711 43.6684404,53.458555 43.5038611,53.4379826 L40,53 L40,54.6238774 C40,56.8330164 38.209139,58.6238774 36,58.6238774 C35.6107017,58.6238774 35.2234886,58.5670466 34.8506085,58.4551825 L32,57.6 Z M32,53.4238774 L36,54.6238774 L36,9.3761226 L32,10.5761226 L32,53.4238774 Z M40,15.0311289 L40,48.9688711 L44,49.4688711 L44,14.5311289 L40,15.0311289 Z M5.32907052e-15,44.4688711 L5.32907052e-15,19.5311289 L3.55271368e-15,44.4688711 Z M4,18.3393899 L4,45.6606101 L28,59.1606101 L28,4.83938994 L4,18.3393899 Z M8,21 L12,19 L12,45 L8,43 L8,21 Z" />
-    </svg>
-  );
-}
-
-export default OutlineLogo;

app/components/PathToDocument.tsx

@@ -5,8 +5,8 @@ import styled from "styled-components";
 import { DocumentPath } from "~/stores/CollectionsStore";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import CollectionIcon from "~/components/CollectionIcon";
 import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 
 type Props = {
   result: DocumentPath;

app/components/Sidebar/components/CollectionLink.tsx

@@ -8,8 +8,8 @@ import { useHistory } from "react-router-dom";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import DocumentReparent from "~/scenes/DocumentReparent";
-import CollectionIcon from "~/components/CollectionIcon";
 import Fade from "~/components/Fade";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
 import { createDocument } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";

app/components/Sidebar/components/StarredLink.tsx

@@ -9,8 +9,8 @@ import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import parseTitle from "@shared/utils/parseTitle";
 import Star from "~/models/Star";
-import EmojiIcon from "~/components/EmojiIcon";
 import Fade from "~/components/Fade";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
 import useBoolean from "~/hooks/useBoolean";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";

app/hooks/useAuthorizedSettingsConfig.ts

@@ -32,8 +32,8 @@ import Slack from "~/scenes/Settings/Slack";
 import Tokens from "~/scenes/Settings/Tokens";
 import Webhooks from "~/scenes/Settings/Webhooks";
 import Zapier from "~/scenes/Settings/Zapier";
-import SlackIcon from "~/components/SlackIcon";
-import ZapierIcon from "~/components/ZapierIcon";
+import SlackIcon from "~/components/Icons/SlackIcon";
+import ZapierIcon from "~/components/Icons/ZapierIcon";
 import env from "~/env";
 import isCloudHosted from "~/utils/isCloudHosted";
 import { accountPreferencesPath } from "~/utils/routeHelpers";

app/menus/DocumentMenu.tsx

@@ -15,12 +15,12 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { getEventFiles } from "@shared/utils/files";
 import Document from "~/models/Document";
-import CollectionIcon from "~/components/CollectionIcon";
 import ContextMenu from "~/components/ContextMenu";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
 import Separator from "~/components/ContextMenu/Separator";
 import Template from "~/components/ContextMenu/Template";
 import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import Switch from "~/components/Switch";
 import { actionToMenuItem } from "~/actions";
 import {

app/menus/NewDocumentMenu.tsx

@@ -6,10 +6,10 @@ import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Button from "~/components/Button";
-import CollectionIcon from "~/components/CollectionIcon";
 import ContextMenu from "~/components/ContextMenu";
 import Header from "~/components/ContextMenu/Header";
 import Template from "~/components/ContextMenu/Template";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";

app/menus/NewTemplateMenu.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
 import Button from "~/components/Button";
-import CollectionIcon from "~/components/CollectionIcon";
 import ContextMenu from "~/components/ContextMenu";
 import Header from "~/components/ContextMenu/Header";
 import Template from "~/components/ContextMenu/Template";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";

app/scenes/Collection.tsx

@@ -17,8 +17,8 @@ import Search from "~/scenes/Search";
 import Badge from "~/components/Badge";
 import CenteredContent from "~/components/CenteredContent";
 import CollectionDescription from "~/components/CollectionDescription";
-import CollectionIcon from "~/components/CollectionIcon";
 import Heading from "~/components/Heading";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSearchPage from "~/components/InputSearchPage";
 import PlaceholderList from "~/components/List/Placeholder";
 import PaginatedDocumentList from "~/components/PaginatedDocumentList";

app/scenes/Document/components/ReferenceListItem.tsx

@@ -5,8 +5,8 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 import parseTitle from "@shared/utils/parseTitle";
 import Document from "~/models/Document";
-import EmojiIcon from "~/components/EmojiIcon";
 import Flex from "~/components/Flex";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
 import { hover } from "~/styles";
 import { NavigationNode } from "~/types";
 import { sharedDocumentPath } from "~/utils/routeHelpers";

app/scenes/Login/index.tsx

@@ -12,8 +12,8 @@ import ButtonLarge from "~/components/ButtonLarge";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
+import OutlineIcon from "~/components/Icons/OutlineIcon";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import OutlineLogo from "~/components/OutlineLogo";
 import PageTitle from "~/components/PageTitle";
 import TeamLogo from "~/components/TeamLogo";
 import Text from "~/components/Text";
@@ -197,7 +197,7 @@ function Login({ children }: Props) {
           {config.logo && !isCreate ? (
             <TeamLogo size={48} src={config.logo} />
           ) : (
-            <OutlineLogo size={42} fill="currentColor" />
+            <OutlineIcon size={48} />
           )}
         </Logo>
         {isCreate ? (

app/scenes/Settings/Import.tsx

@@ -7,8 +7,8 @@ import { cdnPath } from "@shared/utils/urls";
 import FileOperation from "~/models/FileOperation";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
+import OutlineIcon from "~/components/Icons/OutlineIcon";
 import Item from "~/components/List/Item";
-import OutlineLogo from "~/components/OutlineLogo";
 import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
@@ -35,7 +35,7 @@ function Import() {
       <div>
         <Item
           border={false}
-          image={<OutlineLogo size={28} fill="currentColor" />}
+          image={<OutlineIcon size={28} cover />}
           title="Outline"
           subtitle={t(
             "Import a backup file that was previously exported from Outline"

app/scenes/Settings/Slack.tsx

@@ -7,13 +7,13 @@ import { IntegrationType } from "@shared/types";
 import Collection from "~/models/Collection";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
-import CollectionIcon from "~/components/CollectionIcon";
 import Heading from "~/components/Heading";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
+import SlackIcon from "~/components/Icons/SlackIcon";
 import List from "~/components/List";
 import ListItem from "~/components/List/Item";
 import Notice from "~/components/Notice";
 import Scene from "~/components/Scene";
-import SlackIcon from "~/components/SlackIcon";
 import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";

app/scenes/Settings/Zapier.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { Helmet } from "react-helmet";
 import { Trans } from "react-i18next";
 import Heading from "~/components/Heading";
+import ZapierIcon from "~/components/Icons/ZapierIcon";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
-import ZapierIcon from "~/components/ZapierIcon";
 import useStores from "~/hooks/useStores";
 
 function Zapier() {

app/scenes/Settings/components/SlackListItem.tsx

@@ -9,8 +9,8 @@ import Collection from "~/models/Collection";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
 import ButtonLink from "~/components/ButtonLink";
-import CollectionIcon from "~/components/CollectionIcon";
 import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import ListItem from "~/components/List/Item";
 import Popover from "~/components/Popover";
 import Switch from "~/components/Switch";