css fixes for power dialog

src/templates/dialogHeader.html

@@ -1,6 +1,8 @@
 <header>
-  <img src="{{icon}}" height="64" width="64" class="flex0 mbSwadeIcon" title="{{name}} Effect" alt=" " />
-  <div class="flexcol mbSwadeTitle">
+  {{#if icon}}
+  <img src="{{icon}}" height="64" width="64" class="mbSwadeIcon" title="{{name}} Effect" alt=" " />
+  {{/if}}
+  <div class="mbSwadeTitle">
     <h2>{{headerTitle}}</h2>
     {{#if headerSubtitle}}<p>{{headerSubtitle}}</p>{{/if}}
   </div>

src/templates/powerDialog.html

@@ -17,31 +17,38 @@
     {{/if}}
   </p>
   {{/if}}
-  {{#each modifiers}}
-  <div class="form-group">
-    {{#if isCheckbox}}
-    <label class="checkbox">
-      <input type="checkbox" name="{{id}}" {{checked default}} />
-      {{#if epic}}⭐ {{/if}}{{name}}
-      {{#if value}}({{numberFormat value decimals=0 sign=true}}){{/if}}
-    </label>
-    {{/if}}
-    {{#if isText}}
-    <label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
-    <input name="{{id}}" type="text" value="{{default}}">
-    {{/if}}
-    {{#if isNumber}}
-    <label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
-    <input name="{{id}}" type="number" value="{{default}}" {{#if step}}step="{{step}}" {{/if}} {{#if min}}min="{{min}}"
-      {{/if}} {{#if max}}max="{{max}}" {{/if}}>
-    {{/if}}
-    {{#if isSelect}}
-    <label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
-    <select name="{{id}}">{{selectOptions choices selected=default}}</select>
-    {{/if}}
-    {{#if isRadio}}
-    {{#if epic}}⭐ {{/if}}{{name}}:</label> {{radioBoxes id choices checked=default}}
-    {{/if}}
-  </div>
-  {{/each}}
+  <section class="mbFormFields">
+    {{#each modifiers}}
+    <div class="form-group">
+      {{#unless isRadio}}
+      <label class="mb{{type}}" for="{{../formId}}-{{id}}"><span class="mbModName">{{#if epic}}⭐
+          {{/if}}{{name}}</span>{{#if value}}
+        <span class="mbModValue">({{numberFormat value decimals=0 sign=true}})</span>{{/if}}</label>
+      {{/unless}}
+      {{#if isCheckbox}}
+      <input type="checkbox" name="{{id}}" id="{{../formId}}-{{id}}" {{checked default}} />
+      {{/if}}
+      {{#if isText}}
+      <input name="{{id}}" id="{{formid}}-{{id}}" type="text" value="{{default}}">
+      {{/if}}
+      {{#if isNumber}}
+      <input name="{{id}}" id="{{../formId}}-{{id}}" type="number" value="{{default}}" {{#if step}}step="{{step}}"
+        {{/if}} {{#if min}}min="{{min}}" {{/if}} {{#if max}}max="{{max}}" {{/if}}>
+      {{/if}}
+      {{#if isSelect}}
+      <select name="{{id}}" id="{{../formId}}-{{id}}">{{selectOptions choices selected=default}}</select>
+      {{/if}}
+      {{#if isRadio}}
+      <fieldset class="mbRadiogroup">
+        <legend>{{#if epic}}⭐ {{/if}}{{name}}</legend>
+        {{#each choices}}
+        <label class="mbradio" for="{{../../formId}}-{{../id}}-{{@key}}">{{text}}</label>
+        <input type="radio" name="{{../id}}" {{checked checked}} id="{{../../formId}}-{{../id}}-{{@key}}"
+          value="{{@key}}">
+        {{/each}}
+        {{/if}}
+      </fieldset>
+    </div>
+    {{/each}}
+  </section>
 </section>