Add not available image for background image when not set in Settings

components/settings.vue

@@ -18,15 +18,15 @@
 
       <label class='label' for='background-image-upload'>Background image</label>
       <b-field>
-        <img :src='backgroundImage' v-if='backgroundImage' class='background-image-preview' />
-        <span v-if='!backgroundImage'>None.</span>
+        <img :src='backgroundImage || "/not-available.png"' :alt='backgroundImage ? "Preview of background image" : "No background image set"' class='background-image-preview' />
         <input id='background-image-upload' type='file' />
       </b-field>
 
       <label class='label' for='background-colour-input'>Background colour</label>
       <b-field>
         <div class='background-colour' :style='{ backgroundColor: backgroundColour }'></div>
-        <vue-color-compact v-model='backgroundColour' />
+        <vue-color-compact v-if='!backgroundImage' v-model='backgroundColour' />
+        <span v-if='backgroundImage'>(Hidden by the background image.)</span>
       </b-field>
 
     </form>
@@ -36,13 +36,13 @@
     <b-modal :active.sync='modalIsActive' :canCancel='false' scroll='keep'>
       <div class='modal-card' style='width: auto'>
         <header class='modal-card-head'>
-          <p class='modal-card-title'>Welcome to the Indienet!</p>
+          <p class='modal-card-title'>Welcome to your Indie Site!</p>
         </header>
         <section class='modal-card-body'>
           <div class='instructions'>
-            <p>To start, please pick a strong password to protect your Indie Site.</p>
+            <p>To start, please pick a strong password to protect yourself.</p>
             
-            <p>Please don’t lose this. We don’t store your password to protect your privacy and we can’t recover it even if we wanted to. If possible, generate and store your password using a password manager like <a href='https://1password.com'>1Password</a> or <a href='https://keepass.info'>KeePass</a>.</p>
+            <p>Please don’t lose this. Your site will not store your password to protect your privacy and you can’t recover it if you forget it. If possible, generate and store your password using a password manager like <a href='https://1password.com'>1Password</a> or <a href='https://keepass.info'>KeePass</a>.</p>
           </div>
           <b-field label='Password'>
             <div id='password-field' class='control'>
@@ -128,6 +128,13 @@
     border: 1px solid #333;
   }
 
+  .background-image-preview {
+    width: 100px;
+    height: 65px;
+    margin-right: .75em;
+    border: 1px solid #333;
+  }
+
   .button {
     /* Fix the text centering in the button. */
     padding-top: 0.15em;
@@ -167,7 +174,7 @@
     /* padding-bottom: 0; */
   }
 
-  .vc-compact {
+  div.vc-compact {
     width: 246px;
   }
 
@@ -190,6 +197,7 @@
   .profile-image-preview {
     width: 100px;
     height: 100px;
+    margin-right: .75em;
     border: 1px solid #333;
   }
 </style>