Improve style of convert overlay

tone-row · Sep 6, 2024 · 4d534a1 · 4d534a1
1 parent bc815fc
commit 4d534a1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 65 deletions.
diff --git a/app/src/components/ConvertOnPasteOverlay.tsx b/app/src/components/ConvertOnPasteOverlay.tsx
@@ -3,7 +3,6 @@ import { useEffect, useMemo } from "react";
 import { getDefaultText } from "../lib/getDefaultText";
 import { useEditorStore } from "../lib/useEditorStore";
 import { usePromptStore, useRunAiWithStore } from "../lib/usePromptStore";
-import { ArrowRight } from "phosphor-react";
 import { Button2 } from "../ui/Shared";
 import { Trans } from "@lingui/macro";
 import { MagicWand } from "phosphor-react";
@@ -55,17 +54,17 @@ function Overlay() {
   const isRunning = usePromptStore((s) => s.isRunning);
   const pasted = useEditorStore((s) => s.userPasted);
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 convert-on-paste-overlay dark:from-purple-900/90 dark:via-purple-850/90 dark:to-purple-800/90 pb-6 pt-12 animate-overlayShow">
-      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 w-screen max-w-4xl mx-auto px-4 animate-slideUpFadeLarge">
-        <p className="dark:text-purple-100 text-base font-medium text-wrap-balance leading-snug">
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-purple-800/80 backdrop-blur-lg py-6 animate-overlayShow">
+      <div className="grid sm:flex items-center gap-4 w-screen mx-auto px-6 animate-slideUpFadeLarge">
+        <p className="text-white text-sm font-semibold leading-tight text-wrap-balance">
           <Trans>
-            Is this a document? Would you like to convert it to a flowchart?
+            Pasted content detected. Convert to Flowchart Fun syntax?
           </Trans>
         </p>
-        <div className="flex gap-3">
+        <div className="flex justify-end gap-3">
           <Button2
             color="inverted"
-            size="xs"
+            size="sm"
             onClick={() => {
               useEditorStore.setState({ userPasted: "" });
             }}
@@ -74,29 +73,18 @@ function Overlay() {
           </Button2>
           <Button2
             color="purple"
-            size="xs"
-            className="group"
+            size="sm"
             leftIcon={<MagicWand size={18} weight="fill" />}
             onClick={() => {
-              // first set the mode to convert, and add pasted text
               usePromptStore.setState({
                 mode: "convert",
                 currentText: pasted,
               });
-              // move this off the main thread
               requestAnimationFrame(() => {
                 runAiWithStore();
-                // clear the pasted text
                 useEditorStore.setState({ userPasted: "" });
               });
             }}
-            rightIcon={
-              <ArrowRight
-                size={20}
-                weight="bold"
-                className="inline-block ml-2 group-hover:translate-x-1 transition-transform"
-              />
-            }
             isLoading={isRunning}
           >
             <Trans>Convert</Trans>

diff --git a/app/src/index.css b/app/src/index.css
@@ -456,50 +456,6 @@ body.dark .pricing-highlights {
   @apply max-h-[300px] overflow-y-auto;
 }
 
-.convert-on-paste-overlay {
-  background: linear-gradient(
-    to bottom,
-    hsla(251.35, 60.66%, 88.04%, 0) 0%,
-    hsla(251.35, 60.66%, 88.04%, 0.013) 8.1%,
-    hsla(251.35, 60.66%, 88.04%, 0.049) 15.5%,
-    hsla(251.35, 60.66%, 88.04%, 0.104) 22.5%,
-    hsla(251.35, 60.66%, 88.04%, 0.175) 29%,
-    hsla(251.35, 60.66%, 88.04%, 0.259) 35.3%,
-    hsla(251.35, 60.66%, 88.04%, 0.352) 41.2%,
-    hsla(251.35, 60.66%, 88.04%, 0.45) 47.1%,
-    hsla(251.35, 60.66%, 88.04%, 0.55) 52.9%,
-    hsla(251.35, 60.66%, 88.04%, 0.648) 58.8%,
-    hsla(251.35, 60.66%, 88.04%, 0.741) 64.7%,
-    hsla(251.35, 60.66%, 88.04%, 0.825) 71%,
-    hsla(251.35, 60.66%, 88.04%, 0.896) 77.5%,
-    hsla(251.35, 60.66%, 88.04%, 0.951) 84.5%,
-    hsla(251.35, 60.66%, 88.04%, 0.987) 91.9%,
-    hsl(251.35, 60.66%, 88.04%) 100%
-  );
-}
-
-body.dark .convert-on-paste-overlay {
-  background: linear-gradient(
-    to bottom,
-    hsla(265.79, 79.08%, 30%, 0) 0%,
-    hsla(265.79, 79.08%, 30%, 0.013) 8.1%,
-    hsla(265.79, 79.08%, 30%, 0.049) 15.5%,
-    hsla(265.79, 79.08%, 30%, 0.104) 22.5%,
-    hsla(265.79, 79.08%, 30%, 0.175) 29%,
-    hsla(265.79, 79.08%, 30%, 0.259) 35.3%,
-    hsla(265.79, 79.08%, 30%, 0.352) 41.2%,
-    hsla(265.79, 79.08%, 30%, 0.45) 47.1%,
-    hsla(265.79, 79.08%, 30%, 0.55) 52.9%,
-    hsla(265.79, 79.08%, 30%, 0.648) 58.8%,
-    hsla(265.79, 79.08%, 30%, 0.741) 64.7%,
-    hsla(265.79, 79.08%, 30%, 0.825) 71%,
-    hsla(265.79, 79.08%, 30%, 0.896) 77.5%,
-    hsla(265.79, 79.08%, 30%, 0.951) 84.5%,
-    hsla(265.79, 79.08%, 30%, 0.987) 91.9%,
-    hsl(265.79, 79.08%, 30%) 100%
-  );
-}
-
 .clip-path-rectangle {
   @apply relative;
   clip-path: polygon(

diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -83,8 +83,8 @@ module.exports = {
       },
       keyframes: {
         overlayShow: {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
+          from: { transform: "translateY(100%)" },
+          to: { transform: "translateY(0)" },
         },
         contentShow: {
           from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },