diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 2c33224b..baf2b73a 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -163,32 +163,95 @@
background-size: cover;
background-position: 50% 50%;
- .separator {
- margin: 1em;
- border-bottom: 1px solid;
- border-color: $fallback--border;
- border-color: var(--border, $fallback--border);
- }
+ .dummy {
+ .post {
+ font-family: var(--postFont);
+ display: flex;
- .panel-heading {
- .badge, .alert, .btn, .faint {
- margin-left: 1em;
- }
- .flex-spacer {
- flex: 1;
- }
- }
- .checkbox {
- display: inline-flex;
- align-items: baseline;
- margin-right: 1em;
- }
+ .content {
+ flex: 1;
- .btn {
- margin-left: 0;
- padding: 0 1em;
- min-width: 3em;
- min-height: 30px;
+ 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;
+ 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;
- }
- }
}
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,66 +60,78 @@
<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
- </span>
- <span class="alert error">
- {{$t('settings.style.preview.error')}}
- </span>
- <button class="btn">
- {{$t('settings.style.preview.button')}}
- </button>
- <span class="flex-spacer"/>
+ <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>
- </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">
- <a style="color: var(--faintLink)">
- {{$t('settings.style.preview.faint_link')}}
- </a>
- </i18n>
+ <span class="alert error">
+ {{$t('settings.style.preview.error')}}
+ </span>
+ <input :value="$t('settings.style.preview.input')" type="text">
+
+ <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>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index b69a09fd..bc7f74c2 100644
--- a/src/components/timeline/timeline.vue
+++ b/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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 74e7a556..8847b11e 100644
--- a/src/i18n/en.json
+++ b/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!",