updated preview window

src/components/style_switcher/style_switcher.scss

@@ -163,6 +163,74 @@
     background-size: cover;
     background-position: 50% 50%;
 
+    .dummy {
+      .post {
+        font-family: var(--postFont);
+        display: flex;
+
+        .content {
+          flex: 1;
+
+          h4 {
+            margin-bottom: .25em;
+          }
+
+          .icons {
+            margin-top: .5em;
+            display: flex;
+
+            i {
+              margin-right: 1em;
+            }
+          }
+        }
+      }
+
+      .after-post {
+        margin-top: 1em;
+        display: flex;
+        align-items: center;
+      }
+
+      .avatar, .avatar-alt{
+        background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
+        color: black;
+        font-family: sans-serif;
+        text-align: center;
+        margin-right: 1em;
+      }
+
+      .avatar-alt {
+        flex: 0 auto;
+        margin-left: 28px;
+        font-size: 12px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        border-radius: $fallback--avatarAltRadius;
+        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      }
+
+      .avatar {
+        flex: 0 auto;
+        width: 48px;
+        height: 48px;
+        font-size: 14px;
+        line-height: 48px;
+      }
+
+      .actions {
+        display: flex;
+        align-items: baseline;
+
+        .checkbox {
+          display: inline-flex;
+          align-items: baseline;
+          margin-right: 1em;
+          flex: 1;
+        }
+      }
+
       .separator {
         margin: 1em;
         border-bottom: 1px solid;
@@ -178,12 +246,6 @@
           flex: 1;
         }
       }
-    .checkbox {
-      display: inline-flex;
-      align-items: baseline;
-      margin-right: 1em;
-    }
-
       .btn {
         margin-left: 0;
         padding: 0 1em;
@@ -191,6 +253,7 @@
         min-height: 30px;
       }
     }
+  }
 
   .apply-container {
     justify-content: center;
@@ -259,17 +322,4 @@
     margin-left: .25em;
     margin-right: .25em;
   }
-
-  .dummy {
-    .avatar {
-      background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
-      color: black;
-      text-align: center;
-      height: 48px;
-      line-height: 48px;
-      width: 48px;
-      float: left;
-      margin-right: 1em;
-    }
-  }
 }

src/components/style_switcher/style_switcher.vue

@@ -60,51 +60,70 @@
   <div class="preview-container">
     <div class="panel dummy" :style="previewRules">
       <div class="panel-heading">
+        <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')}}
         </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="post">
           <div class="avatar">
             ( ͡° ͜ʖ ͡°)
           </div>
-        <h4>Content</h4>
+          <div class="content">
-
+            <h4>
-        <br>
+              Content
+            </h4>
 
             <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>
 
+            <div class="icons">
               <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"/>
+              <i style="color: var(--cRed)" class="icon-cancel"/>
+            </div>
+          </div>
+        </div>
 
-        <br>
+        <div class="after-post">
-        <br>
+          <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>
+        <div class="actions">
-        <br>
-
           <span class="checkbox">
             <input checked="very yes" type="checkbox" id="preview_checkbox">
             <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
@@ -112,14 +131,7 @@
           <button class="btn">
             {{$t('settings.style.preview.button')}}
           </button>
-
+        </div>
-        <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>

src/components/timeline/timeline.vue

@@ -10,7 +10,7 @@
       <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.show_new')}}{{newStatusCountStr}}
       </button>
-      <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
+      <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.up_to_date')}}
       </div>
     </div>

src/i18n/en.json

@@ -268,7 +268,8 @@
         "header": "Preview of header",
         "error": "Example error",
         "button": "Button",
-        "text": "A bunch of more content and {0}",
+        "text": "A bunch of more {0} and {1}",
+        "mono": "content",
         "input": "Just landed in L.A.",
         "faint_link": "helpful manual",
         "fine_print": "Read our {0} to learn nothing useful!",