From 860017fb4269d7912d3afd157e1897c9f37e69e4 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 21 Jul 2022 20:08:06 +0200
Subject: [PATCH] Setup Assistant: Initial styling to Blender step

---
 web/app/src/assets/base.css               |  8 ++++
 web/app/src/views/FirstTimeWizardView.vue | 46 ++++++++++++++---------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 11a74be5..7b2e32de 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -1,5 +1,6 @@
 :root {
   --spacer: 1rem;
+  --spacer-xl: 1.5rem;
   --spacer-lg: 1.33rem;
   --spacer-sm: .66rem;
   --spacer-xs: .33rem;
@@ -319,6 +320,13 @@ label {
   display: block;
 }
 
+fieldset {
+  background-color: var(--color-background-column-highlight);
+  border: none;
+  margin-bottom: var(--spacer);
+  padding: var(--spacer);
+}
+
 input[type="text"] {
   appearance: none;
   background-color: var(--color-background);
diff --git a/web/app/src/views/FirstTimeWizardView.vue b/web/app/src/views/FirstTimeWizardView.vue
index 78c81c2c..c114bd69 100644
--- a/web/app/src/views/FirstTimeWizardView.vue
+++ b/web/app/src/views/FirstTimeWizardView.vue
@@ -88,9 +88,12 @@
 
         <div v-if="isBlenderExeFinding" class="is-in-progress">Looking for Blender installs...</div>
 
-        <p v-if="autoFoundBlenders.length === 0">Provide a path to Blender. This path should be accessible by all Workers. If your rendering
-          setup features operating systems different form the one you are currently using, you can
-          manually set up the other paths later.</p>
+        <p v-if="autoFoundBlenders.length === 0">
+          Provide a path to Blender. This path should be accessible by all Workers.
+          <br/><br/>
+          If your rendering setup features operating systems different form the one you are currently using,
+          you can manually set up the other paths later.
+        </p>
 
         <p v-else>Choose how a Worker should invoke the Blender command when performing a task.</p>
 
@@ -118,27 +121,28 @@
             </span>
           </label>
           <label for="blender-input_path">
-            <input
-              type="radio"
-              v-model="selectedBlender"
-              name="blender"
-              :value="blenderFromInputPath"
-              id="blender-input_path"
-              >
-            {{ sourceLabels['input_path'] }} <br>
-            <span>
+            <div>
+              <input
+                type="radio"
+                v-model="selectedBlender"
+                name="blender"
+                :value="blenderFromInputPath"
+                id="blender-input_path"
+                >
+              {{ sourceLabels['input_path'] }}
+            </div>
+            <div>
               <input
                 @input="checkBlenderExePath"
                 v-model="customBlenderExe"
                 :class="{'is-invalid': blenderExeCheckResult != null && !blenderExeCheckResult.is_usable}"
-
                 type="text"
                 placeholder="Blender Path"
               >
-            </span>
-            <p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
-            <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
-              {{ blenderExeCheckResult.cause }}</p>
+              <p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
+              <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
+                {{ blenderExeCheckResult.cause }}</p>
+            </div>
           </label>
         </fieldset>
 
@@ -622,4 +626,12 @@ h2 {
     background-position: 200px;
   }
 }
+
+fieldset input[type="text"] {
+  margin-left: var(--spacer-xl);
+  margin-top: var(--spacer-sm);
+  width: -moz-available;
+  width: -webkit-fill-available;
+}
+
 </style>