Design System Clean #1 (#541)

* Add Design System Page * Replace All Buttons * Use same Page element everywhere * Strange newline change * Remove Unused Code * Completely Removed Old Button * Tweak Your Charts Page Design * More button cohesion * Unified InfoIconWithTooltip * Remove Reach, Centralize Dialog * Add translations * Layout Tab Fixes * Fix Failing Test * Dark Mode * Convert Tooltip to Popover for Mobile * Translations
tone-row · Jul 11, 2023 · f897dcd · f897dcd
1 parent f8555cf
commit f897dcd
Show file tree

Hide file tree

Showing 87 changed files with 3,136 additions and 4,013 deletions.
diff --git a/api/data/import.ts b/api/data/import.ts
@@ -5,20 +5,13 @@ import { parse } from "csv-parse/sync";
 // @ts-ignore
 import type { Readable } from "node:stream";
 
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
-
 /**
  * Receives text/csv content in post request
  * Needs to parse it
  */
 export default async function (req: VercelRequest, res: VercelResponse) {
   if (req.method === "POST") {
-    const buf = await buffer(req);
-    const rawBody = buf.toString("utf8");
+    const rawBody = req.body?.text;
     if (!rawBody) {
       res.status(400).end("Bad Request");
       return;
@@ -65,11 +58,3 @@ export default async function (req: VercelRequest, res: VercelResponse) {
     res.status(405).end("Method Not Allowed");
   }
 }
-
-async function buffer(readable: Readable) {
-  const chunks = [];
-  for await (const chunk of readable) {
-    chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
-  }
-  return Buffer.concat(chunks);
-}
diff --git a/app/package.json b/app/package.json
@@ -46,10 +46,6 @@
     "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toggle": "^0.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "@reach/dialog": "^0.15.0",
-    "@reach/tooltip": "^0.16.0",
-    "@reach/utils": "^0.16.0",
-    "@reach/visually-hidden": "^0.16.0",
     "@react-hook/throttle": "^2.2.0",
     "@sendgrid/mail": "^7.4.6",
     "@sentry/react": "^7.38.0",
@@ -67,6 +63,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "buffer": "^6.0.3",
+    "classnames": "^2.3.2",
     "core-js": "^3.18.1",
     "cytoscape": "^3.25.0",
     "cytoscape-cose-bilkent": "^4.1.0",

diff --git a/app/src/components/App.tsx b/app/src/components/App.tsx
@@ -1,3 +1,4 @@
+import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
 import * as Sentry from "@sentry/react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
@@ -14,13 +15,14 @@ export const stripePromise = loadStripe(
   process.env.REACT_APP_STRIPE_KEY as string
 );
 
-import { t } from "@lingui/macro";
+import { Trans } from "@lingui/macro";
+import { House, Recycle } from "phosphor-react";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { BrowserRouter } from "react-router-dom";
 
+import { Button2 } from "../ui/Shared";
 import Loading from "./Loading";
 import { pageHeight } from "./pageHeight";
-import { Button } from "./Shared";
 
 pageHeight();
 
@@ -33,7 +35,9 @@ export default function App() {
             <I18n>
               <Elements stripe={stripePromise}>
                 <Suspense fallback={<Loading />}>
-                  <Router />
+                  <TooltipProvider>
+                    <Router />
+                  </TooltipProvider>
                   <ReactQueryDevtools />
                 </Suspense>
               </Elements>
@@ -59,16 +63,21 @@ export function ErrorFallback({ error }: { error: Error }) {
           <pre>{error.message}</pre>
         </div>
         <Box flow="column" gap={2}>
-          <Button
+          <Button2
             onClick={() => window.location.reload()}
-            text={t`Try again`}
-          />
-          <Button
+            color="blue"
+            leftIcon={<Recycle size={16} />}
+          >
+            <Trans>Try again</Trans>
+          </Button2>
+          <Button2
             onClick={() => {
               location.href = "/";
             }}
-            text={t`Home`}
-          />
+            leftIcon={<House size={16} />}
+          >
+            <Trans>Home</Trans>
+          </Button2>
         </Box>
       </Box>
     </div>

diff --git a/app/src/components/ClearTextButton.tsx b/app/src/components/ClearTextButton.tsx
@@ -1,48 +1,41 @@
-import { t, Trans } from "@lingui/macro";
+import { Trans } from "@lingui/macro";
+import * as Dialog from "@radix-ui/react-dialog";
 import { Trash } from "phosphor-react";
 import { useState } from "react";
 
-import { Box } from "../slang";
-import styles from "./ClearTextButton.module.css";
-import { Button, Dialog, smallIconSize } from "./Shared";
+import { Content, Overlay } from "../ui/Dialog";
+import { Button2, IconButton2 } from "../ui/Shared";
+import { SectionTitle } from "../ui/Typography";
 
 export function ClearTextButton({ handleClear }: { handleClear: () => void }) {
   const [dialogOpen, setDialogOpen] = useState(false);
   return (
-    <>
-      <Box
-        as="button"
-        p={2}
-        rad={1}
-        className={styles.ClearTextButton}
-        onClick={() => setDialogOpen((x) => !x)}
-      >
-        <Trash size={smallIconSize} />
-      </Box>
-      <Dialog
-        innerBoxProps={{
-          gap: 3,
-          flow: "column",
-          items: "center normal",
-          template: "auto / minmax(0, 1fr) min-content min-content",
-        }}
-        dialogProps={{
-          isOpen: dialogOpen,
-          onDismiss: () => setDialogOpen(false),
-          "aria-label": t`Clear text?`,
-        }}
-      >
-        <Trans>Clear text?</Trans>
-        <Button
-          onClick={() => {
-            handleClear();
-            setDialogOpen(false);
-          }}
-          className={styles.Clear}
-          text={t`Clear`}
-        />
-        <Button onClick={() => setDialogOpen(false)} text={t`Cancel`} />
-      </Dialog>
-    </>
+    <Dialog.Root open={dialogOpen} onOpenChange={(open) => setDialogOpen(open)}>
+      <Dialog.Trigger asChild>
+        <IconButton2 className="!absolute bottom-1 right-1 md:hidden">
+          <Trash size={16} />
+        </IconButton2>
+      </Dialog.Trigger>
+      <Overlay />
+      <Content>
+        <SectionTitle>
+          <Trans>Clear text?</Trans>
+        </SectionTitle>
+        <div className="flex flex-row justify-between items-center">
+          <Button2 onClick={() => setDialogOpen(false)}>
+            <Trans>Cancel</Trans>
+          </Button2>
+          <Button2
+            onClick={() => {
+              handleClear();
+              setDialogOpen(false);
+            }}
+            color="red"
+          >
+            <Trans>Clear</Trans>
+          </Button2>
+        </div>
+      </Content>
+    </Dialog.Root>
   );
 }
diff --git a/app/src/components/CloneButton.tsx b/app/src/components/CloneButton.tsx
@@ -1,16 +1,17 @@
 import { Trans } from "@lingui/macro";
-import { FaCopy } from "react-icons/fa";
+import { CopySimple } from "phosphor-react";
 import { useHistory } from "react-router-dom";
 
 import { randomChartName, titleToLocalStorageKey } from "../lib/helpers";
 import { docToString, useDoc } from "../lib/useDoc";
+import { Button2 } from "../ui/Shared";
 
 export function CloneButton() {
   const { push } = useHistory();
   const fullText = useDoc((s) => docToString(s));
   return (
-    <button
-      className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 flex items-center gap-2"
+    <Button2
+      color="blue"
       onClick={() => {
         const newChartTitle = randomChartName();
         window.localStorage.setItem(
@@ -19,11 +20,9 @@ export function CloneButton() {
         );
         push(`/${newChartTitle}`);
       }}
+      rightIcon={<CopySimple size={16} />}
     >
-      <FaCopy size={20} />
-      <span className="text font-bold">
-        <Trans>Clone</Trans>
-      </span>
-    </button>
+      <Trans>Clone</Trans>
+    </Button2>
   );
 }
diff --git a/app/src/components/DialogButton.tsx b/app/src/components/DialogButton.tsx
diff --git a/app/src/components/EditorWrapper.module.css b/app/src/components/EditorWrapper.module.css
@@ -7,10 +7,6 @@
   overflow: hidden;
 }
 
-.mightLose {
-  grid-template-rows: auto auto minmax(0, 1fr);
-}
-
 @media screen and (min-width: 800px) {
   .EditorWrapper {
     /* This is to avoid content going underneath the resizable handle */
@@ -29,7 +25,7 @@
   width: 100%;
 }
 
-.HeaderTitle button:first-child {
+.HeaderTitle > button:first-child {
   overflow: hidden;
   padding: 0;
 }
@@ -75,8 +71,9 @@
 .EditorWrapper [data-rename-button]:hover,
 .EditorWrapper [data-rename-button]:focus-visible {
   text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 5px;
+  text-decoration-color: #bbb;
 }
 
 .EditorWrapper [data-rename-button]:focus {