design and layout fixes for Theming app

2 files changed, 29 insertions, 15 deletions

diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
index 931e4d4508b..53214b245c6 100644
--- a/apps/theming/css/settings-admin.css
+++ b/apps/theming/css/settings-admin.css
@@ -8,19 +8,25 @@
 
 #theming .theme-undo {
     cursor: pointer;
+    opacity: .5;
+    padding: 9px;
+    vertical-align: bottom;
 }
 
 #theming .icon {
     display: inline-block;
 }
 
-#theming .theming-label {
-    min-width: 6em;
+#theming label span {
     display: inline-block;
+    min-width: 90px;
+    padding: 8px 0px;
 }
 
 #theming .icon-upload {
     display: inline-flex;
+    padding: 8px;
+    margin: 0;
 }
 
 div#theming_settings_msg {
diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php
index 3a55deca0ce..f802b947c80 100644
--- a/apps/theming/templates/settings-admin.php
+++ b/apps/theming/templates/settings-admin.php
@@ -14,35 +14,43 @@ style('theming', 'settings-admin');
 	</p>
 	<?php } else { ?>
 	<p>
-		<span class="theming-label"><?php p($l->t('Name:')) ?></span> <input id="theming-name" type="text" placeholder="<?php p($l->t('Name')); ?>" value="<?php p($_['name']) ?>" />
-		<span data-setting="name" data-original-title="<?php p($l->t('revert to original value')); ?>" class="theme-undo icon icon-history"></span>
+		<label><span><?php p($l->t('Name')) ?></span>
+			<input id="theming-name" type="text" placeholder="<?php p($l->t('Name')); ?>" value="<?php p($_['name']) ?>" />
+		</label>
+		<span data-setting="name" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 	</p>
 	<p>
-		<span class="theming-label"><?php p($l->t('URL:')) ?></span> <input id="theming-url" type="text" placeholder="<?php p($l->t('Web address https://…')); ?>" value="<?php p($_['url']) ?>" />
-		<span data-setting="url" data-original-title="<?php p($l->t('revert to original value')); ?>" class="theme-undo icon icon-history"></span>
+		<label><span><?php p($l->t('Web address')) ?></span>
+			<input id="theming-url" type="text" placeholder="<?php p($l->t('Web address https://…')); ?>" value="<?php p($_['url']) ?>" />
+		</label>
+		<span data-setting="url" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 	</p>
 	<p>
-		<span class="theming-label"><?php p($l->t('Slogan:')) ?></span> <input id="theming-slogan" type="text" placeholder="<?php p($l->t('Slogan')); ?>" value="<?php p($_['slogan']) ?>" />
-		<span data-setting="slogan" data-original-title="<?php p($l->t('revert to original value')); ?>" class="theme-undo icon icon-history"></span>
+		<label><span><?php p($l->t('Slogan')) ?></span>
+			<input id="theming-slogan" type="text" placeholder="<?php p($l->t('Slogan')); ?>" value="<?php p($_['slogan']) ?>" />
+		</label>
+		<span data-setting="slogan" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 	</p>
 	<p>
-		<span class="theming-label"><?php p($l->t('Color:')) ?></span> <input id="theming-color" class="jscolor" value="<?php p($_['color']) ?>" />
-		<span data-setting="color" data-original-title="<?php p($l->t('revert to original value')); ?>" class="theme-undo icon icon-history"></span>
+		<label><span><?php p($l->t('Color')) ?></span>
+			<input id="theming-color" type="text" class="jscolor" value="<?php p($_['color']) ?>" />
+		</label>
+		<span data-setting="color" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 	</p>
 	<p>
 		<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
-			<span class="theming-label"><?php p($l->t('Logo:')) ?></span>
+			<label for="uploadlogo"><span><?php p($l->t('Logo')) ?></span></label>
 			<input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file">
 			<label for="uploadlogo" class="button icon-upload svg" id="uploadlogo" title="<?php p($l->t('Upload new logo')) ?>"></label>
-			<span data-setting="logoMime" data-original-title="<?php p($l->t('revert to original value')); ?>" class="theme-undo icon icon-history"></span>
+			<span data-setting="logoMime" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 		</form>
 	</p>
-		<p>
+	<p>
 		<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
-			<span class="theming-label"><?php p($l->t('Login img.:')) ?></span>
+			<label for="upload-login-background"><span><?php p($l->t('Log in image')) ?></span></label>
 			<input id="upload-login-background" class="upload-logo-field" name="upload-login-background" type="file">
 			<label for="upload-login-background" class="button icon-upload svg" id="upload-login-background" title="<?php p($l->t("Upload new login background")) ?>"></label>
-			<span data-setting="backgroundMime" data-original-title="<?php p($l->t('revert to original value')); ?>" class="theme-undo icon icon-history"></span>
+			<span data-setting="backgroundMime" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 		</form>
 		</p>
 	<?php } ?>