2 files changed, 80 insertions, 6 deletions
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 9c4f4ecd..2c33224b 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -163,11 +163,32 @@
     background-size: cover;
     background-position: 50% 50%;
 
+    .separator {
+      margin: 1em;
+      border-bottom: 1px solid;
+      border-color: $fallback--border;
+      border-color: var(--border, $fallback--border);
+    }
+
+    .panel-heading {
+      .badge, .alert, .btn, .faint {
+        margin-left: 1em;
+      }
+      .flex-spacer {
+        flex: 1;
+      }
+    }
+    .checkbox {
+      display: inline-flex;
+      align-items: baseline;
+      margin-right: 1em;
+    }
+
     .btn {
       margin-left: 0;
-      margin-top: 1em;
+      padding: 0 1em;
+      min-width: 3em;
       min-height: 30px;
-      width: 10em;
     }
   }
 
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index a444c6a7..2a7756ed 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -46,27 +46,80 @@
           v-model="keepRoundness">
         <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
       </span>
+      <span>
+        <input
+          id="keep-fonts"
+          type="checkbox"
+          v-model="keepFonts">
+        <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label>
+      </span>
       <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
     </div>
   </div>
 
   <div class="preview-container">
     <div class="panel dummy" :style="previewRules">
-      <div class="panel-heading">Preview</div>
+      <div class="panel-heading">
+        {{$t('settings.style.preview.header')}}
+        <span class="badge badge-notification">
+          99
+        </span>
+        <span class="alert error">
+          {{$t('settings.style.preview.error')}}
+        </span>
+        <button class="btn">
+          {{$t('settings.style.preview.button')}}
+        </button>
+        <span class="flex-spacer"/>
+        <span class="faint">
+          {{$t('settings.style.preview.header_faint')}}
+        </span>
+      </div>
       <div class="panel-body theme-preview-content">
         <div class="avatar">
           ( ͡° ͜ʖ ͡°)
         </div>
         <h4>Content</h4>
+
         <br>
-        A bunch of more content and
-        <a style="color: var(--link)">a nice lil' link</a>
+
+        <i18n path="settings.style.preview.text">
+          <a style="color: var(--link)">
+            {{$t('settings.style.preview.link')}}
+          </a>
+        </i18n>
+
         <i style="color: var(--cBlue)" class="icon-reply"/>
         <i style="color: var(--cGreen)" class="icon-retweet"/>
         <i style="color: var(--cRed)" class="icon-cancel"/>
         <i style="color: var(--cOrange)" class="icon-star"/>
+
         <br>
-        <button class="btn">Button</button>
+        <br>
+
+        <input :value="$t('settings.style.preview.error')" type="text">
+        <span class="alert error">
+          {{$t('settings.style.preview.error')}}
+        </span>
+
+        <br>
+        <br>
+
+        <span class="checkbox">
+          <input checked="very yes" type="checkbox" id="preview_checkbox">
+          <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
+        </span>
+        <button class="btn">
+          {{$t('settings.style.preview.button')}}
+        </button>
+
+        <div class="separator"></div>
+
+        <i18n path="settings.style.preview.fine_print" tag="span" class="faint">
+          <a style="color: var(--faintLink)">
+            {{$t('settings.style.preview.faint_link')}}
+          </a>
+        </i18n>
       </div>
     </div>
   </div>