Minor redesign of Export Dialog (#604)

src/actions/actionExport.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Action } from "./types";
-import { EditableText } from "../components/EditableText";
+import { ProjectName } from "../components/ProjectName";
 import { saveAsJSON, loadFromJSON } from "../scene";
 import { load, save } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
@@ -11,7 +11,7 @@ export const actionChangeProjectName: Action = {
     return { appState: { ...appState, name: value } };
   },
   PanelComponent: ({ appState, updateData, t }) => (
-    <EditableText
+    <ProjectName
       label={t("labels.fileTitle")}
       value={appState.name || "Unnamed"}
       onChange={(name: string) => updateData(name)}

src/components/ExportDialog.css

@@ -40,7 +40,7 @@
 
 .ExportDialog__actions {
   display: flex;
-  align-items: center;
+  align-items: top;
   justify-content: space-between;
   flex-wrap: wrap;
 }

src/components/ExportDialog.tsx

@@ -129,39 +129,41 @@ function ExportModal({
         <h2 id="export-title">{t("buttons.export")}</h2>
         <div className="ExportDialog__preview" ref={previewRef}></div>
         <div className="ExportDialog__actions">
-          <Stack.Row gap={2}>
-            <ToolButton
-              type="button"
-              icon={downloadFile}
-              title={t("buttons.exportToPng")}
-              aria-label={t("buttons.exportToPng")}
-              onClick={() => onExportToPng(exportedElements, scale)}
-              ref={pngButton}
-            />
-            <ToolButton
-              type="button"
-              icon={svgFile}
-              title={t("buttons.exportToSvg")}
-              aria-label={t("buttons.exportToSvg")}
-              onClick={() => onExportToSvg(exportedElements, scale)}
-            />
-            {probablySupportsClipboard && (
+          <Stack.Col gap={1}>
+            <Stack.Row gap={2}>
               <ToolButton
                 type="button"
-                icon={clipboard}
-                title={t("buttons.copyToClipboard")}
-                aria-label={t("buttons.copyToClipboard")}
-                onClick={() => onExportToClipboard(exportedElements, scale)}
+                icon={downloadFile}
+                title={t("buttons.exportToPng")}
+                aria-label={t("buttons.exportToPng")}
+                onClick={() => onExportToPng(exportedElements, scale)}
+                ref={pngButton}
               />
-            )}
-            <ToolButton
-              type="button"
-              icon={link}
-              title={t("buttons.getShareableLink")}
-              aria-label={t("buttons.getShareableLink")}
-              onClick={() => onExportToBackend(exportedElements)}
-            />
-          </Stack.Row>
+              <ToolButton
+                type="button"
+                icon={svgFile}
+                title={t("buttons.exportToSvg")}
+                aria-label={t("buttons.exportToSvg")}
+                onClick={() => onExportToSvg(exportedElements, scale)}
+              />
+              {probablySupportsClipboard && (
+                <ToolButton
+                  type="button"
+                  icon={clipboard}
+                  title={t("buttons.copyToClipboard")}
+                  aria-label={t("buttons.copyToClipboard")}
+                  onClick={() => onExportToClipboard(exportedElements, scale)}
+                />
+              )}
+              <ToolButton
+                type="button"
+                icon={link}
+                title={t("buttons.getShareableLink")}
+                aria-label={t("buttons.getShareableLink")}
+                onClick={() => onExportToBackend(exportedElements)}
+              />
+            </Stack.Row>
+          </Stack.Col>
 
           {actionManager.renderAction(
             "changeProjectName",
@@ -172,7 +174,7 @@ function ExportModal({
           )}
           <Stack.Col gap={1}>
             <div className="ExportDialog__scales">
-              <Stack.Row gap={1} align="baseline">
+              <Stack.Row gap={2} align="baseline">
                 {scales.map(s => (
                   <ToolButton
                     key={s}

src/components/EditableText.css → src/components/ProjectName.css

@@ -1,18 +1,19 @@
-.project-name {
+.ProjectName {
   display: inline-block;
   cursor: pointer;
   border: none;
-  padding: 0.25rem;
-  margin: -0.25rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  padding: 0 0.5rem;
   white-space: nowrap;
   border-radius: var(--space-factor);
 }
 
-.project-name:hover {
+.ProjectName:hover {
   background-color: #eee;
 }
 
-.project-name:focus {
+.ProjectName:focus {
   outline: none;
   box-shadow: 0 0 0 2px steelblue;
 }

src/components/EditableText.tsx → src/components/ProjectName.tsx

@@ -1,4 +1,4 @@
-import "./EditableText.css";
+import "./ProjectName.css";
 
 import React, { Component } from "react";
 import { selectNode, removeSelection } from "../utils";
@@ -9,7 +9,7 @@ type Props = {
   label: string;
 };
 
-export class EditableText extends Component<Props> {
+export class ProjectName extends Component<Props> {
   private handleFocus = (e: React.FocusEvent<HTMLElement>) => {
     selectNode(e.currentTarget);
   };
@@ -33,7 +33,7 @@ export class EditableText extends Component<Props> {
         suppressContentEditableWarning
         contentEditable="true"
         data-type="wysiwyg"
-        className="project-name"
+        className="ProjectName"
         role="textbox"
         aria-label={this.props.label}
         onBlur={this.handleBlur}