Style installation report

refs #7163

application/views/scripts/setup/parts/install.phtml

@@ -1,9 +1,15 @@
+<div id="installer">
   <div class="report">
   <?php foreach ($report as $entry): ?>
-  <p class="<?= $entry->state ? 'ok' : 'failure'; ?>">
+    <p<?= false === $entry->state ? ' class="error"' : ''; ?>>
       <?= $entry->message; ?>
     </p>
   <?php endforeach ?>
+  <?php if ($success): ?>
+    <p class="success"><?= t('Congratulations! The installation of Icinga Web 2 was successfully completed.'); ?></p>
+  <?php else: ?>
+    <p class="failure"><?= t('Sorry! The installation of Icinga Web 2 has failed.'); ?></p>
+  <?php endif ?>
   </div>
   <div class="buttons">
   <?php if ($success): ?>
@@ -12,3 +18,4 @@
     <a href="<?= $this->href(); ?>" class="button-like"><?= t('Back'); ?></a>
   <?php endif ?>
   </div>
+</div>

public/css/icinga/setup.less

@@ -118,25 +118,15 @@
       background-color: #333;
     }
 
-    &.install {
+    &.install, &.login {
       width: 25em;
       color: #fffafa;
       background: #aaa;
 
-      &:hover {
+      &:hover, &:focus {
         background: #888;
       }
     }
-
-    &.login {
-      width: 25em;
-      color: #333;
-      background: #9e4;
-
-      &:hover {
-        background: #7c2;
-      }
-    }
   }
 
   a.button-like {
@@ -234,16 +224,43 @@
   }
 }
 
-#setup div.report {
+.conspicuous-state-notification {
+  width: 66%;
+  margin: 0 auto;
+  padding: 0.5em;
+  color: white;
+  font-weight: bold;
+  border-radius: 1em;
+}
+
+#installer {
+  div.report {
+    padding: 1em;
+    border-radius: 2em;
+    background-color: #eee;
+
     p {
       margin: 1em;
+      color: #444;
+      text-align: center;
 
-    &.ok {
-      color: green;
+      &.error {
+        color: red;
       }
 
       &.failure {
-      color: red;
+        .conspicuous-state-notification;
+        background-color: @colorCritical;
+      }
+
+      &.success {
+        .conspicuous-state-notification;
+        background-color: @colorOk;
       }
     }
   }
+
+  div.buttons {
+    text-align: center;
+  }
+}