Merge pull request #652 from tone-row/dev

v1.47.6
tone-row · Jan 23, 2024 · 621735d · 621735d · vercel · Jan 23, 2024
2 parents 2bf772c + a602514
commit 621735d
Show file tree

Hide file tree

Showing 35 changed files with 1,106 additions and 988 deletions.
diff --git a/api/customer-info.ts b/api/customer-info.ts
@@ -16,8 +16,6 @@ export default async function customerInfo(
       status: "all",
     });
 
-    console.log("subscriptions", subscriptions);
-
     // find the first valid subscription
     const validSubscriptions = subscriptions.filter((subscription) => {
       const priceId = subscription.items.data[0].plan.id;

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.47.5",
+  "version": "1.47.6",
   "main": "module/module.js",
   "license": "MIT",
   "scripts": {

diff --git a/app/src/components/Actions.tsx b/app/src/components/Actions.tsx
@@ -9,6 +9,8 @@ import { LoadFileButton } from "./LoadFileButton";
 import { useLocation } from "react-router-dom";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Sliders } from "phosphor-react";
+import classNames from "classnames";
+import { globalZ } from "../lib/globalZ";
 
 export function Actions() {
   const isProUser = useIsProUser();
@@ -47,7 +49,10 @@ export function Actions() {
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           align="end"
-          className="min-w-[220px] bg-white rounded-md shadow-xl select-none p-2"
+          className={classNames(
+            "min-w-[220px] bg-white rounded-md shadow-xl select-none p-2",
+            globalZ.actionDropdownMobile
+          )}
           id="editor-options"
         >
           <LoadTemplateDialog />

diff --git a/app/src/components/EditWithAI.tsx b/app/src/components/EditWithAI.tsx
@@ -10,6 +10,8 @@ import * as Toast from "@radix-ui/react-toast";
 import { Microphone } from "./Microphone";
 import { useIsProUser } from "../lib/hooks";
 import { showPaywall } from "../lib/usePaywallModalStore";
+import classNames from "classnames";
+import { globalZ } from "../lib/globalZ";
 
 // The Graph type we send to AI is slightly different from internal representation
 type GraphForAI = {
@@ -170,28 +172,38 @@ export function EditWithAI() {
   return (
     <>
       <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
-        <Popover.Trigger asChild>
-          <Button2
-            leftIcon={
-              <MagicWand className="group-hover-tilt-shaking -mr-1" size={18} />
-            }
-            color="purple"
-            size="sm"
-            rounded
-            className="aria-[expanded=true]:bg-purple-700 !pt-2 !pb-[9px] !pl-3 !pr-4 disabled:!opacity-100"
-            isLoading={isLoading}
-          >
-            <span className="text-[15px]">
-              <Trans>Edit with AI</Trans>
-            </span>
-          </Button2>
-        </Popover.Trigger>
+        <div
+          className={classNames(
+            "absolute top-2 right-2 drop-shadow-lg",
+            globalZ.editWithAiButton
+          )}
+        >
+          <Popover.Trigger asChild>
+            <Button2
+              leftIcon={
+                <MagicWand
+                  className="group-hover-tilt-shaking md:-mr-1 -mr-4"
+                  size={18}
+                />
+              }
+              color="purple"
+              size="sm"
+              rounded
+              className="aria-[expanded=true]:bg-purple-700 !pt-2 !pb-[9px] !pl-3 !pr-4 disabled:!opacity-100"
+              isLoading={isLoading}
+            >
+              <span className="text-[15px] hidden md:inline">
+                <Trans>Edit with AI</Trans>
+              </span>
+            </Button2>
+          </Popover.Trigger>
+        </div>
         <Popover.Portal>
           <Popover.Content
             side="bottom"
             sideOffset={10}
             align="end"
-            className="w-[300px] bg-white rounded shadow border border-purple-300 p-2 !z-[100] animate-slideDownAndFade dark:bg-neutral-300 dark:text-neutral-800 dark:border-neutral-300"
+            className="w-[300px] bg-white rounded-xl shadow border border-purple-300 p-2 !z-[100] animate-slideDownAndFade dark:bg-neutral-200 dark:text-neutral-800 dark:border-neutral-300"
             onOpenAutoFocus={(e) => {
               e.preventDefault();
               if (!formRef.current) return;
@@ -208,7 +220,7 @@ export function EditWithAI() {
               <div className="relative">
                 <textarea
                   placeholder={t`Write your prompt here or click to enable the microphone, then press and hold to record.`}
-                  className="text-xs w-full resize-none h-24 p-2 leading-normal dark:bg-neutral-300"
+                  className="text-xs w-full resize-none h-24 p-2 leading-normal dark:bg-neutral-200"
                   name="prompt"
                   required
                   value={txtPrompt}

diff --git a/app/src/components/FlowchartHeader.tsx b/app/src/components/FlowchartHeader.tsx
@@ -89,7 +89,7 @@ function LogInToSaveButton() {
   return (
     <Button2
       leftIcon={<DownloadSimple weight="bold" className="w-5 h-5" />}
-      color="zinc"
+      color="default"
       onClick={() => {
         navigate("/l");
       }}

diff --git a/app/src/components/Header.css b/app/src/components/Header.css
@@ -6,9 +6,9 @@
   font-size: 0;
 }
 
-.shared-header__logo svg path {
-  fill: var(--color-foreground);
-}
+/* .shared-header__logo svg path {
+  fill: var(--color-background);
+} */
 
 .shared-header-btn__icon {
   font-size: 0;

diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
@@ -70,24 +70,27 @@ export const Header = memo(function SharedHeader() {
   return (
     <>
       <NavigationMenu.Root asChild>
-        <header className="grid-flow-col justify-between items-center px-2 py-1 hidden md:grid bg-[#f6f5f6] dark:bg-[#0c0c0c]">
+        <header className="grid-flow-col justify-between hidden md:grid bg-[var(--color-foreground)] dark:bg-[var(--color-background)]">
           <NavigationMenu.List asChild>
-            <nav className="flex gap-1 items-center">
-              <Link to="/" className="shared-header__logo mr-2">
-                <BrandSvg width={40} />
+            <nav className="flex items-center">
+              <Link
+                to="/"
+                className="shared-header__logo w-16 flex justify-center"
+              >
+                <BrandSvg width={36} className="fill-background" />
               </Link>
               <NavigationMenu.Item asChild>
                 <HeaderClientLink
                   label={t`Editor`}
-                  icon={<TreeStructure height={20} width={20} />}
+                  icon={<TreeStructure height={16} width={16} weight="fill" />}
                   aria-current={isEditor ? "page" : undefined}
                   to={lastChart}
                 />
               </NavigationMenu.Item>
               <NavigationMenu.Item asChild>
                 <HeaderClientLink
                   label={t`New`}
-                  icon={<Plus height={20} width={20} />}
+                  icon={<Plus height={16} width={16} weight="fill" />}
                   className="shared-header__new"
                   aria-current={isNewPage ? "page" : undefined}
                   to="/new"
@@ -97,39 +100,39 @@ export const Header = memo(function SharedHeader() {
                 <HeaderClientLink
                   label={t`Charts`}
                   to="/y"
-                  icon={<Folder height={20} width={20} />}
+                  icon={<Folder height={16} width={16} weight="fill" />}
                   aria-current={isChartsPage ? "page" : undefined}
                 />
               </NavigationMenu.Item>
               <NavigationMenu.Item asChild>
                 <HeaderClientLink
                   label={t`Feedback`}
-                  icon={<Chat height={20} width={20} />}
+                  icon={<Chat height={16} width={16} weight="fill" />}
                   aria-current={isFeedbackPage ? "page" : undefined}
                   to="/o"
                 />
               </NavigationMenu.Item>
             </nav>
           </NavigationMenu.List>
           <NavigationMenu.List asChild>
-            <nav className="flex items-center gap-1">
+            <nav className="flex">
               <DropdownMenu.Root modal={false}>
                 <DropdownMenu.Trigger asChild>
                   <HeaderButton
                     label={t`Info`}
-                    icon={<Info height={20} width={20} />}
+                    icon={<Info height={16} width={16} weight="fill" />}
                     aria-current={isInfoPage ? "page" : undefined}
                   />
                 </DropdownMenu.Trigger>
                 <DropdownMenu.Content
                   align="start"
-                  className="shared-header__dropdown bg-neutral-50 shadow dark:bg-neutral-900"
+                  className="shared-header__dropdown bg-[var(--color-foreground)] dark:bg-[var(--color-background)] shadow dark:bg-neutral-900"
                 >
                   <DropdownMenu.Item asChild>
                     <HeaderClientLink
                       label={t`Blog`}
                       aria-current={isBlogPage ? "page" : undefined}
-                      icon={<PencilLine height={20} width={20} />}
+                      icon={<PencilLine height={16} width={16} weight="fill" />}
                       to="/blog"
                     />
                   </DropdownMenu.Item>
@@ -138,45 +141,45 @@ export const Header = memo(function SharedHeader() {
                       to="/changelog"
                       label={t`Changelog`}
                       aria-current={isChangelogPage ? "page" : undefined}
-                      icon={<Notebook height={20} width={20} />}
+                      icon={<Notebook height={16} width={16} weight="fill" />}
                     />
                   </DropdownMenu.Item>
                   <DropdownMenu.Item asChild>
                     <HeaderClientLink
                       to="/roadmap"
                       label={t`Roadmap`}
                       aria-current={isRoadmapPage ? "page" : undefined}
-                      icon={<Signpost height={20} width={20} />}
+                      icon={<Signpost height={16} width={16} weight="fill" />}
                     />
                   </DropdownMenu.Item>
                   <DropdownMenu.Item asChild>
                     <HeaderClientLink
                       to="/privacy-policy"
                       label={t`Privacy Policy`}
                       aria-current={isPrivacyPolicyPage ? "page" : undefined}
-                      icon={<Lock height={20} width={20} />}
+                      icon={<Lock height={16} width={16} weight="fill" />}
                     />
                   </DropdownMenu.Item>
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
               <HeaderClientLink
                 label={t`Settings`}
-                icon={<Gear height={20} width={20} />}
+                icon={<Gear height={16} width={16} weight="fill" />}
                 aria-current={isSettingsPage ? "page" : undefined}
                 to="/s"
               />
               {isLoggedIn ? (
                 <HeaderClientLink
                   label={t`Account`}
-                  icon={<User height={20} width={20} />}
+                  icon={<User height={16} width={16} weight="fill" />}
                   aria-current={isAccountPage ? "page" : undefined}
                   to="/a"
                 />
               ) : (
                 <HeaderClientLink
                   to="/l"
                   label={t`Log In`}
-                  icon={<User height={20} width={20} />}
+                  icon={<User height={16} width={16} weight="fill" />}
                   aria-current={isLogInPage ? "page" : undefined}
                 />
               )}
@@ -185,7 +188,7 @@ export const Header = memo(function SharedHeader() {
                   to="/pricing"
                   data-testid="pro-link"
                   aria-current={isSponsorPage ? "page" : undefined}
-                  className="font-bold rounded-md py-2 ml-2 px-4 bg-gradient-to-t from-purple-700 to-purple-400 hover:to-purple-300 text-white dark:bg-purple-800 dark:text-white dark:hover:ring-2 dark:hover:ring-white/10"
+                  className="font-bold px-4 flex items-center bg-gradient-to-t from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-600 text-white dark:bg-purple-800 dark:text-white dark:hover:ring-2 dark:hover:ring-white/10"
                   onClick={() => {
                     track("sponsor", "click");
                   }}
@@ -215,7 +218,7 @@ export const Header = memo(function SharedHeader() {
 });
 
 const btnClasses =
-  "flex items-center gap-1 p-2 rounded text-[15px] text-neutral-700 hover:text-foreground hover:bg-white/40 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:aria-[current=page]:text-green-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-green-400";
+  "flex items-center gap-1 p-2.5 px-3.5 text-[16px] md:text-white hover:bg-white/10 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:aria-[current=page]:text-green-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-green-400";
 
 type HeaderButtonProps = {
   label: string;
@@ -330,66 +333,66 @@ function MobileHeader({
           <Dialog.Content className="mobile-header__content">
             <HeaderClientLink
               label={t`Editor`}
-              icon={<TreeStructure height={20} width={20} />}
+              icon={<TreeStructure height={16} width={16} weight="fill" />}
               aria-current={isEditor ? "page" : undefined}
               to={lastChart}
             />
             <HeaderClientLink
               label={t`New`}
-              icon={<Plus height={20} width={20} />}
+              icon={<Plus height={16} width={16} weight="fill" />}
               className="shared-header__new"
               to="/new"
             />
             <HeaderClientLink
               label={t`Charts`}
               to="/y"
-              icon={<Folder height={20} width={20} />}
+              icon={<Folder height={16} width={16} weight="fill" />}
               aria-current={isChartsPage ? "page" : undefined}
             />
             <HeaderLink
               label="Discord"
-              icon={<DiscordLogo height={20} width={20} />}
+              icon={<DiscordLogo height={16} width={16} weight="fill" />}
               href={DISCORD_URL}
               target="_blank"
               rel="noopener noreferrer"
               className="mobile-only"
             />
             <HeaderClientLink
               label={t`Feedback`}
-              icon={<Chat height={20} width={20} />}
+              icon={<Chat height={16} width={16} weight="fill" />}
               aria-current={isFeedbackPage ? "page" : undefined}
               className="mobile-only"
               to="/o"
             />
             <HeaderClientLink
               to="/blog"
               label={t`Blog`}
-              icon={<PencilLine height={20} width={20} />}
+              icon={<PencilLine height={16} width={16} weight="fill" />}
               aria-current={isBlogPage ? "page" : undefined}
             />
             <HeaderClientLink
               to="/changelog"
               label={t`Changelog`}
-              icon={<Notebook height={20} width={20} />}
+              icon={<Notebook height={16} width={16} weight="fill" />}
               aria-current={isChangelogPage ? "page" : undefined}
             />
             <HeaderClientLink
               to="/roadmap"
               label={t`Roadmap`}
-              icon={<Signpost height={20} width={20} />}
+              icon={<Signpost height={16} width={16} weight="fill" />}
               aria-current={isRoadmapPage ? "page" : undefined}
             />
             <HeaderClientLink
               label={t`Settings`}
-              icon={<Gear height={20} width={20} />}
+              icon={<Gear height={16} width={16} weight="fill" />}
               aria-current={isSettingsPage ? "page" : undefined}
               to="/s"
             />
             {!isProUser ? (
               <HeaderClientLink
                 to="/pricing"
                 label={t`Upgrade to Pro`}
-                icon={<RocketLaunch height={20} width={20} />}
+                icon={<RocketLaunch height={16} width={16} weight="fill" />}
                 aria-current={isSponsorPage ? "page" : undefined}
                 onClick={() => {
                   // track event with gtm
@@ -405,21 +408,21 @@ function MobileHeader({
             {isLoggedIn ? (
               <HeaderClientLink
                 label={t`Account`}
-                icon={<User height={20} width={20} />}
+                icon={<User height={16} width={16} weight="fill" />}
                 aria-current={isAccountPage ? "page" : undefined}
                 to="/a"
               />
             ) : (
               <HeaderClientLink
                 to="/l"
                 label={t`Log In`}
-                icon={<User height={20} width={20} />}
+                icon={<User height={16} width={16} weight="fill" />}
                 aria-current={isLogInPage ? "page" : undefined}
               />
             )}
             <HeaderClientLink
               label={t`Privacy Policy`}
-              icon={<Lock height={20} width={20} />}
+              icon={<Lock height={16} width={16} weight="fill" />}
               aria-current={isPrivacyPolicyPage ? "page" : undefined}
               className="mobile-only"
               to="/privacy-policy"