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,6 +129,7 @@ function ExportModal({
         <h2 id="export-title">{t("buttons.export")}</h2>
         <div className="ExportDialog__preview" ref={previewRef}></div>
         <div className="ExportDialog__actions">
+          <Stack.Col gap={1}>
             <Stack.Row gap={2}>
               <ToolButton
                 type="button"
@@ -162,6 +163,7 @@ function ExportModal({
                 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/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/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}