Updating style of theme options in wizard (#6177)

app/assets/javascripts/wizard/components/theme-preview.js.es6

@@ -1,3 +1,4 @@
+import computed from "ember-addons/ember-computed-decorators";
 import { observes } from "ember-addons/ember-computed-decorators";
 
 import {
@@ -7,10 +8,17 @@ import {
   LOREM
 } from "wizard/lib/preview";
 
-export default createPreviewComponent(225, 120, {
+export default createPreviewComponent(305, 165, {
   logo: null,
   avatar: null,
 
+  classNameBindings: ["isSelected"],
+
+  @computed("selectedId", "colorsId")
+  isSelected(selectedId, colorsId) {
+    return selectedId === colorsId;
+  },
+
   click() {
     this.sendAction("onChange", this.get("colorsId"));
   },

app/assets/javascripts/wizard/templates/components/theme-previews.hbs

@@ -3,6 +3,7 @@
     <li>
       {{theme-preview colorsId=choice.id
                       wizard=wizard
+                      selectedId=field.value
                       onChange="changed"}}
       {{radio-button radioValue=choice.id
                      label=choice.id

app/assets/stylesheets/wizard.scss

@@ -114,7 +114,13 @@ body.wizard {
 }
 
 .wizard-step-colors {
+  margin-bottom: 20px;
   .grid {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 0;
     margin: 0 auto;
     list-style-type: none;
     text-align: center;
@@ -122,16 +128,31 @@ body.wizard {
     li {
       display: inline-block;
       vertical-align: top;
-      margin: 15px;
+      margin: 0 5px 25px 5px;
+      label:checked + div {
+        display: none;
+      }
+      .is-selected {
+        box-shadow: 0 0 0 5px $tertiary;
+      }
+      div {
+        display: flex;
+        flex: 1 1 auto;
+      }
       .radio-area {
-        text-align: left;
+        display: none;
-        font-size: 14px;
-        font-weight: bold;
         & > * {
           position: relative;
           right: 7px;
         }
       }
+      canvas {
+        transition: box-shadow 0.25s;
+        &:hover {
+          box-shadow: shadow("card");
+          cursor: pointer;
+        }
+      }
     }
   }
 }