diff --git a/app/actions/definitions/collections.tsx b/app/actions/definitions/collections.tsx index 9f127334f..8efabd190 100644 --- a/app/actions/definitions/collections.tsx +++ b/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"; diff --git a/app/components/Branding.tsx b/app/components/Branding.tsx index 4f9635663..934a2ae48 100644 --- a/app/components/Branding.tsx +++ b/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 ( - +  Outline ); diff --git a/app/components/DefaultCollectionInputSelect.tsx b/app/components/DefaultCollectionInputSelect.tsx index c6e363334..c811dc0c9 100644 --- a/app/components/DefaultCollectionInputSelect.tsx +++ b/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"; diff --git a/app/components/DocumentBreadcrumb.tsx b/app/components/DocumentBreadcrumb.tsx index 167c6e1e5..78e6399d9 100644 --- a/app/components/DocumentBreadcrumb.tsx +++ b/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"; diff --git a/app/components/DocumentCard.tsx b/app/components/DocumentCard.tsx index da5fd872c..c295f539a 100644 --- a/app/components/DocumentCard.tsx +++ b/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"; diff --git a/app/components/ExportDialog.tsx b/app/components/ExportDialog.tsx index 00d59681c..8de85d491 100644 --- a/app/components/ExportDialog.tsx +++ b/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"; diff --git a/app/components/GithubLogo.tsx b/app/components/GithubLogo.tsx deleted file mode 100644 index 803277628..000000000 --- a/app/components/GithubLogo.tsx +++ /dev/null @@ -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 ( - - - - ); -} - -export default GithubLogo; diff --git a/app/components/CollectionIcon.tsx b/app/components/Icons/CollectionIcon.tsx similarity index 83% rename from app/components/CollectionIcon.tsx rename to app/components/Icons/CollectionIcon.tsx index 5e259e52e..cef77a8f8 100644 --- a/app/components/CollectionIcon.tsx +++ b/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; }; diff --git a/app/components/EmojiIcon.tsx b/app/components/Icons/EmojiIcon.tsx similarity index 100% rename from app/components/EmojiIcon.tsx rename to app/components/Icons/EmojiIcon.tsx diff --git a/app/components/Icons/Markdown.tsx b/app/components/Icons/MarkdownIcon.tsx similarity index 86% rename from app/components/Icons/Markdown.tsx rename to app/components/Icons/MarkdownIcon.tsx index 61b1d098d..f77bdb087 100644 --- a/app/components/Icons/Markdown.tsx +++ b/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; }; diff --git a/app/components/Icons/OutlineIcon.tsx b/app/components/Icons/OutlineIcon.tsx new file mode 100644 index 000000000..05fa32927 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/app/components/SlackIcon.tsx b/app/components/Icons/SlackIcon.tsx similarity index 89% rename from app/components/SlackIcon.tsx rename to app/components/Icons/SlackIcon.tsx index bb520dcf1..f27bff5fa 100644 --- a/app/components/SlackIcon.tsx +++ b/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 ( diff --git a/app/components/ZapierIcon.tsx b/app/components/Icons/ZapierIcon.tsx similarity index 87% rename from app/components/ZapierIcon.tsx rename to app/components/Icons/ZapierIcon.tsx index fe48fde35..e52109472 100644 --- a/app/components/ZapierIcon.tsx +++ b/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 ( diff --git a/app/components/OutlineLogo.tsx b/app/components/OutlineLogo.tsx deleted file mode 100644 index 81eb48551..000000000 --- a/app/components/OutlineLogo.tsx +++ /dev/null @@ -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 ( - - - - ); -} - -export default OutlineLogo; diff --git a/app/components/PathToDocument.tsx b/app/components/PathToDocument.tsx index a449170ab..d35b1d149 100644 --- a/app/components/PathToDocument.tsx +++ b/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; diff --git a/app/components/Sidebar/components/CollectionLink.tsx b/app/components/Sidebar/components/CollectionLink.tsx index 0cdcb04eb..83460d27d 100644 --- a/app/components/Sidebar/components/CollectionLink.tsx +++ b/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"; diff --git a/app/components/Sidebar/components/StarredLink.tsx b/app/components/Sidebar/components/StarredLink.tsx index 843672629..368441c91 100644 --- a/app/components/Sidebar/components/StarredLink.tsx +++ b/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"; diff --git a/app/hooks/useAuthorizedSettingsConfig.ts b/app/hooks/useAuthorizedSettingsConfig.ts index 0472c8e82..022f22e7c 100644 --- a/app/hooks/useAuthorizedSettingsConfig.ts +++ b/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"; diff --git a/app/menus/DocumentMenu.tsx b/app/menus/DocumentMenu.tsx index 6ec7c5ac0..f9d64a188 100644 --- a/app/menus/DocumentMenu.tsx +++ b/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 { diff --git a/app/menus/NewDocumentMenu.tsx b/app/menus/NewDocumentMenu.tsx index 1e9aa7acb..91ca300b1 100644 --- a/app/menus/NewDocumentMenu.tsx +++ b/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"; diff --git a/app/menus/NewTemplateMenu.tsx b/app/menus/NewTemplateMenu.tsx index e812bc575..0932b82ba 100644 --- a/app/menus/NewTemplateMenu.tsx +++ b/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"; diff --git a/app/scenes/Collection.tsx b/app/scenes/Collection.tsx index 05080b75e..344b6d7de 100644 --- a/app/scenes/Collection.tsx +++ b/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"; diff --git a/app/scenes/Document/components/ReferenceListItem.tsx b/app/scenes/Document/components/ReferenceListItem.tsx index 6a69f5419..c1fa99b82 100644 --- a/app/scenes/Document/components/ReferenceListItem.tsx +++ b/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"; diff --git a/app/scenes/Login/index.tsx b/app/scenes/Login/index.tsx index 9cfb299a5..c0ddc1120 100644 --- a/app/scenes/Login/index.tsx +++ b/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 ? ( ) : ( - + )} {isCreate ? ( diff --git a/app/scenes/Settings/Import.tsx b/app/scenes/Settings/Import.tsx index 5489deb1e..f73891bba 100644 --- a/app/scenes/Settings/Import.tsx +++ b/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() {
} + image={} title="Outline" subtitle={t( "Import a backup file that was previously exported from Outline" diff --git a/app/scenes/Settings/Slack.tsx b/app/scenes/Settings/Slack.tsx index 48e92caee..d24b620d4 100644 --- a/app/scenes/Settings/Slack.tsx +++ b/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"; diff --git a/app/scenes/Settings/Zapier.tsx b/app/scenes/Settings/Zapier.tsx index 5d88a0e09..b992497ba 100644 --- a/app/scenes/Settings/Zapier.tsx +++ b/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() { diff --git a/app/scenes/Settings/components/SlackListItem.tsx b/app/scenes/Settings/components/SlackListItem.tsx index f11c556f4..fd8da5e8d 100644 --- a/app/scenes/Settings/components/SlackListItem.tsx +++ b/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";