Add introductory descriptive text

tone-row · Sep 6, 2024 · 4b6f9bf · 4b6f9bf
1 parent b4366f3
commit 4b6f9bf
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/app/src/components/FlowchartHeader.tsx b/app/src/components/FlowchartHeader.tsx
@@ -34,17 +34,23 @@ export function FlowchartHeader() {
     <header
       className={classNames(
         styles.HeaderTitle,
-        "flex items-center gap-2 justify-between flex-wrap p-4 md:p-2"
+        "grid gap-2 md:flex items-end justify-between p-4 md:p-2 md:mb-2"
       )}
     >
       {isSandbox ? (
-        <FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
+        <div className="grid gap-0.5 content-end">
+          <FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
+          <p className="text-xs text-neutral-500 dark:text-neutral-300/80 font-medium leading-tight text-wrap-pretty">
+            Create flowcharts instantly: Type or paste text, see it visualized.
+          </p>
+        </div>
       ) : (
         <RenameButton key={pageTitle}>
           <FlowchartTitle title={title}>{pageTitle}</FlowchartTitle>
         </RenameButton>
       )}
-      <div className="flex items-center gap-1 p-1 border-2 border-neutral-300 dark:border-neutral-700 rounded-xl">
+
+      <div className="flex items-center gap-1">
         {isReadOnly && (
           <span className="text-xs text-neutral-400 dark:text-neutral-600 font-extrabold uppercase tracking-tight">
             <Trans>Read-only</Trans>
@@ -57,7 +63,7 @@ export function FlowchartHeader() {
             <ShareDialog>
               <Button2
                 onClick={() => setShareModal(true)}
-                leftIcon={<Share weight="bold" className="w-5 h-5" />}
+                leftIcon={<Share weight="bold" className="w-4 h-4" />}
                 aria-label="Export"
                 data-session-activity="Share Chart"
               >
@@ -68,7 +74,7 @@ export function FlowchartHeader() {
         ) : null}
         <DownloadDropdown>
           <Button2
-            leftIcon={<DownloadSimple weight="bold" className="w-5 h-5" />}
+            leftIcon={<DownloadSimple weight="bold" className="w-4 h-4" />}
           >
             <Trans>Download</Trans>
           </Button2>
@@ -96,7 +102,7 @@ function LogInToSaveButton() {
   const navigate = useNavigate();
   return (
     <Button2
-      leftIcon={<FloppyDisk weight="bold" className="w-5 h-5" />}
+      leftIcon={<FloppyDisk weight="bold" className="w-4 h-4" />}
       data-session-activity="Save Chart: Log in"
       onClick={() => {
         navigate("/l");
@@ -110,7 +116,7 @@ function LogInToSaveButton() {
 function CannotSaveButton() {
   return (
     <Button2
-      leftIcon={<FloppyDisk weight="bold" className="w-5 h-5" />}
+      leftIcon={<FloppyDisk weight="bold" className="w-4 h-4" />}
       data-session-activity="Save Chart: Upgrade"
       onClick={() => {
         showPaywall({
@@ -138,7 +144,7 @@ function CanSaveButton() {
     >
       <Dialog.Trigger asChild>
         <Button2
-          leftIcon={<FloppyDisk weight="bold" className="w-5 h-5" />}
+          leftIcon={<FloppyDisk weight="bold" className="w-4 h-4" />}
           data-session-activity="Save Chart"
           onClick={() => {
             setOpen(true);
@@ -157,7 +163,7 @@ function CanSaveButton() {
                   <Trans>How would you like to save your chart?</Trans>
                 </p>
                 <Button2
-                  leftIcon={<Cloud weight="bold" className="w-5 h-5" />}
+                  leftIcon={<Cloud weight="bold" className="w-4 h-4" />}
                   data-session-activity="Save Chart: Cloud"
                   onClick={() => {
                     setCreateType("cloud");
@@ -166,7 +172,7 @@ function CanSaveButton() {
                   <Trans>Save to Cloud</Trans>
                 </Button2>
                 <Button2
-                  leftIcon={<File weight="bold" className="w-5 h-5" />}
+                  leftIcon={<File weight="bold" className="w-4 h-4" />}
                   data-session-activity="Save Chart: File"
                   onClick={() => {
                     setOpen(false);
@@ -239,7 +245,7 @@ function SaveForm() {
         />
       </label>
       <Button2
-        leftIcon={<FloppyDisk className="w-5 h-5" />}
+        leftIcon={<FloppyDisk className="w-4 h-4" />}
         isLoading={createChartMutation.isLoading}
       >
         Save
@@ -256,7 +262,7 @@ function FlowchartTitle({
   return (
     <h1
       className={classNames(
-        "text-lg sm:text-xl md:text-2xl font-bold -translate-y-[2px]",
+        "text-lg sm:text-xl md:text-[30px] tracking-[0.5px] font-bold -translate-y-[2px]",
         className
       )}
       {...props}

diff --git a/app/src/index.css b/app/src/index.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -178,6 +178,10 @@ div[data-reach-tooltip] {
   text-wrap: balance;
 }
 
+.text-wrap-pretty {
+  text-wrap: pretty;
+}
+
 #theme-editor-wrapper > section {
   overflow: hidden;
 }

diff --git a/app/src/ui/Shared.tsx b/app/src/ui/Shared.tsx
@@ -139,7 +139,7 @@ const button2Classes =
   "group relative rounded-md active:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed";
 const button2Colors = {
   default:
-    "bg-neutral-300 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-400 dark:hover:bg-neutral-700 disabled:hover:bg-neutral-200 disabled:hover:text-neutral-700 dark:disabled:hover:bg-neutral-800 dark:disabled:hover:text-neutral-300",
+    "bg-neutral-300/60 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-300 dark:hover:bg-neutral-700 disabled:hover:bg-neutral-200 disabled:hover:text-neutral-700 dark:disabled:hover:bg-neutral-800 dark:disabled:hover:text-neutral-300",
   blue: "bg-blue-500 text-white hover:bg-blue-600 disabled:hover:bg-blue-500 disabled:hover:text-white",
   orange:
     "bg-orange-500 text-white hover:bg-orange-600 disabled:hover:bg-orange-500 disabled:hover:text-white",