fix: Minor layout issues (#11030)

* fix: History empty state

* fix: Layout issues in import dialog

app/scenes/Document/components/History.tsx

@@ -20,6 +20,7 @@ import Switch from "~/components/Switch";
 import Text from "@shared/components/Text";
 import usePersistedState from "~/hooks/usePersistedState";
 import Scrollable from "~/components/Scrollable";
+import Flex from "@shared/components/Flex";
 
 const DocumentEvents = [
   "documents.publish",
@@ -213,9 +214,14 @@ function History() {
             items={items}
             document={document}
             empty={
-              <Content>
+              <Flex
+                align="center"
+                justify="center"
+                style={{ height: "100%" }}
+                auto
+              >
                 <Empty>{t("No history yet")}</Empty>
-              </Content>
+              </Flex>
             }
           />
         ) : null}

app/scenes/Settings/components/DropToImport.tsx

@@ -16,7 +16,6 @@ import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import { EmptySelectValue } from "~/types";
 import { uploadFile } from "~/utils/files";
-import { VStack } from "~/components/primitives/VStack";
 
 type Props = {
   children: JSX.Element;
@@ -77,7 +76,7 @@ function DropToImport({ disabled, onSubmit, children, format }: Props) {
   }
 
   return (
-    <VStack>
+    <Flex gap={8} column>
       {isImporting && <LoadingIndicator />}
       <Text as="p" type="secondary">
         <Dropzone
@@ -123,7 +122,7 @@ function DropToImport({ disabled, onSubmit, children, format }: Props) {
           {isImporting ? t("Uploading") + "…" : t("Start import")}
         </Button>
       </Flex>
-    </VStack>
+    </Flex>
   );
 }
 

app/scenes/Settings/components/HelpDisclosure.tsx

@@ -1,75 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { QuestionMarkIcon } from "outline-icons";
-import * as React from "react";
-import styled, { useTheme } from "styled-components";
-import Button from "~/components/Button";
-import Text from "~/components/Text";
-
-type Props = {
-  children?: React.ReactNode;
-  title: string;
-};
-
-const HelpDisclosure: React.FC<Props> = ({ title, children }: Props) => {
-  const theme = useTheme();
-
-  return (
-    <Collapsible.Root>
-      <Collapsible.Trigger asChild>
-        <StyledButton
-          icon={<QuestionMarkIcon color={theme.textSecondary} />}
-          neutral
-          aria-label={title}
-          borderOnHover
-        />
-      </Collapsible.Trigger>
-      <HelpContent>
-        <Text as="p" type="secondary">
-          {children}
-        </Text>
-      </HelpContent>
-    </Collapsible.Root>
-  );
-};
-
-const StyledButton = styled(Button)`
-  position: absolute;
-  top: 20px;
-  right: 50px;
-`;
-
-const HelpContent = styled(Collapsible.Content)`
-  overflow: hidden;
-
-  &[data-state="open"] {
-    animation: slideDown 250ms ease-out;
-  }
-
-  &[data-state="closed"] {
-    animation: slideUp 250ms ease-out;
-  }
-
-  @keyframes slideDown {
-    from {
-      height: 0;
-      opacity: 0;
-    }
-    to {
-      height: var(--radix-collapsible-content-height);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slideUp {
-    from {
-      height: var(--radix-collapsible-content-height);
-      opacity: 1;
-    }
-    to {
-      height: 0;
-      opacity: 0;
-    }
-  }
-`;
-
-export default HelpDisclosure;

app/scenes/Settings/components/ImportJSONDialog.tsx

@@ -1,18 +1,17 @@
-import { Trans, useTranslation } from "react-i18next";
+import { Trans } from "react-i18next";
 import { FileOperationFormat } from "@shared/types";
 import env from "~/env";
 import useStores from "~/hooks/useStores";
 import DropToImport from "./DropToImport";
-import HelpDisclosure from "./HelpDisclosure";
+import Text from "@shared/components/Text";
 
 function ImportJSONDialog() {
-  const { t } = useTranslation();
   const { dialogs } = useStores();
   const appName = env.APP_NAME;
 
   return (
     <>
-      <HelpDisclosure title={t("How does this work?")}>
+      <Text as="p">
         <Trans
           defaults="You can import a zip file that was previously exported from the JSON option in another instance. In {{ appName }}, open <em>Export</em> in the Settings sidebar and click on <em>Export Data</em>."
           values={{ appName }}
@@ -20,7 +19,7 @@ function ImportJSONDialog() {
             em: <strong />,
           }}
         />
-      </HelpDisclosure>
+      </Text>
       <DropToImport
         onSubmit={dialogs.closeAllModals}
         format={FileOperationFormat.JSON}

app/scenes/Settings/components/ImportMarkdownDialog.tsx

@@ -1,25 +1,24 @@
-import { Trans, useTranslation } from "react-i18next";
+import { Trans } from "react-i18next";
 import { FileOperationFormat } from "@shared/types";
 import env from "~/env";
 import useStores from "~/hooks/useStores";
 import DropToImport from "./DropToImport";
-import HelpDisclosure from "./HelpDisclosure";
+import Text from "@shared/components/Text";
 
 function ImportMarkdownDialog() {
-  const { t } = useTranslation();
   const { dialogs } = useStores();
   const appName = env.APP_NAME;
 
   return (
     <>
-      <HelpDisclosure title={t("How does this work?")}>
+      <Text as="p">
         <Trans
           defaults="You can import a zip file that was previously exported from an Outline installation – collections, documents, and images will be imported. In Outline, open <em>Export</em> in the Settings sidebar and click on <em>Export Data</em>."
           components={{
             em: <strong />,
           }}
         />
-      </HelpDisclosure>
+      </Text>
       <DropToImport
         onSubmit={dialogs.closeAllModals}
         format={FileOperationFormat.MarkdownZip}

shared/i18n/locales/en_US/translation.json

@@ -1092,7 +1092,6 @@
   "Date created": "Date created",
   "Crop Image": "Crop Image",
   "Crop image": "Crop image",
-  "How does this work?": "How does this work?",
   "You can import a zip file that was previously exported from the JSON option in another instance. In {{ appName }}, open <em>Export</em> in the Settings sidebar and click on <em>Export Data</em>.": "You can import a zip file that was previously exported from the JSON option in another instance. In {{ appName }}, open <em>Export</em> in the Settings sidebar and click on <em>Export Data</em>.",
   "Drag and drop the zip file from the JSON export option in {{appName}}, or click to upload": "Drag and drop the zip file from the JSON export option in {{appName}}, or click to upload",
   "Canceled": "Canceled",