From 48a768dce8698c7b20198d29483d2c03062ecf8b Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Mon, 23 Sep 2019 16:10:18 -0500
Subject: [PATCH] Make Preferences > General two columns, slightly better?

---
 app/build/tasks/package-task.js               |  2 +-
 .../lib/tabs/config-schema-item.tsx           |  4 +-
 .../lib/tabs/preferences-general.tsx          | 86 +++++++++++--------
 .../preferences/styles/preferences.less       |  4 +-
 4 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/app/build/tasks/package-task.js b/app/build/tasks/package-task.js
index 52ef3ce5d..c840c33ee 100644
--- a/app/build/tasks/package-task.js
+++ b/app/build/tasks/package-task.js
@@ -21,7 +21,7 @@ module.exports = grunt => {
     const winResourcesTarget = path.resolve(buildPath, '..');
     if (platform === 'win32') {
       fs.copySync(winResourcesSource, winResourcesTarget);
-      fs.copySync(
+      fs.copyFileSync(
         path.join(winResourcesSource, 'mailspring.VisualElementsManifest.xml'),
         path.join(path.resolve(buildPath, '..', '..'), 'mailspring.VisualElementsManifest.xml')
       );
diff --git a/app/internal_packages/preferences/lib/tabs/config-schema-item.tsx b/app/internal_packages/preferences/lib/tabs/config-schema-item.tsx
index 83ed384b1..98f05c1bd 100644
--- a/app/internal_packages/preferences/lib/tabs/config-schema-item.tsx
+++ b/app/internal_packages/preferences/lib/tabs/config-schema-item.tsx
@@ -76,7 +76,9 @@ class ConfigSchemaItem extends React.Component<ConfigSchemaItemProps> {
     } else if (this.props.configSchema.enum) {
       return (
         <div className="item">
-          <label htmlFor={this.props.keyPath}>{this.props.configSchema.title}:</label>
+          <label htmlFor={this.props.keyPath} style={{ paddingRight: 8 }}>
+            {this.props.configSchema.title}:
+          </label>
           <select onChange={this._onChangeValue} value={this.props.config.get(this.props.keyPath)}>
             {_.zip(this.props.configSchema.enum, this.props.configSchema.enumLabels).map(
               ([value, label]) => (
diff --git a/app/internal_packages/preferences/lib/tabs/preferences-general.tsx b/app/internal_packages/preferences/lib/tabs/preferences-general.tsx
index 1917ce221..597af724b 100644
--- a/app/internal_packages/preferences/lib/tabs/preferences-general.tsx
+++ b/app/internal_packages/preferences/lib/tabs/preferences-general.tsx
@@ -57,46 +57,60 @@ class PreferencesGeneral extends React.Component<{
 
   render() {
     return (
-      <div className="container-general" style={{ maxWidth: 600 }}>
-        <WorkspaceSection config={this.props.config} configSchema={this.props.configSchema} />
+      <div className="container-general" style={{ maxWidth: 800 }}>
+        <div style={{ display: 'flex' }}>
+          <div style={{ width: '50%', paddingRight: 15 }}>
+            <WorkspaceSection config={this.props.config} configSchema={this.props.configSchema} />
+            <LanguageSection config={this.props.config} configSchema={this.props.configSchema} />
+          </div>
+          <div style={{ width: '50%', paddingLeft: 15 }}>
+            <ConfigSchemaItem
+              configSchema={this.props.configSchema.properties.reading}
+              keyName={localized('Reading')}
+              keyPath="core.reading"
+              config={this.props.config}
+            />
+          </div>
+        </div>
+        <div style={{ display: 'flex', paddingTop: 30 }}>
+          <div style={{ width: '50%', paddingRight: 15 }}>
+            <SendingSection config={this.props.config} configSchema={this.props.configSchema} />
+          </div>
 
-        <LanguageSection config={this.props.config} configSchema={this.props.configSchema} />
-
-        <ConfigSchemaItem
-          configSchema={this.props.configSchema.properties.notifications}
-          keyName={localized('Notifications')}
-          keyPath="core.notifications"
-          config={this.props.config}
-        />
-
-        <div className="platform-note platform-linux-only">
-          {localized(
-            'Mailspring desktop notifications on Linux require Zenity. You may need to install it with your package manager.'
-          )}
+          <div style={{ width: '50%', paddingLeft: 15 }}>
+            <ConfigSchemaItem
+              configSchema={this.props.configSchema.properties.composing}
+              keyName={localized('Composing')}
+              keyPath="core.composing"
+              config={this.props.config}
+            />
+          </div>
         </div>
 
-        <ConfigSchemaItem
-          configSchema={this.props.configSchema.properties.reading}
-          keyName={localized('Reading')}
-          keyPath="core.reading"
-          config={this.props.config}
-        />
+        <div style={{ display: 'flex', paddingTop: 30 }}>
+          <div style={{ width: '50%', paddingRight: 15 }}>
+            <ConfigSchemaItem
+              configSchema={this.props.configSchema.properties.notifications}
+              keyName={localized('Notifications')}
+              keyPath="core.notifications"
+              config={this.props.config}
+            />
 
-        <ConfigSchemaItem
-          configSchema={this.props.configSchema.properties.composing}
-          keyName={localized('Composing')}
-          keyPath="core.composing"
-          config={this.props.config}
-        />
-
-        <SendingSection config={this.props.config} configSchema={this.props.configSchema} />
-
-        <ConfigSchemaItem
-          configSchema={this.props.configSchema.properties.attachments}
-          keyName={localized('Attachments')}
-          keyPath="core.attachments"
-          config={this.props.config}
-        />
+            <div className="platform-note platform-linux-only">
+              {localized(
+                'Mailspring desktop notifications on Linux require Zenity. You may need to install it with your package manager.'
+              )}
+            </div>
+          </div>
+          <div style={{ width: '50%', paddingLeft: 15 }}>
+            <ConfigSchemaItem
+              configSchema={this.props.configSchema.properties.attachments}
+              keyName={localized('Attachments')}
+              keyPath="core.attachments"
+              config={this.props.config}
+            />
+          </div>
+        </div>
 
         <div className="local-data">
           <h6>{localized('Local Data')}</h6>
diff --git a/app/internal_packages/preferences/styles/preferences.less b/app/internal_packages/preferences/styles/preferences.less
index 567ef4ac1..d5b0d5518 100644
--- a/app/internal_packages/preferences/styles/preferences.less
+++ b/app/internal_packages/preferences/styles/preferences.less
@@ -15,7 +15,7 @@
     top: -1px;
   }
   select {
-    margin: 4px 0 0 8px;
+    margin: 4px 0 0 0;
   }
 
   height: 100%;
@@ -120,7 +120,7 @@
   }
 
   .container-general {
-    width: 40%;
+    width: 80%;
     min-width: 430px;
     margin: 0 auto;