UX: improving theme upload modal alignment, markup

UX: improving theme upload modal alignment, markup

From 0381e99b711c8b9d465c235bdd32458b39c0e045 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 21 Nov 2018 16:50:49 -0500
Subject: [PATCH] UX: improving theme upload modal alignment, markup


diff --git a/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs b/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
index 1806523..decedce 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
@@ -1,10 +1,13 @@
 {{#d-modal-body class='add-upload-modal' title="admin.customize.theme.add_upload"}}
     <div class="inputs">
-      <input onchange={{action "updateName"}} type="file" id="file-input" accept='*'><br>
-      <span class="description">{{i18n 'admin.customize.theme.upload_file_tip'}}</span><br>
-      <label>{{i18n 'admin.customize.theme.variable_name'}}
-        {{input id="name" value=name}}<br>
-      </label>
+      <section class="field">
+      <input onchange={{action "updateName"}} type="file" id="file-input" accept='*'>
+      <label for="file-input">{{i18n 'admin.customize.theme.upload_file_tip'}}</label>
+      </section>
+      <section class="field">
+      <label for="theme-variable-name">{{i18n 'admin.customize.theme.variable_name'}}</label>
+      {{input id="theme-variable-name" value=name}}
+      </section>
       {{#if fileSelected}}
         {{#if errorMessage}}
           <span class="alert alert-error">{{errorMessage}}</span>
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 78c5c47..e420481 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -527,8 +527,15 @@
 }
 
 .add-upload-modal {
+  input[type="file"] {
+    display: block;
+    margin-bottom: 0.25em;
+    + label {
+      color: $primary-medium;
+    }
+  }
   label {
-    margin-top: 20px;
+    display: inline-block;
   }
 }

GitHub