updated preview window

src/components/style_switcher/style_switcher.scss

@@ -163,32 +163,95 @@
     background-size: cover;
     background-position: 50% 50%;
 
-    .separator {
+    .dummy {
-      margin: 1em;
+      .post {
-      border-bottom: 1px solid;
+        font-family: var(--postFont);
-      border-color: $fallback--border;
+        display: flex;
-      border-color: var(--border, $fallback--border);
-    }
 
-    .panel-heading {
+        .content {
-      .badge, .alert, .btn, .faint {
+          flex: 1;
-        margin-left: 1em;
-      }
-      .flex-spacer {
-        flex: 1;
-      }
-    }
-    .checkbox {
-      display: inline-flex;
-      align-items: baseline;
-      margin-right: 1em;
-    }
 
-    .btn {
+          h4 {
-      margin-left: 0;
+            margin-bottom: .25em;
-      padding: 0 1em;
+          }
-      min-width: 3em;
+
-      min-height: 30px;
+          .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;
+        border-color: $fallback--border;
+        border-color: var(--border, $fallback--border);
+      }
+
+      .panel-heading {
+        .badge, .alert, .btn, .faint {
+          margin-left: 1em;
+        }
+        .flex-spacer {
+          flex: 1;
+        }
+      }
+      .btn {
+        margin-left: 0;
+        padding: 0 1em;
+        min-width: 3em;
+        min-height: 30px;
+      }
     }
   }
 
@@ -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,66 +60,78 @@
   <div class="preview-container">
     <div class="panel dummy" :style="previewRules">
       <div class="panel-heading">
-        {{$t('settings.style.preview.header')}}
+        <div class="title">
-        <span class="badge badge-notification">
+          {{$t('settings.style.preview.header')}}
-          99
+          <span class="badge badge-notification">
-        </span>
+            99
-        <span class="alert error">
+          </span>
-          {{$t('settings.style.preview.error')}}
+        </div>
-        </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>
-
-        <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>
-        <br>
-
-        <input :value="$t('settings.style.preview.input')" 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>
+      <div class="panel-body theme-preview-content">
+        <div class="post">
+          <div class="avatar">
+            ( ͡° ͜ʖ ͡°)
+          </div>
+          <div class="content">
+            <h4>
+              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(--cOrange)" class="icon-star"/>
+              <i style="color: var(--cRed)" class="icon-cancel"/>
+            </div>
+          </div>
+        </div>
+
+        <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>
 
-        <i18n path="settings.style.preview.fine_print" tag="span" class="faint">
+        <span class="alert error">
-          <a style="color: var(--faintLink)">
+          {{$t('settings.style.preview.error')}}
-            {{$t('settings.style.preview.faint_link')}}
+        </span>
-          </a>
+        <input :value="$t('settings.style.preview.input')" type="text">
-        </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>

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!",