1 files changed, 55 insertions, 43 deletions
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 655e0589..fa173b98 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -60,9 +60,14 @@
   <div class="preview-container">
     <div class="panel dummy" :style="previewRules">
       <div class="panel-heading">
-        {{$t('settings.style.preview.header')}}
-        <span class="badge badge-notification">
-          99
+        <div class="title">
+          {{$t('settings.style.preview.header')}}
+          <span class="badge badge-notification">
+            99
+          </span>
+        </div>
+        <span class="faint">
+          {{$t('settings.style.preview.header_faint')}}
         </span>
         <span class="alert error">
           {{$t('settings.style.preview.error')}}
@@ -70,56 +75,63 @@
         <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>
+        <div class="post">
+          <div class="avatar">
+            ( ͡° ͜ʖ ͡°)
+          </div>
+          <div class="content">
+            <h4>
+              Content
+            </h4>
 
-        <i18n path="settings.style.preview.text">
-          <a style="color: var(--link)">
-            {{$t('settings.style.preview.link')}}
-          </a>
-        </i18n>
+            <i18n path="settings.style.preview.text">
+              <code style="font-family: var(--postCodeFont)">
+                {{$t('settings.style.preview.mono')}}
+              </code>
+              <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"/>
+            <div class="icons">
+              <i style="color: var(--cBlue)" class="icon-reply"/>
+              <i style="color: var(--cGreen)" class="icon-retweet"/>
+              <i style="color: var(--cOrange)" class="icon-star"/>
+              <i style="color: var(--cRed)" class="icon-cancel"/>
+            </div>
+          </div>
+        </div>
 
-        <br>
-        <br>
+        <div class="after-post">
+          <div class="avatar-alt">
+            :^)
+          </div>
+          <div class="content">
+            <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 class="separator"></div>
 
-        <input :value="$t('settings.style.preview.input')" type="text">
         <span class="alert error">
           {{$t('settings.style.preview.error')}}
         </span>
+        <input :value="$t('settings.style.preview.input')" type="text">
 
-        <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 class="actions">
+          <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>
       </div>
     </div>
   </div>