From 9108737d55300d8a4f822ba94335d8b53f04854d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Apr 2019 20:33:11 +0300
Subject: Webpack 4, ESLint with Vue, Node-sass, updated dependencies overall.
 New linting.

---
 test/unit/specs/modules/statuses.spec.js           | 58 +++++++++----------
 test/unit/specs/modules/users.spec.js              |  4 +-
 .../entity_normalizer/entity_normalizer.spec.js    | 16 ++----
 .../file_size_format/file_size_format.spec.js      | 66 +++++++++++-----------
 .../services/status_parser/status_parses.spec.js   |  4 +-
 5 files changed, 71 insertions(+), 77 deletions(-)

(limited to 'test')

diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index 0bbcb25a..ba93138f 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -1,10 +1,10 @@
 import { defaultState, mutations, prepareStatus } from '../../../../src/modules/statuses.js'
 
 // eslint-disable-next-line camelcase
-const makeMockStatus = ({id, text, type = 'status'}) => {
+const makeMockStatus = ({ id, text, type = 'status' }) => {
   return {
     id,
-    user: {id: '0'},
+    user: { id: '0' },
     name: 'status',
     text: text || `Text number ${id}`,
     fave_num: 0,
@@ -17,7 +17,7 @@ const makeMockStatus = ({id, text, type = 'status'}) => {
 describe('Statuses module', () => {
   describe('prepareStatus', () => {
     it('sets deleted flag to false', () => {
-      const aStatus = makeMockStatus({id: '1', text: 'Hello oniichan'})
+      const aStatus = makeMockStatus({ id: '1', text: 'Hello oniichan' })
       expect(prepareStatus(aStatus).deleted).to.eq(false)
     })
   })
@@ -25,7 +25,7 @@ describe('Statuses module', () => {
   describe('addNewStatuses', () => {
     it('adds the status to allStatuses and to the given timeline', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
+      const status = makeMockStatus({ id: '1' })
 
       mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
 
@@ -37,7 +37,7 @@ describe('Statuses module', () => {
 
     it('counts the status as new if it has not been seen on this timeline', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
+      const status = makeMockStatus({ id: '1' })
 
       mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
       mutations.addNewStatuses(state, { statuses: [status], timeline: 'friends' })
@@ -55,7 +55,7 @@ describe('Statuses module', () => {
 
     it('add the statuses to allStatuses if no timeline is given', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
+      const status = makeMockStatus({ id: '1' })
 
       mutations.addNewStatuses(state, { statuses: [status] })
 
@@ -67,7 +67,7 @@ describe('Statuses module', () => {
 
     it('adds the status to allStatuses and to the given timeline, directly visible', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
+      const status = makeMockStatus({ id: '1' })
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
 
@@ -79,10 +79,10 @@ describe('Statuses module', () => {
 
     it('removes statuses by tag on deletion', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
-      const otherStatus = makeMockStatus({id: '3'})
+      const status = makeMockStatus({ id: '1' })
+      const otherStatus = makeMockStatus({ id: '3' })
       status.uri = 'xxx'
-      const deletion = makeMockStatus({id: '2', type: 'deletion'})
+      const deletion = makeMockStatus({ id: '2', type: 'deletion' })
       deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
       deletion.uri = 'xxx'
 
@@ -97,8 +97,8 @@ describe('Statuses module', () => {
 
     it('does not update the maxId when the noIdUpdate flag is set', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
-      const secondStatus = makeMockStatus({id: '2'})
+      const status = makeMockStatus({ id: '1' })
+      const secondStatus = makeMockStatus({ id: '2' })
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
       expect(state.timelines.public.maxId).to.eql('1')
@@ -111,10 +111,10 @@ describe('Statuses module', () => {
 
     it('keeps a descending by id order in timeline.visibleStatuses and timeline.statuses', () => {
       const state = defaultState()
-      const nonVisibleStatus = makeMockStatus({id: '1'})
-      const status = makeMockStatus({id: '3'})
-      const statusTwo = makeMockStatus({id: '2'})
-      const statusThree = makeMockStatus({id: '4'})
+      const nonVisibleStatus = makeMockStatus({ id: '1' })
+      const status = makeMockStatus({ id: '3' })
+      const statusTwo = makeMockStatus({ id: '2' })
+      const statusThree = makeMockStatus({ id: '4' })
 
       mutations.addNewStatuses(state, { statuses: [nonVisibleStatus], showImmediately: false, timeline: 'public' })
 
@@ -131,9 +131,9 @@ describe('Statuses module', () => {
 
     it('splits retweets from their status and links them', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
-      const retweet = makeMockStatus({id: '2', type: 'retweet'})
-      const modStatus = makeMockStatus({id: '1', text: 'something else'})
+      const status = makeMockStatus({ id: '1' })
+      const retweet = makeMockStatus({ id: '2', type: 'retweet' })
+      const modStatus = makeMockStatus({ id: '1', text: 'something else' })
 
       retweet.retweeted_status = status
 
@@ -156,8 +156,8 @@ describe('Statuses module', () => {
 
     it('replaces existing statuses with the same id', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
-      const modStatus = makeMockStatus({id: '1', text: 'something else'})
+      const status = makeMockStatus({ id: '1' })
+      const modStatus = makeMockStatus({ id: '1', text: 'something else' })
 
       // Add original status
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
@@ -173,9 +173,9 @@ describe('Statuses module', () => {
 
     it('replaces existing statuses with the same id, coming from a retweet', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
-      const modStatus = makeMockStatus({id: '1', text: 'something else'})
-      const retweet = makeMockStatus({id: '2', type: 'retweet'})
+      const status = makeMockStatus({ id: '1' })
+      const modStatus = makeMockStatus({ id: '1', text: 'something else' })
+      const retweet = makeMockStatus({ id: '2', type: 'retweet' })
       retweet.retweeted_status = modStatus
 
       // Add original status
@@ -194,7 +194,7 @@ describe('Statuses module', () => {
 
     it('handles favorite actions', () => {
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
+      const status = makeMockStatus({ id: '1' })
 
       const favorite = {
         id: '2',
@@ -272,14 +272,14 @@ describe('Statuses module', () => {
     it('removes a notification when the notice gets removed', () => {
       const user = { id: '1' }
       const state = defaultState()
-      const status = makeMockStatus({id: '1'})
-      const otherStatus = makeMockStatus({id: '3'})
-      const mentionedStatus = makeMockStatus({id: '2'})
+      const status = makeMockStatus({ id: '1' })
+      const otherStatus = makeMockStatus({ id: '3' })
+      const mentionedStatus = makeMockStatus({ id: '2' })
       mentionedStatus.attentions = [user]
       mentionedStatus.uri = 'xxx'
       otherStatus.attentions = [user]
 
-      const deletion = makeMockStatus({id: '4', type: 'deletion'})
+      const deletion = makeMockStatus({ id: '4', type: 'deletion' })
       deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
       deletion.uri = 'xxx'
 
diff --git a/test/unit/specs/modules/users.spec.js b/test/unit/specs/modules/users.spec.js
index c8bc0ae7..eeb7afef 100644
--- a/test/unit/specs/modules/users.spec.js
+++ b/test/unit/specs/modules/users.spec.js
@@ -24,11 +24,11 @@ describe('The users module', () => {
       const user = { id: '1', name: 'Guy' }
 
       mutations.addNewUsers(state, [user])
-      mutations.setMuted(state, {user, muted: true})
+      mutations.setMuted(state, { user, muted: true })
 
       expect(user.muted).to.eql(true)
 
-      mutations.setMuted(state, {user, muted: false})
+      mutations.setMuted(state, { user, muted: false })
 
       expect(user.muted).to.eql(false)
     })
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 2b0b0d6d..e0e63fd9 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -160,12 +160,6 @@ const makeMockEmojiMasto = (overrides = [{}]) => {
   ]
 }
 
-parseNotification
-parseUser
-parseStatus
-makeMockStatusQvitter
-makeMockUserQvitter
-
 describe('API Entities normalizer', () => {
   describe('parseStatus', () => {
     describe('QVitter preprocessing', () => {
@@ -203,15 +197,15 @@ describe('API Entities normalizer', () => {
       })
 
       it('sets nsfw for statuses with the #nsfw tag', () => {
-        const safe = makeMockStatusQvitter({id: '1', text: 'Hello oniichan'})
-        const nsfw = makeMockStatusQvitter({id: '1', text: 'Hello oniichan #nsfw'})
+        const safe = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan' })
+        const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw' })
 
         expect(parseStatus(safe).nsfw).to.eq(false)
         expect(parseStatus(nsfw).nsfw).to.eq(true)
       })
 
       it('leaves existing nsfw settings alone', () => {
-        const nsfw = makeMockStatusQvitter({id: '1', text: 'Hello oniichan #nsfw', nsfw: false})
+        const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw', nsfw: false })
 
         expect(parseStatus(nsfw).nsfw).to.eq(false)
       })
@@ -320,9 +314,9 @@ describe('API Entities normalizer', () => {
   describe('MastoAPI emoji adder', () => {
     const emojis = makeMockEmojiMasto()
     const imageHtml = '<img src="https://example.com/image.png" alt="image" class="emoji" />'
-          .replace(/"/g, '\'')
+      .replace(/"/g, '\'')
     const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" class="emoji" />'
-          .replace(/"/g, '\'')
+      .replace(/"/g, '\'')
 
     it('correctly replaces shortcodes in supplied string', () => {
       const result = addEmojis('This post has :image: emoji and :thinking: emoji', emojis)
diff --git a/test/unit/specs/services/file_size_format/file_size_format.spec.js b/test/unit/specs/services/file_size_format/file_size_format.spec.js
index 0a5a82b7..e02ac379 100644
--- a/test/unit/specs/services/file_size_format/file_size_format.spec.js
+++ b/test/unit/specs/services/file_size_format/file_size_format.spec.js
@@ -1,34 +1,34 @@
- import fileSizeFormatService from '../../../../../src/services/file_size_format/file_size_format.js'
- describe('fileSizeFormat', () => {
-   it('Formats file size', () => {
-     const values = [1, 1024, 1048576, 1073741824, 1099511627776]
-     const expected = [
-       {
-         num: 1,
-         unit: 'B'
-       },
-       {
-         num: 1,
-         unit: 'KiB'
-       },
-       {
-         num: 1,
-         unit: 'MiB'
-       },
-       {
-         num: 1,
-         unit: 'GiB'
-       },
-       {
-         num: 1,
-         unit: 'TiB'
-       }
-     ]
+import fileSizeFormatService from '../../../../../src/services/file_size_format/file_size_format.js'
+describe('fileSizeFormat', () => {
+  it('Formats file size', () => {
+    const values = [1, 1024, 1048576, 1073741824, 1099511627776]
+    const expected = [
+      {
+        num: 1,
+        unit: 'B'
+      },
+      {
+        num: 1,
+        unit: 'KiB'
+      },
+      {
+        num: 1,
+        unit: 'MiB'
+      },
+      {
+        num: 1,
+        unit: 'GiB'
+      },
+      {
+        num: 1,
+        unit: 'TiB'
+      }
+    ]
 
-     var res = []
-     for (var value in values) {
-       res.push(fileSizeFormatService.fileSizeFormat(values[value]))
-     }
-     expect(res).to.eql(expected)
-   })
- })
+    var res = []
+    for (var value in values) {
+      res.push(fileSizeFormatService.fileSizeFormat(values[value]))
+    }
+    expect(res).to.eql(expected)
+  })
+})
diff --git a/test/unit/specs/services/status_parser/status_parses.spec.js b/test/unit/specs/services/status_parser/status_parses.spec.js
index 65808d84..7afd5042 100644
--- a/test/unit/specs/services/status_parser/status_parses.spec.js
+++ b/test/unit/specs/services/status_parser/status_parses.spec.js
@@ -1,7 +1,7 @@
-const example = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> <a href="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" title="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" class="attachment" id="attachment-159853" rel="nofollow external">https://social.heldscal.la/attachment/159853</a></div>'
-
 import { removeAttachmentLinks } from '../../../../../src/services/status_parser/status_parser.js'
 
+const example = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> <a href="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" title="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" class="attachment" id="attachment-159853" rel="nofollow external">https://social.heldscal.la/attachment/159853</a></div>'
+
 describe('statusParser.removeAttachmentLinks', () => {
   const exampleWithoutAttachmentLinks = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> </div>'
 
-- 
cgit v1.2.3-70-g09d2


From 262760d2586cac48da27cf7eb5389116d4023dfe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 10 Apr 2019 21:48:42 +0300
Subject: revert unnecessary changes

---
 src/App.vue                                        | 113 +--
 src/boot/routes.js                                 |   4 +-
 src/components/about/about.vue                     |   6 +-
 src/components/attachment/attachment.js            |   2 +-
 src/components/attachment/attachment.vue           | 100 +--
 src/components/basic_user_card/basic_user_card.vue |  47 +-
 src/components/block_card/block_card.vue           |  14 +-
 src/components/chat_panel/chat_panel.js            |   2 +-
 src/components/chat_panel/chat_panel.vue           |  59 +-
 src/components/color_input/color_input.vue         |  65 +-
 src/components/contrast_ratio/contrast_ratio.vue   |  52 +-
 .../conversation-page/conversation-page.vue        |   4 +-
 src/components/conversation/conversation.js        |  10 +-
 src/components/conversation/conversation.vue       |  25 +-
 src/components/delete_button/delete_button.js      |   2 +-
 src/components/delete_button/delete_button.vue     |   7 +-
 src/components/dm_timeline/dm_timeline.vue         |   6 +-
 src/components/emoji-input/emoji-input.js          |   5 +-
 src/components/emoji-input/emoji-input.vue         |  41 +-
 src/components/export_import/export_import.vue     |  33 +-
 src/components/favorite_button/favorite_button.js  |   4 +-
 src/components/favorite_button/favorite_button.vue |  17 +-
 src/components/features_panel/features_panel.vue   |  22 +-
 src/components/follow_card/follow_card.js          |   2 +-
 src/components/follow_card/follow_card.vue         |  19 +-
 .../follow_request_card/follow_request_card.vue    |  14 +-
 src/components/follow_requests/follow_requests.vue |   8 +-
 src/components/font_control/font_control.vue       |  81 +-
 .../friends_timeline/friends_timeline.vue          |   6 +-
 src/components/gallery/gallery.vue                 |  19 +-
 src/components/image_cropper/image_cropper.vue     |  55 +-
 .../instance_specific_panel.vue                    |   8 +-
 .../interface_language_switcher.vue                |  52 +-
 src/components/link-preview/link-preview.vue       |  20 +-
 src/components/login_form/login_form.js            |   2 +-
 src/components/login_form/login_form.vue           | 100 +--
 src/components/media_modal/media_modal.vue         |  22 +-
 src/components/media_upload/media_upload.js        |   6 +-
 src/components/media_upload/media_upload.vue       |  30 +-
 src/components/mentions/mentions.vue               |   6 +-
 src/components/mobile_nav/mobile_nav.vue           |  71 +-
 .../mobile_post_status_modal.vue                   |  42 +-
 src/components/mute_card/mute_card.vue             |  14 +-
 src/components/nav_panel/nav_panel.vue             |  17 +-
 src/components/notification/notification.vue       |  87 +--
 src/components/notifications/notifications.vue     |  61 +-
 src/components/oauth_callback/oauth_callback.js    |   2 +-
 src/components/opacity_input/opacity_input.vue     |  58 +-
 .../post_status_form/post_status_form.js           |  29 +-
 .../post_status_form/post_status_form.vue          | 260 ++-----
 .../public_and_external_timeline.vue               |   6 +-
 src/components/public_timeline/public_timeline.vue |   6 +-
 src/components/range_input/range_input.vue         |  79 +-
 src/components/registration/registration.js        |   4 +-
 src/components/registration/registration.vue       | 225 ++----
 src/components/remote_follow/remote_follow.vue     |  22 +-
 src/components/retweet_button/retweet_button.js    |   4 +-
 src/components/retweet_button/retweet_button.vue   |  23 +-
 src/components/scope_selector/scope_selector.js    |   8 +-
 src/components/scope_selector/scope_selector.vue   |  56 +-
 src/components/settings/settings.vue               | 723 +++++++-----------
 src/components/shadow_control/shadow_control.vue   | 293 +++-----
 src/components/side_drawer/side_drawer.vue         |  92 +--
 src/components/status/status.js                    |   8 +-
 src/components/status/status.vue                   | 362 ++-------
 src/components/still-image/still-image.vue         |  18 +-
 src/components/style_switcher/preview.vue          | 151 ++--
 src/components/style_switcher/style_switcher.vue   | 827 +++++++--------------
 src/components/tab_switcher/tab_switcher.js        |  40 +-
 src/components/tag_timeline/tag_timeline.vue       |   9 +-
 .../terms_of_service_panel.vue                     |   6 +-
 src/components/timeline/timeline.js                |   2 +-
 src/components/timeline/timeline.vue               |  59 +-
 src/components/user_avatar/user_avatar.vue         |   2 +-
 src/components/user_card/user_card.js              |  18 +-
 src/components/user_card/user_card.vue             | 334 +++------
 src/components/user_finder/user_finder.vue         |  37 +-
 src/components/user_panel/user_panel.vue           |  16 +-
 src/components/user_profile/user_profile.vue       | 121 ++-
 src/components/user_search/user_search.js          |   2 +-
 src/components/user_search/user_search.vue         |  35 +-
 src/components/user_settings/user_settings.js      |  26 +-
 src/components/user_settings/user_settings.vue     | 389 +++-------
 .../video_attachment/video_attachment.vue          |   5 +-
 src/components/who_to_follow/who_to_follow.js      |   2 +-
 src/components/who_to_follow/who_to_follow.vue     |   8 +-
 .../who_to_follow_panel/who_to_follow_panel.js     |   2 +-
 .../who_to_follow_panel/who_to_follow_panel.vue    |  19 +-
 src/hocs/with_list/with_list.js                    |  10 +-
 src/hocs/with_load_more/with_load_more.js          |  56 +-
 src/hocs/with_subscription/with_subscription.js    |  68 +-
 src/modules/api.js                                 |  10 +-
 src/modules/chat.js                                |   4 +-
 src/modules/config.js                              |   4 +-
 src/modules/errors.js                              |   1 +
 src/modules/instance.js                            |   2 +-
 src/modules/oauth_tokens.js                        |   4 +-
 src/modules/statuses.js                            |   8 +-
 src/modules/users.js                               |  24 +-
 src/services/api/api.service.js                    |  80 +-
 .../backend_interactor_service.js                  |  78 +-
 src/services/color_convert/color_convert.js        |   2 +-
 src/services/completion/completion.js              |   2 +-
 src/services/file_size_format/file_size_format.js  |   2 +-
 .../follow_request_fetcher.service.js              |   2 +-
 src/services/new_api/oauth.js                      |   8 +-
 src/services/new_api/user_search.js                |   6 +-
 src/services/new_api/utils.js                      |   4 +-
 .../notification_utils/notification_utils.js       |   2 +-
 .../notifications_fetcher.service.js               |   8 +-
 .../status_poster/status_poster.service.js         |   2 +-
 src/services/style_setter/style_setter.js          |  12 +-
 .../timeline_fetcher/timeline_fetcher.service.js   |  10 +-
 src/services/user_highlighter/user_highlighter.js  |   2 +-
 test/unit/specs/modules/statuses.spec.js           |  58 +-
 test/unit/specs/modules/users.spec.js              |   4 +-
 .../entity_normalizer/entity_normalizer.spec.js    |  16 +-
 .../file_size_format/file_size_format.spec.js      |  66 +-
 .../services/status_parser/status_parses.spec.js   |   4 +-
 yarn.lock                                          |   7 -
 120 files changed, 2087 insertions(+), 4249 deletions(-)

(limited to 'test')

diff --git a/src/App.vue b/src/App.vue
index e1f6b4a5..3b8623ad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,112 +1,51 @@
 <template>
-  <div
-    id="app"
-    :style="bgAppStyle"
-  >
-    <div
-      class="app-bg-wrapper"
-      :style="bgStyle"
-    />
+  <div id="app" v-bind:style="bgAppStyle">
+    <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
     <MobileNav v-if="isMobileLayout" />
-    <nav
-      v-else
-      id="nav"
-      class="nav-bar container"
-      @click="scrollToTop()"
-    >
-      <div
-        class="logo"
-        :style="logoBgStyle"
-      >
-        <div
-          class="mask"
-          :style="logoMaskStyle"
-        />
-        <img
-          :src="logo"
-          :style="logoStyle"
-        >
+    <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
+      <div class='logo' :style='logoBgStyle'>
+        <div class='mask' :style='logoMaskStyle'></div>
+        <img :src='logo' :style='logoStyle'>
       </div>
-      <div class="inner-nav">
-        <div class="item">
-          <router-link
-            class="site-name"
-            :to="{ name: 'root' }"
-            active-class="home"
-          >
-            {{ sitename }}
-          </router-link>
+      <div class='inner-nav'>
+        <div class='item'>
+          <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
-        <div class="item right">
-          <user-finder
-            class="button-icon nav-icon mobile-hidden"
-            @toggled="onFinderToggled"
-          />
-          <router-link
-            class="mobile-hidden"
-            :to="{ name: 'settings'}"
-          >
-            <i
-              class="button-icon icon-cog nav-icon"
-              :title="$t('nav.preferences')"
-            />
-          </router-link>
-          <a
-            v-if="currentUser"
-            href="#"
-            class="mobile-hidden"
-            @click.prevent="logout"
-          ><i
-            class="button-icon icon-logout nav-icon"
-            :title="$t('login.logout')"
-          /></a>
+        <div class='item right'>
+          <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
+          <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
+          <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
         </div>
       </div>
     </nav>
-    <div
-      id="content"
-      class="container"
-    >
-      <div
-        v-if="!isMobileLayout"
-        class="sidebar-flexer mobile-hidden"
-      >
+    <div v-if="" class="container" id="content">
+      <div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout">
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">
             <div class="sidebar">
-              <user-panel />
-              <nav-panel />
-              <instance-specific-panel v-if="showInstanceSpecificPanel" />
-              <features-panel v-if="!currentUser && showFeaturesPanel" />
-              <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
-              <notifications v-if="currentUser" />
+              <user-panel></user-panel>
+              <nav-panel></nav-panel>
+              <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
+              <features-panel v-if="!currentUser && showFeaturesPanel"></features-panel>
+              <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
+              <notifications v-if="currentUser"></notifications>
             </div>
           </div>
         </div>
       </div>
       <div class="main">
-        <div
-          v-if="!currentUser"
-          class="login-hint panel panel-default"
-        >
-          <router-link
-            :to="{ name: 'login' }"
-            class="panel-body"
-          >
+        <div v-if="!currentUser" class="login-hint panel panel-default">
+          <router-link :to="{ name: 'login' }" class="panel-body">
             {{ $t("login.hint") }}
           </router-link>
         </div>
         <transition name="fade">
-          <router-view />
+          <router-view></router-view>
         </transition>
       </div>
-      <media-modal />
+      <media-modal></media-modal>
     </div>
-    <chat-panel
-      v-if="currentUser && chat"
-      :floating="true"
-      class="floating-chat mobile-hidden"
-    />
+    <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
   </div>
 </template>
 
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 3538c1e6..7e54a98b 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -24,8 +24,8 @@ export default (store) => {
       path: '/',
       redirect: _to => {
         return (store.state.users.currentUser
-          ? store.state.instance.redirectRootLogin
-          : store.state.instance.redirectRootNoLogin) || '/main/all'
+                ? store.state.instance.redirectRootLogin
+                : store.state.instance.redirectRootNoLogin) || '/main/all'
       }
     },
     { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 62ae16ea..13dec87c 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="sidebar">
-    <instance-specific-panel />
-    <features-panel v-if="showFeaturesPanel" />
-    <terms-of-service-panel />
+    <instance-specific-panel></instance-specific-panel>
+    <features-panel v-if="showFeaturesPanel"></features-panel>
+    <terms-of-service-panel></terms-of-service-panel>
   </div>
 </template>
 
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index e93921fe..3b7f08dc 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -51,7 +51,7 @@ const Attachment = {
     }
   },
   methods: {
-    linkClicked ({ target }) {
+    linkClicked ({target}) {
       if (target.tagName === 'A') {
         window.open(target.href, '_blank')
       }
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 12ed9158..c58bebd3 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,104 +1,54 @@
 <template>
-  <div
-    v-if="usePlaceHolder"
-    @click="openModal"
-  >
-    <a
+  <div v-if="usePlaceHolder" @click="openModal">
+    <a class="placeholder"
       v-if="type !== 'html'"
-      class="placeholder"
-      target="_blank"
-      :href="attachment.url"
+      target="_blank" :href="attachment.url"
     >
-      [{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
+      [{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
     </a>
   </div>
   <div
-    v-else
-    v-show="!isEmpty"
-    class="attachment"
+    v-else class="attachment"
     :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+    v-show="!isEmpty"
   >
-    <a
-      v-if="hidden"
-      class="image-attachment"
-      :href="attachment.url"
-      @click.prevent="toggleHidden"
-    >
-      <img
-        :key="nsfwImage"
-        class="nsfw"
-        :src="nsfwImage"
-        :class="{'small': isSmall}"
-      >
-      <i
-        v-if="type === 'video'"
-        class="play-icon icon-play-circled"
-      />
+    <a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
+      <img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
+      <i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
     </a>
-    <div
-      v-if="nsfw && hideNsfwLocal && !hidden"
-      class="hider"
-    >
-      <a
-        href="#"
-        @click.prevent="toggleHidden"
-      >Hide</a>
+    <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
+      <a href="#" @click.prevent="toggleHidden">Hide</a>
     </div>
 
-    <a
-      v-if="type === 'image' && (!hidden || preloadImage)"
+    <a v-if="type === 'image' && (!hidden || preloadImage)"
+      @click="openModal"
       class="image-attachment"
       :class="{'hidden': hidden && preloadImage }"
-      :href="attachment.url"
-      target="_blank"
+      :href="attachment.url" target="_blank"
       :title="attachment.description"
-      @click="openModal"
     >
-      <StillImage
-        :referrerpolicy="referrerpolicy"
-        :mimetype="attachment.mimetype"
-        :src="attachment.large_thumb_url || attachment.url"
-      />
+      <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
-    <a
+    <a class="video-container"
+      @click="openModal"
       v-if="type === 'video' && !hidden"
-      class="video-container"
       :class="{'small': isSmall}"
       :href="allowPlay ? undefined : attachment.url"
-      @click="openModal"
     >
-      <VideoAttachment
-        class="video"
-        :attachment="attachment"
-        :controls="allowPlay"
-      />
-      <i
-        v-if="!allowPlay"
-        class="play-icon icon-play-circled"
-      />
+      <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
+      <i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
     </a>
 
-    <audio
-      v-if="type === 'audio'"
-      :src="attachment.url"
-      controls
-    />
+    <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 
-    <div
-      v-if="type === 'html' && attachment.oembed"
-      class="oembed"
-      @click.prevent="linkClicked"
-    >
-      <div
-        v-if="attachment.thumb_url"
-        class="image"
-      >
-        <img :src="attachment.thumb_url">
+    <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
+      <div v-if="attachment.thumb_url" class="image">
+        <img :src="attachment.thumb_url"/>
       </div>
       <div class="text">
-        <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
-        <div v-html="attachment.oembed.oembedHTML" />
+        <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
+        <div v-html="attachment.oembed.oembedHTML"></div>
       </div>
     </div>
   </div>
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 8388deb8..8afe8b44 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -1,49 +1,22 @@
 <template>
   <div class="basic-user-card">
     <router-link :to="userProfileLink(user)">
-      <UserAvatar
-        class="avatar"
-        :src="user.profile_image_url"
-        @click.prevent.native="toggleUserExpanded"
-      />
+      <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
-    <div
-      v-if="userExpanded"
-      class="basic-user-card-expanded-content"
-    >
-      <UserCard
-        :user="user"
-        :rounded="true"
-        :bordered="true"
-      />
+    <div class="basic-user-card-expanded-content" v-if="userExpanded">
+      <UserCard :user="user" :rounded="true" :bordered="true"/>
     </div>
-    <div
-      v-else
-      class="basic-user-card-collapsed-content"
-    >
-      <div
-        :title="user.name"
-        class="basic-user-card-user-name"
-      >
-        <span
-          v-if="user.name_html"
-          class="basic-user-card-user-name-value"
-          v-html="user.name_html"
-        />
-        <span
-          v-else
-          class="basic-user-card-user-name-value"
-        >{{ user.name }}</span>
+    <div class="basic-user-card-collapsed-content" v-else>
+      <div :title="user.name" class="basic-user-card-user-name">
+        <span v-if="user.name_html" class="basic-user-card-user-name-value" v-html="user.name_html"></span>
+        <span v-else class="basic-user-card-user-name-value">{{ user.name }}</span>
       </div>
       <div>
-        <router-link
-          class="basic-user-card-screen-name"
-          :to="userProfileLink(user)"
-        >
-          @{{ user.screen_name }}
+        <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
+          @{{user.screen_name}}
         </router-link>
       </div>
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 5b00b738..8eb56e25 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -1,12 +1,7 @@
 <template>
   <basic-user-card :user="user">
     <div class="block-card-content-container">
-      <button
-        v-if="blocked"
-        class="btn btn-default"
-        :disabled="progress"
-        @click="unblockUser"
-      >
+      <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
         <template v-if="progress">
           {{ $t('user_card.unblock_progress') }}
         </template>
@@ -14,12 +9,7 @@
           {{ $t('user_card.unblock') }}
         </template>
       </button>
-      <button
-        v-else
-        class="btn btn-default"
-        :disabled="progress"
-        @click="blockUser"
-      >
+      <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
         <template v-if="progress">
           {{ $t('user_card.block_progress') }}
         </template>
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index f2e3adf0..bbc9b49f 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -16,7 +16,7 @@ const chatPanel = {
   },
   methods: {
     submit (message) {
-      this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
+      this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
       this.currentMessage = ''
     },
     togglePanel () {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index ca2c64a3..b37469ac 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -1,70 +1,41 @@
 <template>
-  <div
-    v-if="!this.collapsed || !this.floating"
-    class="chat-panel"
-  >
+  <div class="chat-panel" v-if="!this.collapsed || !this.floating">
     <div class="panel panel-default">
-      <div
-        class="panel-heading timeline-heading"
-        :class="{ 'chat-heading': floating }"
-        @click.stop.prevent="togglePanel"
-      >
+      <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
         <div class="title">
-          <span>{{ $t('chat.title') }}</span>
-          <i
-            v-if="floating"
-            class="icon-cancel"
-          />
+          <span>{{$t('chat.title')}}</span>
+          <i class="icon-cancel" v-if="floating"></i>
         </div>
       </div>
-      <div
-        v-chat-scroll
-        class="chat-window"
-      >
-        <div
-          v-for="message in messages"
-          :key="message.id"
-          class="chat-message"
-        >
+      <div class="chat-window" v-chat-scroll>
+        <div class="chat-message" v-for="message in messages" :key="message.id">
           <span class="chat-avatar">
-            <img :src="message.author.avatar">
+            <img :src="message.author.avatar" />
           </span>
           <div class="chat-content">
             <router-link
               class="chat-name"
-              :to="userProfileLink(message.author)"
-            >
-              {{ message.author.username }}
+              :to="userProfileLink(message.author)">
+                {{message.author.username}}
             </router-link>
             <br>
             <span class="chat-text">
-              {{ message.text }}
+              {{message.text}}
             </span>
           </div>
         </div>
       </div>
       <div class="chat-input">
-        <textarea
-          v-model="currentMessage"
-          class="chat-input-textarea"
-          rows="1"
-          @keyup.enter="submit(currentMessage)"
-        />
+        <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
       </div>
     </div>
   </div>
-  <div
-    v-else
-    class="chat-panel"
-  >
+  <div v-else class="chat-panel">
     <div class="panel panel-default">
-      <div
-        class="panel-heading stub timeline-heading chat-heading"
-        @click.stop.prevent="togglePanel"
-      >
+      <div class="panel-heading stub timeline-heading chat-heading" @click.stop.prevent="togglePanel">
         <div class="title">
-          <i class="icon-comment-empty" />
-          {{ $t('chat.title') }}
+          <i class="icon-comment-empty"></i>
+          {{$t('chat.title')}}
         </div>
       </div>
     </div>
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 9db62e81..34eec248 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -1,44 +1,33 @@
 <template>
-  <div
-    class="color-control style-control"
-    :class="{ disabled: !present || disabled }"
-  >
-    <label
-      :for="name"
-      class="label"
+<div class="color-control style-control" :class="{ disabled: !present || disabled }">
+  <label :for="name" class="label">
+    {{label}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exlcude-disabled"
+    :id="name + '-o'"
+    type="checkbox"
+    :checked="present"
+    @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <input
+    :id="name"
+    class="color-input"
+    type="color"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
     >
-      {{ label }}
-    </label>
-    <input
-      v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      class="opt exlcude-disabled"
-      type="checkbox"
-      :checked="present"
-      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+  <input
+    :id="name + '-t'"
+    class="text-input"
+    type="text"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
     >
-    <label
-      v-if="typeof fallback !== 'undefined'"
-      class="opt-l"
-      :for="name + '-o'"
-    />
-    <input
-      :id="name"
-      class="color-input"
-      type="color"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      @input="$emit('input', $event.target.value)"
-    >
-    <input
-      :id="name + '-t'"
-      class="text-input"
-      type="text"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      @input="$emit('input', $event.target.value)"
-    >
-  </div>
+</div>
 </template>
 
 <script>
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 15a450a2..bd971d00 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -1,38 +1,28 @@
 <template>
-  <span
-    v-if="contrast"
-    class="contrast-ratio"
-  >
-    <span
-      :title="hint"
-      class="rating"
-    >
-      <span v-if="contrast.aaa">
-        <i class="icon-thumbs-up-alt" />
-      </span>
-      <span v-if="!contrast.aaa && contrast.aa">
-        <i class="icon-adjust" />
-      </span>
-      <span v-if="!contrast.aaa && !contrast.aa">
-        <i class="icon-attention" />
-      </span>
+<span  v-if="contrast" class="contrast-ratio">
+  <span :title="hint" class="rating">
+    <span v-if="contrast.aaa">
+      <i class="icon-thumbs-up-alt"/>
     </span>
-    <span
-      v-if="contrast && large"
-      class="rating"
-      :title="hint_18pt"
-    >
-      <span v-if="contrast.laaa">
-        <i class="icon-thumbs-up-alt" />
-      </span>
-      <span v-if="!contrast.laaa && contrast.laa">
-        <i class="icon-adjust" />
-      </span>
-      <span v-if="!contrast.laaa && !contrast.laa">
-        <i class="icon-attention" />
-      </span>
+    <span v-if="!contrast.aaa && contrast.aa">
+      <i class="icon-adjust"/>
+    </span>
+    <span v-if="!contrast.aaa && !contrast.aa">
+      <i class="icon-attention"/>
+    </span>
+  </span>
+  <span class="rating" v-if="contrast && large" :title="hint_18pt">
+    <span v-if="contrast.laaa">
+      <i class="icon-thumbs-up-alt"/>
+    </span>
+    <span v-if="!contrast.laaa && contrast.laa">
+      <i class="icon-adjust"/>
+    </span>
+    <span v-if="!contrast.laaa && !contrast.laa">
+      <i class="icon-attention"/>
     </span>
   </span>
+</span>
 </template>
 
 <script>
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
index 532f785c..9e322cf5 100644
--- a/src/components/conversation-page/conversation-page.vue
+++ b/src/components/conversation-page/conversation-page.vue
@@ -1,9 +1,9 @@
 <template>
   <conversation
     :collapsable="false"
-    is-page="true"
+    isPage="true"
     :statusoid="statusoid"
-  />
+  ></conversation>
 </template>
 
 <script src="./conversation-page.js"></script>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 9ceab32d..69058bf6 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -94,8 +94,8 @@ const conversation = {
     },
     replies () {
       let i = 1
-      /* eslint-disable camelcase */
-      return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
+      return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
+        /* eslint-disable camelcase */
         const irid = in_reply_to_status_id
         /* eslint-enable camelcase */
         if (irid) {
@@ -127,8 +127,8 @@ const conversation = {
   methods: {
     fetchConversation () {
       if (this.status) {
-        this.$store.state.api.backendInteractor.fetchConversation({ id: this.status.id })
-          .then(({ ancestors, descendants }) => {
+        this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
+          .then(({ancestors, descendants}) => {
             this.$store.dispatch('addNewStatuses', { statuses: ancestors })
             this.$store.dispatch('addNewStatuses', { statuses: descendants })
             set(this, 'converationStatusIds', [].concat(
@@ -139,7 +139,7 @@ const conversation = {
           .then(() => this.setHighlight(this.statusId))
       } else {
         const id = this.$route.params.id
-        this.$store.state.api.backendInteractor.fetchStatus({ id })
+        this.$store.state.api.backendInteractor.fetchStatus({id})
           .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
           .then(() => this.fetchConversation())
       }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 1973edae..c39a3ed9 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,33 +1,24 @@
 <template>
-  <div
-    class="timeline panel-default"
-    :class="[isExpanded ? 'panel' : 'panel-disabled']"
-  >
-    <div
-      v-if="isExpanded"
-      class="panel-heading conversation-heading"
-    >
+  <div class="timeline panel-default" :class="[isExpanded ? 'panel' : 'panel-disabled']">
+    <div v-if="isExpanded" class="panel-heading conversation-heading">
       <span class="title"> {{ $t('timeline.conversation') }} </span>
       <span v-if="collapsable">
-        <a
-          href="#"
-          @click.prevent="toggleExpanded"
-        >{{ $t('timeline.collapse') }}</a>
+        <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a>
       </span>
     </div>
     <status
       v-for="status in conversation"
+      @goto="setHighlight"
+      @toggleExpanded="toggleExpanded"
       :key="status.id"
-      :inline-expanded="collapsable"
+      :inlineExpanded="collapsable"
       :statusoid="status"
-      :expandable="!expanded"
+      :expandable='!expanded'
       :focused="focused(status.id)"
-      :in-conversation="isExpanded"
+      :inConversation="isExpanded"
       :highlight="getHighlight()"
       :replies="getReplies(status.id)"
       class="status-fadein panel-body"
-      @goto="setHighlight"
-      @toggleExpanded="toggleExpanded"
     />
   </div>
 </template>
diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js
index cac7a89d..f2920666 100644
--- a/src/components/delete_button/delete_button.js
+++ b/src/components/delete_button/delete_button.js
@@ -10,7 +10,7 @@ const DeleteButton = {
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
-    canDelete () { return (this.currentUser && this.currentUser.rights.delete_others_notice) || this.status.user.id === this.currentUser.id }
+    canDelete () { return this.currentUser && this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id }
   }
 }
 
diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
index 1f6e54bb..f4c91cfd 100644
--- a/src/components/delete_button/delete_button.vue
+++ b/src/components/delete_button/delete_button.vue
@@ -1,10 +1,7 @@
 <template>
   <div v-if="canDelete">
-    <a
-      href="#"
-      @click.prevent="deleteStatus()"
-    >
-      <i class="button-icon icon-cancel delete-status" />
+    <a href="#" v-on:click.prevent="deleteStatus()">
+      <i class='button-icon icon-cancel delete-status'></i>
     </a>
   </div>
 </template>
diff --git a/src/components/dm_timeline/dm_timeline.vue b/src/components/dm_timeline/dm_timeline.vue
index c4e4d070..f03da4d3 100644
--- a/src/components/dm_timeline/dm_timeline.vue
+++ b/src/components/dm_timeline/dm_timeline.vue
@@ -1,9 +1,5 @@
 <template>
-  <Timeline
-    :title="$t('nav.dms')"
-    :timeline="timeline"
-    :timeline-name="'dms'"
-  />
+  <Timeline :title="$t('nav.dms')" v-bind:timeline="timeline" v-bind:timeline-name="'dms'"/>
 </template>
 
 <script src="./dm_timeline.js"></script>
diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
index 64932f0e..a5bb6eaf 100644
--- a/src/components/emoji-input/emoji-input.js
+++ b/src/components/emoji-input/emoji-input.js
@@ -23,8 +23,7 @@ const EmojiInput = {
         if (matchedEmoji.length <= 0) {
           return false
         }
-        // eslint-disable-next-line camelcase
-        return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
+        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
           shortcode: `:${shortcode}:`,
           utf: utf || '',
           // eslint-disable-next-line camelcase
@@ -99,7 +98,7 @@ const EmojiInput = {
     onInput (e) {
       this.$emit('input', e.target.value)
     },
-    setCaret ({ target: { selectionStart } }) {
+    setCaret ({target: {selectionStart}}) {
       this.caret = selectionStart
     }
   }
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
index 6a3be036..338b77cd 100644
--- a/src/components/emoji-input/emoji-input.vue
+++ b/src/components/emoji-input/emoji-input.vue
@@ -9,13 +9,13 @@
       @input="onInput"
       @click="setCaret"
       @keyup="setCaret"
-      @keydown.exact="onKeydown"
-      @keydown.down.exact="cycleForward"
-      @keydown.up.exact="cycleBackward"
-      @keydown.shift.tab.exact="cycleBackward"
-      @keydown.tab.exact="cycleForward"
-      @keydown.enter.exact="replaceEmoji"
-    >
+      @keydown="onKeydown"
+      @keydown.down="cycleForward"
+      @keydown.up="cycleBackward"
+      @keydown.shift.tab="cycleBackward"
+      @keydown.tab="cycleForward"
+      @keydown.enter="replaceEmoji"
+    />
     <textarea
       v-else
       :class="classname"
@@ -24,30 +24,27 @@
       @input="onInput"
       @click="setCaret"
       @keyup="setCaret"
-      @keydown.exact="onKeydown"
-      @keydown.down.exact="cycleForward"
-      @keydown.up.exact="cycleBackward"
-      @keydown.shift.tab.exact="cycleBackward"
-      @keydown.tab.exact="cycleForward"
-      @keydown.enter.exact="replaceEmoji"
-    />
-    <div
-      v-if="suggestions"
-      class="autocomplete-panel"
-    >
+      @keydown="onKeydown"
+      @keydown.down="cycleForward"
+      @keydown.up="cycleBackward"
+      @keydown.shift.tab="cycleBackward"
+      @keydown.tab="cycleForward"
+      @keydown.enter="replaceEmoji"
+    ></textarea>
+    <div class="autocomplete-panel" v-if="suggestions">
       <div class="autocomplete-panel-body">
         <div
           v-for="(emoji, index) in suggestions"
           :key="index"
+          @click="replace(emoji.utf || (emoji.shortcode + ' '))"
           class="autocomplete-item"
           :class="{ highlighted: emoji.highlighted }"
-          @click="replace(emoji.utf || (emoji.shortcode + ' '))"
         >
           <span v-if="emoji.img">
-            <img :src="emoji.img">
+            <img :src="emoji.img" />
           </span>
-          <span v-else>{{ emoji.utf }}</span>
-          <span>{{ emoji.shortcode }}</span>
+          <span v-else>{{emoji.utf}}</span>
+          <span>{{emoji.shortcode}}</span>
         </div>
       </div>
     </div>
diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
index 20c6f569..451a2668 100644
--- a/src/components/export_import/export_import.vue
+++ b/src/components/export_import/export_import.vue
@@ -1,27 +1,12 @@
 <template>
-  <div class="import-export-container">
-    <slot name="before" />
-    <button
-      class="btn"
-      @click="exportData"
-    >
-      {{ exportLabel }}
-    </button>
-    <button
-      class="btn"
-      @click="importData"
-    >
-      {{ importLabel }}
-    </button>
-    <slot name="afterButtons" />
-    <p
-      v-if="importFailed"
-      class="alert error"
-    >
-      {{ importFailedText }}
-    </p>
-    <slot name="afterError" />
-  </div>
+<div class="import-export-container">
+  <slot name="before"/>
+  <button class="btn" @click="exportData">{{ exportLabel }}</button>
+  <button class="btn" @click="importData">{{ importLabel }}</button>
+  <slot name="afterButtons"/>
+  <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
+  <slot name="afterError"/>
+</div>
 </template>
 
 <script>
@@ -64,7 +49,7 @@ export default {
         if (event.target.files[0]) {
           // eslint-disable-next-line no-undef
           const reader = new FileReader()
-          reader.onload = ({ target }) => {
+          reader.onload = ({target}) => {
             try {
               const parsed = JSON.parse(target.result)
               const valid = this.validator(parsed)
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index a24eacbf..a2b4cb65 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -11,9 +11,9 @@ const FavoriteButton = {
   methods: {
     favorite () {
       if (!this.status.favorited) {
-        this.$store.dispatch('favorite', { id: this.status.id })
+        this.$store.dispatch('favorite', {id: this.status.id})
       } else {
-        this.$store.dispatch('unfavorite', { id: this.status.id })
+        this.$store.dispatch('unfavorite', {id: this.status.id})
       }
       this.animated = true
       setTimeout(() => {
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 06ce9983..05ce6bd0 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,20 +1,11 @@
 <template>
   <div v-if="loggedIn">
-    <i
-      :class="classes"
-      class="button-icon favorite-button fav-active"
-      :title="$t('tool_tip.favorite')"
-      @click.prevent="favorite()"
-    />
-    <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
+    <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
+    <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
   <div v-else>
-    <i
-      :class="classes"
-      class="button-icon favorite-button"
-      :title="$t('tool_tip.favorite')"
-    />
-    <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
+    <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
+    <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>
 
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
index 3e5939a6..7a263e01 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@@ -3,25 +3,17 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
         <div class="title">
-          {{ $t('features_panel.title') }}
+          {{$t('features_panel.title')}}
         </div>
       </div>
       <div class="panel-body features-panel">
         <ul>
-          <li v-if="chat">
-            {{ $t('features_panel.chat') }}
-          </li>
-          <li v-if="gopher">
-            {{ $t('features_panel.gopher') }}
-          </li>
-          <li v-if="whoToFollow">
-            {{ $t('features_panel.who_to_follow') }}
-          </li>
-          <li v-if="mediaProxy">
-            {{ $t('features_panel.media_proxy') }}
-          </li>
-          <li>{{ $t('features_panel.scope_options') }}</li>
-          <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
+          <li v-if="chat">{{$t('features_panel.chat')}}</li>
+          <li v-if="gopher">{{$t('features_panel.gopher')}}</li>
+          <li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li>
+          <li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li>
+          <li>{{$t('features_panel.scope_options')}}</li>
+          <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li>
         </ul>
       </div>
     </div>
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index 7a16f455..ac4e265a 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -22,7 +22,7 @@ const FollowCard = {
     isMe () { return this.$store.state.users.currentUser.id === this.user.id },
     following () { return this.updated ? this.updated.following : this.user.following },
     showFollow () {
-      return !this.following || (this.updated && !this.updated.following)
+      return !this.following || this.updated && !this.updated.following
     },
     loggedIn () {
       return this.$store.state.users.currentUser
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index a808d7ed..9f314fd3 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -1,24 +1,18 @@
 <template>
   <basic-user-card :user="user">
     <div class="follow-card-content-container">
-      <span
-        v-if="!noFollowsYou && user.follows_you"
-        class="faint"
-      >
+      <span class="faint" v-if="!noFollowsYou && user.follows_you">
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
       </span>
-      <div
-        v-if="showFollow && !loggedIn"
-        class="follow-card-follow-button"
-      >
+      <div class="follow-card-follow-button" v-if="showFollow && !loggedIn">
         <RemoteFollow :user="user" />
       </div>
       <button
         v-if="showFollow && loggedIn"
         class="btn btn-default follow-card-follow-button"
+        @click="followUser"
         :disabled="inProgress"
         :title="requestSent ? $t('user_card.follow_again') : ''"
-        @click="followUser"
       >
         <template v-if="inProgress">
           {{ $t('user_card.follow_progress') }}
@@ -30,12 +24,7 @@
           {{ $t('user_card.follow') }}
         </template>
       </button>
-      <button
-        v-if="following"
-        class="btn btn-default follow-card-follow-button pressed"
-        :disabled="inProgress"
-        @click="unfollowUser"
-      >
+      <button v-if="following" class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
         <template v-if="inProgress">
           {{ $t('user_card.follow_progress') }}
         </template>
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index b217b8ed..4a3bbba4 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -1,18 +1,8 @@
 <template>
   <basic-user-card :user="user">
     <div class="follow-request-card-content-container">
-      <button
-        class="btn btn-default"
-        @click="approveUser"
-      >
-        {{ $t('user_card.approve') }}
-      </button>
-      <button
-        class="btn btn-default"
-        @click="denyUser"
-      >
-        {{ $t('user_card.deny') }}
-      </button>
+      <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
+      <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
     </div>
   </basic-user-card>
 </template>
diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 1de84680..b83c2d68 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -1,14 +1,10 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{ $t('nav.friend_requests') }}
+      {{$t('nav.friend_requests')}}
     </div>
     <div class="panel-body">
-      <FollowRequestCard
-        v-for="request in requests"
-        :key="request.id"
-        :user="request"
-      />
+      <FollowRequestCard v-for="request in requests" :key="request.id" :user="request"/>
     </div>
   </div>
 </template>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 61f0384b..ed36b280 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,56 +1,35 @@
 <template>
-  <div
-    class="font-control style-control"
-    :class="{ custom: isCustom }"
-  >
-    <label
-      :for="preset === 'custom' ? name : name + '-font-switcher'"
-      class="label"
-    >
-      {{ label }}
-    </label>
-    <input
-      v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      class="opt exlcude-disabled"
-      type="checkbox"
-      :checked="present"
-      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
-    >
-    <label
-      v-if="typeof fallback !== 'undefined'"
-      class="opt-l"
-      :for="name + '-o'"
-    />
-    <label
-      :for="name + '-font-switcher'"
-      class="select"
+<div class="font-control style-control" :class="{ custom: isCustom }">
+  <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
+    {{label}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exlcude-disabled"
+    type="checkbox"
+    :id="name + '-o'"
+    :checked="present"
+    @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <label :for="name + '-font-switcher'" class="select" :disabled="!present">
+    <select
       :disabled="!present"
-    >
-      <select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
-      >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-        </option>
-      </select>
-      <i class="icon-down-open" />
-    </label>
-    <input
-      v-if="isCustom"
-      :id="name"
-      v-model="family"
-      class="custom-font"
-      type="text"
-    >
-  </div>
+      v-model="preset"
+      class="font-switcher"
+      :id="name + '-font-switcher'">
+      <option v-for="option in availableOptions" :value="option">
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+      </option>
+    </select>
+    <i class="icon-down-open"/>
+  </label>
+  <input
+    v-if="isCustom"
+    class="custom-font"
+    type="text"
+    :id="name"
+    v-model="family">
+</div>
 </template>
 
 <script src="./font_control.js" ></script>
diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
index 01a56812..66c0c058 100644
--- a/src/components/friends_timeline/friends_timeline.vue
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -1,9 +1,5 @@
 <template>
-  <Timeline
-    :title="$t('nav.timeline')"
-    :timeline="timeline"
-    :timeline-name="'friends'"
-  />
+  <Timeline :title="$t('nav.timeline')" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
 </template>
 
 <script src="./friends_timeline.js"></script>
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index e8e441db..ea525c95 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,22 +1,13 @@
 <template>
-  <div
-    ref="galleryContainer"
-    style="width: 100%;"
-  >
-    <div
-      v-for="row in rows"
-      :key="row"
-      class="gallery-row"
-      :style="rowHeight(row.length)"
-      :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
-    >
+  <div ref="galleryContainer" style="width: 100%;">
+    <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
       <attachment
         v-for="attachment in row"
-        :key="attachment.id"
-        :set-media="setMedia"
+        :setMedia="setMedia"
         :nsfw="nsfw"
         :attachment="attachment"
-        :allow-play="false"
+        :allowPlay="false"
+        :key="attachment.id"
       />
     </div>
   </div>
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index e841256d..129e6f46 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -2,57 +2,20 @@
   <div class="image-cropper">
     <div v-if="dataUrl">
       <div class="image-cropper-image-container">
-        <img
-          ref="img"
-          :src="dataUrl"
-          alt=""
-          @load.stop="createCropper"
-        >
+        <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
       </div>
       <div class="image-cropper-buttons-wrapper">
-        <button
-          class="btn"
-          type="button"
-          :disabled="submitting"
-          @click="submit"
-          v-text="saveText"
-        />
-        <button
-          class="btn"
-          type="button"
-          :disabled="submitting"
-          @click="destroy"
-          v-text="cancelText"
-        />
-        <button
-          class="btn"
-          type="button"
-          :disabled="submitting"
-          @click="submitWithoutCropping"
-          v-text="saveWithoutCroppingText"
-        />
-        <i
-          v-if="submitting"
-          class="icon-spin4 animate-spin"
-        />
+        <button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
+        <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
+        <button class="btn" type="button" :disabled="submitting" @click="submitWithoutCropping" v-text="saveWithoutCroppingText"></button>
+        <i class="icon-spin4 animate-spin" v-if="submitting"></i>
       </div>
-      <div
-        v-if="submitError"
-        class="alert error"
-      >
-        {{ submitErrorMsg }}
-        <i
-          class="button-icon icon-cancel"
-          @click="clearError"
-        />
+      <div class="alert error" v-if="submitError">
+        {{submitErrorMsg}}
+        <i class="button-icon icon-cancel" @click="clearError"></i>
       </div>
     </div>
-    <input
-      ref="input"
-      type="file"
-      class="image-cropper-img-input"
-      :accept="mimes"
-    >
+    <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
   </div>
 </template>
 
diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue
index 64ce4f8a..a7b74667 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.vue
+++ b/src/components/instance_specific_panel/instance_specific_panel.vue
@@ -1,11 +1,9 @@
 <template>
-  <div
-    v-if="show"
-    class="instance-specific-panel"
-  >
+  <div v-if="show" class="instance-specific-panel">
     <div class="panel panel-default">
       <div class="panel-body">
-        <div v-html="instanceSpecificPanelContent" />
+        <div v-html="instanceSpecificPanelContent">
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index edeff4e2..3f58af2c 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -3,49 +3,39 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
-    <label
-      for="interface-language-switcher"
-      class="select"
-    >
-      <select
-        id="interface-language-switcher"
-        v-model="language"
-      >
-        <option
-          v-for="(langCode, i) in languageCodes"
-          :key="langCode"
-          :value="langCode"
-        >
+    <label for="interface-language-switcher" class='select'>
+      <select id="interface-language-switcher" v-model="language">
+        <option v-for="(langCode, i) in languageCodes" :value="langCode">
           {{ languageNames[i] }}
         </option>
       </select>
-      <i class="icon-down-open" />
+      <i class="icon-down-open"/>
     </label>
   </div>
 </template>
 
 <script>
-import languagesObject from '../../i18n/messages'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
+  import languagesObject from '../../i18n/messages'
+  import ISO6391 from 'iso-639-1'
+  import _ from 'lodash'
 
-export default {
-  computed: {
-    languageCodes () {
-      return Object.keys(languagesObject)
-    },
+  export default {
+    computed: {
+      languageCodes () {
+        return Object.keys(languagesObject)
+      },
 
-    languageNames () {
-      return _.map(this.languageCodes, ISO6391.getName)
-    },
+      languageNames () {
+        return _.map(this.languageCodes, ISO6391.getName)
+      },
 
-    language: {
-      get: function () { return this.$store.state.config.interfaceLanguage },
-      set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-        this.$i18n.locale = val
+      language: {
+        get: function () { return this.$store.state.config.interfaceLanguage },
+        set: function (val) {
+          this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+          this.$i18n.locale = val
+        }
       }
     }
   }
-}
 </script>
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 493774c2..64b1a58b 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -1,25 +1,13 @@
 <template>
   <div>
-    <a
-      class="link-preview-card"
-      :href="card.url"
-      target="_blank"
-      rel="noopener"
-    >
-      <div
-        v-if="useImage"
-        class="card-image"
-        :class="{ 'small-image': size === 'small' }"
-      >
-        <img :src="card.image">
+    <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
+      <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
+        <img :src="card.image"></img>
       </div>
       <div class="card-content">
         <span class="card-host faint">{{ card.provider_name }}</span>
         <h4 class="card-title">{{ card.title }}</h4>
-        <p
-          v-if="useDescription"
-          class="card-description"
-        >{{ card.description }}</p>
+        <p class="card-description" v-if="useDescription">{{ card.description }}</p>
       </div>
     </a>
   </div>
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index ab10613f..fb6dc651 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -39,7 +39,7 @@ const LoginForm = {
           }
           this.$store.commit('setToken', result.access_token)
           this.$store.dispatch('loginUser', result.access_token)
-          this.$router.push({ name: 'friends' })
+          this.$router.push({name: 'friends'})
         })
       })
     },
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 015b961d..27a8e48a 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -2,96 +2,42 @@
   <div class="login panel panel-default">
     <!-- Default panel contents -->
     <div class="panel-heading">
-      {{ $t('login.login') }}
+      {{$t('login.login')}}
     </div>
     <div class="panel-body">
-      <form
-        v-if="loginMethod == 'password'"
-        class="login-form"
-        @submit.prevent="submit(user)"
-      >
-        <div class="form-group">
-          <label for="username">{{ $t('login.username') }}</label>
-          <input
-            id="username"
-            v-model="user.username"
-            :disabled="loggingIn"
-            class="form-control"
-            :placeholder="$t('login.placeholder')"
-          >
+      <form v-if="loginMethod == 'password'" v-on:submit.prevent='submit(user)' class='login-form'>
+        <div class='form-group'>
+          <label for='username'>{{$t('login.username')}}</label>
+          <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' v-bind:placeholder="$t('login.placeholder')">
         </div>
-        <div class="form-group">
-          <label for="password">{{ $t('login.password') }}</label>
-          <input
-            id="password"
-            v-model="user.password"
-            :disabled="loggingIn"
-            class="form-control"
-            type="password"
-          >
+        <div class='form-group'>
+          <label for='password'>{{$t('login.password')}}</label>
+          <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
         </div>
-        <div class="form-group">
-          <div class="login-bottom">
-            <div>
-              <router-link
-                v-if="registrationOpen"
-                :to="{name: 'registration'}"
-                class="register"
-              >
-                {{ $t('login.register') }}
-              </router-link>
-            </div>
-            <button
-              :disabled="loggingIn"
-              type="submit"
-              class="btn btn-default"
-            >
-              {{ $t('login.login') }}
-            </button>
+        <div class='form-group'>
+          <div class='login-bottom'>
+            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
+            <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
           </div>
         </div>
       </form>
 
-      <form
-        v-if="loginMethod == 'token'"
-        class="login-form"
-        @submit.prevent="oAuthLogin"
-      >
+      <form v-if="loginMethod == 'token'" v-on:submit.prevent='oAuthLogin'  class="login-form">
         <div class="form-group">
-          <p>{{ $t('login.description') }}</p>
+          <p>{{$t('login.description')}}</p>
         </div>
-        <div class="form-group">
-          <div class="login-bottom">
-            <div>
-              <router-link
-                v-if="registrationOpen"
-                :to="{name: 'registration'}"
-                class="register"
-              >
-                {{ $t('login.register') }}
-              </router-link>
-            </div>
-            <button
-              :disabled="loggingIn"
-              type="submit"
-              class="btn btn-default"
-            >
-              {{ $t('login.login') }}
-            </button>
+        <div class='form-group'>
+          <div class='login-bottom'>
+            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
+            <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
           </div>
         </div>
       </form>
-
-      <div
-        v-if="authError"
-        class="form-group"
-      >
-        <div class="alert error">
-          {{ authError }}
-          <i
-            class="button-icon icon-cancel"
-            @click="clearError"
-          />
+      
+      <div v-if="authError" class='form-group'>
+        <div class='alert error'>
+          {{authError}}
+          <i class="button-icon icon-cancel" @click="clearError"></i>
         </div>
       </div>
     </div>
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 95a4dd33..7f666603 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,33 +1,25 @@
 <template>
-  <div
-    v-if="showing"
-    class="modal-view media-modal-view"
-    @click.prevent="hide"
-  >
-    <img
-      v-if="type === 'image'"
-      class="modal-image"
-      :src="currentMedia.url"
-    >
+  <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
+    <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
     <VideoAttachment
-      v-if="type === 'video'"
       class="modal-image"
+      v-if="type === 'video'"
       :attachment="currentMedia"
       :controls="true"
-      @click.stop.native=""
-    />
+      @click.stop.native="">
+    </VideoAttachment>
     <button
-      v-if="canNavigate"
       :title="$t('media_modal.previous')"
       class="modal-view-button-arrow modal-view-button-arrow--prev"
+      v-if="canNavigate"
       @click.stop.prevent="goPrev"
     >
       <i class="icon-left-open arrow-icon" />
     </button>
     <button
-      v-if="canNavigate"
       :title="$t('media_modal.next')"
       class="modal-view-button-arrow modal-view-button-arrow--next"
+      v-if="canNavigate"
       @click.stop.prevent="goNext"
     >
       <i class="icon-right-open arrow-icon" />
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index f457d022..e4b3d460 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -16,7 +16,7 @@ const mediaUpload = {
       if (file.size > store.state.instance.uploadlimit) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit)
-        self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
+        self.$emit('upload-failed', 'file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
         return
       }
       const formData = new FormData()
@@ -36,7 +36,7 @@ const mediaUpload = {
     },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
-        e.preventDefault() // allow dropping text like before
+        e.preventDefault()  // allow dropping text like before
         this.uploadFile(e.dataTransfer.files[0])
       }
     },
@@ -54,7 +54,7 @@ const mediaUpload = {
         this.uploadReady = true
       })
     },
-    change ({ target }) {
+    change ({target}) {
       for (var i = 0; i < target.files.length; i++) {
         let file = target.files[i]
         this.uploadFile(file)
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 508ea71e..fcdc3471 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,29 +1,9 @@
 <template>
-  <div
-    class="media-upload"
-    @drop.prevent
-    @dragover.prevent="fileDrag"
-    @drop="fileDrop"
-  >
-    <label
-      class="btn btn-default"
-      :title="$t('tool_tip.media_upload')"
-    >
-      <i
-        v-if="uploading"
-        class="icon-spin4 animate-spin"
-      />
-      <i
-        v-if="!uploading"
-        class="icon-upload"
-      />
-      <input
-        v-if="uploadReady"
-        type="file"
-        style="position: fixed; top: -100em"
-        multiple="true"
-        @change="change"
-      >
+  <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
+    <label class="btn btn-default" :title="$t('tool_tip.media_upload')">
+      <i class="icon-spin4 animate-spin" v-if="uploading"></i>
+      <i class="icon-upload" v-if="!uploading"></i>
+      <input type="file" v-if="uploadReady" @change="change" style="position: fixed; top: -100em" multiple="true"></input>
     </label>
   </div>
 </template>
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index 65a7526f..bba06da6 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -1,9 +1,5 @@
 <template>
-  <Timeline
-    :title="$t('nav.mentions')"
-    :timeline="timeline"
-    :timeline-name="'mentions'"
-  />
+  <Timeline :title="$t('nav.mentions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
 </template>
 
 <script src="./mentions.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index a94cf1d7..5fa41638 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,71 +1,34 @@
 <template>
-  <nav
-    id="nav"
-    class="nav-bar container"
-  >
-    <div
-      class="mobile-inner-nav"
-      @click="scrollToTop()"
-    >
-      <div class="item">
-        <a
-          href="#"
-          class="mobile-nav-button"
-          @click.stop.prevent="toggleMobileSidebar()"
-        >
-          <i class="button-icon icon-menu" />
+  <nav class='nav-bar container' id="nav">
+    <div class='mobile-inner-nav' @click="scrollToTop()">
+      <div class='item'>
+        <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
+          <i class="button-icon icon-menu"></i>
         </a>
-        <router-link
-          class="site-name"
-          :to="{ name: 'root' }"
-          active-class="home"
-        >
-          {{ sitename }}
-        </router-link>
+        <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
       </div>
-      <div class="item right">
-        <a
-          v-if="currentUser"
-          class="mobile-nav-button"
-          href="#"
-          @click.stop.prevent="openMobileNotifications()"
-        >
-          <i class="button-icon icon-bell-alt" />
-          <div
-            v-if="unseenNotificationsCount"
-            class="alert-dot"
-          />
+      <div class='item right'>
+        <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
+          <i class="button-icon icon-bell-alt"></i>
+          <div class="alert-dot" v-if="unseenNotificationsCount"></div>
         </a>
       </div>
     </div>
-    <SideDrawer
-      ref="sideDrawer"
-      :logout="logout"
-    />
-    <div
-      v-if="currentUser"
+    <SideDrawer ref="sideDrawer" :logout="logout"/>
+    <div v-if="currentUser"
       class="mobile-notifications-drawer"
       :class="{ 'closed': !notificationsOpen }"
       @touchstart="notificationsTouchStart"
       @touchmove="notificationsTouchMove"
     >
       <div class="mobile-notifications-header">
-        <span class="title">{{ $t('notifications.notifications') }}</span>
-        <a
-          class="mobile-nav-button"
-          @click.stop.prevent="closeMobileNotifications()"
-        >
-          <i class="button-icon icon-cancel" />
+        <span class="title">{{$t('notifications.notifications')}}</span>
+        <a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
+          <i class="button-icon icon-cancel"/>
         </a>
       </div>
-      <div
-        v-if="currentUser"
-        class="mobile-notifications"
-      >
-        <Notifications
-          ref="notifications"
-          no-heading="true"
-        />
+      <div v-if="currentUser" class="mobile-notifications">
+        <Notifications ref="notifications" noHeading="true"/>
       </div>
     </div>
     <MobilePostStatusModal />
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
index 5db7584b..0a451c28 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
@@ -1,31 +1,23 @@
 <template>
-  <div v-if="currentUser">
-    <div
-      v-show="postFormOpen"
-      class="post-form-modal-view modal-view"
-      @click="closePostForm"
-    >
-      <div
-        class="post-form-modal-panel panel"
-        @click.stop=""
-      >
-        <div class="panel-heading">
-          {{ $t('post_status.new_status') }}
-        </div>
-        <PostStatusForm
-          class="panel-body"
-          @posted="closePostForm"
-        />
-      </div>
+<div v-if="currentUser">
+  <div
+    class="post-form-modal-view modal-view"
+    v-show="postFormOpen"
+    @click="closePostForm"
+  >
+    <div class="post-form-modal-panel panel" @click.stop="">
+      <div class="panel-heading">{{$t('post_status.new_status')}}</div>
+      <PostStatusForm class="panel-body" @posted="closePostForm"/>
     </div>
-    <button
-      class="new-status-button"
-      :class="{ 'hidden': isHidden }"
-      @click="openPostForm"
-    >
-      <i class="icon-edit" />
-    </button>
   </div>
+  <button
+    class="new-status-button"
+    :class="{ 'hidden': isHidden }"
+    @click="openPostForm"
+  >
+    <i class="icon-edit" />
+  </button>
+</div>
 </template>
 
 <script src="./mobile_post_status_modal.js"></script>
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index 9611fb82..a4edff03 100644
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@@ -1,12 +1,7 @@
 <template>
   <basic-user-card :user="user">
     <div class="mute-card-content-container">
-      <button
-        v-if="muted"
-        class="btn btn-default"
-        :disabled="progress"
-        @click="unmuteUser"
-      >
+      <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
         <template v-if="progress">
           {{ $t('user_card.unmute_progress') }}
         </template>
@@ -14,12 +9,7 @@
           {{ $t('user_card.unmute') }}
         </template>
       </button>
-      <button
-        v-else
-        class="btn btn-default"
-        :disabled="progress"
-        @click="muteUser"
-      >
+      <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else>
         <template v-if="progress">
           {{ $t('user_card.mute_progress') }}
         </template>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index af5ecd85..7a7212fb 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -2,29 +2,26 @@
   <div class="nav-panel">
     <div class="panel panel-default">
       <ul>
-        <li v-if="currentUser">
+        <li v-if='currentUser'>
           <router-link :to="{ name: 'friends' }">
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if="currentUser">
+        <li v-if='currentUser'>
           <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
           </router-link>
         </li>
-        <li v-if="currentUser">
+        <li v-if='currentUser'>
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             {{ $t("nav.dms") }}
           </router-link>
         </li>
-        <li v-if="currentUser && currentUser.locked">
+        <li v-if='currentUser && currentUser.locked'>
           <router-link :to="{ name: 'friend-requests' }">
-            {{ $t("nav.friend_requests") }}
-            <span
-              v-if="followRequestCount > 0"
-              class="badge follow-request-count"
-            >
-              {{ followRequestCount }}
+            {{ $t("nav.friend_requests")}}
+            <span v-if='followRequestCount > 0' class="badge follow-request-count">
+              {{followRequestCount}}
             </span>
           </router-link>
         </li>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index f5f0a194..8f532747 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,90 +1,41 @@
 <template>
-  <status
-    v-if="notification.type === 'mention'"
-    :compact="true"
-    :statusoid="notification.status"
-  />
-  <div
-    v-else
-    class="non-mention"
-    :class="[userClass, { highlighted: userStyle }]"
-    :style="[ userStyle ]"
-  >
-    <a
-      class="avatar-container"
-      :href="notification.action.user.statusnet_profile_url"
-      @click.stop.prevent.capture="toggleUserExpanded"
-    >
-      <UserAvatar
-        :compact="true"
-        :better-shadow="betterShadow"
-        :src="notification.action.user.profile_image_url_original"
-      />
+  <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
+  <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]" v-else>
+    <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+      <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
     </a>
-    <div class="notification-right">
-      <UserCard
-        v-if="userExpanded"
-        :user="user"
-        :rounded="true"
-        :bordered="true"
-      />
+    <div class='notification-right'>
+      <UserCard :user="user" :rounded="true" :bordered="true" v-if="userExpanded"/>
       <span class="notification-details">
         <div class="name-and-action">
-          <span
-            v-if="!!notification.action.user.name_html"
-            class="username"
-            :title="'@'+notification.action.user.screen_name"
-            v-html="notification.action.user.name_html"
-          />
-          <span
-            v-else
-            class="username"
-            :title="'@'+notification.action.user.screen_name"
-          >{{ notification.action.user.name }}</span>
+          <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
+          <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
           <span v-if="notification.type === 'like'">
-            <i class="fa icon-star lit" />
-            <small>{{ $t('notifications.favorited_you') }}</small>
+            <i class="fa icon-star lit"></i>
+            <small>{{$t('notifications.favorited_you')}}</small>
           </span>
           <span v-if="notification.type === 'repeat'">
-            <i
-              class="fa icon-retweet lit"
-              :title="$t('tool_tip.repeat')"
-            />
-            <small>{{ $t('notifications.repeated_you') }}</small>
+            <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
+            <small>{{$t('notifications.repeated_you')}}</small>
           </span>
           <span v-if="notification.type === 'follow'">
-            <i class="fa icon-user-plus lit" />
-            <small>{{ $t('notifications.followed_you') }}</small>
+            <i class="fa icon-user-plus lit"></i>
+            <small>{{$t('notifications.followed_you')}}</small>
           </span>
         </div>
         <div class="timeago">
-          <router-link
-            v-if="notification.status"
-            :to="{ name: 'conversation', params: { id: notification.status.id } }"
-            class="faint-link"
-          >
-            <timeago
-              :since="notification.action.created_at"
-              :auto-update="240"
-            />
+          <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
+            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
           </router-link>
         </div>
       </span>
-      <div
-        v-if="notification.type === 'follow'"
-        class="follow-text"
-      >
+      <div class="follow-text" v-if="notification.type === 'follow'">
         <router-link :to="userProfileLink(notification.action.user)">
-          @{{ notification.action.user.screen_name }}
+          @{{notification.action.user.screen_name}}
         </router-link>
       </div>
       <template v-else>
-        <status
-          class="faint"
-          :compact="true"
-          :statusoid="notification.status"
-          :no-heading="true"
-        />
+        <status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
       </template>
     </div>
   </div>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 514fed51..634a03ac 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,62 +1,31 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default">
-      <div
-        v-if="!noHeading"
-        class="panel-heading"
-      >
+      <div v-if="!noHeading" class="panel-heading">
         <div class="title">
-          {{ $t('notifications.notifications') }}
-          <span
-            v-if="unseenCount"
-            class="badge badge-notification unseen-count"
-          >{{ unseenCount }}</span>
+          {{$t('notifications.notifications')}}
+          <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
         </div>
-        <div
-          v-if="error"
-          class="loadmore-error alert error"
-          @click.prevent
-        >
-          {{ $t('timeline.error_fetching') }}
+        <div @click.prevent class="loadmore-error alert error" v-if="error">
+          {{$t('timeline.error_fetching')}}
         </div>
-        <button
-          v-if="unseenCount"
-          class="read-button"
-          @click.prevent="markAsSeen"
-        >
-          {{ $t('notifications.read') }}
-        </button>
+        <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body">
-        <div
-          v-for="notification in visibleNotifications"
-          :key="notification.action.id"
-          class="notification"
-          :class="{&quot;unseen&quot;: !notification.seen}"
-        >
-          <div class="notification-overlay" />
-          <notification :notification="notification" />
+        <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
+          <div class="notification-overlay"></div>
+          <notification :notification="notification"></notification>
         </div>
       </div>
       <div class="panel-footer">
-        <div
-          v-if="bottomedOut"
-          class="new-status-notification text-center panel-footer faint"
-        >
-          {{ $t('notifications.no_more_notifications') }}
+        <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+          {{$t('notifications.no_more_notifications')}}
         </div>
-        <a
-          v-else-if="!loading"
-          href="#"
-          @click.prevent="fetchOlderNotifications()"
-        >
-          <div class="new-status-notification text-center panel-footer">{{ $t('notifications.load_older') }}</div>
+        <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
+          <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
         </a>
-        <div
-          v-else
-          class="new-status-notification text-center panel-footer"
-        >
-          <i class="icon-spin3 animate-spin" />
+        <div v-else class="new-status-notification text-center panel-footer">
+          <i class="icon-spin3 animate-spin"/>
         </div>
       </div>
     </div>
diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js
index c896f23c..e3d45ee1 100644
--- a/src/components/oauth_callback/oauth_callback.js
+++ b/src/components/oauth_callback/oauth_callback.js
@@ -11,7 +11,7 @@ const oac = {
       }).then((result) => {
         this.$store.commit('setToken', result.access_token)
         this.$store.dispatch('loginUser', result.access_token)
-        this.$router.push({ name: 'friends' })
+        this.$router.push({name: 'friends'})
       })
     }
   }
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index c677f18c..3926915b 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -1,39 +1,27 @@
 <template>
-  <div
-    class="opacity-control style-control"
-    :class="{ disabled: !present || disabled }"
-  >
-    <label
-      :for="name"
-      class="label"
-    >
-      {{ $t('settings.style.common.opacity') }}
-    </label>
-    <input
-      v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      class="opt exclude-disabled"
-      type="checkbox"
-      :checked="present"
-      @input="$emit('input', !present ? fallback : undefined)"
-    >
-    <label
-      v-if="typeof fallback !== 'undefined'"
-      class="opt-l"
-      :for="name + '-o'"
-    />
-    <input
-      :id="name"
-      class="input-number"
-      type="number"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      max="1"
-      min="0"
-      step=".05"
-      @input="$emit('input', $event.target.value)"
-    >
-  </div>
+<div class="opacity-control style-control" :class="{ disabled: !present || disabled }">
+  <label :for="name" class="label">
+    {{$t('settings.style.common.opacity')}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exclude-disabled"
+    :id="name + '-o'"
+    type="checkbox"
+    :checked="present"
+    @input="$emit('input', !present ? fallback : undefined)">
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <input
+    :id="name"
+    class="input-number"
+    type="number"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
+    max="1"
+    min="0"
+    step=".05">
+</div>
 </template>
 
 <script>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 82ca850d..c65c27e2 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -6,13 +6,13 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
 import { take, filter, reject, map, uniqBy } from 'lodash'
 
-const buildMentionsString = ({ user, attentions }, currentUser) => {
+const buildMentionsString = ({user, attentions}, currentUser) => {
   let allAttentions = [...attentions]
 
   allAttentions.unshift(user)
 
   allAttentions = uniqBy(allAttentions, 'id')
-  allAttentions = reject(allAttentions, { id: currentUser.id })
+  allAttentions = reject(allAttentions, {id: currentUser.id})
 
   let mentions = map(allAttentions, (attention) => {
     return `@${attention.screen_name}`
@@ -48,17 +48,17 @@ const PostStatusForm = {
     let statusText = preset || ''
 
     const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
-      ? this.$store.state.instance.scopeCopy
-      : this.$store.state.config.scopeCopy
+          ? this.$store.state.instance.scopeCopy
+          : this.$store.state.config.scopeCopy
 
     if (this.replyTo) {
       const currentUser = this.$store.state.users.currentUser
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
 
-    const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
-      ? this.copyMessageScope
-      : this.$store.state.users.currentUser.default_scope
+    const scope = (this.copyMessageScope && scopeCopy || this.copyMessageScope === 'direct')
+          ? this.copyMessageScope
+          : this.$store.state.users.currentUser.default_scope
 
     const contentType = typeof this.$store.state.config.postContentType === 'undefined'
       ? this.$store.state.instance.postContentType
@@ -88,13 +88,13 @@ const PostStatusForm = {
         const query = this.textAtCaret.slice(1).toUpperCase()
         const matchedUsers = filter(this.users, (user) => {
           return user.screen_name.toUpperCase().startsWith(query) ||
-            (user.name && user.name.toUpperCase().startsWith(query))
+            user.name && user.name.toUpperCase().startsWith(query)
         })
         if (matchedUsers.length <= 0) {
           return false
         }
         // eslint-disable-next-line camelcase
-        return map(take(matchedUsers, 5), ({ screen_name, name, profile_image_url_original }, index) => ({
+        return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({
           // eslint-disable-next-line camelcase
           screen_name: `@${screen_name}`,
           name: name,
@@ -107,8 +107,7 @@ const PostStatusForm = {
         if (matchedEmoji.length <= 0) {
           return false
         }
-        // eslint-disable-next-line camelcase
-        return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
+        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
           screen_name: `:${shortcode}:`,
           name: '',
           utf: utf || '',
@@ -135,8 +134,8 @@ const PostStatusForm = {
     },
     showAllScopes () {
       const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
-        ? this.$store.state.instance.minimalScopesMode
-        : this.$store.state.config.minimalScopesMode
+            ? this.$store.state.instance.minimalScopesMode
+            : this.$store.state.config.minimalScopesMode
       return !minimalScopesMode
     },
     emoji () {
@@ -234,7 +233,7 @@ const PostStatusForm = {
     onKeydown (e) {
       e.stopPropagation()
     },
-    setCaret ({ target: { selectionStart } }) {
+    setCaret ({target: {selectionStart}}) {
       this.caret = selectionStart
     },
     postStatus (newStatus) {
@@ -315,7 +314,7 @@ const PostStatusForm = {
     },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
-        e.preventDefault() // allow dropping text like before
+        e.preventDefault()  // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
       }
     },
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index b37ec5c7..1ce2b647 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,204 +1,107 @@
 <template>
-  <div class="post-status-form">
-    <form @submit.prevent="postStatus(newStatus)">
-      <div class="form-group">
-        <i18n
-          v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
-          path="post_status.account_not_locked_warning"
-          tag="p"
-          class="visibility-notice"
-        >
-          <router-link :to="{ name: 'user-settings' }">
-            {{ $t('post_status.account_not_locked_warning_link') }}
-          </router-link>
-        </i18n>
-        <p
-          v-if="newStatus.visibility === 'direct'"
-          class="visibility-notice"
-        >
-          <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
-          <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
-        </p>
-        <EmojiInput
-          v-if="newStatus.spoilerText || alwaysShowSubject"
-          v-model="newStatus.spoilerText"
-          type="text"
-          :placeholder="$t('post_status.content_warning')"
-          classname="form-control"
-        />
-        <textarea
-          ref="textarea"
-          v-model="newStatus.status"
-          :placeholder="$t('post_status.default')"
-          rows="1"
-          class="form-control"
-          :disabled="posting"
-          @click="setCaret"
-          @keyup.exact="setCaret"
-          @keydown.exact="onKeydown"
-          @keydown.exact.down="cycleForward"
-          @keydown.exact.up="cycleBackward"
-          @keydown.exact.shift.tab="cycleBackward"
-          @keydown.exact.tab="cycleForward"
-          @keydown.exact.enter="replaceCandidate"
-          @keydown.exact.meta.enter="postStatus(newStatus)"
-          @keyup.exact.ctrl.enter="postStatus(newStatus)"
-          @drop="fileDrop"
-          @dragover.prevent="fileDrag"
-          @input="resize"
-          @paste="paste"
-        />
-        <div class="visibility-tray">
-          <span
-            v-if="formattingOptionsEnabled"
-            class="text-format"
-          >
-            <label
-              for="post-content-type"
-              class="select"
-            >
-              <select
-                id="post-content-type"
-                v-model="newStatus.contentType"
-                class="form-control"
-              >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                </option>
-              </select>
-              <i class="icon-down-open" />
-            </label>
-          </span>
+<div class="post-status-form">
+  <form @submit.prevent="postStatus(newStatus)">
+    <div class="form-group" >
+      <i18n
+        v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
+        path="post_status.account_not_locked_warning"
+        tag="p"
+        class="visibility-notice">
+        <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
+      </i18n>
+      <p v-if="newStatus.visibility === 'direct'" class="visibility-notice">
+        <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
+        <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
+      </p>
+      <EmojiInput
+        v-if="newStatus.spoilerText || alwaysShowSubject"
+        type="text"
+        :placeholder="$t('post_status.content_warning')"
+        v-model="newStatus.spoilerText"
+        classname="form-control"
+      />
+      <textarea
+        ref="textarea"
+        @click="setCaret"
+        @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
+        @keydown="onKeydown"
+        @keydown.down="cycleForward"
+        @keydown.up="cycleBackward"
+        @keydown.shift.tab="cycleBackward"
+        @keydown.tab="cycleForward"
+        @keydown.enter="replaceCandidate"
+        @keydown.meta.enter="postStatus(newStatus)"
+        @keyup.ctrl.enter="postStatus(newStatus)"
+        @drop="fileDrop"
+        @dragover.prevent="fileDrag"
+        @input="resize"
+        @paste="paste"
+        :disabled="posting"
+      >
+      </textarea>
+      <div class="visibility-tray">
+        <span class="text-format" v-if="formattingOptionsEnabled">
+          <label for="post-content-type" class="select">
+            <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
+              <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                {{$t(`post_status.content_type["${postFormat}"]`)}}
+              </option>
+            </select>
+            <i class="icon-down-open"></i>
+          </label>
+        </span>
 
-          <scope-selector
-            :show-all="showAllScopes"
-            :user-default="userDefaultScope"
-            :original-scope="copyMessageScope"
-            :initial-scope="newStatus.visibility"
-            :on-scope-change="changeVis"
-          />
-        </div>
+        <scope-selector
+          :showAll="showAllScopes"
+          :userDefault="userDefaultScope"
+          :originalScope="copyMessageScope"
+          :initialScope="newStatus.visibility"
+          :onScopeChange="changeVis"/>
       </div>
-      <div
-        v-if="candidates"
-        class="autocomplete-panel"
-      >
+    </div>
+    <div class="autocomplete-panel" v-if="candidates">
         <div class="autocomplete-panel-body">
           <div
             v-for="(candidate, index) in candidates"
             :key="index"
+            @click="replace(candidate.utf || (candidate.screen_name + ' '))"
             class="autocomplete-item"
             :class="{ highlighted: candidate.highlighted }"
-            @click="replace(candidate.utf || (candidate.screen_name + ' '))"
           >
-            <span v-if="candidate.img"><img :src="candidate.img"></span>
-            <span v-else>{{ candidate.utf }}</span>
-            <span>{{ candidate.screen_name }}<small>{{ candidate.name }}</small></span>
+            <span v-if="candidate.img"><img :src="candidate.img" /></span>
+            <span v-else>{{candidate.utf}}</span>
+            <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
           </div>
         </div>
       </div>
-      <div class="form-bottom">
-        <media-upload
-          ref="mediaUpload"
-          :drop-files="dropFiles"
-          @uploading="disableSubmit"
-          @uploaded="addMediaFile"
-          @upload-failed="uploadFailed"
-        />
+      <div class='form-bottom'>
+        <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
 
-        <p
-          v-if="isOverLengthLimit"
-          class="error"
-        >
-          {{ charactersLeft }}
-        </p>
-        <p
-          v-else-if="hasStatusLengthLimit"
-          class="faint"
-        >
-          {{ charactersLeft }}
-        </p>
+        <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
+        <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
 
-        <button
-          v-if="posting"
-          disabled
-          class="btn btn-default"
-        >
-          {{ $t('post_status.posting') }}
-        </button>
-        <button
-          v-else-if="isOverLengthLimit"
-          disabled
-          class="btn btn-default"
-        >
-          {{ $t('general.submit') }}
-        </button>
-        <button
-          v-else
-          :disabled="submitDisabled"
-          type="submit"
-          class="btn btn-default"
-        >
-          {{ $t('general.submit') }}
-        </button>
+        <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
+        <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
+        <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
       </div>
-      <div
-        v-if="error"
-        class="alert error"
-      >
+      <div class='alert error' v-if="error">
         Error: {{ error }}
-        <i
-          class="button-icon icon-cancel"
-          @click="clearError"
-        />
+        <i class="button-icon icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
-        <div
-          v-for="file in newStatus.files"
-          :key="file.url"
-          class="media-upload-wrapper"
-        >
-          <i
-            class="fa button-icon icon-cancel"
-            @click="removeMediaFile(file)"
-          />
+        <div class="media-upload-wrapper" v-for="file in newStatus.files">
+          <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
           <div class="media-upload-container attachment">
-            <img
-              v-if="type(file) === 'image'"
-              class="thumbnail media-upload"
-              :src="file.url"
-            >
-            <video
-              v-if="type(file) === 'video'"
-              :src="file.url"
-              controls
-            />
-            <audio
-              v-if="type(file) === 'audio'"
-              :src="file.url"
-              controls
-            />
-            <a
-              v-if="type(file) === 'unknown'"
-              :href="file.url"
-            >{{ file.url }}</a>
+            <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
+            <video v-if="type(file) === 'video'" :src="file.url" controls></video>
+            <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
+            <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
           </div>
         </div>
       </div>
-      <div
-        v-if="newStatus.files.length > 0"
-        class="upload_settings"
-      >
-        <input
-          id="filesSensitive"
-          v-model="newStatus.nsfw"
-          type="checkbox"
-        >
-        <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
+      <div class="upload_settings" v-if="newStatus.files.length > 0">
+        <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
+        <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
       </div>
     </form>
   </div>
@@ -311,6 +214,7 @@
     }
   }
 
+
   .btn {
     cursor: pointer;
   }
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
index fcd915ac..6be9f955 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.vue
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -1,9 +1,5 @@
 <template>
-  <Timeline
-    :title="$t('nav.twkn')"
-    :timeline="timeline"
-    :timeline-name="'publicAndExternal'"
-  />
+  <Timeline :title="$t('nav.twkn')" v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
 </template>
 
 <script src="./public_and_external_timeline.js"></script>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 5720068d..85d42cca 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,9 +1,5 @@
 <template>
-  <Timeline
-    :title="$t('nav.public_tl')"
-    :timeline="timeline"
-    :timeline-name="'public'"
-  />
+  <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
 </template>
 
 <script src="./public_timeline.js"></script>
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index aaa2ed26..3e50664b 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -1,50 +1,37 @@
 <template>
-  <div
-    class="range-control style-control"
-    :class="{ disabled: !present || disabled }"
-  >
-    <label
-      :for="name"
-      class="label"
-    >
-      {{ label }}
-    </label>
-    <input
-      v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      class="opt exclude-disabled"
-      type="checkbox"
-      :checked="present"
-      @input="$emit('input', !present ? fallback : undefined)"
-    >
-    <label
-      v-if="typeof fallback !== 'undefined'"
-      class="opt-l"
-      :for="name + '-o'"
-    />
-    <input
-      :id="name"
-      class="input-number"
-      type="range"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      :max="max || hardMax || 100"
-      :min="min || hardMin || 0"
-      :step="step || 1"
-      @input="$emit('input', $event.target.value)"
-    >
-    <input
-      :id="name"
-      class="input-number"
-      type="number"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      :max="hardMax"
-      :min="hardMin"
-      :step="step || 1"
-      @input="$emit('input', $event.target.value)"
-    >
-  </div>
+<div class="range-control style-control" :class="{ disabled: !present || disabled }">
+  <label :for="name" class="label">
+    {{label}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exclude-disabled"
+    :id="name + '-o'"
+    type="checkbox"
+    :checked="present"
+    @input="$emit('input', !present ? fallback : undefined)">
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <input
+    :id="name"
+    class="input-number"
+    type="range"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
+    :max="max || hardMax || 100"
+    :min="min || hardMin || 0"
+    :step="step || 1">
+  <input
+    :id="name"
+    class="input-number"
+    type="number"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
+    :max="hardMax"
+    :min="hardMin"
+    :step="step || 1">
+</div>
 </template>
 
 <script>
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 57f3caf0..8dc00420 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -28,7 +28,7 @@ const registration = {
   },
   created () {
     if ((!this.registrationOpen && !this.token) || this.signedIn) {
-      this.$router.push({ name: 'root' })
+      this.$router.push({name: 'root'})
     }
 
     this.setCaptcha()
@@ -61,7 +61,7 @@ const registration = {
       if (!this.$v.$invalid) {
         try {
           await this.signUp(this.user)
-          this.$router.push({ name: 'friends' })
+          this.$router.push({name: 'friends'})
         } catch (error) {
           console.warn('Registration failed: ' + error)
         }
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index c5f284ed..110b27bf 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -1,234 +1,109 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{ $t('registration.registration') }}
+      {{$t('registration.registration')}}
     </div>
     <div class="panel-body">
-      <form
-        class="registration-form"
-        @submit.prevent="submit(user)"
-      >
-        <div class="container">
-          <div class="text-fields">
-            <div
-              class="form-group"
-              :class="{ 'form-group--error': $v.user.username.$error }"
-            >
-              <label
-                class="form--label"
-                for="sign-up-username"
-              >{{ $t('login.username') }}</label>
-              <input
-                id="sign-up-username"
-                v-model.trim="$v.user.username.$model"
-                :disabled="isPending"
-                class="form-control"
-                :placeholder="$t('registration.username_placeholder')"
-              >
+      <form v-on:submit.prevent='submit(user)' class='registration-form'>
+        <div class='container'>
+          <div class='text-fields'>
+            <div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }">
+              <label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label>
+              <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')">
             </div>
-            <div
-              v-if="$v.user.username.$dirty"
-              class="form-error"
-            >
+            <div class="form-error" v-if="$v.user.username.$dirty">
               <ul>
                 <li v-if="!$v.user.username.required">
-                  <span>{{ $t('registration.validations.username_required') }}</span>
+                  <span>{{$t('registration.validations.username_required')}}</span>
                 </li>
               </ul>
             </div>
 
-            <div
-              class="form-group"
-              :class="{ 'form-group--error': $v.user.fullname.$error }"
-            >
-              <label
-                class="form--label"
-                for="sign-up-fullname"
-              >{{ $t('registration.fullname') }}</label>
-              <input
-                id="sign-up-fullname"
-                v-model.trim="$v.user.fullname.$model"
-                :disabled="isPending"
-                class="form-control"
-                :placeholder="$t('registration.fullname_placeholder')"
-              >
+            <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
+              <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
+              <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
             </div>
-            <div
-              v-if="$v.user.fullname.$dirty"
-              class="form-error"
-            >
+            <div class="form-error" v-if="$v.user.fullname.$dirty">
               <ul>
                 <li v-if="!$v.user.fullname.required">
-                  <span>{{ $t('registration.validations.fullname_required') }}</span>
+                  <span>{{$t('registration.validations.fullname_required')}}</span>
                 </li>
               </ul>
             </div>
 
-            <div
-              class="form-group"
-              :class="{ 'form-group--error': $v.user.email.$error }"
-            >
-              <label
-                class="form--label"
-                for="email"
-              >{{ $t('registration.email') }}</label>
-              <input
-                id="email"
-                v-model="$v.user.email.$model"
-                :disabled="isPending"
-                class="form-control"
-                type="email"
-              >
+            <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
+              <label class='form--label' for='email'>{{$t('registration.email')}}</label>
+              <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
             </div>
-            <div
-              v-if="$v.user.email.$dirty"
-              class="form-error"
-            >
+            <div class="form-error" v-if="$v.user.email.$dirty">
               <ul>
                 <li v-if="!$v.user.email.required">
-                  <span>{{ $t('registration.validations.email_required') }}</span>
+                  <span>{{$t('registration.validations.email_required')}}</span>
                 </li>
               </ul>
             </div>
 
-            <div class="form-group">
-              <label
-                class="form--label"
-                for="bio"
-              >{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label>
-              <textarea
-                id="bio"
-                v-model="user.bio"
-                :disabled="isPending"
-                class="form-control"
-                :placeholder="bioPlaceholder"
-              />
+            <div class='form-group'>
+              <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
+              <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea>
             </div>
 
-            <div
-              class="form-group"
-              :class="{ 'form-group--error': $v.user.password.$error }"
-            >
-              <label
-                class="form--label"
-                for="sign-up-password"
-              >{{ $t('login.password') }}</label>
-              <input
-                id="sign-up-password"
-                v-model="user.password"
-                :disabled="isPending"
-                class="form-control"
-                type="password"
-              >
+            <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
+              <label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label>
+              <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
             </div>
-            <div
-              v-if="$v.user.password.$dirty"
-              class="form-error"
-            >
+            <div class="form-error" v-if="$v.user.password.$dirty">
               <ul>
                 <li v-if="!$v.user.password.required">
-                  <span>{{ $t('registration.validations.password_required') }}</span>
+                  <span>{{$t('registration.validations.password_required')}}</span>
                 </li>
               </ul>
             </div>
 
-            <div
-              class="form-group"
-              :class="{ 'form-group--error': $v.user.confirm.$error }"
-            >
-              <label
-                class="form--label"
-                for="sign-up-password-confirmation"
-              >{{ $t('registration.password_confirm') }}</label>
-              <input
-                id="sign-up-password-confirmation"
-                v-model="user.confirm"
-                :disabled="isPending"
-                class="form-control"
-                type="password"
-              >
+            <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
+              <label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label>
+              <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
             </div>
-            <div
-              v-if="$v.user.confirm.$dirty"
-              class="form-error"
-            >
+            <div class="form-error" v-if="$v.user.confirm.$dirty">
               <ul>
                 <li v-if="!$v.user.confirm.required">
-                  <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
+                  <span>{{$t('registration.validations.password_confirmation_required')}}</span>
                 </li>
                 <li v-if="!$v.user.confirm.sameAsPassword">
-                  <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
+                  <span>{{$t('registration.validations.password_confirmation_match')}}</span>
                 </li>
               </ul>
             </div>
 
-            <div
-              v-if="captcha.type != 'none'"
-              id="captcha-group"
-              class="form-group"
-            >
-              <label
-                class="form--label"
-                for="captcha-label"
-              >{{ $t('captcha') }}</label>
+            <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
+              <label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
 
               <template v-if="captcha.type == 'kocaptcha'">
-                <img
-                  :src="captcha.url"
-                  @click="setCaptcha"
-                >
+                <img v-bind:src="captcha.url" v-on:click="setCaptcha">
 
-                <sub>{{ $t('registration.new_captcha') }}</sub>
+                <sub>{{$t('registration.new_captcha')}}</sub>
 
-                <input
-                  id="captcha-answer"
-                  v-model="captcha.solution"
-                  :disabled="isPending"
-                  class="form-control"
-                  type="text"
-                  autocomplete="off"
-                >
+                <input :disabled="isPending"
+                  v-model='captcha.solution'
+                  class='form-control' id='captcha-answer' type='text' autocomplete="off">
               </template>
             </div>
 
-            <div
-              v-if="token"
-              class="form-group"
-            >
-              <label for="token">{{ $t('registration.token') }}</label>
-              <input
-                id="token"
-                v-model="token"
-                disabled="true"
-                class="form-control"
-                type="text"
-              >
+            <div class='form-group' v-if='token' >
+              <label for='token'>{{$t('registration.token')}}</label>
+              <input disabled='true' v-model='token' class='form-control' id='token' type='text'>
             </div>
-            <div class="form-group">
-              <button
-                :disabled="isPending"
-                type="submit"
-                class="btn btn-default"
-              >
-                {{ $t('general.submit') }}
-              </button>
+            <div class='form-group'>
+              <button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button>
             </div>
           </div>
 
-          <div
-            class="terms-of-service"
-            v-html="termsOfService"
-          />
+          <div class='terms-of-service' v-html="termsOfService">
+          </div>
         </div>
-        <div
-          v-if="serverValidationErrors.length"
-          class="form-group"
-        >
-          <div class="alert error">
-            <span
-              v-for="error in serverValidationErrors"
-              :key="error"
-            >{{ error }}</span>
+        <div v-if="serverValidationErrors.length" class='form-group'>
+          <div class='alert error'>
+            <span v-for="error in serverValidationErrors">{{error}}</span>
           </div>
         </div>
       </form>
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
index cb1c2a1b..fb2147bd 100644
--- a/src/components/remote_follow/remote_follow.vue
+++ b/src/components/remote_follow/remote_follow.vue
@@ -1,23 +1,9 @@
 <template>
   <div class="remote-follow">
-    <form
-      method="POST"
-      :action="subscribeUrl"
-    >
-      <input
-        type="hidden"
-        name="nickname"
-        :value="user.screen_name"
-      >
-      <input
-        type="hidden"
-        name="profile"
-        value=""
-      >
-      <button
-        click="submit"
-        class="remote-button"
-      >
+    <form method="POST" :action='subscribeUrl'>
+      <input type="hidden" name="nickname" :value="user.screen_name">
+      <input type="hidden" name="profile" value="">
+      <button click="submit" class="remote-button">
         {{ $t('user_card.remote_follow') }}
       </button>
     </form>
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index fb543a9c..eb4e4b41 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -11,9 +11,9 @@ const RetweetButton = {
   methods: {
     retweet () {
       if (!this.status.repeated) {
-        this.$store.dispatch('retweet', { id: this.status.id })
+        this.$store.dispatch('retweet', {id: this.status.id})
       } else {
-        this.$store.dispatch('unretweet', { id: this.status.id })
+        this.$store.dispatch('unretweet', {id: this.status.id})
       }
       this.animated = true
       setTimeout(() => {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index d58a7f8c..6370f9dc 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,29 +1,16 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-      <i
-        :class="classes"
-        class="button-icon retweet-button icon-retweet rt-active"
-        :title="$t('tool_tip.repeat')"
-        @click.prevent="retweet()"
-      />
-      <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
+      <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
+      <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
     </template>
     <template v-else>
-      <i
-        :class="classes"
-        class="button-icon icon-lock"
-        :title="$t('timeline.no_retweet_hint')"
-      />
+      <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
     </template>
   </div>
   <div v-else-if="!loggedIn">
-    <i
-      :class="classes"
-      class="button-icon icon-retweet"
-      :title="$t('tool_tip.repeat')"
-    />
-    <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
+    <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
+    <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>
 
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index e9ccdefc..8a42ee7b 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -29,10 +29,10 @@ const ScopeSelector = {
     },
     css () {
       return {
-        public: { selected: this.currentScope === 'public' },
-        unlisted: { selected: this.currentScope === 'unlisted' },
-        private: { selected: this.currentScope === 'private' },
-        direct: { selected: this.currentScope === 'direct' }
+        public: {selected: this.currentScope === 'public'},
+        unlisted: {selected: this.currentScope === 'unlisted'},
+        private: {selected: this.currentScope === 'private'},
+        direct: {selected: this.currentScope === 'direct'}
       }
     }
   },
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d150e932..33ea488f 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,34 +1,30 @@
 <template>
-  <div v-if="!showNothing">
-    <i
-      v-if="showDirect"
-      class="icon-mail-alt"
-      :class="css.direct"
-      :title="$t('post_status.scope.direct')"
-      @click="changeVis('direct')"
-    />
-    <i
-      v-if="showPrivate"
-      class="icon-lock"
-      :class="css.private"
-      :title="$t('post_status.scope.private')"
-      @click="changeVis('private')"
-    />
-    <i
-      v-if="showUnlisted"
-      class="icon-lock-open-alt"
-      :class="css.unlisted"
-      :title="$t('post_status.scope.unlisted')"
-      @click="changeVis('unlisted')"
-    />
-    <i
-      v-if="showPublic"
-      class="icon-globe"
-      :class="css.public"
-      :title="$t('post_status.scope.public')"
-      @click="changeVis('public')"
-    />
-  </div>
+<div v-if="!showNothing">
+  <i class="icon-mail-alt"
+     :class="css.direct"
+     :title="$t('post_status.scope.direct')"
+     v-if="showDirect"
+     @click="changeVis('direct')">
+  </i>
+  <i class="icon-lock"
+     :class="css.private"
+     :title="$t('post_status.scope.private')"
+     v-if="showPrivate"
+     v-on:click="changeVis('private')">
+  </i>
+  <i class="icon-lock-open-alt"
+     :class="css.unlisted"
+     :title="$t('post_status.scope.unlisted')"
+     v-if="showUnlisted"
+     @click="changeVis('unlisted')">
+  </i>
+  <i class="icon-globe"
+     :class="css.public"
+     :title="$t('post_status.scope.public')"
+     v-if="showPublic"
+     @click="changeVis('public')">
+  </i>
+</div>
 </template>
 
 <script src="./scope_selector.js"></script>
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 226bdf1f..6ee103c7 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -1,476 +1,302 @@
 <template>
-  <div class="settings panel panel-default">
-    <div class="panel-heading">
-      <div class="title">
-        {{ $t('settings.settings') }}
-      </div>
+<div class="settings panel panel-default">
+  <div class="panel-heading">
+    <div class="title">
+      {{$t('settings.settings')}}
+    </div>
 
-      <transition name="fade">
-        <template v-if="currentSaveStateNotice">
-          <div
-            v-if="currentSaveStateNotice.error"
-            class="alert error"
-            @click.prevent
-          >
-            {{ $t('settings.saving_err') }}
-          </div>
+    <transition name="fade">
+      <template v-if="currentSaveStateNotice">
+        <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+          {{ $t('settings.saving_err') }}
+        </div>
 
-          <div
-            v-if="!currentSaveStateNotice.error"
-            class="alert transparent"
-            @click.prevent
-          >
-            {{ $t('settings.saving_ok') }}
-          </div>
-        </template>
-      </transition>
-    </div>
-    <div class="panel-body">
-      <keep-alive>
-        <tab-switcher>
-          <div :label="$t('settings.general')">
-            <div class="setting-item">
-              <h2>{{ $t('settings.interface') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <interface-language-switcher />
-                </li>
-                <li v-if="instanceSpecificPanelPresent">
-                  <input
-                    id="hideISP"
-                    v-model="hideISPLocal"
-                    type="checkbox"
-                  >
-                  <label for="hideISP">{{ $t('settings.hide_isp') }}</label>
-                </li>
-              </ul>
-            </div>
-            <div class="setting-item">
-              <h2>{{ $t('nav.timeline') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <input
-                    id="hideMutedPosts"
-                    v-model="hideMutedPostsLocal"
-                    type="checkbox"
-                  >
-                  <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label>
-                </li>
-                <li>
-                  <input
-                    id="collapseMessageWithSubject"
-                    v-model="collapseMessageWithSubjectLocal"
-                    type="checkbox"
-                  >
-                  <label for="collapseMessageWithSubject">
-                    {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }}
-                  </label>
-                </li>
-                <li>
-                  <input
-                    id="streaming"
-                    v-model="streamingLocal"
-                    type="checkbox"
-                  >
-                  <label for="streaming">{{ $t('settings.streaming') }}</label>
-                  <ul
-                    class="setting-list suboptions"
-                    :class="[{disabled: !streamingLocal}]"
-                  >
-                    <li>
-                      <input
-                        id="pauseOnUnfocused"
-                        v-model="pauseOnUnfocusedLocal"
-                        :disabled="!streamingLocal"
-                        type="checkbox"
-                      >
-                      <label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label>
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <input
-                    id="autoload"
-                    v-model="autoLoadLocal"
-                    type="checkbox"
-                  >
-                  <label for="autoload">{{ $t('settings.autoload') }}</label>
-                </li>
+        <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+          {{ $t('settings.saving_ok') }}
+        </div>
+      </template>
+    </transition>
+  </div>
+  <div class="panel-body">
+<keep-alive>
+    <tab-switcher>
+      <div :label="$t('settings.general')" >
+        <div class="setting-item">
+          <h2>{{ $t('settings.interface') }}</h2>
+          <ul class="setting-list">
+            <li>
+              <interface-language-switcher />
+            </li>
+            <li v-if="instanceSpecificPanelPresent">
+              <input type="checkbox" id="hideISP" v-model="hideISPLocal">
+              <label for="hideISP">{{$t('settings.hide_isp')}}</label>
+            </li>
+          </ul>
+        </div>
+        <div class="setting-item">
+          <h2>{{$t('nav.timeline')}}</h2>
+          <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="hideMutedPosts" v-model="hideMutedPostsLocal">
+              <label for="hideMutedPosts">{{$t('settings.hide_muted_posts')}} {{$t('settings.instance_default', { value: hideMutedPostsDefault })}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
+              <label for="collapseMessageWithSubject">
+                {{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="streaming" v-model="streamingLocal">
+              <label for="streaming">{{$t('settings.streaming')}}</label>
+              <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
                 <li>
-                  <input
-                    id="hoverPreview"
-                    v-model="hoverPreviewLocal"
-                    type="checkbox"
-                  >
-                  <label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
+                  <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
+                  <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
                 </li>
               </ul>
-            </div>
+            </li>
+            <li>
+              <input type="checkbox" id="autoload" v-model="autoLoadLocal">
+              <label for="autoload">{{$t('settings.autoload')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
+              <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
+            </li>
+          </ul>
+        </div>
 
-            <div class="setting-item">
-              <h2>{{ $t('settings.composing') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <input
-                    id="scopeCopy"
-                    v-model="scopeCopyLocal"
-                    type="checkbox"
-                  >
-                  <label for="scopeCopy">
-                    {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }}
-                  </label>
-                </li>
-                <li>
-                  <input
-                    id="subjectHide"
-                    v-model="alwaysShowSubjectInputLocal"
-                    type="checkbox"
-                  >
-                  <label for="subjectHide">
-                    {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }}
-                  </label>
-                </li>
-                <li>
-                  <div>
-                    {{ $t('settings.subject_line_behavior') }}
-                    <label
-                      for="subjectLineBehavior"
-                      class="select"
-                    >
-                      <select
-                        id="subjectLineBehavior"
-                        v-model="subjectLineBehaviorLocal"
-                      >
-                        <option value="email">
-                          {{ $t('settings.subject_line_email') }}
-                          {{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                        <option value="masto">
-                          {{ $t('settings.subject_line_mastodon') }}
-                          {{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                        <option value="noop">
-                          {{ $t('settings.subject_line_noop') }}
-                          {{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                      </select>
-                      <i class="icon-down-open" />
-                    </label>
-                  </div>
-                </li>
-                <li>
-                  <div>
-                    {{ $t('settings.post_status_content_type') }}
-                    <label
-                      for="postContentType"
-                      class="select"
-                    >
-                      <select
-                        id="postContentType"
-                        v-model="postContentTypeLocal"
-                      >
-                        <option
-                          v-for="postFormat in postFormats"
-                          :key="postFormat"
-                          :value="postFormat"
-                        >
-                          {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                          {{ postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                      </select>
-                      <i class="icon-down-open" />
-                    </label>
-                  </div>
-                </li>
-                <li>
-                  <input
-                    id="minimalScopesMode"
-                    v-model="minimalScopesModeLocal"
-                    type="checkbox"
-                  >
-                  <label for="minimalScopesMode">
-                    {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }}
-                  </label>
-                </li>
-              </ul>
-            </div>
+        <div class="setting-item">
+          <h2>{{$t('settings.composing')}}</h2>
+          <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal">
+              <label for="scopeCopy">
+                {{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
+              <label for="subjectHide">
+                {{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
+              </label>
+            </li>
+            <li>
+              <div>
+                {{$t('settings.subject_line_behavior')}}
+                <label for="subjectLineBehavior" class="select">
+                  <select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal">
+                    <option value="email">
+                      {{$t('settings.subject_line_email')}}
+                      {{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}}
+                    </option>
+                    <option value="masto">
+                      {{$t('settings.subject_line_mastodon')}}
+                      {{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}}
+                    </option>
+                    <option value="noop">
+                      {{$t('settings.subject_line_noop')}}
+                      {{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}}
+                    </option>
+                  </select>
+                  <i class="icon-down-open"/>
+                </label>
+              </div>
+            </li>
+            <li>
+              <div>
+                {{$t('settings.post_status_content_type')}}
+                <label for="postContentType" class="select">
+                  <select id="postContentType" v-model="postContentTypeLocal">
+                    <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                      {{$t(`post_status.content_type["${postFormat}"]`)}}
+                      {{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}}
+                    </option>
+                  </select>
+                  <i class="icon-down-open"/>
+                </label>
+              </div>
+            </li>
+            <li>
+              <input type="checkbox" id="minimalScopesMode" v-model="minimalScopesModeLocal">
+              <label for="minimalScopesMode">
+                {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
+              </label>
+            </li>
+          </ul>
+        </div>
 
-            <div class="setting-item">
-              <h2>{{ $t('settings.attachments') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <input
-                    id="hideAttachments"
-                    v-model="hideAttachmentsLocal"
-                    type="checkbox"
-                  >
-                  <label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
-                </li>
-                <li>
-                  <input
-                    id="hideAttachmentsInConv"
-                    v-model="hideAttachmentsInConvLocal"
-                    type="checkbox"
-                  >
-                  <label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
-                </li>
-                <li>
-                  <label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label>
-                  <input
-                    id="maxThumbnails"
-                    v-model.number="maxThumbnails"
-                    class="number-input"
-                    type="number"
-                    min="0"
-                    step="1"
-                  >
-                </li>
-                <li>
-                  <input
-                    id="hideNsfw"
-                    v-model="hideNsfwLocal"
-                    type="checkbox"
-                  >
-                  <label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
-                </li>
-                <ul class="setting-list suboptions">
-                  <li>
-                    <input
-                      id="preloadImage"
-                      v-model="preloadImage"
-                      :disabled="!hideNsfwLocal"
-                      type="checkbox"
-                    >
-                    <label for="preloadImage">{{ $t('settings.preload_images') }}</label>
-                  </li>
-                  <li>
-                    <input
-                      id="useOneClickNsfw"
-                      v-model="useOneClickNsfw"
-                      :disabled="!hideNsfwLocal"
-                      type="checkbox"
-                    >
-                    <label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label>
-                  </li>
-                </ul>
-                <li>
-                  <input
-                    id="stopGifs"
-                    v-model="stopGifs"
-                    type="checkbox"
-                  >
-                  <label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
-                </li>
-                <li>
-                  <input
-                    id="loopVideo"
-                    v-model="loopVideoLocal"
-                    type="checkbox"
-                  >
-                  <label for="loopVideo">{{ $t('settings.loop_video') }}</label>
-                  <ul
-                    class="setting-list suboptions"
-                    :class="[{disabled: !streamingLocal}]"
-                  >
-                    <li>
-                      <input
-                        id="loopVideoSilentOnly"
-                        v-model="loopVideoSilentOnlyLocal"
-                        :disabled="!loopVideoLocal || !loopSilentAvailable"
-                        type="checkbox"
-                      >
-                      <label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label>
-                      <div
-                        v-if="!loopSilentAvailable"
-                        class="unavailable"
-                      >
-                        <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <input
-                    id="playVideosInModal"
-                    v-model="playVideosInModal"
-                    type="checkbox"
-                  >
-                  <label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
-                </li>
+        <div class="setting-item">
+          <h2>{{$t('settings.attachments')}}</h2>
+          <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
+              <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
+              <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
+            </li>
+            <li>
+              <label for="maxThumbnails">{{$t('settings.max_thumbnails')}}</label>
+              <input class="number-input" type="number" id="maxThumbnails" v-model.number="maxThumbnails" min="0" step="1">
+            </li>
+            <li>
+              <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
+              <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
+            </li>
+            <ul class="setting-list suboptions" >
+              <li>
+                <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
+                <label for="preloadImage">{{$t('settings.preload_images')}}</label>
+              </li>
+              <li>
+                <input :disabled="!hideNsfwLocal" type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
+                <label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
+              </li>
+            </ul>
+            <li>
+              <input type="checkbox" id="stopGifs" v-model="stopGifs">
+              <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
+              <label for="loopVideo">{{$t('settings.loop_video')}}</label>
+              <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
                 <li>
-                  <input
-                    id="useContainFit"
-                    v-model="useContainFit"
-                    type="checkbox"
-                  >
-                  <label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
+                  <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
+                  <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
+                  <div v-if="!loopSilentAvailable" class="unavailable">
+                    <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
+                  </div>
                 </li>
               </ul>
-            </div>
+            </li>
+            <li>
+              <input type="checkbox" id="playVideosInModal" v-model="playVideosInModal">
+              <label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="useContainFit" v-model="useContainFit">
+              <label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
+            </li>
+          </ul>
+        </div>
 
-            <div class="setting-item">
-              <h2>{{ $t('settings.notifications') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <input
-                    id="webPushNotifications"
-                    v-model="webPushNotificationsLocal"
-                    type="checkbox"
-                  >
-                  <label for="webPushNotifications">
-                    {{ $t('settings.enable_web_push_notifications') }}
-                  </label>
-                </li>
-              </ul>
-            </div>
-          </div>
+       <div class="setting-item">
+          <h2>{{$t('settings.notifications')}}</h2>
+          <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
+              <label for="webPushNotifications">
+                {{$t('settings.enable_web_push_notifications')}}
+              </label>
+            </li>
+          </ul>
+        </div>
+      </div>
 
-          <div :label="$t('settings.theme')">
-            <div class="setting-item">
-              <style-switcher />
-            </div>
-          </div>
+      <div :label="$t('settings.theme')" >
+        <div class="setting-item">
+          <style-switcher></style-switcher>
+        </div>
+      </div>
 
-          <div :label="$t('settings.filtering')">
-            <div class="setting-item">
-              <div class="select-multiple">
-                <span class="label">{{ $t('settings.notification_visibility') }}</span>
-                <ul class="option-list">
-                  <li>
-                    <input
-                      id="notification-visibility-likes"
-                      v-model="notificationVisibilityLocal.likes"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-likes">
-                      {{ $t('settings.notification_visibility_likes') }}
-                    </label>
-                  </li>
-                  <li>
-                    <input
-                      id="notification-visibility-repeats"
-                      v-model="notificationVisibilityLocal.repeats"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-repeats">
-                      {{ $t('settings.notification_visibility_repeats') }}
-                    </label>
-                  </li>
-                  <li>
-                    <input
-                      id="notification-visibility-follows"
-                      v-model="notificationVisibilityLocal.follows"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-follows">
-                      {{ $t('settings.notification_visibility_follows') }}
-                    </label>
-                  </li>
-                  <li>
-                    <input
-                      id="notification-visibility-mentions"
-                      v-model="notificationVisibilityLocal.mentions"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-mentions">
-                      {{ $t('settings.notification_visibility_mentions') }}
-                    </label>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                {{ $t('settings.replies_in_timeline') }}
-                <label
-                  for="replyVisibility"
-                  class="select"
-                >
-                  <select
-                    id="replyVisibility"
-                    v-model="replyVisibilityLocal"
-                  >
-                    <option
-                      value="all"
-                      selected
-                    >{{ $t('settings.reply_visibility_all') }}</option>
-                    <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-                    <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-                  </select>
-                  <i class="icon-down-open" />
+      <div :label="$t('settings.filtering')" >
+        <div class="setting-item">
+          <div class="select-multiple">
+            <span class="label">{{$t('settings.notification_visibility')}}</span>
+            <ul class="option-list">
+              <li>
+                <input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
+                <label for="notification-visibility-likes">
+                  {{$t('settings.notification_visibility_likes')}}
                 </label>
-              </div>
-              <div>
-                <input
-                  id="hidePostStats"
-                  v-model="hidePostStatsLocal"
-                  type="checkbox"
-                >
-                <label for="hidePostStats">
-                  {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }}
+              </li>
+              <li>
+                <input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
+                <label for="notification-visibility-repeats">
+                {{$t('settings.notification_visibility_repeats')}}
                 </label>
-              </div>
-              <div>
-                <input
-                  id="hideUserStats"
-                  v-model="hideUserStatsLocal"
-                  type="checkbox"
-                >
-                <label for="hideUserStats">
-                  {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }}
+              </li>
+              <li>
+                <input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
+                <label for="notification-visibility-follows">
+                {{$t('settings.notification_visibility_follows')}}
                 </label>
-              </div>
-            </div>
-            <div class="setting-item">
-              <div>
-                <p>{{ $t('settings.filtering_explanation') }}</p>
-                <textarea
-                  id="muteWords"
-                  v-model="muteWordsString"
-                />
-              </div>
-              <div>
-                <input
-                  id="hideFilteredStatuses"
-                  v-model="hideFilteredStatusesLocal"
-                  type="checkbox"
-                >
-                <label for="hideFilteredStatuses">
-                  {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesDefault }) }}
+              </li>
+              <li>
+                <input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
+                <label for="notification-visibility-mentions">
+                {{$t('settings.notification_visibility_mentions')}}
                 </label>
-              </div>
-            </div>
+              </li>
+            </ul>
+          </div>
+          <div>
+            {{$t('settings.replies_in_timeline')}}
+            <label for="replyVisibility" class="select">
+              <select id="replyVisibility" v-model="replyVisibilityLocal">
+                <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
+                <option value="following">{{$t('settings.reply_visibility_following')}}</option>
+                <option value="self">{{$t('settings.reply_visibility_self')}}</option>
+              </select>
+              <i class="icon-down-open"/>
+            </label>
           </div>
-          <div :label="$t('settings.version.title')">
-            <div class="setting-item">
-              <ul class="setting-list">
+          <div>
+            <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
+            <label for="hidePostStats">
+              {{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
+            </label>
+          </div>
+          <div>
+            <input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
+            <label for="hideUserStats">
+              {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
+            </label>
+          </div>
+        </div>
+        <div class="setting-item">
+          <div>
+            <p>{{$t('settings.filtering_explanation')}}</p>
+            <textarea id="muteWords" v-model="muteWordsString"></textarea>
+          </div>
+          <div>
+            <input type="checkbox" id="hideFilteredStatuses" v-model="hideFilteredStatusesLocal">
+            <label for="hideFilteredStatuses">
+              {{$t('settings.hide_filtered_statuses')}} {{$t('settings.instance_default', { value: hideFilteredStatusesDefault })}}
+            </label>
+          </div>
+        </div>
+      </div>
+      <div :label="$t('settings.version.title')" >
+        <div class="setting-item">
+          <ul class="setting-list">
+            <li>
+              <p>{{$t('settings.version.backend_version')}}</p>
+              <ul class="option-list">
                 <li>
-                  <p>{{ $t('settings.version.backend_version') }}</p>
-                  <ul class="option-list">
-                    <li>
-                      <a
-                        :href="backendVersionLink"
-                        target="_blank"
-                      >{{ backendVersion }}</a>
-                    </li>
-                  </ul>
+                  <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
                 </li>
+              </ul>
+            </li>
+            <li>
+              <p>{{$t('settings.version.frontend_version')}}</p>
+              <ul class="option-list">
                 <li>
-                  <p>{{ $t('settings.version.frontend_version') }}</p>
-                  <ul class="option-list">
-                    <li>
-                      <a
-                        :href="frontendVersionLink"
-                        target="_blank"
-                      >{{ frontendVersion }}</a>
-                    </li>
-                  </ul>
+                  <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
                 </li>
               </ul>
-            </div>
-          </div>
-        </tab-switcher>
-      </keep-alive>
-    </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </tab-switcher>
+</keep-alive>
   </div>
+</div>
 </template>
 
 <script src="./settings.js">
@@ -501,6 +327,7 @@
     min-width: 10em;
   }
 
+
   textarea {
     width: 100%;
     height: 100px;
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index de8a42d1..744925d4 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,207 +1,134 @@
 <template>
-  <div
-    class="shadow-control"
-    :class="{ disabled: !present }"
-  >
-    <div class="shadow-preview-container">
-      <div
+<div class="shadow-control" :class="{ disabled: !present }">
+  <div class="shadow-preview-container">
+    <div :disabled="!present" class="y-shift-control">
+      <input
+        v-model="selected.y"
         :disabled="!present"
-        class="y-shift-control"
-      >
+        class="input-number"
+        type="number">
+      <div class="wrap">
         <input
           v-model="selected.y"
           :disabled="!present"
-          class="input-number"
-          type="number"
-        >
-        <div class="wrap">
-          <input
-            v-model="selected.y"
-            :disabled="!present"
-            class="input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
-      <div class="preview-window">
-        <div
-          class="preview-block"
-          :style="style"
-        />
+          class="input-range"
+          type="range"
+          max="20"
+          min="-20">
       </div>
-      <div
+    </div>
+    <div class="preview-window">
+      <div class="preview-block" :style="style"></div>
+    </div>
+    <div :disabled="!present" class="x-shift-control">
+      <input
+        v-model="selected.x"
         :disabled="!present"
-        class="x-shift-control"
-      >
+        class="input-number"
+        type="number">
+      <div class="wrap">
         <input
           v-model="selected.x"
           :disabled="!present"
-          class="input-number"
-          type="number"
-        >
-        <div class="wrap">
-          <input
-            v-model="selected.x"
-            :disabled="!present"
-            class="input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
+          class="input-range"
+          type="range"
+          max="20"
+          min="-20">
       </div>
     </div>
+  </div>
 
-    <div class="shadow-tweak">
-      <div
-        :disabled="usingFallback"
-        class="id-control style-control"
-      >
-        <label
-          for="shadow-switcher"
-          class="select"
+  <div class="shadow-tweak">
+    <div :disabled="usingFallback" class="id-control style-control">
+      <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
+        <select
+          v-model="selectedId" class="shadow-switcher"
           :disabled="!ready || usingFallback"
-        >
-          <select
-            id="shadow-switcher"
-            v-model="selectedId"
-            class="shadow-switcher"
-            :disabled="!ready || usingFallback"
-          >
-            <option
-              v-for="(shadow, index) in cValue"
-              :key="index"
-              :value="index"
-            >
-              {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-            </option>
-          </select>
-          <i class="icon-down-open" />
-        </label>
-        <button
-          class="btn btn-default"
-          :disabled="!ready || !present"
-          @click="del"
-        >
-          <i class="icon-cancel" />
-        </button>
-        <button
-          class="btn btn-default"
-          :disabled="!moveUpValid"
-          @click="moveUp"
-        >
-          <i class="icon-up-open" />
-        </button>
-        <button
-          class="btn btn-default"
-          :disabled="!moveDnValid"
-          @click="moveDn"
-        >
-          <i class="icon-down-open" />
-        </button>
-        <button
-          class="btn btn-default"
-          :disabled="usingFallback"
-          @click="add"
-        >
-          <i class="icon-plus" />
-        </button>
-      </div>
-      <div
+          id="shadow-switcher">
+          <option v-for="(shadow, index) in cValue" :value="index">
+            {{$t('settings.style.shadows.shadow_id', { value: index })}}
+          </option>
+        </select>
+        <i class="icon-down-open"/>
+      </label>
+      <button class="btn btn-default" :disabled="!ready || !present" @click="del">
+        <i class="icon-cancel"/>
+      </button>
+      <button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
+        <i class="icon-up-open"/>
+      </button>
+      <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
+        <i class="icon-down-open"/>
+      </button>
+      <button class="btn btn-default" :disabled="usingFallback" @click="add">
+        <i class="icon-plus"/>
+      </button>
+    </div>
+    <div :disabled="!present" class="inset-control style-control">
+      <label for="inset" class="label">
+        {{$t('settings.style.shadows.inset')}}
+      </label>
+      <input
+        v-model="selected.inset"
         :disabled="!present"
-        class="inset-control style-control"
-      >
-        <label
-          for="inset"
-          class="label"
-        >
-          {{ $t('settings.style.shadows.inset') }}
-        </label>
-        <input
-          id="inset"
-          v-model="selected.inset"
-          :disabled="!present"
-          name="inset"
-          class="input-inset"
-          type="checkbox"
-        >
-        <label
-          class="checkbox-label"
-          for="inset"
-        />
-      </div>
-      <div
+        name="inset"
+        id="inset"
+        class="input-inset"
+        type="checkbox">
+      <label class="checkbox-label" for="inset"></label>
+    </div>
+    <div :disabled="!present" class="blur-control style-control">
+      <label for="spread" class="label">
+        {{$t('settings.style.shadows.blur')}}
+      </label>
+      <input
+        v-model="selected.blur"
         :disabled="!present"
-        class="blur-control style-control"
-      >
-        <label
-          for="spread"
-          class="label"
-        >
-          {{ $t('settings.style.shadows.blur') }}
-        </label>
-        <input
-          id="blur"
-          v-model="selected.blur"
-          :disabled="!present"
-          name="blur"
-          class="input-range"
-          type="range"
-          max="20"
-          min="0"
-        >
-        <input
-          v-model="selected.blur"
-          :disabled="!present"
-          class="input-number"
-          type="number"
-          min="0"
-        >
-      </div>
-      <div
+        name="blur"
+        id="blur"
+        class="input-range"
+        type="range"
+        max="20"
+        min="0">
+      <input
+        v-model="selected.blur"
         :disabled="!present"
-        class="spread-control style-control"
-      >
-        <label
-          for="spread"
-          class="label"
-        >
-          {{ $t('settings.style.shadows.spread') }}
-        </label>
-        <input
-          id="spread"
-          v-model="selected.spread"
-          :disabled="!present"
-          name="spread"
-          class="input-range"
-          type="range"
-          max="20"
-          min="-20"
-        >
-        <input
-          v-model="selected.spread"
-          :disabled="!present"
-          class="input-number"
-          type="number"
-        >
-      </div>
-      <ColorInput
-        v-model="selected.color"
+        class="input-number"
+        type="number"
+        min="0">
+    </div>
+    <div :disabled="!present" class="spread-control style-control">
+      <label for="spread" class="label">
+        {{$t('settings.style.shadows.spread')}}
+      </label>
+      <input
+        v-model="selected.spread"
         :disabled="!present"
-        :label="$t('settings.style.common.color')"
-        name="shadow"
-      />
-      <OpacityInput
-        v-model="selected.alpha"
+        name="spread"
+        id="spread"
+        class="input-range"
+        type="range"
+        max="20"
+        min="-20">
+      <input
+        v-model="selected.spread"
         :disabled="!present"
-      />
-      <p>
-        {{ $t('settings.style.shadows.hint') }}
-      </p>
+        class="input-number"
+        type="number">
     </div>
+    <ColorInput
+      v-model="selected.color"
+      :disabled="!present"
+      :label="$t('settings.style.common.color')"
+      name="shadow"/>
+    <OpacityInput
+      v-model="selected.alpha"
+      :disabled="!present"/>
+    <p>
+      {{$t('settings.style.shadows.hint')}}
+    </p>
   </div>
+</div>
 </template>
 
 <script src="./shadow_control.js" ></script>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 9dd2f8b5..9abb8cef 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,90 +1,58 @@
 <template>
-  <div
-    class="side-drawer-container"
+  <div class="side-drawer-container"
     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
   >
-    <div
-      class="side-drawer-darken"
-      :class="{ 'side-drawer-darken-closed': closed}"
-    />
-    <div
-      class="side-drawer"
+    <div class="side-drawer-darken" :class="{ 'side-drawer-darken-closed': closed}" />
+    <div class="side-drawer"
       :class="{'side-drawer-closed': closed}"
       @touchstart="touchStart"
       @touchmove="touchMove"
     >
-      <div
-        class="side-drawer-heading"
-        @click="toggleDrawer"
-      >
-        <UserCard
-          v-if="currentUser"
-          :user="currentUser"
-          :hide-bio="true"
-        />
-        <div
-          v-else
-          class="side-drawer-logo-wrapper"
-        >
-          <img :src="logo">
-          <span>{{ sitename }}</span>
+      <div class="side-drawer-heading" @click="toggleDrawer">
+        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
+        <div class="side-drawer-logo-wrapper" v-else>
+          <img :src="logo"/>
+          <span>{{sitename}}</span>
         </div>
       </div>
       <ul>
-        <li
-          v-if="!currentUser"
-          @click="toggleDrawer"
-        >
+        <li v-if="!currentUser" @click="toggleDrawer">
           <router-link :to="{ name: 'login' }">
             {{ $t("login.login") }}
           </router-link>
         </li>
-        <li
-          v-if="currentUser"
-          @click="toggleDrawer"
-        >
+        <li v-if="currentUser" @click="toggleDrawer">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             {{ $t("nav.dms") }}
           </router-link>
         </li>
       </ul>
       <ul>
-        <li
-          v-if="currentUser"
-          @click="toggleDrawer"
-        >
+        <li v-if="currentUser" @click="toggleDrawer">
           <router-link :to="{ name: 'friends' }">
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li
-          v-if="currentUser && currentUser.locked"
-          @click="toggleDrawer"
-        >
-          <router-link to="/friend-requests">
+        <li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
+          <router-link to='/friend-requests'>
             {{ $t("nav.friend_requests") }}
-            <span
-              v-if="followRequestCount > 0"
-              class="badge follow-request-count"
-            >
-              {{ followRequestCount }}
+            <span v-if='followRequestCount > 0' class="badge follow-request-count">
+              {{followRequestCount}}
             </span>
+
           </router-link>
         </li>
         <li @click="toggleDrawer">
-          <router-link to="/main/public">
+          <router-link to='/main/public'>
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
-          <router-link to="/main/all">
+          <router-link to='/main/all'>
             {{ $t("nav.twkn") }}
           </router-link>
         </li>
-        <li
-          v-if="currentUser && chat"
-          @click="toggleDrawer"
-        >
+        <li v-if="currentUser && chat" @click="toggleDrawer">
           <router-link :to="{ name: 'chat' }">
             {{ $t("nav.chat") }}
           </router-link>
@@ -96,10 +64,7 @@
             {{ $t("nav.user_search") }}
           </router-link>
         </li>
-        <li
-          v-if="currentUser && suggestionsEnabled"
-          @click="toggleDrawer"
-        >
+        <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
           <router-link :to="{ name: 'who-to-follow' }">
             {{ $t("nav.who_to_follow") }}
           </router-link>
@@ -114,24 +79,17 @@
             {{ $t("nav.about") }}
           </router-link>
         </li>
-        <li
-          v-if="currentUser"
-          @click="toggleDrawer"
-        >
-          <a
-            href="#"
-            @click="doLogout"
-          >
+        <li v-if="currentUser" @click="toggleDrawer">
+          <a @click="doLogout" href="#">
             {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
     </div>
-    <div
-      class="side-drawer-click-outside"
-      :class="{'side-drawer-click-outside-closed': closed}"
+    <div class="side-drawer-click-outside"
       @click.stop.prevent="toggleDrawer"
-    />
+      :class="{'side-drawer-click-outside-closed': closed}"
+    ></div>
   </div>
 </template>
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 4eda89d9..0295cd04 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -210,10 +210,10 @@ const Status = {
       if (!this.status.summary) return ''
       const decodedSummary = unescape(this.status.summary)
       const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
-        ? this.$store.state.instance.subjectLineBehavior
-        : this.$store.state.config.subjectLineBehavior
+            ? this.$store.state.instance.subjectLineBehavior
+            : this.$store.state.config.subjectLineBehavior
       const startsWithRe = decodedSummary.match(/^re[: ]/i)
-      if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
+      if (behavior !== 'noop' && startsWithRe || behavior === 'masto') {
         return decodedSummary
       } else if (behavior === 'email') {
         return 're: '.concat(decodedSummary)
@@ -350,7 +350,7 @@ const Status = {
         this.preview = find(statuses, { 'id': targetId })
         // or if we have to fetch it
         if (!this.preview) {
-          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
+          this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
             this.preview = status
           })
         }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 64c8a4b7..34b17970 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,366 +1,152 @@
 <template>
-  <div
-    v-if="!hideStatus"
-    class="status-el"
-    :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
-  >
+  <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !isPreview">
       <div class="media status container muted">
         <small>
           <router-link :to="userProfileLink">
-            {{ status.user.screen_name }}
+            {{status.user.screen_name}}
           </router-link>
         </small>
-        <small class="muteWords">{{ muteWordHits.join(', ') }}</small>
-        <a
-          href="#"
-          class="unmute"
-          @click.prevent="toggleMute"
-        ><i class="button-icon icon-eye-off" /></a>
+        <small class="muteWords">{{muteWordHits.join(', ')}}</small>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
       </div>
     </template>
     <template v-else>
-      <div
-        v-if="retweet && !noHeading && !inConversation"
-        :class="[repeaterClass, { highlighted: repeaterStyle }]"
-        :style="[repeaterStyle]"
-        class="media container retweet-info"
-      >
-        <UserAvatar
-          v-if="retweet"
-          class="media-left"
-          :better-shadow="betterShadow"
-          :src="statusoid.user.profile_image_url_original"
-        />
+      <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
+        <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
           <span class="user-name">
-            <router-link
-              v-if="retweeterHtml"
-              :to="retweeterProfileLink"
-              v-html="retweeterHtml"
-            />
-            <router-link
-              v-else
-              :to="retweeterProfileLink"
-            >{{ retweeter }}</router-link>
+            <router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
+            <router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link>
           </span>
-          <i
-            class="fa icon-retweet retweeted"
-            :title="$t('tool_tip.repeat')"
-          />
-          {{ $t('timeline.repeated') }}
+          <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
+          {{$t('timeline.repeated')}}
         </div>
       </div>
 
-      <div
-        :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
-        :style="[ userStyle ]"
-        class="media status"
-      >
-        <div
-          v-if="!noHeading"
-          class="media-left"
-        >
-          <router-link
-            :to="userProfileLink"
-            @click.stop.prevent.capture.native="toggleUserExpanded"
-          >
-            <UserAvatar
-              :compact="compact"
-              :better-shadow="betterShadow"
-              :src="status.user.profile_image_url_original"
-            />
+      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status">
+        <div v-if="!noHeading" class="media-left">
+          <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
+            <UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
           </router-link>
         </div>
         <div class="status-body">
-          <UserCard
-            v-if="userExpanded"
-            :user="status.user"
-            :rounded="true"
-            :bordered="true"
-            class="status-usercard"
-          />
-          <div
-            v-if="!noHeading"
-            class="media-heading"
-          >
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
+          <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
-                <h4
-                  v-if="status.user.name_html"
-                  class="user-name"
-                  v-html="status.user.name_html"
-                />
-                <h4
-                  v-else
-                  class="user-name"
-                >
-                  {{ status.user.name }}
-                </h4>
-                <router-link
-                  class="account-name"
-                  :to="userProfileLink"
-                >
-                  {{ status.user.screen_name }}
+                <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
+                <h4 class="user-name" v-else>{{status.user.name}}</h4>
+                <router-link class="account-name" :to="userProfileLink">
+                  {{status.user.screen_name}}
                 </router-link>
               </div>
 
               <span class="heading-right">
-                <router-link
-                  class="timeago faint-link"
-                  :to="{ name: 'conversation', params: { id: status.id } }"
-                >
-                  <timeago
-                    :since="status.created_at"
-                    :auto-update="60"
-                  />
+                <router-link class="timeago faint-link" :to="{ name: 'conversation', params: { id: status.id } }">
+                  <timeago :since="status.created_at" :auto-update="60"></timeago>
                 </router-link>
-                <div
-                  v-if="status.visibility"
-                  class="button-icon visibility-icon"
-                >
-                  <i
-                    :class="visibilityIcon(status.visibility)"
-                    :title="status.visibility | capitalize"
-                  />
+                <div class="button-icon visibility-icon" v-if="status.visibility">
+                  <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
                 </div>
-                <a
-                  v-if="!status.is_local && !isPreview"
-                  :href="status.external_url"
-                  target="_blank"
-                  class="source_url"
-                  title="Source"
-                >
-                  <i class="button-icon icon-link-ext-alt" />
+                <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
+                  <i class="button-icon icon-link-ext-alt"></i>
                 </a>
                 <template v-if="expandable && !isPreview">
-                  <a
-                    href="#"
-                    title="Expand"
-                    @click.prevent="toggleExpanded"
-                  >
-                    <i class="button-icon icon-plus-squared" />
+                  <a href="#" @click.prevent="toggleExpanded" title="Expand">
+                    <i class="button-icon icon-plus-squared"></i>
                   </a>
                 </template>
-                <a
-                  v-if="unmuted"
-                  href="#"
-                  @click.prevent="toggleMute"
-                ><i class="button-icon icon-eye-off" /></a>
+                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
               </span>
             </div>
 
             <div class="heading-reply-row">
-              <div
-                v-if="isReply"
-                class="reply-to-and-accountname"
-              >
-                <a
-                  class="reply-to"
-                  href="#"
+              <div v-if="isReply" class="reply-to-and-accountname">
+                <a class="reply-to"
+                  href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   :aria-label="$t('tool_tip.reply')"
-                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
                   @mouseleave.prevent.stop="replyLeave()"
                 >
-                  <i
-                    v-if="!isPreview"
-                    class="button-icon icon-reply"
-                  />
-                  <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
+                  <i class="button-icon icon-reply" v-if="!isPreview"></i>
+                  <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
                 </a>
                 <router-link :to="replyProfileLink">
-                  {{ replyToName }}
+                  {{replyToName}}
                 </router-link>
-                <span
-                  v-if="replies && replies.length"
-                  class="faint replies-separator"
-                >
+                <span class="faint replies-separator" v-if="replies && replies.length">
                   -
                 </span>
               </div>
-              <div
-                v-if="inConversation && !isPreview"
-                class="replies"
-              >
-                <span
-                  v-if="replies && replies.length"
-                  class="faint"
-                >{{ $t('status.replies_list') }}</span>
-                <template
-                  v-if="replies"
-                >
-                  <span
-                    v-for="reply in replies"
-                    :key="reply.name"
-                    class="reply-link faint"
-                  >
-                    <a
-                      href="#"
-                      @click.prevent="gotoOriginal(reply.id)"
-                      @mouseenter="replyEnter(reply.id, $event)"
-                      @mouseout="replyLeave()"
-                    >{{ reply.name }}</a>
-                  </span>
-                </template>
+              <div class="replies" v-if="inConversation && !isPreview">
+                <span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
+                <span class="reply-link faint" v-if="replies" v-for="reply in replies">
+                  <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
+                </span>
               </div>
             </div>
+
+
           </div>
 
-          <div
-            v-if="showPreview"
-            class="status-preview-container"
-          >
-            <status
-              v-if="preview"
-              class="status-preview"
-              :is-preview="true"
-              :statusoid="preview"
-              :compact="true"
-            />
-            <div
-              v-else
-              class="status-preview status-preview-loading"
-            >
-              <i class="icon-spin4 animate-spin" />
+          <div v-if="showPreview" class="status-preview-container">
+            <status class="status-preview" v-if="preview" :isPreview="true" :statusoid="preview" :compact=true></status>
+            <div class="status-preview status-preview-loading" v-else>
+              <i class="icon-spin4 animate-spin"></i>
             </div>
           </div>
 
-          <div
-            v-if="longSubject"
-            class="status-content-wrapper"
-            :class="{ 'tall-status': !showingLongSubject }"
-          >
-            <a
-              v-if="!showingLongSubject"
-              class="tall-status-hider"
-              :class="{ 'tall-status-hider_focused': isFocused }"
-              href="#"
-              @click.prevent="showingLongSubject=true"
-            >{{ $t("general.show_more") }}</a>
-            <div
-              class="status-content media-body"
-              @click.prevent="linkClicked"
-              v-html="contentHtml"
-            />
-            <a
-              v-if="showingLongSubject"
-              href="#"
-              class="status-unhider"
-              @click.prevent="showingLongSubject=false"
-            >{{ $t("general.show_less") }}</a>
+          <div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div>
+            <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$t("general.show_less")}}</a>
           </div>
-          <div
-            v-else
-            :class="{'tall-status': hideTallStatus}"
-            class="status-content-wrapper"
-          >
-            <a
-              v-if="hideTallStatus"
-              class="tall-status-hider"
-              :class="{ 'tall-status-hider_focused': isFocused }"
-              href="#"
-              @click.prevent="toggleShowMore"
-            >{{ $t("general.show_more") }}</a>
-            <div
-              v-if="!hideSubjectStatus"
-              class="status-content media-body"
-              @click.prevent="linkClicked"
-              v-html="contentHtml"
-            />
-            <div
-              v-else
-              class="status-content media-body"
-              @click.prevent="linkClicked"
-              v-html="status.summary_html"
-            />
-            <a
-              v-if="hideSubjectStatus"
-              href="#"
-              class="cw-status-hider"
-              @click.prevent="toggleShowMore"
-            >{{ $t("general.show_more") }}</a>
-            <a
-              v-if="showingMore"
-              href="#"
-              class="status-unhider"
-              @click.prevent="toggleShowMore"
-            >{{ $t("general.show_less") }}</a>
+          <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" v-if="!hideSubjectStatus"></div>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
+            <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
+            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">{{$t("general.show_less")}}</a>
           </div>
 
-          <div
-            v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)"
-            class="attachments media-body"
-          >
+          <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">
             <attachment
-              v-for="attachment in nonGalleryAttachments"
-              :key="attachment.id"
               class="non-gallery"
+              v-for="attachment in nonGalleryAttachments"
               :size="attachmentSize"
               :nsfw="nsfwClickthrough"
               :attachment="attachment"
-              :allow-play="true"
-              :set-media="setMedia()"
+              :allowPlay="true"
+              :setMedia="setMedia()"
+              :key="attachment.id"
             />
             <gallery
               v-if="galleryAttachments.length > 0"
               :nsfw="nsfwClickthrough"
               :attachments="galleryAttachments"
-              :set-media="setMedia()"
+              :setMedia="setMedia()"
             />
           </div>
 
-          <div
-            v-if="status.card && !hideSubjectStatus && !noHeading"
-            class="link-preview media-body"
-          >
-            <link-preview
-              :card="status.card"
-              :size="attachmentSize"
-              :nsfw="nsfwClickthrough"
-            />
+          <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
+            <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
           </div>
 
-          <div
-            v-if="!noHeading && !isPreview"
-            class="status-actions media-body"
-          >
+          <div v-if="!noHeading && !isPreview" class='status-actions media-body'>
             <div v-if="loggedIn">
-              <i
-                class="button-icon icon-reply"
-                :title="$t('tool_tip.reply')"
-                :class="{'icon-reply-active': replying}"
-                @click.prevent="toggleReplying"
-              />
-              <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
+              <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
+              <span v-if="status.replies_count > 0">{{status.replies_count}}</span>
             </div>
-            <retweet-button
-              :visibility="status.visibility"
-              :logged-in="loggedIn"
-              :status="status"
-            />
-            <favorite-button
-              :logged-in="loggedIn"
-              :status="status"
-            />
-            <delete-button :status="status" />
+            <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
+            <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
+            <delete-button :status='status'></delete-button>
           </div>
         </div>
       </div>
-      <div
-        v-if="replying"
-        class="container"
-      >
-        <div class="reply-left" />
-        <post-status-form
-          class="reply-body"
-          :reply-to="status.id"
-          :attentions="status.attentions"
-          :replied-user="status.user"
-          :copy-message-scope="status.visibility"
-          :subject="replySubject"
-          @posted="toggleReplying"
-        />
+      <div class="container" v-if="replying">
+        <div class="reply-left"/>
+        <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
       </div>
     </template>
   </div>
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 3fff63f9..af824fa2 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -1,19 +1,7 @@
 <template>
-  <div
-    class="still-image"
-    :class="{ animated: animated }"
-  >
-    <canvas
-      v-if="animated"
-      ref="canvas"
-    />
-    <img
-      ref="src"
-      :src="src"
-      :referrerpolicy="referrerpolicy"
-      @load="onLoad"
-      @error="onError"
-    >
+  <div class='still-image' :class='{ animated: animated }' >
+    <canvas ref="canvas" v-if="animated"></canvas>
+    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="onError"/>
   </div>
 </template>
 
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 101a32bd..634f5b35 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -1,101 +1,78 @@
 <template>
-  <div class="panel dummy">
-    <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') }}
+<div class="panel dummy">
+  <div class="panel-heading">
+    <div class="title">
+      {{$t('settings.style.preview.header')}}
+      <span class="badge badge-notification">
+        99
       </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>
-            {{ $t('settings.style.preview.content') }}
-          </h4>
+    <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>
+  </div>
+  <div class="panel-body theme-preview-content">
+    <div class="post">
+      <div class="avatar">
+        ( ͡° ͜ʖ ͡°)
+      </div>
+      <div class="content">
+        <h4>
+          {{$t('settings.style.preview.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>
+        <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="button-icon icon-reply"
-            />
-            <i
-              style="color: var(--cGreen)"
-              class="button-icon icon-retweet"
-            />
-            <i
-              style="color: var(--cOrange)"
-              class="button-icon icon-star"
-            />
-            <i
-              style="color: var(--cRed)"
-              class="button-icon icon-cancel"
-            />
-          </div>
+        <div class="icons">
+          <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
+          <i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
+          <i style="color: var(--cOrange)" class="button-icon icon-star"/>
+          <i style="color: var(--cRed)" class="button-icon 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 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 class="separator" />
+    </div>
+    <div class="separator"></div>
 
-      <span class="alert error">
-        {{ $t('settings.style.preview.error') }}
-      </span>
-      <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">
 
-      <div class="actions">
-        <span class="checkbox">
-          <input
-            id="preview_checkbox"
-            checked="very yes"
-            type="checkbox"
-          >
-          <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
-        </span>
-        <button class="btn">
-          {{ $t('settings.style.preview.button') }}
-        </button>
-      </div>
+    <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>
 </template>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index d24394a4..84963c81 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,593 +1,274 @@
 <template>
-  <div class="style-switcher">
-    <div class="presets-container">
-      <div class="save-load">
-        <export-import
-          :export-object="exportedTheme"
-          :export-label="$t(&quot;settings.export_theme&quot;)"
-          :import-label="$t(&quot;settings.import_theme&quot;)"
-          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-          :on-import="onImport"
-          :validator="importValidator"
-        >
-          <template slot="before">
-            <div class="presets">
-              {{ $t('settings.presets') }}
-              <label
-                for="preset-switcher"
-                class="select"
-              >
-                <select
-                  id="preset-switcher"
-                  v-model="selected"
-                  class="preset-switcher"
-                >
-                  <option
-                    v-for="style in availableStyles"
-                    :key="style.name"
-                    :value="style"
-                    :style="{
-                      backgroundColor: style[1] || style.theme.colors.bg,
-                      color: style[3] || style.theme.colors.text
-                    }"
-                  >
-                    {{ style[0] || style.name }}
-                  </option>
-                </select>
-                <i class="icon-down-open" />
-              </label>
-            </div>
-          </template>
-        </export-import>
-      </div>
-      <div class="save-load-options">
-        <span class="keep-option">
-          <input
-            id="keep-color"
-            v-model="keepColor"
-            type="checkbox"
-          >
-          <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
-        </span>
-        <span class="keep-option">
-          <input
-            id="keep-shadows"
-            v-model="keepShadows"
-            type="checkbox"
-          >
-          <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
-        </span>
-        <span class="keep-option">
-          <input
-            id="keep-opacity"
-            v-model="keepOpacity"
-            type="checkbox"
-          >
-          <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
-        </span>
-        <span class="keep-option">
-          <input
-            id="keep-roundness"
-            v-model="keepRoundness"
-            type="checkbox"
-          >
-          <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
-        </span>
-        <span class="keep-option">
-          <input
-            id="keep-fonts"
-            v-model="keepFonts"
-            type="checkbox"
-          >
-          <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
-        </span>
-        <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
-      </div>
+<div class="style-switcher">
+  <div class="presets-container">
+    <div class="save-load">
+      <export-import
+        :exportObject='exportedTheme'
+        :exportLabel='$t("settings.export_theme")'
+        :importLabel='$t("settings.import_theme")'
+        :importFailedText='$t("settings.invalid_theme_imported")'
+        :onImport='onImport'
+        :validator='importValidator'>
+        <template slot="before">
+          <div class="presets">
+            {{$t('settings.presets')}}
+            <label for="preset-switcher" class='select'>
+              <select id="preset-switcher" v-model="selected" class="preset-switcher">
+                <option v-for="style in availableStyles"
+                        :value="style"
+                        :style="{
+                                backgroundColor: style[1] || style.theme.colors.bg,
+                                color: style[3] || style.theme.colors.text
+                                }">
+                  {{style[0] || style.name}}
+                </option>
+              </select>
+              <i class="icon-down-open"/>
+            </label>
+          </div>
+        </template>
+      </export-import>
     </div>
-
-    <div class="preview-container">
-      <preview :style="previewRules" />
+    <div class="save-load-options">
+      <span class="keep-option">
+        <input
+          id="keep-color"
+          type="checkbox"
+          v-model="keepColor">
+        <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label>
+      </span>
+      <span class="keep-option">
+        <input
+          id="keep-shadows"
+          type="checkbox"
+          v-model="keepShadows">
+        <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
+      </span>
+      <span class="keep-option">
+        <input
+          id="keep-opacity"
+          type="checkbox"
+          v-model="keepOpacity">
+        <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
+      </span>
+      <span class="keep-option">
+        <input
+          id="keep-roundness"
+          type="checkbox"
+          v-model="keepRoundness">
+        <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
+      </span>
+      <span class="keep-option">
+        <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>
 
-    <keep-alive>
-      <tab-switcher key="style-tweak">
-        <div
-          :label="$t('settings.style.common_colors._tab_label')"
-          class="color-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.theme_help') }}</p>
-            <button
-              class="btn"
-              @click="clearOpacity"
-            >
-              {{ $t('settings.style.switcher.clear_opacity') }}
-            </button>
-            <button
-              class="btn"
-              @click="clearV1"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <p>{{ $t('settings.theme_help_v2_1') }}</p>
-          <h4>{{ $t('settings.style.common_colors.main') }}</h4>
-          <div class="color-item">
-            <ColorInput
-              v-model="bgColorLocal"
-              name="bgColor"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="bgOpacityLocal"
-              name="bgOpacity"
-              :fallback="previewTheme.opacity.bg || 1"
-            />
-            <ColorInput
-              v-model="textColorLocal"
-              name="textColor"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgText" />
-            <ColorInput
-              v-model="linkColorLocal"
-              name="linkColor"
-              :label="$t('settings.links')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgLink" />
-          </div>
-          <div class="color-item">
-            <ColorInput
-              v-model="fgColorLocal"
-              name="fgColor"
-              :label="$t('settings.foreground')"
-            />
-            <ColorInput
-              v-model="fgTextColorLocal"
-              name="fgTextColor"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.fgText"
-            />
-            <ColorInput
-              v-model="fgLinkColorLocal"
-              name="fgLinkColor"
-              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.fgLink"
-            />
-            <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
-          </div>
-          <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
-          <div class="color-item">
-            <ColorInput
-              v-model="cRedColorLocal"
-              name="cRedColor"
-              :label="$t('settings.cRed')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgRed" />
-            <ColorInput
-              v-model="cBlueColorLocal"
-              name="cBlueColor"
-              :label="$t('settings.cBlue')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgBlue" />
-          </div>
-          <div class="color-item">
-            <ColorInput
-              v-model="cGreenColorLocal"
-              name="cGreenColor"
-              :label="$t('settings.cGreen')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgGreen" />
-            <ColorInput
-              v-model="cOrangeColorLocal"
-              name="cOrangeColor"
-              :label="$t('settings.cOrange')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgOrange" />
-          </div>
-          <p>{{ $t('settings.theme_help_v2_2') }}</p>
+  <div class="preview-container">
+    <preview :style="previewRules"/>
+  </div>
+
+  <keep-alive>
+    <tab-switcher key="style-tweak">
+      <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
+        <div class="tab-header">
+          <p>{{$t('settings.theme_help')}}</p>
+          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
+          <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
+        </div>
+        <p>{{$t('settings.theme_help_v2_1')}}</p>
+        <h4>{{ $t('settings.style.common_colors.main') }}</h4>
+        <div class="color-item">
+          <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
+          <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
+          <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
+          <ContrastRatio :contrast="previewContrast.bgText"/>
+          <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
+          <ContrastRatio :contrast="previewContrast.bgLink"/>
+        </div>
+        <div class="color-item">
+          <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
+          <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
+          <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
+          <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
+        </div>
+        <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
+        <div class="color-item">
+          <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
+          <ContrastRatio :contrast="previewContrast.bgRed"/>
+          <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
+          <ContrastRatio :contrast="previewContrast.bgBlue"/>
+        </div>
+        <div class="color-item">
+          <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
+          <ContrastRatio :contrast="previewContrast.bgGreen"/>
+          <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
+          <ContrastRatio :contrast="previewContrast.bgOrange"/>
         </div>
+        <p>{{$t('settings.theme_help_v2_2')}}</p>
+      </div>
 
-        <div
-          :label="$t('settings.style.advanced_colors._tab_label')"
-          class="color-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.theme_help') }}</p>
-            <button
-              class="btn"
-              @click="clearOpacity"
-            >
-              {{ $t('settings.style.switcher.clear_opacity') }}
-            </button>
-            <button
-              class="btn"
-              @click="clearV1"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
-            <ColorInput
-              v-model="alertErrorColorLocal"
-              name="alertError"
-              :label="$t('settings.style.advanced_colors.alert_error')"
-              :fallback="previewTheme.colors.alertError"
-            />
-            <ContrastRatio :contrast="previewContrast.alertError" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
-            <ColorInput
-              v-model="badgeNotificationColorLocal"
-              name="badgeNotification"
-              :label="$t('settings.style.advanced_colors.badge_notification')"
-              :fallback="previewTheme.colors.badgeNotification"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
-            <ColorInput
-              v-model="panelColorLocal"
-              name="panelColor"
-              :fallback="fgColorLocal"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="panelOpacityLocal"
-              name="panelOpacity"
-              :fallback="previewTheme.opacity.panel || 1"
-            />
-            <ColorInput
-              v-model="panelTextColorLocal"
-              name="panelTextColor"
-              :fallback="previewTheme.colors.panelText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.panelText"
-              large="1"
-            />
-            <ColorInput
-              v-model="panelLinkColorLocal"
-              name="panelLinkColor"
-              :fallback="previewTheme.colors.panelLink"
-              :label="$t('settings.links')"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.panelLink"
-              large="1"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
-            <ColorInput
-              v-model="topBarColorLocal"
-              name="topBarColor"
-              :fallback="fgColorLocal"
-              :label="$t('settings.background')"
-            />
-            <ColorInput
-              v-model="topBarTextColorLocal"
-              name="topBarTextColor"
-              :fallback="previewTheme.colors.topBarText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.topBarText" />
-            <ColorInput
-              v-model="topBarLinkColorLocal"
-              name="topBarLinkColor"
-              :fallback="previewTheme.colors.topBarLink"
-              :label="$t('settings.links')"
-            />
-            <ContrastRatio :contrast="previewContrast.topBarLink" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
-            <ColorInput
-              v-model="inputColorLocal"
-              name="inputColor"
-              :fallback="fgColorLocal"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="inputOpacityLocal"
-              name="inputOpacity"
-              :fallback="previewTheme.opacity.input || 1"
-            />
-            <ColorInput
-              v-model="inputTextColorLocal"
-              name="inputTextColor"
-              :fallback="previewTheme.colors.inputText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.inputText" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
-            <ColorInput
-              v-model="btnColorLocal"
-              name="btnColor"
-              :fallback="fgColorLocal"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="btnOpacityLocal"
-              name="btnOpacity"
-              :fallback="previewTheme.opacity.btn || 1"
-            />
-            <ColorInput
-              v-model="btnTextColorLocal"
-              name="btnTextColor"
-              :fallback="previewTheme.colors.btnText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnText" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
-            <ColorInput
-              v-model="borderColorLocal"
-              name="borderColor"
-              :fallback="previewTheme.colors.border"
-              :label="$t('settings.style.common.color')"
-            />
-            <OpacityInput
-              v-model="borderOpacityLocal"
-              name="borderOpacity"
-              :fallback="previewTheme.opacity.border || 1"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
-            <ColorInput
-              v-model="faintColorLocal"
-              name="faintColor"
-              :fallback="previewTheme.colors.faint || 1"
-              :label="$t('settings.text')"
-            />
-            <ColorInput
-              v-model="faintLinkColorLocal"
-              name="faintLinkColor"
-              :fallback="previewTheme.colors.faintLink"
-              :label="$t('settings.links')"
-            />
-            <ColorInput
-              v-model="panelFaintColorLocal"
-              name="panelFaintColor"
-              :fallback="previewTheme.colors.panelFaint"
-              :label="$t('settings.style.advanced_colors.panel_header')"
-            />
-            <OpacityInput
-              v-model="faintOpacityLocal"
-              name="faintOpacity"
-              :fallback="previewTheme.opacity.faint || 0.5"
-            />
-          </div>
+      <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container">
+        <div class="tab-header">
+          <p>{{$t('settings.theme_help')}}</p>
+          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
+          <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
+        </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
+          <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/>
+          <ContrastRatio :contrast="previewContrast.alertError"/>
+        </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
+          <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification"/>
+        </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
+          <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
+          <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
+          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
+          <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
+          <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
+          <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
+        </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
+          <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
+          <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
+          <ContrastRatio :contrast="previewContrast.topBarText"/>
+          <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
+          <ContrastRatio :contrast="previewContrast.topBarLink"/>
+        </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
+          <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
+          <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
+          <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
+          <ContrastRatio :contrast="previewContrast.inputText"/>
+        </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
+          <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
+          <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
+          <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
+          <ContrastRatio :contrast="previewContrast.btnText"/>
         </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
+          <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" :label="$t('settings.style.common.color')"/>
+          <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
+        </div>
+        <div class="color-item">
+          <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
+          <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
+          <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
+          <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.style.advanced_colors.panel_header')"/>
+          <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
+        </div>
+      </div>
 
-        <div
-          :label="$t('settings.style.radii._tab_label')"
-          class="radius-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.radii_help') }}</p>
-            <button
-              class="btn"
-              @click="clearRoundness"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <RangeInput
-            v-model="btnRadiusLocal"
-            name="btnRadius"
-            :label="$t('settings.btnRadius')"
-            :fallback="previewTheme.radii.btn"
-            max="16"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="inputRadiusLocal"
-            name="inputRadius"
-            :label="$t('settings.inputRadius')"
-            :fallback="previewTheme.radii.input"
-            max="9"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="checkboxRadiusLocal"
-            name="checkboxRadius"
-            :label="$t('settings.checkboxRadius')"
-            :fallback="previewTheme.radii.checkbox"
-            max="16"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="panelRadiusLocal"
-            name="panelRadius"
-            :label="$t('settings.panelRadius')"
-            :fallback="previewTheme.radii.panel"
-            max="50"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="avatarRadiusLocal"
-            name="avatarRadius"
-            :label="$t('settings.avatarRadius')"
-            :fallback="previewTheme.radii.avatar"
-            max="28"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="avatarAltRadiusLocal"
-            name="avatarAltRadius"
-            :label="$t('settings.avatarAltRadius')"
-            :fallback="previewTheme.radii.avatarAlt"
-            max="28"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="attachmentRadiusLocal"
-            name="attachmentRadius"
-            :label="$t('settings.attachmentRadius')"
-            :fallback="previewTheme.radii.attachment"
-            max="50"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="tooltipRadiusLocal"
-            name="tooltipRadius"
-            :label="$t('settings.tooltipRadius')"
-            :fallback="previewTheme.radii.tooltip"
-            max="50"
-            hard-min="0"
-          />
+      <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
+        <div class="tab-header">
+          <p>{{$t('settings.radii_help')}}</p>
+          <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
+        <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
+        <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/>
+        <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/>
+        <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/>
+        <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/>
+        <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="0"/>
+        <RangeInput name="attachmentRadius" :label="$t('settings.attachmentRadius')" v-model="attachmentRadiusLocal" :fallback="previewTheme.radii.attachment" max="50" hardMin="0"/>
+        <RangeInput name="tooltipRadius" :label="$t('settings.tooltipRadius')" v-model="tooltipRadiusLocal" :fallback="previewTheme.radii.tooltip" max="50" hardMin="0"/>
+      </div>
 
-        <div
-          :label="$t('settings.style.shadows._tab_label')"
-          class="shadow-container"
-        >
-          <div class="tab-header shadow-selector">
-            <div class="select-container">
-              {{ $t('settings.style.shadows.component') }}
-              <label
-                for="shadow-switcher"
-                class="select"
-              >
-                <select
-                  id="shadow-switcher"
-                  v-model="shadowSelected"
-                  class="shadow-switcher"
-                >
-                  <option
-                    v-for="shadow in shadowsAvailable"
-                    :key="shadow"
-                    :value="shadow"
-                  >
-                    {{ $t('settings.style.shadows.components.' + shadow) }}
-                  </option>
-                </select>
-                <i class="icon-down-open" />
-              </label>
-            </div>
-            <div class="override">
-              <label
-                for="override"
-                class="label"
-              >
-                {{ $t('settings.style.shadows.override') }}
-              </label>
-              <input
-                id="override"
-                v-model="currentShadowOverriden"
-                name="override"
-                class="input-override"
-                type="checkbox"
-              >
-              <label
-                class="checkbox-label"
-                for="override"
-              />
-            </div>
-            <button
-              class="btn"
-              @click="clearShadows"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
+      <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
+        <div class="tab-header shadow-selector">
+          <div class="select-container">
+            {{$t('settings.style.shadows.component')}}
+            <label for="shadow-switcher" class="select">
+              <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
+                <option v-for="shadow in shadowsAvailable"
+                        :value="shadow">
+                  {{$t('settings.style.shadows.components.' + shadow)}}
+                </option>
+              </select>
+              <i class="icon-down-open"/>
+            </label>
           </div>
-          <shadow-control
-            v-model="currentShadow"
-            :ready="!!currentShadowFallback"
-            :fallback="currentShadowFallback"
-          />
-          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n
-              path="settings.style.shadows.filter_hint.always_drop_shadow"
-              tag="p"
-            >
-              <code>filter: drop-shadow()</code>
-            </i18n>
-            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n
-              path="settings.style.shadows.filter_hint.drop_shadow_syntax"
-              tag="p"
-            >
-              <code>drop-shadow</code>
-              <code>spread-radius</code>
-              <code>inset</code>
-            </i18n>
-            <i18n
-              path="settings.style.shadows.filter_hint.inset_classic"
-              tag="p"
-            >
-              <code>box-shadow</code>
-            </i18n>
-            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
+          <div class="override">
+            <label for="override" class="label">
+              {{$t('settings.style.shadows.override')}}
+            </label>
+            <input
+              v-model="currentShadowOverriden"
+              name="override"
+              id="override"
+              class="input-override"
+              type="checkbox">
+            <label class="checkbox-label" for="override"></label>
           </div>
+          <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
+        <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
+        <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+          <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
+            <code>filter: drop-shadow()</code>
+          </i18n>
+          <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
+          <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
+            <code>drop-shadow</code>
+            <code>spread-radius</code>
+            <code>inset</code>
+          </i18n>
+          <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
+            <code>box-shadow</code>
+          </i18n>
+          <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
+        </div>
+      </div>
 
-        <div
-          :label="$t('settings.style.fonts._tab_label')"
-          class="fonts-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.style.fonts.help') }}</p>
-            <button
-              class="btn"
-              @click="clearFonts"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <FontControl
-            v-model="fontsLocal.interface"
-            name="ui"
-            :label="$t('settings.style.fonts.components.interface')"
-            :fallback="previewTheme.fonts.interface"
-            no-inherit="1"
-          />
-          <FontControl
-            v-model="fontsLocal.input"
-            name="input"
-            :label="$t('settings.style.fonts.components.input')"
-            :fallback="previewTheme.fonts.input"
-          />
-          <FontControl
-            v-model="fontsLocal.post"
-            name="post"
-            :label="$t('settings.style.fonts.components.post')"
-            :fallback="previewTheme.fonts.post"
-          />
-          <FontControl
-            v-model="fontsLocal.postCode"
-            name="postCode"
-            :label="$t('settings.style.fonts.components.postCode')"
-            :fallback="previewTheme.fonts.postCode"
-          />
+      <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
+        <div class="tab-header">
+          <p>{{$t('settings.style.fonts.help')}}</p>
+          <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
-      </tab-switcher>
-    </keep-alive>
+        <FontControl
+          name="ui"
+          v-model="fontsLocal.interface"
+          :label="$t('settings.style.fonts.components.interface')"
+          :fallback="previewTheme.fonts.interface"
+          no-inherit="1"/>
+        <FontControl
+          name="input"
+          v-model="fontsLocal.input"
+          :label="$t('settings.style.fonts.components.input')"
+          :fallback="previewTheme.fonts.input"/>
+        <FontControl
+          name="post"
+          v-model="fontsLocal.post"
+          :label="$t('settings.style.fonts.components.post')"
+          :fallback="previewTheme.fonts.post"/>
+        <FontControl
+          name="postCode"
+          v-model="fontsLocal.postCode"
+          :label="$t('settings.style.fonts.components.postCode')"
+          :fallback="previewTheme.fonts.postCode"/>
+      </div>
+    </tab-switcher>
+  </keep-alive>
 
-    <div class="apply-container">
-      <button
-        class="btn submit"
-        :disabled="!themeValid"
-        @click="setCustomTheme"
-      >
-        {{ $t('general.apply') }}
-      </button>
-      <button
-        class="btn"
-        @click="clearAll"
-      >
-        {{ $t('settings.style.switcher.reset') }}
-      </button>
-    </div>
+  <div class="apply-container">
+    <button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button>
+    <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
   </div>
+</div>
 </template>
 
 <script src="./style_switcher.js"></script>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 0b6ddec1..423df258 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -10,12 +10,6 @@ export default Vue.component('tab-switcher', {
       active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
-  beforeUpdate () {
-    const currentSlot = this.$slots.default[this.active]
-    if (!currentSlot.tag) {
-      this.active = this.$slots.default.findIndex(_ => _.tag)
-    }
-  },
   methods: {
     activateTab (index) {
       return () => {
@@ -23,24 +17,30 @@ export default Vue.component('tab-switcher', {
       }
     }
   },
+  beforeUpdate () {
+    const currentSlot = this.$slots.default[this.active]
+    if (!currentSlot.tag) {
+      this.active = this.$slots.default.findIndex(_ => _.tag)
+    }
+  },
   render (h) {
     const tabs = this.$slots.default
-      .map((slot, index) => {
-        if (!slot.tag) return
-        const classesTab = ['tab']
-        const classesWrapper = ['tab-wrapper']
+          .map((slot, index) => {
+            if (!slot.tag) return
+            const classesTab = ['tab']
+            const classesWrapper = ['tab-wrapper']
 
-        if (index === this.active) {
-          classesTab.push('active')
-          classesWrapper.push('active')
-        }
+            if (index === this.active) {
+              classesTab.push('active')
+              classesWrapper.push('active')
+            }
 
-        return (
-          <div class={ classesWrapper.join(' ')}>
-            <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
-          </div>
-        )
-      })
+            return (
+              <div class={ classesWrapper.join(' ')}>
+                <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+              </div>
+            )
+          })
 
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return
diff --git a/src/components/tag_timeline/tag_timeline.vue b/src/components/tag_timeline/tag_timeline.vue
index ace96c3f..62bb579a 100644
--- a/src/components/tag_timeline/tag_timeline.vue
+++ b/src/components/tag_timeline/tag_timeline.vue
@@ -1,10 +1,5 @@
 <template>
-  <Timeline
-    :title="tag"
-    :timeline="timeline"
-    :timeline-name="'tag'"
-    :tag="tag"
-  />
+  <Timeline :title="tag" :timeline="timeline" :timeline-name="'tag'" :tag="tag" />
 </template>
 
-<script src='./tag_timeline.js'></script>
+<script src='./tag_timeline.js'></script>
\ No newline at end of file
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue
index f79345cb..eb0f2527 100644
--- a/src/components/terms_of_service_panel/terms_of_service_panel.vue
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.vue
@@ -2,10 +2,8 @@
   <div>
     <div class="panel panel-default">
       <div class="panel-body">
-        <div
-          class="tos-content"
-          v-html="content"
-        />
+        <div v-html="content" class="tos-content">
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 9d39afc2..1da7d5cc 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -137,7 +137,7 @@ const Timeline = {
         if (top < 15 &&
             !this.paused &&
             !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
-        ) {
+           ) {
           this.showNewStatuses()
         } else {
           this.paused = true
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 1fc52083..e0a34bd1 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -2,66 +2,41 @@
   <div :class="classes.root">
     <div :class="classes.header">
       <div class="title">
-        {{ title }}
+        {{title}}
       </div>
-      <div
-        v-if="timelineError"
-        class="loadmore-error alert error"
-        @click.prevent
-      >
-        {{ $t('timeline.error_fetching') }}
+      <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
+        {{$t('timeline.error_fetching')}}
       </div>
-      <button
-        v-if="timeline.newStatusCount > 0 && !timelineError"
-        class="loadmore-button"
-        @click.prevent="showNewStatuses"
-      >
-        {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
+      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+        {{$t('timeline.show_new')}}{{newStatusCountStr}}
       </button>
-      <div
-        v-if="!timeline.newStatusCount > 0 && !timelineError"
-        class="loadmore-text faint"
-        @click.prevent
-      >
-        {{ $t('timeline.up_to_date') }}
+      <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
+        {{$t('timeline.up_to_date')}}
       </div>
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <conversation
+        <conversation 
           v-for="status in timeline.visibleStatuses"
-          :key="status.id"
           class="status-fadein"
+          :key="status.id"
           :statusoid="status"
           :collapsable="true"
         />
       </div>
     </div>
     <div :class="classes.footer">
-      <div
-        v-if="count===0"
-        class="new-status-notification text-center panel-footer faint"
-      >
-        {{ $t('timeline.no_statuses') }}
+      <div v-if="count===0" class="new-status-notification text-center panel-footer faint">
+        {{$t('timeline.no_statuses')}}
       </div>
-      <div
-        v-else-if="bottomedOut"
-        class="new-status-notification text-center panel-footer faint"
-      >
-        {{ $t('timeline.no_more_statuses') }}
+      <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+        {{$t('timeline.no_more_statuses')}}
       </div>
-      <a
-        v-else-if="!timeline.loading"
-        href="#"
-        @click.prevent="fetchOlderStatuses()"
-      >
-        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
+      <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
+        <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
       </a>
-      <div
-        v-else
-        class="new-status-notification text-center panel-footer"
-      >
-        <i class="icon-spin3 animate-spin" />
+      <div v-else class="new-status-notification text-center panel-footer">
+        <i class="icon-spin3 animate-spin"/>
       </div>
     </div>
   </div>
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index c10c3688..6bf7123d 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -3,7 +3,7 @@
     class="avatar"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :src="imgSrc"
-    :image-load-error="imageLoadError"
+    :imageLoadError="imageLoadError"
   />
 </template>
 
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 69d2a329..197c61d5 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -22,15 +22,15 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-rounded': this.rounded === true, // set border-radius for all sides
-        'user-card-bordered': this.bordered === true // set border for all sides
+        'user-card-rounded-t': this.rounded === 'top',  // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded': this.rounded === true,     // set border-radius for all sides
+        'user-card-bordered': this.bordered === true    // set border for all sides
       }]
     },
     style () {
       const color = this.$store.state.config.customTheme.colors
-        ? this.$store.state.config.customTheme.colors.bg // v2
-        : this.$store.state.config.colors.bg // v1
+            ? this.$store.state.config.customTheme.colors.bg  // v2
+            : this.$store.state.config.colors.bg // v1
 
       if (color) {
         const rgb = (typeof color === 'string') ? hex2rgb(color) : color
@@ -72,12 +72,12 @@ export default {
     userHighlightType: {
       get () {
         const data = this.$store.state.config.highlight[this.user.screen_name]
-        return (data && data.type) || 'disabled'
+        return data && data.type || 'disabled'
       },
       set (type) {
         const data = this.$store.state.config.highlight[this.user.screen_name]
         if (type !== 'disabled') {
-          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
         } else {
           this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
         }
@@ -107,7 +107,7 @@ export default {
     followUser () {
       const store = this.$store
       this.followRequestInProgress = true
-      requestFollow(this.user, store).then(({ sent }) => {
+      requestFollow(this.user, store).then(({sent}) => {
         this.followRequestInProgress = false
         this.followRequestSent = sent
       })
@@ -138,7 +138,7 @@ export default {
         store.commit('setProfileView', { v })
       }
     },
-    linkClicked ({ target }) {
+    linkClicked ({target}) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode
       }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2016f82a..3259d1c5 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -1,240 +1,126 @@
 <template>
-  <div
-    class="user-card"
-    :class="classes"
-    :style="style"
-  >
-    <div class="panel-heading">
-      <div class="user-info">
-        <div class="container">
-          <router-link :to="userProfileLink(user)">
-            <UserAvatar
-              :better-shadow="betterShadow"
-              :src="user.profile_image_url_original"
-            />
-          </router-link>
-          <div class="name-and-screen-name">
-            <div class="top-line">
-              <div
-                v-if="user.name_html"
-                :title="user.name"
-                class="user-name"
-                v-html="user.name_html"
-              />
-              <div
-                v-else
-                :title="user.name"
-                class="user-name"
-              >
-                {{ user.name }}
-              </div>
-              <router-link
-                v-if="!isOtherUser"
-                :to="{ name: 'user-settings' }"
-              >
-                <i
-                  class="button-icon icon-pencil usersettings"
-                  :title="$t('tool_tip.user_settings')"
-                />
-              </router-link>
-              <a
-                v-if="isOtherUser && !user.is_local"
-                :href="user.statusnet_profile_url"
-                target="_blank"
-              >
-                <i class="icon-link-ext usersettings" />
-              </a>
-            </div>
-
-            <router-link
-              class="user-screen-name"
-              :to="userProfileLink(user)"
-            >
-              <span class="handle">@{{ user.screen_name }}
-                <span
-                  v-if="!hideBio && !!visibleRole"
-                  class="alert staff"
-                >{{ visibleRole }}</span>
-              </span><span v-if="user.locked"><i class="icon icon-lock" /></span>
-              <span
-                v-if="!hideUserStatsLocal && !hideBio"
-                class="dailyAvg"
-              >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
+<div class="user-card" :class="classes" :style="style">
+  <div class="panel-heading">
+    <div class='user-info'>
+      <div class='container'>
+        <router-link :to="userProfileLink(user)">
+          <UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/>
+        </router-link>
+        <div class="name-and-screen-name">
+          <div class="top-line">
+            <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
+            <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
+            <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
+              <i class="button-icon icon-pencil usersettings" :title="$t('tool_tip.user_settings')"></i>
             </router-link>
+            <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
+              <i class="icon-link-ext usersettings"></i>
+            </a>
           </div>
+
+          <router-link class='user-screen-name' :to="userProfileLink(user)">
+            <span class="handle">@{{user.screen_name}}
+              <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
+            </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
+            <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
+          </router-link>
         </div>
-        <div class="user-meta">
-          <div
-            v-if="user.follows_you && loggedIn && isOtherUser"
-            class="following"
-          >
-            {{ $t('user_card.follows_you') }}
-          </div>
-          <div
-            v-if="isOtherUser && (loggedIn || !switcher)"
-            class="highlighter"
-          >
-            <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
-            <input
-              v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColorTx'+user.id"
-              v-model="userHighlightColor"
-              class="userHighlightText"
-              type="text"
-            >
-            <input
-              v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColor'+user.id"
-              v-model="userHighlightColor"
-              class="userHighlightCl"
-              type="color"
-            >
-            <label
-              for="style-switcher"
-              class="userHighlightSel select"
-            >
-              <select
-                :id="'userHighlightSel'+user.id"
-                v-model="userHighlightType"
-                class="userHighlightSel"
-              >
-                <option value="disabled">No highlight</option>
-                <option value="solid">Solid bg</option>
-                <option value="striped">Striped bg</option>
-                <option value="side">Side stripe</option>
-              </select>
-              <i class="icon-down-open" />
-            </label>
-          </div>
+      </div>
+      <div class="user-meta">
+        <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
+          {{ $t('user_card.follows_you') }}
         </div>
-        <div
-          v-if="isOtherUser"
-          class="user-interactions"
-        >
-          <div
-            v-if="loggedIn"
-            class="follow"
-          >
-            <span v-if="user.following">
-              <!--Following them!-->
-              <button
-                class="pressed"
-                :disabled="followRequestInProgress"
-                :title="$t('user_card.follow_unfollow')"
-                @click="unfollowUser"
-              >
-                <template v-if="followRequestInProgress">
-                  {{ $t('user_card.follow_progress') }}
-                </template>
-                <template v-else>
-                  {{ $t('user_card.following') }}
-                </template>
-              </button>
-            </span>
-            <span v-if="!user.following">
-              <button
-                :disabled="followRequestInProgress"
-                :title="followRequestSent ? $t('user_card.follow_again') : ''"
-                @click="followUser"
-              >
-                <template v-if="followRequestInProgress">
-                  {{ $t('user_card.follow_progress') }}
-                </template>
-                <template v-else-if="followRequestSent">
-                  {{ $t('user_card.follow_sent') }}
-                </template>
-                <template v-else>
-                  {{ $t('user_card.follow') }}
-                </template>
-              </button>
-            </span>
-          </div>
-          <div
-            v-if="isOtherUser && loggedIn"
-            class="mute"
-          >
-            <span v-if="user.muted">
-              <button
-                class="pressed"
-                @click="unmuteUser"
-              >
-                {{ $t('user_card.muted') }}
-              </button>
-            </span>
-            <span v-if="!user.muted">
-              <button @click="muteUser">
-                {{ $t('user_card.mute') }}
-              </button>
-            </span>
-          </div>
-          <div v-if="!loggedIn && user.is_local">
-            <RemoteFollow :user="user" />
-          </div>
-          <div
-            v-if="isOtherUser && loggedIn"
-            class="block"
-          >
-            <span v-if="user.statusnet_blocking">
-              <button
-                class="pressed"
-                @click="unblockUser"
-              >
-                {{ $t('user_card.blocked') }}
-              </button>
-            </span>
-            <span v-if="!user.statusnet_blocking">
-              <button @click="blockUser">
-                {{ $t('user_card.block') }}
-              </button>
-            </span>
-          </div>
+        <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)">
+          <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+          <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+          <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+          <label for="style-switcher" class='userHighlightSel select'>
+            <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
+              <option value="disabled">No highlight</option>
+              <option value="solid">Solid bg</option>
+              <option value="striped">Striped bg</option>
+              <option value="side">Side stripe</option>
+            </select>
+            <i class="icon-down-open"/>
+          </label>
         </div>
       </div>
-    </div>
-    <div
-      v-if="!hideBio"
-      class="panel-body"
-    >
-      <div
-        v-if="!hideUserStatsLocal && switcher"
-        class="user-counts"
-      >
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('statuses')"
-        >
-          <h5>{{ $t('user_card.statuses') }}</h5>
-          <span>{{ user.statuses_count }} <br></span>
+      <div v-if="isOtherUser" class="user-interactions">
+        <div class="follow" v-if="loggedIn">
+          <span v-if="user.following">
+            <!--Following them!-->
+            <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')">
+              <template v-if="followRequestInProgress">
+                {{ $t('user_card.follow_progress') }}
+              </template>
+              <template v-else>
+                {{ $t('user_card.following') }}
+              </template>
+            </button>
+          </span>
+          <span v-if="!user.following">
+            <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''">
+              <template v-if="followRequestInProgress">
+                {{ $t('user_card.follow_progress') }}
+              </template>
+              <template v-else-if="followRequestSent">
+                {{ $t('user_card.follow_sent') }}
+              </template>
+              <template v-else>
+                {{ $t('user_card.follow') }}
+              </template>
+            </button>
+          </span>
         </div>
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('friends')"
-        >
-          <h5>{{ $t('user_card.followees') }}</h5>
-          <span>{{ user.friends_count }}</span>
+        <div class='mute' v-if='isOtherUser && loggedIn'>
+          <span v-if='user.muted'>
+            <button @click="unmuteUser" class="pressed">
+              {{ $t('user_card.muted') }}
+            </button>
+          </span>
+          <span v-if='!user.muted'>
+            <button @click="muteUser">
+              {{ $t('user_card.mute') }}
+            </button>
+          </span>
         </div>
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('followers')"
-        >
-          <h5>{{ $t('user_card.followers') }}</h5>
-          <span>{{ user.followers_count }}</span>
+        <div v-if='!loggedIn && user.is_local'>
+          <RemoteFollow :user="user" />
         </div>
+        <div class='block' v-if='isOtherUser && loggedIn'>
+          <span v-if='user.statusnet_blocking'>
+            <button @click="unblockUser" class="pressed">
+              {{ $t('user_card.blocked') }}
+            </button>
+          </span>
+          <span v-if='!user.statusnet_blocking'>
+            <button @click="blockUser">
+              {{ $t('user_card.block') }}
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="panel-body" v-if="!hideBio">
+    <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
+      <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
+        <h5>{{ $t('user_card.statuses') }}</h5>
+        <span>{{user.statuses_count}} <br></span>
+      </div>
+      <div class="user-count" v-on:click.prevent="setProfileView('friends')">
+        <h5>{{ $t('user_card.followees') }}</h5>
+        <span>{{user.friends_count}}</span>
+      </div>
+      <div class="user-count" v-on:click.prevent="setProfileView('followers')">
+        <h5>{{ $t('user_card.followers') }}</h5>
+        <span>{{user.followers_count}}</span>
       </div>
-      <p
-        v-if="!hideBio && user.description_html"
-        class="user-card-bio"
-        @click.prevent="linkClicked"
-        v-html="user.description_html"
-      />
-      <p
-        v-else-if="!hideBio"
-        class="user-card-bio"
-      >
-        {{ user.description }}
-      </p>
     </div>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
   </div>
+</div>
 </template>
 
 <script src="./user_card.js"></script>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index 39d49237..a118ffe2 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -1,38 +1,14 @@
 <template>
   <div>
     <div class="user-finder-container">
-      <i
-        v-if="loading"
-        class="icon-spin4 user-finder-icon animate-spin-slow"
-      />
-      <a
-        v-if="hidden"
-        href="#"
-        :title="$t('finder.find_user')"
-      ><i
-        class="icon-user-plus user-finder-icon"
-        @click.prevent.stop="toggleHidden"
-      /></a>
+      <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
+      <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
       <template v-else>
-        <input
-          id="user-finder-input"
-          ref="userSearchInput"
-          v-model="username"
-          class="user-finder-input"
-          :placeholder="$t('finder.find_user')"
-          type="text"
-          @keyup.enter="findUser(username)"
-        >
-        <button
-          class="btn search-button"
-          @click="findUser(username)"
-        >
-          <i class="icon-search" />
+        <input class="user-finder-input" ref="userSearchInput" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+        <button class="btn search-button" @click="findUser(username)">
+          <i class="icon-search"/>
         </button>
-        <i
-          class="button-icon icon-cancel user-finder-icon"
-          @click.prevent.stop="toggleHidden"
-        />
+        <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
       </template>
     </div>
   </div>
@@ -49,6 +25,7 @@
   align-items: baseline;
   vertical-align: baseline;
 
+
   .user-finder-input,
   .search-button {
     height: 29px;
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 18bf2a3b..8310f30e 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,20 +1,12 @@
 <template>
   <div class="user-panel">
-    <div
-      v-if="user"
-      class="panel panel-default"
-      style="overflow: visible;"
-    >
-      <UserCard
-        :user="user"
-        :hide-bio="true"
-        rounded="top"
-      />
+    <div v-if='user' class="panel panel-default" style="overflow: visible;">
+      <UserCard :user="user" :hideBio="true" rounded="top"/>
       <div class="panel-footer">
-        <post-status-form v-if="user" />
+        <post-status-form v-if='user'></post-status-form>
       </div>
     </div>
-    <login-form v-if="!user" />
+    <login-form v-if='!user'></login-form>
   </div>
 </template>
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index d3f0c98a..d449eb85 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,84 +1,55 @@
 <template>
-  <div>
-    <div
-      v-if="user.id"
-      class="user-profile panel panel-default"
-    >
-      <UserCard
-        :user="user"
-        :switcher="true"
-        :selected="timeline.viewing"
-        rounded="top"
+<div>
+  <div v-if="user.id" class="user-profile panel panel-default">
+    <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
+    <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
+      <Timeline
+        :label="$t('user_card.statuses')"
+        :disabled="!user.statuses_count"
+        :count="user.statuses_count"
+        :embedded="true"
+        :title="$t('user_profile.timeline_title')"
+        :timeline="timeline"
+        :timeline-name="'user'"
+        :user-id="userId"
       />
-      <tab-switcher
-        ref="tabSwitcher"
-        :render-only-focused="true"
-      >
-        <Timeline
-          :label="$t('user_card.statuses')"
-          :disabled="!user.statuses_count"
-          :count="user.statuses_count"
-          :embedded="true"
-          :title="$t('user_profile.timeline_title')"
-          :timeline="timeline"
-          :timeline-name="'user'"
-          :user-id="userId"
-        />
-        <div
-          v-if="followsTabVisible"
-          :label="$t('user_card.followees')"
-          :disabled="!user.friends_count"
-        >
-          <FriendList :user-id="userId" />
-        </div>
-        <div
-          v-if="followersTabVisible"
-          :label="$t('user_card.followers')"
-          :disabled="!user.followers_count"
-        >
-          <FollowerList
-            :user-id="userId"
-            :entry-props="{noFollowsYou: isUs}"
-          />
-        </div>
-        <Timeline
-          :label="$t('user_card.media')"
-          :disabled="!media.visibleStatuses.length"
-          :embedded="true"
-          :title="$t('user_card.media')"
-          timeline-name="media"
-          :timeline="media"
-          :user-id="userId"
-        />
-        <Timeline
-          v-if="isUs"
-          :label="$t('user_card.favorites')"
-          :disabled="!favorites.visibleStatuses.length"
-          :embedded="true"
-          :title="$t('user_card.favorites')"
-          timeline-name="favorites"
-          :timeline="favorites"
-        />
-      </tab-switcher>
-    </div>
-    <div
-      v-else
-      class="panel user-profile-placeholder"
-    >
-      <div class="panel-heading">
-        <div class="title">
-          {{ $t('settings.profile_tab') }}
-        </div>
+      <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
+        <FriendList :userId="userId" />
+      </div>
+      <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
+        <FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
       </div>
-      <div class="panel-body">
-        <span v-if="error">{{ error }}</span>
-        <i
-          v-else
-          class="icon-spin3 animate-spin"
-        />
+      <Timeline
+        :label="$t('user_card.media')"
+        :disabled="!media.visibleStatuses.length"
+        :embedded="true" :title="$t('user_card.media')"
+        timeline-name="media"
+        :timeline="media"
+        :user-id="userId"
+      />
+      <Timeline
+        v-if="isUs"
+        :label="$t('user_card.favorites')"
+        :disabled="!favorites.visibleStatuses.length"
+        :embedded="true"
+        :title="$t('user_card.favorites')"
+        timeline-name="favorites"
+        :timeline="favorites"
+      />
+    </tab-switcher>
+  </div>
+  <div v-else class="panel user-profile-placeholder">
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('settings.profile_tab') }}
       </div>
     </div>
+    <div class="panel-body">
+      <span v-if="error">{{ error }}</span>
+      <i class="icon-spin3 animate-spin" v-else></i>
+    </div>
   </div>
+</div>
 </template>
 
 <script src="./user_profile.js"></script>
diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js
index 3e7cc114..55040826 100644
--- a/src/components/user_search/user_search.js
+++ b/src/components/user_search/user_search.js
@@ -33,7 +33,7 @@ const userSearch = {
         return
       }
       this.loading = true
-      userSearchApi.search({ query, store: this.$store })
+      userSearchApi.search({query, store: this.$store})
         .then((res) => {
           this.loading = false
           this.users = res
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index 6445e323..1269eea6 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -1,38 +1,19 @@
 <template>
   <div class="user-search panel panel-default">
     <div class="panel-heading">
-      {{ $t('nav.user_search') }}
+      {{$t('nav.user_search')}}
     </div>
     <div class="user-search-input-container">
-      <input
-        ref="userSearchInput"
-        v-model="username"
-        class="user-finder-input"
-        :placeholder="$t('finder.find_user')"
-        @keyup.enter="newQuery(username)"
-      >
-      <button
-        class="btn search-button"
-        @click="newQuery(username)"
-      >
-        <i class="icon-search" />
+      <input class="user-finder-input" ref="userSearchInput" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
+      <button class="btn search-button" @click="newQuery(username)">
+        <i class="icon-search"/>
       </button>
     </div>
-    <div
-      v-if="loading"
-      class="text-center loading-icon"
-    >
-      <i class="icon-spin3 animate-spin" />
+    <div v-if="loading" class="text-center loading-icon">
+      <i class="icon-spin3 animate-spin"/>
     </div>
-    <div
-      v-else
-      class="panel-body"
-    >
-      <FollowCard
-        v-for="user in users"
-        :key="user.id"
-        :user="user"
-      />
+    <div v-else class="panel-body">
+      <FollowCard v-for="user in users" :key="user.id" :user="user"/>
     </div>
   </div>
 </template>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index a8d7b6b6..b6a0479d 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -134,12 +134,12 @@ const UserSettings = {
             hide_followers,
             show_role
             /* eslint-enable camelcase */
-          } }).then((user) => {
-          if (!user.error) {
-            this.$store.commit('addNewUsers', [user])
-            this.$store.commit('setCurrentUser', user)
-          }
-        })
+          }}).then((user) => {
+            if (!user.error) {
+              this.$store.commit('addNewUsers', [user])
+              this.$store.commit('setCurrentUser', user)
+            }
+          })
     },
     changeVis (visibility) {
       this.newDefaultScope = visibility
@@ -150,12 +150,12 @@ const UserSettings = {
       if (file.size > this.$store.state.instance[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
+        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
         return
       }
       // eslint-disable-next-line no-undef
       const reader = new FileReader()
-      reader.onload = ({ target }) => {
+      reader.onload = ({target}) => {
         const img = target.result
         this[slot + 'Preview'] = img
       }
@@ -195,7 +195,7 @@ const UserSettings = {
       offset_top = 0
       offset_left = 0
       this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateBanner({ params: { banner, offset_top, offset_left, width, height } }).then((data) => {
+      this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.cover_photo = data.url
@@ -221,7 +221,7 @@ const UserSettings = {
       cropW = imginfo.width
       cropH = imginfo.width
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateBg({ params: { img, cropX, cropY, cropW, cropH } }).then((data) => {
+      this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.background_image = data.url
@@ -237,7 +237,7 @@ const UserSettings = {
     importFollows () {
       this.followListUploading = true
       const followList = this.followList
-      this.$store.state.api.backendInteractor.followImport({ params: followList })
+      this.$store.state.api.backendInteractor.followImport({params: followList})
         .then((status) => {
           if (status) {
             this.followsImported = true
@@ -295,11 +295,11 @@ const UserSettings = {
       this.deletingAccount = true
     },
     deleteAccount () {
-      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
+      this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
         .then((res) => {
           if (res.status === 'success') {
             this.$store.dispatch('logout')
-            this.$router.push({ name: 'root' })
+            this.$router.push({name: 'root'})
           } else {
             this.deleteAccountError = res.error
           }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index ee5d368b..c08698dc 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -2,23 +2,15 @@
   <div class="settings panel panel-default">
     <div class="panel-heading">
       <div class="title">
-        {{ $t('settings.user_settings') }}
+        {{$t('settings.user_settings')}}
       </div>
       <transition name="fade">
         <template v-if="currentSaveStateNotice">
-          <div
-            v-if="currentSaveStateNotice.error"
-            class="alert error"
-            @click.prevent
-          >
+          <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
             {{ $t('settings.saving_err') }}
           </div>
 
-          <div
-            v-if="!currentSaveStateNotice.error"
-            class="alert transparent"
-            @click.prevent
-          >
+          <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
             {{ $t('settings.saving_ok') }}
           </div>
         </template>
@@ -27,258 +19,132 @@
     <div class="panel-body profile-edit">
       <tab-switcher>
         <div :label="$t('settings.profile_tab')">
-          <div class="setting-item">
-            <h2>{{ $t('settings.name_bio') }}</h2>
-            <p>{{ $t('settings.name') }}</p>
-            <EmojiInput
-              id="username"
-              v-model="newName"
+          <div class="setting-item" >
+            <h2>{{$t('settings.name_bio')}}</h2>
+            <p>{{$t('settings.name')}}</p>
+            <EmojiInput 
               type="text"
+              v-model="newName"
+              id="username"
               classname="name-changer"
             />
-            <p>{{ $t('settings.bio') }}</p>
+            <p>{{$t('settings.bio')}}</p>
             <EmojiInput
-              v-model="newBio"
               type="textarea"
+              v-model="newBio"
               classname="bio"
             />
             <p>
-              <input
-                id="account-locked"
-                v-model="newLocked"
-                type="checkbox"
-              >
-              <label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
+              <input type="checkbox" v-model="newLocked" id="account-locked">
+              <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
             </p>
             <div>
-              <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-              <div
-                id="default-vis"
-                class="visibility-tray"
-              >
+              <label for="default-vis">{{$t('settings.default_vis')}}</label>
+              <div id="default-vis" class="visibility-tray">
                 <scope-selector
-                  :show-all="true"
-                  :user-default="newDefaultScope"
-                  :on-scope-change="changeVis"
-                />
+                  :showAll="true"
+                  :userDefault="newDefaultScope"
+                  :onScopeChange="changeVis"/>
               </div>
             </div>
             <p>
-              <input
-                id="account-no-rich-text"
-                v-model="newNoRichText"
-                type="checkbox"
-              >
-              <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
+              <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text">
+              <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
             </p>
             <p>
-              <input
-                id="account-hide-follows"
-                v-model="hideFollows"
-                type="checkbox"
-              >
-              <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
+              <input type="checkbox" v-model="hideFollows" id="account-hide-follows">
+              <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label>
             </p>
             <p>
-              <input
-                id="account-hide-followers"
-                v-model="hideFollowers"
-                type="checkbox"
-              >
-              <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label>
+              <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
+              <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
             </p>
             <p>
-              <input
-                id="account-show-role"
-                v-model="showRole"
-                type="checkbox"
-              >
-              <label
-                v-if="role === 'admin'"
-                for="account-show-role"
-              >{{ $t('settings.show_admin_badge') }}</label>
-              <label
-                v-if="role === 'moderator'"
-                for="account-show-role"
-              >{{ $t('settings.show_moderator_badge') }}</label>
+              <input type="checkbox" v-model="showRole" id="account-show-role">
+              <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
+              <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
             </p>
-            <button
-              :disabled="newName && newName.length === 0"
-              class="btn btn-default"
-              @click="updateProfile"
-            >
-              {{ $t('general.submit') }}
-            </button>
+            <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
           </div>
           <div class="setting-item">
-            <h2>{{ $t('settings.avatar') }}</h2>
-            <p class="visibility-notice">
-              {{ $t('settings.avatar_size_instruction') }}
-            </p>
-            <p>{{ $t('settings.current_avatar') }}</p>
-            <img
-              :src="user.profile_image_url_original"
-              class="current-avatar"
-            >
-            <p>{{ $t('settings.set_new_avatar') }}</p>
-            <button
-              v-show="pickAvatarBtnVisible"
-              id="pick-avatar"
-              class="btn"
-              type="button"
-            >
-              {{ $t('settings.upload_a_photo') }}
-            </button>
-            <image-cropper
-              trigger="#pick-avatar"
-              :submit-handler="submitAvatar"
-              @open="pickAvatarBtnVisible=false"
-              @close="pickAvatarBtnVisible=true"
-            />
+            <h2>{{$t('settings.avatar')}}</h2>
+            <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
+            <p>{{$t('settings.current_avatar')}}</p>
+            <img :src="user.profile_image_url_original" class="current-avatar" />
+            <p>{{$t('settings.set_new_avatar')}}</p>
+            <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
+            <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
           </div>
           <div class="setting-item">
-            <h2>{{ $t('settings.profile_banner') }}</h2>
-            <p>{{ $t('settings.current_profile_banner') }}</p>
-            <img
-              :src="user.cover_photo"
-              class="banner"
-            >
-            <p>{{ $t('settings.set_new_profile_banner') }}</p>
-            <img
-              v-if="bannerPreview"
-              class="banner"
-              :src="bannerPreview"
-            >
+            <h2>{{$t('settings.profile_banner')}}</h2>
+            <p>{{$t('settings.current_profile_banner')}}</p>
+            <img :src="user.cover_photo" class="banner" />
+            <p>{{$t('settings.set_new_profile_banner')}}</p>
+            <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
             <div>
-              <input
-                type="file"
-                @change="uploadFile('banner', $event)"
-              >
+              <input type="file" @change="uploadFile('banner', $event)" />
             </div>
-            <i
-              v-if="bannerUploading"
-              class=" icon-spin4 animate-spin uploading"
-            />
-            <button
-              v-else-if="bannerPreview"
-              class="btn btn-default"
-              @click="submitBanner"
-            >
-              {{ $t('general.submit') }}
-            </button>
-            <div
-              v-if="bannerUploadError"
-              class="alert error"
-            >
+            <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
+            <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="bannerUploadError">
               Error: {{ bannerUploadError }}
-              <i
-                class="button-icon icon-cancel"
-                @click="clearUploadError('banner')"
-              />
+              <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
             </div>
           </div>
           <div class="setting-item">
-            <h2>{{ $t('settings.profile_background') }}</h2>
-            <p>{{ $t('settings.set_new_profile_background') }}</p>
-            <img
-              v-if="backgroundPreview"
-              class="bg"
-              :src="backgroundPreview"
-            >
+            <h2>{{$t('settings.profile_background')}}</h2>
+            <p>{{$t('settings.set_new_profile_background')}}</p>
+            <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
             <div>
-              <input
-                type="file"
-                @change="uploadFile('background', $event)"
-              >
+              <input type="file" @change="uploadFile('background', $event)" />
             </div>
-            <i
-              v-if="backgroundUploading"
-              class=" icon-spin4 animate-spin uploading"
-            />
-            <button
-              v-else-if="backgroundPreview"
-              class="btn btn-default"
-              @click="submitBg"
-            >
-              {{ $t('general.submit') }}
-            </button>
-            <div
-              v-if="backgroundUploadError"
-              class="alert error"
-            >
+            <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
+            <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
+            <div class='alert error' v-if="backgroundUploadError">
               Error: {{ backgroundUploadError }}
-              <i
-                class="button-icon icon-cancel"
-                @click="clearUploadError('background')"
-              />
+              <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
             </div>
           </div>
         </div>
 
         <div :label="$t('settings.security_tab')">
           <div class="setting-item">
-            <h2>{{ $t('settings.change_password') }}</h2>
+            <h2>{{$t('settings.change_password')}}</h2>
             <div>
-              <p>{{ $t('settings.current_password') }}</p>
-              <input
-                v-model="changePasswordInputs[0]"
-                type="password"
-              >
+              <p>{{$t('settings.current_password')}}</p>
+              <input type="password" v-model="changePasswordInputs[0]">
             </div>
             <div>
-              <p>{{ $t('settings.new_password') }}</p>
-              <input
-                v-model="changePasswordInputs[1]"
-                type="password"
-              >
+              <p>{{$t('settings.new_password')}}</p>
+              <input type="password" v-model="changePasswordInputs[1]">
             </div>
             <div>
-              <p>{{ $t('settings.confirm_new_password') }}</p>
-              <input
-                v-model="changePasswordInputs[2]"
-                type="password"
-              >
+              <p>{{$t('settings.confirm_new_password')}}</p>
+              <input type="password" v-model="changePasswordInputs[2]">
             </div>
-            <button
-              class="btn btn-default"
-              @click="changePassword"
-            >
-              {{ $t('general.submit') }}
-            </button>
-            <p v-if="changedPassword">
-              {{ $t('settings.changed_password') }}
-            </p>
-            <p v-else-if="changePasswordError !== false">
-              {{ $t('settings.change_password_error') }}
-            </p>
-            <p v-if="changePasswordError">
-              {{ changePasswordError }}
-            </p>
+            <button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button>
+            <p v-if="changedPassword">{{$t('settings.changed_password')}}</p>
+            <p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p>
+            <p v-if="changePasswordError">{{changePasswordError}}</p>
           </div>
 
           <div class="setting-item">
-            <h2>{{ $t('settings.oauth_tokens') }}</h2>
+            <h2>{{$t('settings.oauth_tokens')}}</h2>
             <table class="oauth-tokens">
               <thead>
                 <tr>
-                  <th>{{ $t('settings.app_name') }}</th>
-                  <th>{{ $t('settings.valid_until') }}</th>
-                  <th />
+                  <th>{{$t('settings.app_name')}}</th>
+                  <th>{{$t('settings.valid_until')}}</th>
+                  <th></th>
                 </tr>
               </thead>
               <tbody>
-                <tr
-                  v-for="oauthToken in oauthTokens"
-                  :key="oauthToken.id"
-                >
-                  <td>{{ oauthToken.appName }}</td>
-                  <td>{{ oauthToken.validUntil }}</td>
+                <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id">
+                  <td>{{oauthToken.appName}}</td>
+                  <td>{{oauthToken.validUntil}}</td>
                   <td class="actions">
-                    <button
-                      class="btn btn-default"
-                      @click="revokeToken(oauthToken.id)"
-                    >
-                      {{ $t('settings.revoke_token') }}
+                    <button class="btn btn-default" @click="revokeToken(oauthToken.id)">
+                      {{$t('settings.revoke_token')}}
                     </button>
                   </td>
                 </tr>
@@ -287,113 +153,56 @@
           </div>
 
           <div class="setting-item">
-            <h2>{{ $t('settings.delete_account') }}</h2>
-            <p v-if="!deletingAccount">
-              {{ $t('settings.delete_account_description') }}
-            </p>
+            <h2>{{$t('settings.delete_account')}}</h2>
+            <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
             <div v-if="deletingAccount">
-              <p>{{ $t('settings.delete_account_instructions') }}</p>
-              <p>{{ $t('login.password') }}</p>
-              <input
-                v-model="deleteAccountConfirmPasswordInput"
-                type="password"
-              >
-              <button
-                class="btn btn-default"
-                @click="deleteAccount"
-              >
-                {{ $t('settings.delete_account') }}
-              </button>
+              <p>{{$t('settings.delete_account_instructions')}}</p>
+              <p>{{$t('login.password')}}</p>
+              <input type="password" v-model="deleteAccountConfirmPasswordInput">
+              <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
             </div>
-            <p v-if="deleteAccountError !== false">
-              {{ $t('settings.delete_account_error') }}
-            </p>
-            <p v-if="deleteAccountError">
-              {{ deleteAccountError }}
-            </p>
-            <button
-              v-if="!deletingAccount"
-              class="btn btn-default"
-              @click="confirmDelete"
-            >
-              {{ $t('general.submit') }}
-            </button>
+            <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
+            <p v-if="deleteAccountError">{{deleteAccountError}}</p>
+            <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
           </div>
         </div>
 
-        <div
-          v-if="pleromaBackend"
-          :label="$t('settings.data_import_export_tab')"
-        >
+        <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
           <div class="setting-item">
-            <h2>{{ $t('settings.follow_import') }}</h2>
-            <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+            <h2>{{$t('settings.follow_import')}}</h2>
+            <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
             <form>
-              <input
-                ref="followlist"
-                type="file"
-                @change="followListChange"
-              >
+              <input type="file" ref="followlist" v-on:change="followListChange" />
             </form>
-            <i
-              v-if="followListUploading"
-              class=" icon-spin4 animate-spin uploading"
-            />
-            <button
-              v-else
-              class="btn btn-default"
-              @click="importFollows"
-            >
-              {{ $t('general.submit') }}
-            </button>
+            <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
+            <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
             <div v-if="followsImported">
-              <i
-                class="icon-cross"
-                @click="dismissImported"
-              />
-              <p>{{ $t('settings.follows_imported') }}</p>
+              <i class="icon-cross" @click="dismissImported"></i>
+              <p>{{$t('settings.follows_imported')}}</p>
             </div>
             <div v-else-if="followImportError">
-              <i
-                class="icon-cross"
-                @click="dismissImported"
-              />
-              <p>{{ $t('settings.follow_import_error') }}</p>
+              <i class="icon-cross" @click="dismissImported"></i>
+              <p>{{$t('settings.follow_import_error')}}</p>
             </div>
           </div>
-          <div
-            v-if="enableFollowsExport"
-            class="setting-item"
-          >
-            <h2>{{ $t('settings.follow_export') }}</h2>
-            <button
-              class="btn btn-default"
-              @click="exportFollows"
-            >
-              {{ $t('settings.follow_export_button') }}
-            </button>
+          <div class="setting-item" v-if="enableFollowsExport">
+            <h2>{{$t('settings.follow_export')}}</h2>
+            <button class="btn btn-default" @click="exportFollows">{{$t('settings.follow_export_button')}}</button>
           </div>
-          <div
-            v-else
-            class="setting-item"
-          >
-            <h2>{{ $t('settings.follow_export_processing') }}</h2>
+          <div class="setting-item" v-else>
+            <h2>{{$t('settings.follow_export_processing')}}</h2>
           </div>
         </div>
 
         <div :label="$t('settings.blocks_tab')">
           <block-list :refresh="true">
-            <template slot="empty">
-              {{ $t('settings.no_blocks') }}
-            </template>
+            <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </block-list>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
           <mute-list :refresh="true">
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
-            </template>
+            <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </mute-list>
         </div>
       </tab-switcher>
diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
index 97ddf1cd..68de201e 100644
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@@ -1,11 +1,10 @@
 <template>
-  <video
-    class="video"
+  <video class="video"
+    @loadeddata="onVideoDataLoad"
     :src="attachment.url"
     :loop="loopVideo"
     :controls="controls"
     playsinline
-    @loadeddata="onVideoDataLoad"
   />
 </template>
 
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index 6e3386b3..be0b8827 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -36,7 +36,7 @@ const WhoToFollow = {
     getWhoToFollow () {
       const credentials = this.$store.state.users.currentUser.credentials
       if (credentials) {
-        apiService.suggestions({ credentials: credentials })
+        apiService.suggestions({credentials: credentials})
           .then((reply) => {
             this.showWhoToFollow(reply)
           })
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 35c99c1b..1630f5ac 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -1,14 +1,10 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      {{ $t('who_to_follow.who_to_follow') }}
+      {{$t('who_to_follow.who_to_follow')}}
     </div>
     <div class="panel-body">
-      <FollowCard
-        v-for="user in users"
-        :key="user.id"
-        :user="user"
-      />
+      <FollowCard v-for="user in users" :key="user.id" :user="user"/>
     </div>
   </div>
 </template>
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 7d01678b..a56a27ea 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -29,7 +29,7 @@ function getWhoToFollow (panel) {
     panel.usersToFollow.forEach(toFollow => {
       toFollow.name = 'Loading...'
     })
-    apiService.suggestions({ credentials: credentials })
+    apiService.suggestions({credentials: credentials})
       .then((reply) => {
         showWhoToFollow(panel, reply)
       })
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index c3e7c57c..25e3a9f6 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -3,22 +3,17 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
         <div class="title">
-          {{ $t('who_to_follow.who_to_follow') }}
+          {{$t('who_to_follow.who_to_follow')}}
         </div>
       </div>
       <div class="panel-body who-to-follow">
-        <span
-          v-for="user in usersToFollow"
-          :key="user.id"
-        >
-          <img :src="user.img">
-          <router-link :to="userProfileLink(user.id, user.name)">
-            {{ user.name }}
-          </router-link><br>
+        <span v-for="user in usersToFollow">
+          <img v-bind:src="user.img" />
+            <router-link v-bind:to="userProfileLink(user.id, user.name)">
+              {{user.name}}
+            </router-link><br />
         </span>
-        <img :src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">
-          {{ $t('who_to_follow.more') }}
-        </router-link>
+        <img v-bind:src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">{{$t('who_to_follow.more')}}</router-link>
       </div>
     </div>
   </div>
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index b187e614..896f8fc8 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -7,14 +7,14 @@ const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
 
 const withList = ({
-  getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component
-  getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value
+  getEntryProps = defaultEntryPropsGetter,  // function to accept entry and index values and return props to be passed into the item component
+  getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
 }) => (ItemComponent) => (
   Vue.component('withList', {
     props: [
-      'entries', // array of entry
-      'entryProps', // additional props to be passed into each entry
-      'entryListeners' // additional event listeners to be passed into each entry
+      'entries',                            // array of entry
+      'entryProps',                         // additional props to be passed into each entry
+      'entryListeners'                      // additional event listeners to be passed into each entry
     ],
     render (createElement) {
       return (
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 1e1b2a74..74979b87 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -4,16 +4,39 @@ import { getComponentProps } from '../../services/component_utils/component_util
 import './with_load_more.scss'
 
 const withLoadMore = ({
-  fetch, // function to fetch entries and return a promise
-  select, // function to select data from store
-  destroy, // function called at "destroyed" lifecycle
-  childPropName = 'entries', // name of the prop to be passed into the wrapped component
-  additionalPropNames = [] // additional prop name list of the wrapper component
+  fetch,                      // function to fetch entries and return a promise
+  select,                     // function to select data from store
+  destroy,                    // function called at "destroyed" lifecycle
+  childPropName = 'entries',  // name of the prop to be passed into the wrapped component
+  additionalPropNames = []    // additional prop name list of the wrapper component
 }) => (WrappedComponent) => {
   const originalProps = Object.keys(getComponentProps(WrappedComponent))
   const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
 
   return Vue.component('withLoadMore', {
+    render (createElement) {
+      const props = {
+        props: {
+          ...this.$props,
+          [childPropName]: this.entries
+        },
+        on: this.$listeners,
+        scopedSlots: this.$scopedSlots
+      }
+      const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
+      return (
+        <div class="with-load-more">
+          <WrappedComponent {...props}>
+            {children}
+          </WrappedComponent>
+          <div class="with-load-more-footer">
+            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
+            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
+          </div>
+        </div>
+      )
+    },
     props,
     data () {
       return {
@@ -64,29 +87,6 @@ const withLoadMore = ({
           this.fetchEntries()
         }
       }
-    },
-    render (createElement) {
-      const props = {
-        props: {
-          ...this.$props,
-          [childPropName]: this.entries
-        },
-        on: this.$listeners,
-        scopedSlots: this.$scopedSlots
-      }
-      const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
-      return (
-        <div class="with-load-more">
-          <WrappedComponent {...props}>
-            {children}
-          </WrappedComponent>
-          <div class="with-load-more-footer">
-            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
-            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
-          </div>
-        </div>
-      )
     }
   })
 }
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 91fc4cca..679409cf 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -4,10 +4,10 @@ import { getComponentProps } from '../../services/component_utils/component_util
 import './with_subscription.scss'
 
 const withSubscription = ({
-  fetch, // function to fetch entries and return a promise
-  select, // function to select data from store
-  childPropName = 'content', // name of the prop to be passed into the wrapped component
-  additionalPropNames = [] // additional prop name list of the wrapper component
+  fetch,                      // function to fetch entries and return a promise
+  select,                     // function to select data from store
+  childPropName = 'content',  // name of the prop to be passed into the wrapped component
+  additionalPropNames = []    // additional prop name list of the wrapper component
 }) => (WrappedComponent) => {
   const originalProps = Object.keys(getComponentProps(WrappedComponent))
   const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
@@ -15,8 +15,37 @@ const withSubscription = ({
   return Vue.component('withSubscription', {
     props: [
       ...props,
-      'refresh' // boolean saying to force-fetch data whenever created
+      'refresh'               // boolean saying to force-fetch data whenever created
     ],
+    render (createElement) {
+      if (!this.error && !this.loading) {
+        const props = {
+          props: {
+            ...this.$props,
+            [childPropName]: this.fetchedData
+          },
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        }
+        const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
+        return (
+          <div class="with-subscription">
+            <WrappedComponent {...props}>
+              {children}
+            </WrappedComponent>
+          </div>
+        )
+      } else {
+        return (
+          <div class="with-subscription-loading">
+            {this.error
+              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
+              : <i class="icon-spin3 animate-spin"/>
+            }
+          </div>
+        )
+      }
+    },
     data () {
       return {
         loading: false,
@@ -48,35 +77,6 @@ const withSubscription = ({
             })
         }
       }
-    },
-    render (createElement) {
-      if (!this.error && !this.loading) {
-        const props = {
-          props: {
-            ...this.$props,
-            [childPropName]: this.fetchedData
-          },
-          on: this.$listeners,
-          scopedSlots: this.$scopedSlots
-        }
-        const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
-        return (
-          <div class="with-subscription">
-            <WrappedComponent {...props}>
-              {children}
-            </WrappedComponent>
-          </div>
-        )
-      } else {
-        return (
-          <div class="with-subscription-loading">
-            {this.error
-              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
-              : <i class="icon-spin3 animate-spin"/>
-            }
-          </div>
-        )
-      }
     }
   })
 }
diff --git a/src/modules/api.js b/src/modules/api.js
index 582e4fe7..31cb55c6 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -13,10 +13,10 @@ const api = {
     setBackendInteractor (state, backendInteractor) {
       state.backendInteractor = backendInteractor
     },
-    addFetcher (state, { timeline, fetcher }) {
+    addFetcher (state, {timeline, fetcher}) {
       state.fetchers[timeline] = fetcher
     },
-    removeFetcher (state, { timeline }) {
+    removeFetcher (state, {timeline}) {
       delete state.fetchers[timeline]
     },
     setWsToken (state, token) {
@@ -33,7 +33,7 @@ const api = {
     }
   },
   actions: {
-    startFetching (store, { timeline = 'friends', tag = false, userId = false }) {
+    startFetching (store, {timeline = 'friends', tag = false, userId = false}) {
       // Don't start fetching if we already are.
       if (store.state.fetchers[timeline]) return
 
@@ -43,7 +43,7 @@ const api = {
     stopFetching (store, timeline) {
       const fetcher = store.state.fetchers[timeline]
       window.clearInterval(fetcher)
-      store.commit('removeFetcher', { timeline })
+      store.commit('removeFetcher', {timeline})
     },
     setWsToken (store, token) {
       store.commit('setWsToken', token)
@@ -52,7 +52,7 @@ const api = {
       // Set up websocket connection
       if (!store.state.chatDisabled) {
         const token = store.state.wsToken
-        const socket = new Socket('/socket', { params: { token } })
+        const socket = new Socket('/socket', {params: {token}})
         socket.connect()
         store.dispatch('initializeChat', socket)
       }
diff --git a/src/modules/chat.js b/src/modules/chat.js
index 0bc2c691..2804e577 100644
--- a/src/modules/chat.js
+++ b/src/modules/chat.js
@@ -1,7 +1,7 @@
 const chat = {
   state: {
     messages: [],
-    channel: { state: '' },
+    channel: {state: ''},
     socket: null
   },
   mutations: {
@@ -29,7 +29,7 @@ const chat = {
       channel.on('new_msg', (msg) => {
         store.commit('addMessage', msg)
       })
-      channel.on('messages', ({ messages }) => {
+      channel.on('messages', ({messages}) => {
         store.commit('setMessages', messages)
       })
       channel.join()
diff --git a/src/modules/config.js b/src/modules/config.js
index c1ddd630..1666a2c5 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -54,10 +54,10 @@ const config = {
   },
   actions: {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
-      commit('setHighlight', { user, color, type })
+      commit('setHighlight', {user, color, type})
     },
     setOption ({ commit, dispatch }, { name, value }) {
-      commit('setOption', { name, value })
+      commit('setOption', {name, value})
       switch (name) {
         case 'theme':
           setPreset(value, commit)
diff --git a/src/modules/errors.js b/src/modules/errors.js
index ca89dc0f..c809e1b5 100644
--- a/src/modules/errors.js
+++ b/src/modules/errors.js
@@ -9,3 +9,4 @@ export function humanizeErrors (errors) {
     return [...errs, message]
   }, [])
 }
+
diff --git a/src/modules/instance.js b/src/modules/instance.js
index debf7165..d4185f6a 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -68,7 +68,7 @@ const instance = {
   },
   actions: {
     setInstanceOption ({ commit, dispatch }, { name, value }) {
-      commit('setInstanceOption', { name, value })
+      commit('setInstanceOption', {name, value})
       switch (name) {
         case 'name':
           dispatch('setPageTitle')
diff --git a/src/modules/oauth_tokens.js b/src/modules/oauth_tokens.js
index 0159a3f1..00ac1431 100644
--- a/src/modules/oauth_tokens.js
+++ b/src/modules/oauth_tokens.js
@@ -3,12 +3,12 @@ const oauthTokens = {
     tokens: []
   },
   actions: {
-    fetchTokens ({ rootState, commit }) {
+    fetchTokens ({rootState, commit}) {
       rootState.api.backendInteractor.fetchOAuthTokens().then((tokens) => {
         commit('swapTokens', tokens)
       })
     },
-    revokeToken ({ rootState, commit, state }, id) {
+    revokeToken ({rootState, commit, state}, id) {
       rootState.api.backendInteractor.revokeOAuthToken(id).then((response) => {
         if (response.status === 201) {
           commit('swapTokens', state.tokens.filter(token => token.id !== id))
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 209afc0f..8e0203e3 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -78,13 +78,13 @@ const mergeOrAdd = (arr, obj, item) => {
     merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user'))
     // Reactivity fix.
     oldItem.attachments.splice(oldItem.attachments.length)
-    return { item: oldItem, new: false }
+    return {item: oldItem, new: false}
   } else {
     // This is a new item, prepare it
     prepareStatus(item)
     arr.push(item)
     set(obj, item.id, item)
-    return { item, new: true }
+    return {item, new: true}
   }
 }
 
@@ -237,12 +237,12 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
       const uri = deletion.uri
 
       // Remove possible notification
-      const status = find(allStatuses, { uri })
+      const status = find(allStatuses, {uri})
       if (!status) {
         return
       }
 
-      remove(state.notifications.data, ({ action: { id } }) => id === status.id)
+      remove(state.notifications.data, ({action: {id}}) => id === status.id)
 
       remove(allStatuses, { uri })
       if (timeline) {
diff --git a/src/modules/users.js b/src/modules/users.js
index e1eba5e6..1a507d31 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -224,8 +224,8 @@ const users = {
           .then((friends) => {
             commit('addFriends', { id: user.id, friends })
             resolve(friends)
-          }).catch(e => {
-            reject(e)
+          }).catch(() => {
+            reject()
           })
       })
     },
@@ -279,8 +279,8 @@ const users = {
 
       const notificationsObject = store.rootState.statuses.notifications.idStore
       const relevantNotifications = Object.entries(notificationsObject)
-        .filter(([k, val]) => notificationIds.includes(k))
-        .map(([k, val]) => val)
+            .filter(([k, val]) => notificationIds.includes(k))
+            .map(([k, val]) => val)
 
       // Reconnect users to notifications
       each(relevantNotifications, (notification) => {
@@ -322,7 +322,7 @@ const users = {
       }
     },
     async getCaptcha (store) {
-      return store.rootState.api.backendInteractor.getCaptcha()
+      return await store.rootState.api.backendInteractor.getCaptcha()
     },
 
     logout (store) {
@@ -376,19 +376,19 @@ const users = {
               // Authentication failed
               commit('endLogin')
               if (response.status === 401) {
-                reject(new Error('Wrong username or password'))
+                reject('Wrong username or password')
               } else {
-                reject(new Error('An error occurred, please try again'))
+                reject('An error occurred, please try again')
               }
             }
             commit('endLogin')
             resolve()
           })
-          .catch((error) => {
-            console.log(error)
-            commit('endLogin')
-            reject(new Error('Failed to connect to server, try again'))
-          })
+        .catch((error) => {
+          console.log(error)
+          commit('endLogin')
+          reject('Failed to connect to server, try again')
+        })
       })
     }
   }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 1d713190..030c2f5e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1,9 +1,4 @@
 /* eslint-env browser */
-import { each, map } from 'lodash'
-import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
-import 'whatwg-fetch'
-import { StatusCodeError } from '../errors/errors'
-
 const LOGIN_URL = '/api/account/verify_credentials.json'
 const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing'
 const MENTIONS_URL = '/api/statuses/mentions.json'
@@ -51,6 +46,11 @@ const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
 const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
 const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
 
+import { each, map } from 'lodash'
+import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
+import 'whatwg-fetch'
+import { StatusCodeError } from '../errors/errors'
+
 const oldfetch = window.fetch
 
 let fetch = (url, options) => {
@@ -80,7 +80,7 @@ const promisedRequest = (url, options) => {
 // cropX
 // cropY
 // img (base 64 encodend data url)
-const updateAvatar = ({ credentials, params }) => {
+const updateAvatar = ({credentials, params}) => {
   let url = AVATAR_UPDATE_URL
 
   const form = new FormData()
@@ -98,7 +98,7 @@ const updateAvatar = ({ credentials, params }) => {
   }).then((data) => data.json())
 }
 
-const updateBg = ({ credentials, params }) => {
+const updateBg = ({credentials, params}) => {
   let url = BG_UPDATE_URL
 
   const form = new FormData()
@@ -122,7 +122,7 @@ const updateBg = ({ credentials, params }) => {
 // offset_left
 // offset_top
 // banner (base 64 encodend data url)
-const updateBanner = ({ credentials, params }) => {
+const updateBanner = ({credentials, params}) => {
   let url = BANNER_UPDATE_URL
 
   const form = new FormData()
@@ -145,7 +145,7 @@ const updateBanner = ({ credentials, params }) => {
 // url
 // location
 // description
-const updateProfile = ({ credentials, params }) => {
+const updateProfile = ({credentials, params}) => {
   // Always include these fields, because they might be empty or false
   const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers', 'show_role']
   let url = PROFILE_UPDATE_URL
@@ -201,7 +201,7 @@ const authHeaders = (accessToken) => {
   }
 }
 
-const externalProfile = ({ profileUrl, credentials }) => {
+const externalProfile = ({profileUrl, credentials}) => {
   let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}`
   return fetch(url, {
     headers: authHeaders(credentials),
@@ -209,7 +209,7 @@ const externalProfile = ({ profileUrl, credentials }) => {
   }).then((data) => data.json())
 }
 
-const followUser = ({ id, credentials }) => {
+const followUser = ({id, credentials}) => {
   let url = MASTODON_FOLLOW_URL(id)
   return fetch(url, {
     headers: authHeaders(credentials),
@@ -217,7 +217,7 @@ const followUser = ({ id, credentials }) => {
   }).then((data) => data.json())
 }
 
-const unfollowUser = ({ id, credentials }) => {
+const unfollowUser = ({id, credentials}) => {
   let url = MASTODON_UNFOLLOW_URL(id)
   return fetch(url, {
     headers: authHeaders(credentials),
@@ -225,21 +225,21 @@ const unfollowUser = ({ id, credentials }) => {
   }).then((data) => data.json())
 }
 
-const blockUser = ({ id, credentials }) => {
+const blockUser = ({id, credentials}) => {
   return fetch(MASTODON_BLOCK_USER_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   }).then((data) => data.json())
 }
 
-const unblockUser = ({ id, credentials }) => {
+const unblockUser = ({id, credentials}) => {
   return fetch(MASTODON_UNBLOCK_USER_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   }).then((data) => data.json())
 }
 
-const approveUser = ({ id, credentials }) => {
+const approveUser = ({id, credentials}) => {
   let url = `${APPROVE_USER_URL}?user_id=${id}`
   return fetch(url, {
     headers: authHeaders(credentials),
@@ -247,7 +247,7 @@ const approveUser = ({ id, credentials }) => {
   }).then((data) => data.json())
 }
 
-const denyUser = ({ id, credentials }) => {
+const denyUser = ({id, credentials}) => {
   let url = `${DENY_USER_URL}?user_id=${id}`
   return fetch(url, {
     headers: authHeaders(credentials),
@@ -255,13 +255,13 @@ const denyUser = ({ id, credentials }) => {
   }).then((data) => data.json())
 }
 
-const fetchUser = ({ id, credentials }) => {
+const fetchUser = ({id, credentials}) => {
   let url = `${MASTODON_USER_URL}/${id}`
   return promisedRequest(url, { headers: authHeaders(credentials) })
     .then((data) => parseUser(data))
 }
 
-const fetchUserRelationship = ({ id, credentials }) => {
+const fetchUserRelationship = ({id, credentials}) => {
   let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
   return fetch(url, { headers: authHeaders(credentials) })
     .then((response) => {
@@ -275,7 +275,7 @@ const fetchUserRelationship = ({ id, credentials }) => {
     })
 }
 
-const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
+const fetchFriends = ({id, maxId, sinceId, limit = 20, credentials}) => {
   let url = MASTODON_FOLLOWING_URL(id)
   const args = [
     maxId && `max_id=${maxId}`,
@@ -289,14 +289,14 @@ const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
     .then((data) => data.map(parseUser))
 }
 
-const exportFriends = ({ id, credentials }) => {
+const exportFriends = ({id, credentials}) => {
   let url = MASTODON_FOLLOWING_URL(id) + `?all=true`
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
 }
 
-const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
+const fetchFollowers = ({id, maxId, sinceId, limit = 20, credentials}) => {
   let url = MASTODON_FOLLOWERS_URL(id)
   const args = [
     maxId && `max_id=${maxId}`,
@@ -310,20 +310,20 @@ const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
     .then((data) => data.map(parseUser))
 }
 
-const fetchAllFollowing = ({ username, credentials }) => {
+const fetchAllFollowing = ({username, credentials}) => {
   const url = `${ALL_FOLLOWING_URL}/${username}.json`
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
 }
 
-const fetchFollowRequests = ({ credentials }) => {
+const fetchFollowRequests = ({credentials}) => {
   const url = FOLLOW_REQUESTS_URL
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
 }
 
-const fetchConversation = ({ id, credentials }) => {
+const fetchConversation = ({id, credentials}) => {
   let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
   return fetch(urlContext, { headers: authHeaders(credentials) })
     .then((data) => {
@@ -333,13 +333,13 @@ const fetchConversation = ({ id, credentials }) => {
       throw new Error('Error fetching timeline', data)
     })
     .then((data) => data.json())
-    .then(({ ancestors, descendants }) => ({
+    .then(({ancestors, descendants}) => ({
       ancestors: ancestors.map(parseStatus),
       descendants: descendants.map(parseStatus)
     }))
 }
 
-const fetchStatus = ({ id, credentials }) => {
+const fetchStatus = ({id, credentials}) => {
   let url = MASTODON_STATUS_URL(id)
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
@@ -352,7 +352,7 @@ const fetchStatus = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
-const fetchTimeline = ({ timeline, credentials, since = false, until = false, userId = false, tag = false, withMuted = false }) => {
+const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false, tag = false, withMuted = false}) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
     friends: MASTODON_USER_HOME_TIMELINE_URL,
@@ -487,7 +487,7 @@ const unretweet = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
-const postStatus = ({ credentials, status, spoilerText, visibility, sensitive, mediaIds = [], inReplyToStatusId, contentType }) => {
+const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds = [], inReplyToStatusId, contentType}) => {
   const form = new FormData()
 
   form.append('status', status)
@@ -527,7 +527,7 @@ const deleteStatus = ({ id, credentials }) => {
   })
 }
 
-const uploadMedia = ({ formData, credentials }) => {
+const uploadMedia = ({formData, credentials}) => {
   return fetch(MASTODON_MEDIA_UPLOAD_URL, {
     body: formData,
     method: 'POST',
@@ -537,7 +537,7 @@ const uploadMedia = ({ formData, credentials }) => {
     .then((data) => parseAttachment(data))
 }
 
-const followImport = ({ params, credentials }) => {
+const followImport = ({params, credentials}) => {
   return fetch(FOLLOW_IMPORT_URL, {
     body: params,
     method: 'POST',
@@ -546,7 +546,7 @@ const followImport = ({ params, credentials }) => {
     .then((response) => response.ok)
 }
 
-const deleteAccount = ({ credentials, password }) => {
+const deleteAccount = ({credentials, password}) => {
   const form = new FormData()
 
   form.append('password', password)
@@ -559,7 +559,7 @@ const deleteAccount = ({ credentials, password }) => {
     .then((response) => response.json())
 }
 
-const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
+const changePassword = ({credentials, password, newPassword, newPasswordConfirmation}) => {
   const form = new FormData()
 
   form.append('password', password)
@@ -574,31 +574,31 @@ const changePassword = ({ credentials, password, newPassword, newPasswordConfirm
     .then((response) => response.json())
 }
 
-const fetchMutes = ({ credentials }) => {
+const fetchMutes = ({credentials}) => {
   return promisedRequest(MASTODON_USER_MUTES_URL, { headers: authHeaders(credentials) })
     .then((users) => users.map(parseUser))
 }
 
-const muteUser = ({ id, credentials }) => {
+const muteUser = ({id, credentials}) => {
   return promisedRequest(MASTODON_MUTE_USER_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   })
 }
 
-const unmuteUser = ({ id, credentials }) => {
+const unmuteUser = ({id, credentials}) => {
   return promisedRequest(MASTODON_UNMUTE_USER_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   })
 }
 
-const fetchBlocks = ({ credentials }) => {
+const fetchBlocks = ({credentials}) => {
   return promisedRequest(MASTODON_USER_BLOCKS_URL, { headers: authHeaders(credentials) })
     .then((users) => users.map(parseUser))
 }
 
-const fetchOAuthTokens = ({ credentials }) => {
+const fetchOAuthTokens = ({credentials}) => {
   const url = '/api/oauth_tokens.json'
 
   return fetch(url, {
@@ -611,7 +611,7 @@ const fetchOAuthTokens = ({ credentials }) => {
   })
 }
 
-const revokeOAuthToken = ({ id, credentials }) => {
+const revokeOAuthToken = ({id, credentials}) => {
   const url = `/api/oauth_tokens/${id}`
 
   return fetch(url, {
@@ -620,13 +620,13 @@ const revokeOAuthToken = ({ id, credentials }) => {
   })
 }
 
-const suggestions = ({ credentials }) => {
+const suggestions = ({credentials}) => {
   return fetch(SUGGESTIONS_URL, {
     headers: authHeaders(credentials)
   }).then((data) => data.json())
 }
 
-const markNotificationsAsSeen = ({ id, credentials }) => {
+const markNotificationsAsSeen = ({id, credentials}) => {
   const body = new FormData()
 
   body.append('latest_id', id)
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 47ad540b..71e78d2f 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -2,86 +2,86 @@ import apiService from '../api/api.service.js'
 import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'
 
 const backendInteractorService = (credentials) => {
-  const fetchStatus = ({ id }) => {
-    return apiService.fetchStatus({ id, credentials })
+  const fetchStatus = ({id}) => {
+    return apiService.fetchStatus({id, credentials})
   }
 
-  const fetchConversation = ({ id }) => {
-    return apiService.fetchConversation({ id, credentials })
+  const fetchConversation = ({id}) => {
+    return apiService.fetchConversation({id, credentials})
   }
 
-  const fetchFriends = ({ id, maxId, sinceId, limit }) => {
-    return apiService.fetchFriends({ id, maxId, sinceId, limit, credentials })
+  const fetchFriends = ({id, maxId, sinceId, limit}) => {
+    return apiService.fetchFriends({id, maxId, sinceId, limit, credentials})
   }
 
-  const exportFriends = ({ id }) => {
-    return apiService.exportFriends({ id, credentials })
+  const exportFriends = ({id}) => {
+    return apiService.exportFriends({id, credentials})
   }
 
-  const fetchFollowers = ({ id, maxId, sinceId, limit }) => {
-    return apiService.fetchFollowers({ id, maxId, sinceId, limit, credentials })
+  const fetchFollowers = ({id, maxId, sinceId, limit}) => {
+    return apiService.fetchFollowers({id, maxId, sinceId, limit, credentials})
   }
 
-  const fetchAllFollowing = ({ username }) => {
-    return apiService.fetchAllFollowing({ username, credentials })
+  const fetchAllFollowing = ({username}) => {
+    return apiService.fetchAllFollowing({username, credentials})
   }
 
-  const fetchUser = ({ id }) => {
-    return apiService.fetchUser({ id, credentials })
+  const fetchUser = ({id}) => {
+    return apiService.fetchUser({id, credentials})
   }
 
-  const fetchUserRelationship = ({ id }) => {
-    return apiService.fetchUserRelationship({ id, credentials })
+  const fetchUserRelationship = ({id}) => {
+    return apiService.fetchUserRelationship({id, credentials})
   }
 
   const followUser = (id) => {
-    return apiService.followUser({ credentials, id })
+    return apiService.followUser({credentials, id})
   }
 
   const unfollowUser = (id) => {
-    return apiService.unfollowUser({ credentials, id })
+    return apiService.unfollowUser({credentials, id})
   }
 
   const blockUser = (id) => {
-    return apiService.blockUser({ credentials, id })
+    return apiService.blockUser({credentials, id})
   }
 
   const unblockUser = (id) => {
-    return apiService.unblockUser({ credentials, id })
+    return apiService.unblockUser({credentials, id})
   }
 
   const approveUser = (id) => {
-    return apiService.approveUser({ credentials, id })
+    return apiService.approveUser({credentials, id})
   }
 
   const denyUser = (id) => {
-    return apiService.denyUser({ credentials, id })
+    return apiService.denyUser({credentials, id})
   }
 
-  const startFetching = ({ timeline, store, userId = false, tag }) => {
-    return timelineFetcherService.startFetching({ timeline, store, credentials, userId, tag })
+  const startFetching = ({timeline, store, userId = false, tag}) => {
+    return timelineFetcherService.startFetching({timeline, store, credentials, userId, tag})
   }
 
-  const fetchMutes = () => apiService.fetchMutes({ credentials })
-  const muteUser = (id) => apiService.muteUser({ credentials, id })
-  const unmuteUser = (id) => apiService.unmuteUser({ credentials, id })
-  const fetchBlocks = () => apiService.fetchBlocks({ credentials })
-  const fetchFollowRequests = () => apiService.fetchFollowRequests({ credentials })
-  const fetchOAuthTokens = () => apiService.fetchOAuthTokens({ credentials })
-  const revokeOAuthToken = (id) => apiService.revokeOAuthToken({ id, credentials })
+  const fetchMutes = () => apiService.fetchMutes({credentials})
+  const muteUser = (id) => apiService.muteUser({credentials, id})
+  const unmuteUser = (id) => apiService.unmuteUser({credentials, id})
+  const fetchBlocks = () => apiService.fetchBlocks({credentials})
+  const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
+  const fetchOAuthTokens = () => apiService.fetchOAuthTokens({credentials})
+  const revokeOAuthToken = (id) => apiService.revokeOAuthToken({id, credentials})
 
   const getCaptcha = () => apiService.getCaptcha()
   const register = (params) => apiService.register(params)
-  const updateAvatar = ({ params }) => apiService.updateAvatar({ credentials, params })
-  const updateBg = ({ params }) => apiService.updateBg({ credentials, params })
-  const updateBanner = ({ params }) => apiService.updateBanner({ credentials, params })
-  const updateProfile = ({ params }) => apiService.updateProfile({ credentials, params })
+  const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
+  const updateBg = ({params}) => apiService.updateBg({credentials, params})
+  const updateBanner = ({params}) => apiService.updateBanner({credentials, params})
+  const updateProfile = ({params}) => apiService.updateProfile({credentials, params})
 
-  const externalProfile = (profileUrl) => apiService.externalProfile({ profileUrl, credentials })
-  const followImport = ({ params }) => apiService.followImport({ params, credentials })
+  const externalProfile = (profileUrl) => apiService.externalProfile({profileUrl, credentials})
+  const followImport = ({params}) => apiService.followImport({params, credentials})
 
-  const deleteAccount = ({ password }) => apiService.deleteAccount({ credentials, password })
-  const changePassword = ({ password, newPassword, newPasswordConfirmation }) => apiService.changePassword({ credentials, password, newPassword, newPasswordConfirmation })
+  const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password})
+  const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation})
 
   const backendInteractorServiceInstance = {
     fetchStatus,
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index d1b17c61..7576c518 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -59,7 +59,7 @@ const srgbToLinear = (srgb) => {
  * @returns {Number} relative luminance
  */
 const relativeLuminance = (srgb) => {
-  const { r, g, b } = srgbToLinear(srgb)
+  const {r, g, b} = srgbToLinear(srgb)
   return 0.2126 * r + 0.7152 * g + 0.0722 * b
 }
 
diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js
index df83d03d..11c45867 100644
--- a/src/services/completion/completion.js
+++ b/src/services/completion/completion.js
@@ -8,7 +8,7 @@ export const wordAtPosition = (str, pos) => {
   const words = splitIntoWords(str)
   const wordsWithPosition = addPositionToWords(words)
 
-  return find(wordsWithPosition, ({ start, end }) => start <= pos && end > pos)
+  return find(wordsWithPosition, ({start, end}) => start <= pos && end > pos)
 }
 
 export const addPositionToWords = (words) => {
diff --git a/src/services/file_size_format/file_size_format.js b/src/services/file_size_format/file_size_format.js
index 7e6cd4d7..add56ee0 100644
--- a/src/services/file_size_format/file_size_format.js
+++ b/src/services/file_size_format/file_size_format.js
@@ -9,7 +9,7 @@ const fileSizeFormat = (num) => {
   exponent = Math.min(Math.floor(Math.log(num) / Math.log(1024)), units.length - 1)
   num = (num / Math.pow(1024, exponent)).toFixed(2) * 1
   unit = units[exponent]
-  return { num: num, unit: unit }
+  return {num: num, unit: unit}
 }
 const fileSizeFormatService = {
   fileSizeFormat
diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
index 786740b7..125ff3e1 100644
--- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js
+++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
@@ -8,7 +8,7 @@ const fetchAndUpdate = ({ store, credentials }) => {
     .catch(() => {})
 }
 
-const startFetching = ({ credentials, store }) => {
+const startFetching = ({credentials, store}) => {
   fetchAndUpdate({ credentials, store })
   const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
   return setInterval(boundFetchAndUpdate, 10000)
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index 6dddf37f..9e656507 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -1,6 +1,6 @@
-import { reduce } from 'lodash'
+import {reduce} from 'lodash'
 
-const getOrCreateApp = ({ oauth, instance }) => {
+const getOrCreateApp = ({oauth, instance}) => {
   const url = `${instance}/api/v1/apps`
   const form = new window.FormData()
 
@@ -40,7 +40,7 @@ const login = (args) => {
   })
 }
 
-const getTokenWithCredentials = ({ app, instance, username, password }) => {
+const getTokenWithCredentials = ({app, instance, username, password}) => {
   const url = `${instance}/oauth/token`
   const form = new window.FormData()
 
@@ -56,7 +56,7 @@ const getTokenWithCredentials = ({ app, instance, username, password }) => {
   }).then((data) => data.json())
 }
 
-const getToken = ({ app, instance, code }) => {
+const getToken = ({app, instance, code}) => {
   const url = `${instance}/oauth/token`
   const form = new window.FormData()
 
diff --git a/src/services/new_api/user_search.js b/src/services/new_api/user_search.js
index 5977f4e4..869afa9c 100644
--- a/src/services/new_api/user_search.js
+++ b/src/services/new_api/user_search.js
@@ -1,7 +1,7 @@
 import utils from './utils.js'
 import { parseUser } from '../entity_normalizer/entity_normalizer.service.js'
 
-const search = ({ query, store }) => {
+const search = ({query, store}) => {
   return utils.request({
     store,
     url: '/api/v1/accounts/search',
@@ -9,8 +9,8 @@ const search = ({ query, store }) => {
       q: query
     }
   })
-    .then((data) => data.json())
-    .then((data) => data.map(parseUser))
+  .then((data) => data.json())
+  .then((data) => data.map(parseUser))
 }
 const UserSearch = {
   search
diff --git a/src/services/new_api/utils.js b/src/services/new_api/utils.js
index 2c50f7be..078f392f 100644
--- a/src/services/new_api/utils.js
+++ b/src/services/new_api/utils.js
@@ -7,13 +7,13 @@ const queryParams = (params) => {
 const headers = (store) => {
   const accessToken = store.state.oauth.token
   if (accessToken) {
-    return { 'Authorization': `Bearer ${accessToken}` }
+    return {'Authorization': `Bearer ${accessToken}`}
   } else {
     return {}
   }
 }
 
-const request = ({ method = 'GET', url, params, store }) => {
+const request = ({method = 'GET', url, params, store}) => {
   const instance = store.state.instance.server
   let fullUrl = `${instance}${url}`
 
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 85459915..cd8f3f9e 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -33,4 +33,4 @@ export const visibleNotificationsFromStore = store => {
 }
 
 export const unseenNotificationsFromStore = store =>
-  filter(visibleNotificationsFromStore(store), ({ seen }) => !seen)
+  filter(visibleNotificationsFromStore(store), ({seen}) => !seen)
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 80a1ee5f..3ecdae6a 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -1,12 +1,12 @@
 import apiService from '../api/api.service.js'
 
-const update = ({ store, notifications, older }) => {
+const update = ({store, notifications, older}) => {
   store.dispatch('setNotificationsError', { value: false })
 
   store.dispatch('addNewNotifications', { notifications, older })
 }
 
-const fetchAndUpdate = ({ store, credentials, older = false }) => {
+const fetchAndUpdate = ({store, credentials, older = false}) => {
   const args = { credentials }
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.notifications
@@ -33,13 +33,13 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => {
 
   return apiService.fetchTimeline(args)
     .then((notifications) => {
-      update({ store, notifications, older })
+      update({store, notifications, older})
       return notifications
     }, () => store.dispatch('setNotificationsError', { value: true }))
     .catch(() => store.dispatch('setNotificationsError', { value: true }))
 }
 
-const startFetching = ({ credentials, store }) => {
+const startFetching = ({credentials, store}) => {
   fetchAndUpdate({ credentials, store })
   const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
   // Initially there's set flag to silence all desktop notifications so
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 908fd0eb..e70b0f26 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -4,7 +4,7 @@ import apiService from '../api/api.service.js'
 const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
   const mediaIds = map(media, 'id')
 
-  return apiService.postStatus({ credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType })
+  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType})
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9354c9f4..d0b6ccbf 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -238,12 +238,12 @@ const generateColors = (input) => {
   })
 
   const htmlColors = Object.entries(colors)
-    .reduce((acc, [k, v]) => {
-      if (!v) return acc
-      acc.solid[k] = rgb2hex(v)
-      acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
-      return acc
-    }, { complete: {}, solid: {} })
+        .reduce((acc, [k, v]) => {
+          if (!v) return acc
+          acc.solid[k] = rgb2hex(v)
+          acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
+          return acc
+        }, { complete: {}, solid: {} })
   return {
     rules: {
       colors: Object.entries(htmlColors.complete)
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index f72688f8..8e954cdf 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -2,7 +2,7 @@ import { camelCase } from 'lodash'
 
 import apiService from '../api/api.service.js'
 
-const update = ({ store, statuses, timeline, showImmediately, userId }) => {
+const update = ({store, statuses, timeline, showImmediately, userId}) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('setError', { value: false })
@@ -15,7 +15,7 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => {
   })
 }
 
-const fetchAndUpdate = ({ store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until }) => {
+const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until}) => {
   const args = { timeline, credentials }
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
@@ -40,17 +40,17 @@ const fetchAndUpdate = ({ store, credentials, timeline = 'friends', older = fals
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
         store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
       }
-      update({ store, statuses, timeline, showImmediately, userId })
+      update({store, statuses, timeline, showImmediately, userId})
       return statuses
     }, () => store.dispatch('setError', { value: true }))
 }
 
-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => {
+const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
+  fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
   const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
   return setInterval(boundFetchAndUpdate, 10000)
 }
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index b91c0f78..f6ddfb9c 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -1,7 +1,7 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
 const highlightStyle = (prefs) => {
   if (prefs === undefined) return
-  const { color, type } = prefs
+  const {color, type} = prefs
   if (typeof color !== 'string') return
   const rgb = hex2rgb(color)
   if (rgb == null) return
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index ba93138f..0bbcb25a 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -1,10 +1,10 @@
 import { defaultState, mutations, prepareStatus } from '../../../../src/modules/statuses.js'
 
 // eslint-disable-next-line camelcase
-const makeMockStatus = ({ id, text, type = 'status' }) => {
+const makeMockStatus = ({id, text, type = 'status'}) => {
   return {
     id,
-    user: { id: '0' },
+    user: {id: '0'},
     name: 'status',
     text: text || `Text number ${id}`,
     fave_num: 0,
@@ -17,7 +17,7 @@ const makeMockStatus = ({ id, text, type = 'status' }) => {
 describe('Statuses module', () => {
   describe('prepareStatus', () => {
     it('sets deleted flag to false', () => {
-      const aStatus = makeMockStatus({ id: '1', text: 'Hello oniichan' })
+      const aStatus = makeMockStatus({id: '1', text: 'Hello oniichan'})
       expect(prepareStatus(aStatus).deleted).to.eq(false)
     })
   })
@@ -25,7 +25,7 @@ describe('Statuses module', () => {
   describe('addNewStatuses', () => {
     it('adds the status to allStatuses and to the given timeline', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
+      const status = makeMockStatus({id: '1'})
 
       mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
 
@@ -37,7 +37,7 @@ describe('Statuses module', () => {
 
     it('counts the status as new if it has not been seen on this timeline', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
+      const status = makeMockStatus({id: '1'})
 
       mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
       mutations.addNewStatuses(state, { statuses: [status], timeline: 'friends' })
@@ -55,7 +55,7 @@ describe('Statuses module', () => {
 
     it('add the statuses to allStatuses if no timeline is given', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
+      const status = makeMockStatus({id: '1'})
 
       mutations.addNewStatuses(state, { statuses: [status] })
 
@@ -67,7 +67,7 @@ describe('Statuses module', () => {
 
     it('adds the status to allStatuses and to the given timeline, directly visible', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
+      const status = makeMockStatus({id: '1'})
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
 
@@ -79,10 +79,10 @@ describe('Statuses module', () => {
 
     it('removes statuses by tag on deletion', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const otherStatus = makeMockStatus({ id: '3' })
+      const status = makeMockStatus({id: '1'})
+      const otherStatus = makeMockStatus({id: '3'})
       status.uri = 'xxx'
-      const deletion = makeMockStatus({ id: '2', type: 'deletion' })
+      const deletion = makeMockStatus({id: '2', type: 'deletion'})
       deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
       deletion.uri = 'xxx'
 
@@ -97,8 +97,8 @@ describe('Statuses module', () => {
 
     it('does not update the maxId when the noIdUpdate flag is set', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const secondStatus = makeMockStatus({ id: '2' })
+      const status = makeMockStatus({id: '1'})
+      const secondStatus = makeMockStatus({id: '2'})
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
       expect(state.timelines.public.maxId).to.eql('1')
@@ -111,10 +111,10 @@ describe('Statuses module', () => {
 
     it('keeps a descending by id order in timeline.visibleStatuses and timeline.statuses', () => {
       const state = defaultState()
-      const nonVisibleStatus = makeMockStatus({ id: '1' })
-      const status = makeMockStatus({ id: '3' })
-      const statusTwo = makeMockStatus({ id: '2' })
-      const statusThree = makeMockStatus({ id: '4' })
+      const nonVisibleStatus = makeMockStatus({id: '1'})
+      const status = makeMockStatus({id: '3'})
+      const statusTwo = makeMockStatus({id: '2'})
+      const statusThree = makeMockStatus({id: '4'})
 
       mutations.addNewStatuses(state, { statuses: [nonVisibleStatus], showImmediately: false, timeline: 'public' })
 
@@ -131,9 +131,9 @@ describe('Statuses module', () => {
 
     it('splits retweets from their status and links them', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const retweet = makeMockStatus({ id: '2', type: 'retweet' })
-      const modStatus = makeMockStatus({ id: '1', text: 'something else' })
+      const status = makeMockStatus({id: '1'})
+      const retweet = makeMockStatus({id: '2', type: 'retweet'})
+      const modStatus = makeMockStatus({id: '1', text: 'something else'})
 
       retweet.retweeted_status = status
 
@@ -156,8 +156,8 @@ describe('Statuses module', () => {
 
     it('replaces existing statuses with the same id', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const modStatus = makeMockStatus({ id: '1', text: 'something else' })
+      const status = makeMockStatus({id: '1'})
+      const modStatus = makeMockStatus({id: '1', text: 'something else'})
 
       // Add original status
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
@@ -173,9 +173,9 @@ describe('Statuses module', () => {
 
     it('replaces existing statuses with the same id, coming from a retweet', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const modStatus = makeMockStatus({ id: '1', text: 'something else' })
-      const retweet = makeMockStatus({ id: '2', type: 'retweet' })
+      const status = makeMockStatus({id: '1'})
+      const modStatus = makeMockStatus({id: '1', text: 'something else'})
+      const retweet = makeMockStatus({id: '2', type: 'retweet'})
       retweet.retweeted_status = modStatus
 
       // Add original status
@@ -194,7 +194,7 @@ describe('Statuses module', () => {
 
     it('handles favorite actions', () => {
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
+      const status = makeMockStatus({id: '1'})
 
       const favorite = {
         id: '2',
@@ -272,14 +272,14 @@ describe('Statuses module', () => {
     it('removes a notification when the notice gets removed', () => {
       const user = { id: '1' }
       const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const otherStatus = makeMockStatus({ id: '3' })
-      const mentionedStatus = makeMockStatus({ id: '2' })
+      const status = makeMockStatus({id: '1'})
+      const otherStatus = makeMockStatus({id: '3'})
+      const mentionedStatus = makeMockStatus({id: '2'})
       mentionedStatus.attentions = [user]
       mentionedStatus.uri = 'xxx'
       otherStatus.attentions = [user]
 
-      const deletion = makeMockStatus({ id: '4', type: 'deletion' })
+      const deletion = makeMockStatus({id: '4', type: 'deletion'})
       deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
       deletion.uri = 'xxx'
 
diff --git a/test/unit/specs/modules/users.spec.js b/test/unit/specs/modules/users.spec.js
index eeb7afef..c8bc0ae7 100644
--- a/test/unit/specs/modules/users.spec.js
+++ b/test/unit/specs/modules/users.spec.js
@@ -24,11 +24,11 @@ describe('The users module', () => {
       const user = { id: '1', name: 'Guy' }
 
       mutations.addNewUsers(state, [user])
-      mutations.setMuted(state, { user, muted: true })
+      mutations.setMuted(state, {user, muted: true})
 
       expect(user.muted).to.eql(true)
 
-      mutations.setMuted(state, { user, muted: false })
+      mutations.setMuted(state, {user, muted: false})
 
       expect(user.muted).to.eql(false)
     })
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index e0e63fd9..2b0b0d6d 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -160,6 +160,12 @@ const makeMockEmojiMasto = (overrides = [{}]) => {
   ]
 }
 
+parseNotification
+parseUser
+parseStatus
+makeMockStatusQvitter
+makeMockUserQvitter
+
 describe('API Entities normalizer', () => {
   describe('parseStatus', () => {
     describe('QVitter preprocessing', () => {
@@ -197,15 +203,15 @@ describe('API Entities normalizer', () => {
       })
 
       it('sets nsfw for statuses with the #nsfw tag', () => {
-        const safe = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan' })
-        const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw' })
+        const safe = makeMockStatusQvitter({id: '1', text: 'Hello oniichan'})
+        const nsfw = makeMockStatusQvitter({id: '1', text: 'Hello oniichan #nsfw'})
 
         expect(parseStatus(safe).nsfw).to.eq(false)
         expect(parseStatus(nsfw).nsfw).to.eq(true)
       })
 
       it('leaves existing nsfw settings alone', () => {
-        const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw', nsfw: false })
+        const nsfw = makeMockStatusQvitter({id: '1', text: 'Hello oniichan #nsfw', nsfw: false})
 
         expect(parseStatus(nsfw).nsfw).to.eq(false)
       })
@@ -314,9 +320,9 @@ describe('API Entities normalizer', () => {
   describe('MastoAPI emoji adder', () => {
     const emojis = makeMockEmojiMasto()
     const imageHtml = '<img src="https://example.com/image.png" alt="image" class="emoji" />'
-      .replace(/"/g, '\'')
+          .replace(/"/g, '\'')
     const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" class="emoji" />'
-      .replace(/"/g, '\'')
+          .replace(/"/g, '\'')
 
     it('correctly replaces shortcodes in supplied string', () => {
       const result = addEmojis('This post has :image: emoji and :thinking: emoji', emojis)
diff --git a/test/unit/specs/services/file_size_format/file_size_format.spec.js b/test/unit/specs/services/file_size_format/file_size_format.spec.js
index e02ac379..0a5a82b7 100644
--- a/test/unit/specs/services/file_size_format/file_size_format.spec.js
+++ b/test/unit/specs/services/file_size_format/file_size_format.spec.js
@@ -1,34 +1,34 @@
-import fileSizeFormatService from '../../../../../src/services/file_size_format/file_size_format.js'
-describe('fileSizeFormat', () => {
-  it('Formats file size', () => {
-    const values = [1, 1024, 1048576, 1073741824, 1099511627776]
-    const expected = [
-      {
-        num: 1,
-        unit: 'B'
-      },
-      {
-        num: 1,
-        unit: 'KiB'
-      },
-      {
-        num: 1,
-        unit: 'MiB'
-      },
-      {
-        num: 1,
-        unit: 'GiB'
-      },
-      {
-        num: 1,
-        unit: 'TiB'
-      }
-    ]
+ import fileSizeFormatService from '../../../../../src/services/file_size_format/file_size_format.js'
+ describe('fileSizeFormat', () => {
+   it('Formats file size', () => {
+     const values = [1, 1024, 1048576, 1073741824, 1099511627776]
+     const expected = [
+       {
+         num: 1,
+         unit: 'B'
+       },
+       {
+         num: 1,
+         unit: 'KiB'
+       },
+       {
+         num: 1,
+         unit: 'MiB'
+       },
+       {
+         num: 1,
+         unit: 'GiB'
+       },
+       {
+         num: 1,
+         unit: 'TiB'
+       }
+     ]
 
-    var res = []
-    for (var value in values) {
-      res.push(fileSizeFormatService.fileSizeFormat(values[value]))
-    }
-    expect(res).to.eql(expected)
-  })
-})
+     var res = []
+     for (var value in values) {
+       res.push(fileSizeFormatService.fileSizeFormat(values[value]))
+     }
+     expect(res).to.eql(expected)
+   })
+ })
diff --git a/test/unit/specs/services/status_parser/status_parses.spec.js b/test/unit/specs/services/status_parser/status_parses.spec.js
index 7afd5042..65808d84 100644
--- a/test/unit/specs/services/status_parser/status_parses.spec.js
+++ b/test/unit/specs/services/status_parser/status_parses.spec.js
@@ -1,7 +1,7 @@
-import { removeAttachmentLinks } from '../../../../../src/services/status_parser/status_parser.js'
-
 const example = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> <a href="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" title="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" class="attachment" id="attachment-159853" rel="nofollow external">https://social.heldscal.la/attachment/159853</a></div>'
 
+import { removeAttachmentLinks } from '../../../../../src/services/status_parser/status_parser.js'
+
 describe('statusParser.removeAttachmentLinks', () => {
   const exampleWithoutAttachmentLinks = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> </div>'
 
diff --git a/yarn.lock b/yarn.lock
index c3626593..7ec0384d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2818,13 +2818,6 @@ eslint-plugin-es@^1.3.1:
     eslint-utils "^1.3.0"
     regexpp "^2.0.1"
 
-eslint-plugin-html@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-5.0.3.tgz#3db133995e49a73596f6a473c16a1b83634deffd"
-  integrity sha512-46ruAnp3jVQP/5Bi5eEIOooscjUTPFU3vxCxHe/OG6ORdM7Xv5c25/Nz9fAbHklzCpiXuIiH4/mV/XBkm7MINw==
-  dependencies:
-    htmlparser2 "^3.10.0"
-
 eslint-plugin-import@^2.13.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.16.0.tgz#97ac3e75d0791c4fac0e15ef388510217be7f66f"
-- 
cgit v1.2.3-70-g09d2


From 77db9c5c698189d8d33685f553c1b0769fa3da9a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 10 Apr 2019 22:36:37 +0300
Subject: karma stuff, still broken tho

---
 package.json            |   8 +-
 test/unit/karma.conf.js |   2 +-
 yarn.lock               | 474 ++++++++++++++++++++++--------------------------
 3 files changed, 219 insertions(+), 265 deletions(-)

(limited to 'test')

diff --git a/package.json b/package.json
index a9024d7e..b226b292 100644
--- a/package.json
+++ b/package.json
@@ -76,14 +76,14 @@
     "iso-639-1": "^2.0.3",
     "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
+    "karma": "^3.0.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.2.0",
     "karma-phantomjs-launcher": "^1.0.0",
-    "karma-sinon-chai": "^1.2.0",
+    "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "git://github.com/webpack-contrib/karma-webpack.git#v4.0.0-rc.3",
+    "karma-webpack": "^4.0.0-rc.3",
     "lodash": "^4.16.4",
     "lolex": "^1.4.0",
     "mini-css-extract-plugin": "^0.5.0",
@@ -99,7 +99,7 @@
     "semver": "^5.3.0",
     "serviceworker-webpack-plugin": "^1.0.0",
     "shelljs": "^0.7.4",
-    "sinon": "^1.17.3",
+    "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "url-loader": "^1.1.2",
     "vue-loader": "^14.0.0",
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index d19a2229..8b4145e2 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -13,7 +13,7 @@ var projectRoot = path.resolve(__dirname, '../../')
 var webpackConfig = merge(baseConfig, {
   // use inline sourcemap for karma-sourcemap-loader
   module: {
-    loaders: utils.styleLoaders()
+    rules: utils.styleLoaders()
   },
   devtool: '#inline-source-map',
   // vue: {
diff --git a/yarn.lock b/yarn.lock
index 7ec0384d..7c9411d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -221,15 +221,7 @@ abbrev@1.0.x:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
   integrity sha1-kbR5JYinc4wl813W9jdSovh3YTU=
 
-accepts@1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
-  integrity sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=
-  dependencies:
-    mime-types "~2.1.11"
-    negotiator "0.6.1"
-
-accepts@~1.3.5:
+accepts@~1.3.4, accepts@~1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
   integrity sha1-63d99gEXI6OxTopywIBcjoZ0a9I=
@@ -342,14 +334,6 @@ ansi-styles@~1.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
   integrity sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg=
 
-anymatch@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
-  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
-  dependencies:
-    micromatch "^2.1.5"
-    normalize-path "^2.0.0"
-
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -437,10 +421,10 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
-arraybuffer.slice@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
-  integrity sha1-8zshWfBTKj8xB6JywMz70a0peco=
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+  integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
 
 asn1.js@^4.0.0:
   version "4.10.1"
@@ -495,11 +479,16 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
-async-each@^1.0.0, async-each@^1.0.1:
+async-each@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.2.tgz#8b8a7ca2a658f927e9f307d6d1a42f4199f0f735"
   integrity sha512-6xrbvN0MOBKSJDdonmSSz2OwFSgxRaVtBDes26mj9KIGtDo+g9xosFRSC+i1gQh2oAN/tQ62AI/pGZGQjVOiRg==
 
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
+
 async@1.x:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -1319,10 +1308,10 @@ binary-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.0.tgz#9523e001306a32444b907423f1de2164222f6ab1"
   integrity sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==
 
-blob@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
-  integrity sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=
+blob@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
+  integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
 
 bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.5.3:
   version "3.5.3"
@@ -1669,23 +1658,7 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chokidar@^1.4.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
-  integrity sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=
-  dependencies:
-    anymatch "^1.3.0"
-    async-each "^1.0.0"
-    glob-parent "^2.0.0"
-    inherits "^2.0.1"
-    is-binary-path "^1.0.0"
-    is-glob "^2.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
-  optionalDependencies:
-    fsevents "^1.0.0"
-
-chokidar@^2.0.0, chokidar@^2.0.2:
+chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.5.tgz#0ae8434d962281a5f56c72869e79cb6d9d86ad4d"
   integrity sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==
@@ -1740,6 +1713,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+circular-json@^0.5.5:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.5.9.tgz#932763ae88f4f7dead7a0d09c8a51a4743a53b1d"
+  integrity sha512-4ivwqHpIFJZBuhN3g/pEcdbnGUywkBblloGbkglyloVjjR3uT6tieI89MVOfbP2tHX5sgb01FuLgAOzebNlJNQ==
+
 clap@^1.0.9:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
@@ -1925,11 +1903,6 @@ component-bind@1.0.0:
   resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
   integrity sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=
 
-component-emitter@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.1.2.tgz#296594f2753daa63996d2af08d15a95116c9aec3"
-  integrity sha1-KWWU8nU9qmOZbSrwjRWpURbJrsM=
-
 component-emitter@1.2.1, component-emitter@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
@@ -2269,6 +2242,11 @@ data-uri-to-buffer@2:
   dependencies:
     "@types/node" "^8.0.7"
 
+date-format@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/date-format/-/date-format-1.2.0.tgz#615e828e233dd1ab9bb9ae0950e0ceccfa6ecad8"
+  integrity sha1-YV6CjiM90aubua4JUODOzPpuytg=
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -2301,13 +2279,6 @@ debug@2.2.0:
   dependencies:
     ms "0.7.1"
 
-debug@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.3.3.tgz#40c453e67e6e13c901ddec317af8986cda9eff8c"
-  integrity sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=
-  dependencies:
-    ms "0.7.2"
-
 debug@2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
@@ -2329,13 +2300,20 @@ debug@4.1.0:
   dependencies:
     ms "^2.1.1"
 
-debug@^3.2.6:
+debug@^3.1.0, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
   dependencies:
     ms "^2.1.1"
 
+debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -2473,7 +2451,7 @@ diff@3.2.0:
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
   integrity sha1-yc45Okt8vQsFinJck98pkCeGj/k=
 
-diff@^3.0.1:
+diff@^3.0.1, diff@^3.1.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
@@ -2633,47 +2611,45 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-engine.io-client@1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.8.3.tgz#1798ed93451246453d4c6f635d7a201fe940d5ab"
-  integrity sha1-F5jtk0USRkU9TG9jXXogH+lA1as=
+engine.io-client@~3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.2.1.tgz#6f54c0475de487158a1a7c77d10178708b6add36"
+  integrity sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==
   dependencies:
     component-emitter "1.2.1"
     component-inherit "0.0.3"
-    debug "2.3.3"
-    engine.io-parser "1.3.2"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.1"
     has-cors "1.1.0"
     indexof "0.0.1"
-    parsejson "0.0.3"
     parseqs "0.0.5"
     parseuri "0.0.5"
-    ws "1.1.2"
-    xmlhttprequest-ssl "1.5.3"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
     yeast "0.1.2"
 
-engine.io-parser@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.3.2.tgz#937b079f0007d0893ec56d46cb220b8cb435220a"
-  integrity sha1-k3sHnwAH0Ik+xW1GyyILjLQ1Igo=
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.3.tgz#757ab970fbf2dfb32c7b74b033216d5739ef79a6"
+  integrity sha512-6HXPre2O4Houl7c4g7Ic/XzPnHBvaEmN90vtRO9uLmwtRqQmTOw0QMevL1TOfL2Cpu1VzsaTmMotQgMdkzGkVA==
   dependencies:
     after "0.8.2"
-    arraybuffer.slice "0.0.6"
+    arraybuffer.slice "~0.0.7"
     base64-arraybuffer "0.1.5"
-    blob "0.0.4"
-    has-binary "0.1.7"
-    wtf-8 "1.0.0"
+    blob "0.0.5"
+    has-binary2 "~1.0.2"
 
-engine.io@1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.8.3.tgz#8de7f97895d20d39b85f88eeee777b2bd42b13d4"
-  integrity sha1-jef5eJXSDTm4X4ju7nd7K9QrE9Q=
+engine.io@~3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.2.1.tgz#b60281c35484a70ee0351ea0ebff83ec8c9522a2"
+  integrity sha512-+VlKzHzMhaU+GsCIg4AoXF1UdDFjHHwMmMKqMJNDNLlUlejz58FCy4LBqB2YVJskHGYl06BatYWKP2TVdVXE5w==
   dependencies:
-    accepts "1.3.3"
+    accepts "~1.3.4"
     base64id "1.0.0"
     cookie "0.3.1"
-    debug "2.3.3"
-    engine.io-parser "1.3.2"
-    ws "1.1.2"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
 
 enhanced-resolve@^4.1.0:
   version "4.1.0"
@@ -3388,12 +3364,12 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-formatio@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/formatio/-/formatio-1.1.1.tgz#5ed3ccd636551097383465d996199100e86161e9"
-  integrity sha1-XtPM1jZVEJc4NGXZlhmRAOhhYek=
+formatio@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/formatio/-/formatio-1.2.0.tgz#f3b2167d9068c4698a8d51f4f760a39a54d818eb"
+  integrity sha1-87IWfZBoxGmKjVH092CjmlTYGOs=
   dependencies:
-    samsam "~1.1"
+    samsam "1.x"
 
 forwarded@~0.1.2:
   version "0.1.2"
@@ -3451,7 +3427,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.0.0, fsevents@^1.2.7:
+fsevents@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4"
   integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==
@@ -3657,12 +3633,12 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-has-binary@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c"
-  integrity sha1-aOYesWIQyVRaClzOBqhzkS/h5ow=
+has-binary2@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
+  integrity sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==
   dependencies:
-    isarray "0.0.1"
+    isarray "2.0.1"
 
 has-color@~0.1.0:
   version "0.1.7"
@@ -4358,6 +4334,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
+  integrity sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=
+
 isbinaryfile@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.3.tgz#5d6def3edebf6e8ca8cae9c30183a804b5f8be80"
@@ -4587,12 +4568,10 @@ karma-phantomjs-launcher@^1.0.0:
     lodash "^4.0.1"
     phantomjs-prebuilt "^2.1.7"
 
-karma-sinon-chai@^1.2.0:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-1.3.4.tgz#56c82674a5618ee9a4063cfbd57fc01da37f1495"
-  integrity sha512-Oatu8tdkfWaSveM809euI6KGcNJRdoXFilz9ozSf+vPwrM73kncu54nsfkLcMqR/iht3PXASAGK9La5oU2xDKQ==
-  dependencies:
-    lolex "^1.6.0"
+karma-sinon-chai@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-2.0.2.tgz#e28c109b989973abafc28a7c9f09ef24a05e07c2"
+  integrity sha512-SDgh6V0CUd+7ruL1d3yG6lFzmJNGRNQuEuCYXLaorruNP9nwQfA7hpsp4clx4CbOo5Gsajh3qUOT7CrVStUKMw==
 
 karma-sourcemap-loader@^0.3.7:
   version "0.3.7"
@@ -4608,24 +4587,24 @@ karma-spec-reporter@0.0.26:
   dependencies:
     colors "~0.6.0"
 
-"karma-webpack@git://github.com/webpack-contrib/karma-webpack.git#v4.0.0-rc.3":
-  version "4.0.0-rc.3"
-  resolved "git://github.com/webpack-contrib/karma-webpack.git#768ed166c4b1ff72a14cdcdc3b543c63f55b4517"
+karma-webpack@^4.0.0-rc.3:
+  version "4.0.0-rc.6"
+  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-4.0.0-rc.6.tgz#02ac6a47c7fc166c8b208446069a424698082405"
+  integrity sha512-fN3EfHc10bZxP7dqgsaIFdmkynABFsgMxqgVZJYqxzt0CDBH6j1LbHrMilnijnDYZ8fZDLtx/OKWshXiYyhIig==
   dependencies:
     async "^2.0.0"
     loader-utils "^1.1.0"
-    lodash "^4.17.10"
     source-map "^0.5.6"
     webpack-dev-middleware "^3.2.0"
 
-karma@^1.3.0:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.1.tgz#85cc08e9e0a22d7ce9cca37c4a1be824f6a2b1ae"
-  integrity sha512-k5pBjHDhmkdaUccnC7gE3mBzZjcxyxYsYVaqiL2G5AqlfLyBO5nw2VdNK+O16cveEPd/gIOWULH7gkiYYwVNHg==
+karma@^3.0.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-3.1.4.tgz#3890ca9722b10d1d14b726e1335931455788499e"
+  integrity sha512-31Vo8Qr5glN+dZEVIpnPCxEGleqE0EY6CtC2X9TagRV3rRQ3SNrvfhddICkJgUK3AgqpeKSZau03QumTGhGoSw==
   dependencies:
     bluebird "^3.3.0"
     body-parser "^1.16.1"
-    chokidar "^1.4.1"
+    chokidar "^2.0.3"
     colors "^1.1.0"
     combine-lists "^1.0.0"
     connect "^3.6.0"
@@ -4633,23 +4612,24 @@ karma@^1.3.0:
     di "^0.0.1"
     dom-serialize "^2.2.0"
     expand-braces "^0.1.1"
+    flatted "^2.0.0"
     glob "^7.1.1"
     graceful-fs "^4.1.2"
     http-proxy "^1.13.0"
     isbinaryfile "^3.0.0"
-    lodash "^3.8.0"
-    log4js "^0.6.31"
-    mime "^1.3.4"
+    lodash "^4.17.5"
+    log4js "^3.0.0"
+    mime "^2.3.1"
     minimatch "^3.0.2"
     optimist "^0.6.1"
     qjobs "^1.1.4"
     range-parser "^1.2.0"
     rimraf "^2.6.0"
     safe-buffer "^5.0.1"
-    socket.io "1.7.3"
-    source-map "^0.5.3"
-    tmp "0.0.31"
-    useragent "^2.1.12"
+    socket.io "2.1.1"
+    source-map "^0.6.1"
+    tmp "0.0.33"
+    useragent "2.3.0"
 
 kew@^0.7.0:
   version "0.7.0"
@@ -5073,12 +5053,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^3.8.0:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
-  integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
-
-lodash@^4.0.1, lodash@^4.16.4, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.5.0:
+lodash@^4.0.1, lodash@^4.16.4, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.5.0:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -5097,18 +5072,16 @@ log-symbols@^2.1.0:
   dependencies:
     chalk "^2.0.1"
 
-log4js@^0.6.31:
-  version "0.6.38"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
-  integrity sha1-LElBFmldb7JUgJQ9P8hy5mKlIv0=
+log4js@^3.0.0:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-3.0.6.tgz#e6caced94967eeeb9ce399f9f8682a4b2b28c8ff"
+  integrity sha512-ezXZk6oPJCWL483zj64pNkMuY/NcRX5MPiB0zE6tjZM137aeusrOnW1ecxgF9cmwMWkBMhjteQxBPoZBh9FDxQ==
   dependencies:
-    readable-stream "~1.0.2"
-    semver "~4.3.3"
-
-lolex@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.3.2.tgz#7c3da62ffcb30f0f5a80a2566ca24e45d8a01f31"
-  integrity sha1-fD2mL/yzDw9agKJWbKJORdigHzE=
+    circular-json "^0.5.5"
+    date-format "^1.2.0"
+    debug "^3.1.0"
+    rfdc "^1.1.2"
+    streamroller "0.7.0"
 
 lolex@^1.4.0, lolex@^1.6.0:
   version "1.6.0"
@@ -5250,7 +5223,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@^2.1.5, micromatch@^2.3.11:
+micromatch@^2.3.11:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
   integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=
@@ -5301,7 +5274,7 @@ mime-db@~1.38.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.38.0.tgz#1a2aab16da9eb167b49c6e4df2d9c68d63d8e2ad"
   integrity sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==
 
-mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.18, mime-types@~2.1.19:
+mime-types@^2.1.12, mime-types@~2.1.18, mime-types@~2.1.19:
   version "2.1.22"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.22.tgz#fe6b355a190926ab7698c9a0556a11199b2199bd"
   integrity sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==
@@ -5313,11 +5286,6 @@ mime@1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
   integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
 
-mime@^1.3.4:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
 mime@^2.0.3:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.1.tgz#19eb7357bebbda37df585b14038347721558c715"
@@ -5484,11 +5452,6 @@ ms@0.7.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
   integrity sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=
 
-ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
-  integrity sha1-riXPJRKziFodldfwN4aNhDESR2U=
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -5526,6 +5489,11 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+native-promise-only@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/native-promise-only/-/native-promise-only-0.8.1.tgz#20a318c30cb45f71fe7adfbf7b21c99c1472ef11"
+  integrity sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE=
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -5661,7 +5629,7 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
+normalize-path@^2.0.1, normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
   integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
@@ -5733,11 +5701,6 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
-object-assign@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
-  integrity sha1-ejs9DpgGPUP0wD8uiubNUahog6A=
-
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -5856,11 +5819,6 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.0"
 
-options@>=0.0.5:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
-  integrity sha1-7CLTEoBrtT5zF3Pnza788cZDEo8=
-
 ora@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/ora/-/ora-0.3.0.tgz#367a078ad25cfb096da501115eb5b401e07d7495"
@@ -5881,7 +5839,7 @@ os-homedir@^1.0.0, os-homedir@^1.0.1:
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
   integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
-os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
@@ -6020,13 +5978,6 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
-parsejson@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab"
-  integrity sha1-q343WfIJ7OmUN5c/fQ8fZK4OZKs=
-  dependencies:
-    better-assert "~1.0.0"
-
 parseqs@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -6098,6 +6049,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -6795,7 +6753,7 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
@@ -6827,17 +6785,7 @@ readable-stream@3, readable-stream@^3.1.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@~1.0.2:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readdirp@^2.0.0, readdirp@^2.2.1:
+readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
   integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
@@ -7085,6 +7033,11 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+rfdc@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.1.2.tgz#e6e72d74f5dc39de8f538f65e00c36c18018e349"
+  integrity sha512-92ktAgvZhBzYTIK0Mja9uen5q5J3NRVMoDkJL2VMwq6SXjVCgqvQeVP2XAaUY6HT+XpQYeLSjb3UoitBryKmdA==
+
 rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1, rimraf@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -7138,15 +7091,10 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-samsam@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.2.tgz#bec11fdc83a9fda063401210e40176c3024d1567"
-  integrity sha1-vsEf3IOp/aBjQBIQ5AF2wwJNFWc=
-
-samsam@~1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.3.tgz#9f5087419b4d091f232571e7fa52e90b0f552621"
-  integrity sha1-n1CHQZtNCR8jJXHn+lLpCw9VJiE=
+samsam@1.x, samsam@^1.1.3:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.3.0.tgz#8d1d9350e25622da30de3e44ba692b5221ab7c50"
+  integrity sha512-1HwIYD/8UlOtFS3QO3w7ey+SdSDFE4HRNLZoZRYVQefrOY3l17epswImeB1ijgJFQJodIaHcwkp3r/myBjFVbg==
 
 sanitize-html@^1.13.0:
   version "1.20.0"
@@ -7211,11 +7159,6 @@ semver@^5.5.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
   integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
 
-semver@~4.3.3:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
-  integrity sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=
-
 semver@~5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
@@ -7343,15 +7286,19 @@ sinon-chai@^2.8.0:
   resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-2.14.0.tgz#da7dd4cc83cd6a260b67cca0f7a9fdae26a1205d"
   integrity sha512-9stIF1utB0ywNHNT7RgiXbdmen8QDCRsrTjw+G9TgKt1Yexjiv8TOWZ6WHsTPz57Yky3DIswZvEqX8fpuHNDtQ==
 
-sinon@^1.17.3:
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-1.17.7.tgz#4542a4f49ba0c45c05eb2e9dd9d203e2b8efe0bf"
-  integrity sha1-RUKk9JugxFwF6y6d2dID4rjv4L8=
+sinon@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-2.4.1.tgz#021fd64b54cb77d9d2fb0d43cdedfae7629c3a36"
+  integrity sha512-vFTrO9Wt0ECffDYIPSP/E5bBugt0UjcBQOfQUMh66xzkyPEnhl/vM2LRZi2ajuTdkH07sA6DzrM6KvdvGIH8xw==
   dependencies:
-    formatio "1.1.1"
-    lolex "1.3.2"
-    samsam "1.1.2"
-    util ">=0.10.3 <1"
+    diff "^3.1.0"
+    formatio "1.2.0"
+    lolex "^1.6.0"
+    native-promise-only "^0.8.1"
+    path-to-regexp "^1.7.0"
+    samsam "^1.1.3"
+    text-encoding "0.6.4"
+    type-detect "^4.0.0"
 
 slash@^1.0.0:
   version "1.0.0"
@@ -7402,53 +7349,51 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-socket.io-adapter@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz#cb6d4bb8bec81e1078b99677f9ced0046066bb8b"
-  integrity sha1-y21LuL7IHhB4uZZ3+c7QBGBmu4s=
-  dependencies:
-    debug "2.3.3"
-    socket.io-parser "2.3.1"
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+  integrity sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs=
 
-socket.io-client@1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.7.3.tgz#b30e86aa10d5ef3546601c09cde4765e381da377"
-  integrity sha1-sw6GqhDV7zVGYBwJzeR2Xjgdo3c=
+socket.io-client@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.1.1.tgz#dcb38103436ab4578ddb026638ae2f21b623671f"
+  integrity sha512-jxnFyhAuFxYfjqIgduQlhzqTcOEQSn+OHKVfAxWaNWa7ecP7xSNk2Dx/3UEsDcY7NcFafxvNvKPmmO7HTwTxGQ==
   dependencies:
     backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
     component-bind "1.0.0"
     component-emitter "1.2.1"
-    debug "2.3.3"
-    engine.io-client "1.8.3"
-    has-binary "0.1.7"
+    debug "~3.1.0"
+    engine.io-client "~3.2.0"
+    has-binary2 "~1.0.2"
+    has-cors "1.1.0"
     indexof "0.0.1"
     object-component "0.0.3"
+    parseqs "0.0.5"
     parseuri "0.0.5"
-    socket.io-parser "2.3.1"
+    socket.io-parser "~3.2.0"
     to-array "0.1.4"
 
-socket.io-parser@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.3.1.tgz#dd532025103ce429697326befd64005fcfe5b4a0"
-  integrity sha1-3VMgJRA85Clpcya+/WQAX8/ltKA=
+socket.io-parser@~3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.2.0.tgz#e7c6228b6aa1f814e6148aea325b51aa9499e077"
+  integrity sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==
   dependencies:
-    component-emitter "1.1.2"
-    debug "2.2.0"
-    isarray "0.0.1"
-    json3 "3.3.2"
+    component-emitter "1.2.1"
+    debug "~3.1.0"
+    isarray "2.0.1"
 
-socket.io@1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.7.3.tgz#b8af9caba00949e568e369f1327ea9be9ea2461b"
-  integrity sha1-uK+cq6AJSeVo42nxMn6pvp6iRhs=
+socket.io@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.1.1.tgz#a069c5feabee3e6b214a75b40ce0652e1cfb9980"
+  integrity sha512-rORqq9c+7W0DAK3cleWNSyfv/qKXV99hV4tZe+gGLfBECw3XEhBy7x85F3wypA9688LKjtwO9pX9L33/xQI8yA==
   dependencies:
-    debug "2.3.3"
-    engine.io "1.8.3"
-    has-binary "0.1.7"
-    object-assign "4.1.0"
-    socket.io-adapter "0.5.0"
-    socket.io-client "1.7.3"
-    socket.io-parser "2.3.1"
+    debug "~3.1.0"
+    engine.io "~3.2.0"
+    has-binary2 "~1.0.2"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.1.1"
+    socket.io-parser "~3.2.0"
 
 socks-proxy-agent@2:
   version "2.1.1"
@@ -7650,6 +7595,16 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
+streamroller@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-0.7.0.tgz#a1d1b7cf83d39afb0d63049a5acbf93493bdf64b"
+  integrity sha512-WREzfy0r0zUqp3lGO096wRuUp7ho1X6uo/7DJfTlEi0Iv/4gT7YHqXDjKC2ioVGBZtE8QzsQD9nx1nIuoZ57jQ==
+  dependencies:
+    date-format "^1.2.0"
+    debug "^3.1.0"
+    mkdirp "^0.5.1"
+    readable-stream "^2.3.0"
+
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -7855,6 +7810,11 @@ terser@^3.16.1:
     source-map "~0.6.1"
     source-map-support "~0.5.10"
 
+text-encoding@0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"
+  integrity sha1-45mpgiV6J22uQou5KEXLcb3CbRk=
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -7890,14 +7850,7 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-tmp@0.0.31:
-  version "0.0.31"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
-  integrity sha1-jzirlDjhcxXl29izZX6L+yd65Kc=
-  dependencies:
-    os-tmpdir "~1.0.1"
-
-tmp@0.0.x, tmp@^0.0.33:
+tmp@0.0.33, tmp@0.0.x, tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
   integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
@@ -8011,6 +7964,11 @@ type-detect@^1.0.0:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-1.0.0.tgz#762217cc06db258ec48908a1298e8b95121e8ea2"
   integrity sha1-diIXzAbbJY7EiQihKY6LlRIejqI=
 
+type-detect@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-is@~1.6.16:
   version "1.6.16"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
@@ -8040,10 +7998,10 @@ uglify-js@^3.1.4:
     commander "~2.19.0"
     source-map "~0.6.1"
 
-ultron@1.0.x:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
-  integrity sha1-rOEWq1V80Zc4ak6I9GhTeMiy5Po=
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+  integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
 
 underscore@~1.6.0:
   version "1.6.0"
@@ -8141,7 +8099,7 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-useragent@^2.1.12:
+useragent@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.3.0.tgz#217f943ad540cb2128658ab23fc960f6a88c9972"
   integrity sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==
@@ -8169,7 +8127,7 @@ util@0.10.3:
   dependencies:
     inherits "2.0.1"
 
-"util@>=0.10.3 <1", util@^0.11.0:
+util@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
   integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
@@ -8482,23 +8440,19 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"
-  integrity sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  integrity sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==
   dependencies:
-    options ">=0.0.5"
-    ultron "1.0.x"
-
-wtf-8@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"
-  integrity sha1-OS2LotDxw00e4tYw8V0O+2jhBIo=
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
 
-xmlhttprequest-ssl@1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"
-  integrity sha1-GFqIjATspGw+QHDZn3tJ3jUomS0=
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+  integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
 
 xregexp@2.0.0:
   version "2.0.0"
-- 
cgit v1.2.3-70-g09d2


From fd171da0dc6ee8404278ba4083a28cc01d724040 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 13 Apr 2019 18:28:50 +0300
Subject: attempt at making it work

---
 src/i18n/compare                                   | 49 ++++++++++++++++++++++
 src/i18n/compare.js                                | 49 ----------------------
 test/unit/index.js                                 |  4 +-
 .../gesture_service/gesture_service.spec.js        |  2 +-
 4 files changed, 52 insertions(+), 52 deletions(-)
 create mode 100755 src/i18n/compare
 delete mode 100755 src/i18n/compare.js

(limited to 'test')

diff --git a/src/i18n/compare b/src/i18n/compare
new file mode 100755
index 00000000..69cbe112
--- /dev/null
+++ b/src/i18n/compare
@@ -0,0 +1,49 @@
+//#!/usr/bin/env node
+const arg = process.argv[2]
+
+if (typeof arg === 'undefined') {
+  console.log('This is a very simple and tiny tool that checks en.json with any other language and')
+  console.log('outputs all the things present in english but missing in foreign language.')
+  console.log('')
+  console.log('Usage: ./compare.js <lang> ')
+  console.log('       or')
+  console.log('       node ./compare.js <lang>')
+  console.log('')
+  console.log('Where <lang> is name of .json file containing language. For ./fi.json it should be:')
+  console.log('      ./compare.js fi ')
+  console.log('')
+  console.log('Limitations: ')
+  console.log('* This program does not work with languages left over in messages.js')
+  console.log('* This program does not check for extra strings present in foreign language but missing')
+  console.log('  in english.js (for now)')
+  console.log('')
+  console.log('There are no other arguments or options. Make an issue if you encounter a bug or want')
+  console.log('some feature to be implemented. Merge requests are welcome as well.')
+  process.exit()
+}
+
+const english = require('./en.json')
+const foreign = require(`./${arg}.json`)
+
+function walker (a, b, path = []) {
+  Object.keys(a).forEach(k => {
+    const aVal = a[k]
+    const bVal = b[k]
+    const aType = typeof aVal
+    const bType = typeof bVal
+    const currentPath = [...path, k]
+    const article = aType[0] === 'o' ? 'an' : 'a'
+
+    if (bType === 'undefined') {
+      console.log(`Foreign language is missing ${article} ${aType} at path ${currentPath.join('.')}`)
+    } else if (aType === 'object') {
+      if (bType !== 'object') {
+        console.log(`Type mismatch! English has ${aType} while foreign has ${bType} at path ${currentPath.join['.']}`)
+      } else {
+        walker(aVal, bVal, currentPath)
+      }
+    }
+  })
+}
+
+walker(english, foreign)
diff --git a/src/i18n/compare.js b/src/i18n/compare.js
deleted file mode 100755
index e9314376..00000000
--- a/src/i18n/compare.js
+++ /dev/null
@@ -1,49 +0,0 @@
-#!/usr/bin/env node
-const arg = process.argv[2]
-
-if (typeof arg === 'undefined') {
-  console.log('This is a very simple and tiny tool that checks en.json with any other language and')
-  console.log('outputs all the things present in english but missing in foreign language.')
-  console.log('')
-  console.log('Usage: ./compare.js <lang> ')
-  console.log('       or')
-  console.log('       node ./compare.js <lang>')
-  console.log('')
-  console.log('Where <lang> is name of .json file containing language. For ./fi.json it should be:')
-  console.log('      ./compare.js fi ')
-  console.log('')
-  console.log('Limitations: ')
-  console.log('* This program does not work with languages left over in messages.js')
-  console.log('* This program does not check for extra strings present in foreign language but missing')
-  console.log('  in english.js (for now)')
-  console.log('')
-  console.log('There are no other arguments or options. Make an issue if you encounter a bug or want')
-  console.log('some feature to be implemented. Merge requests are welcome as well.')
-  return
-}
-
-const english = require('./en.json')
-const foreign = require(`./${arg}.json`)
-
-function walker (a, b, path = []) {
-  Object.keys(a).forEach(k => {
-    const aVal = a[k]
-    const bVal = b[k]
-    const aType = typeof aVal
-    const bType = typeof bVal
-    const currentPath = [...path, k]
-    const article = aType[0] === 'o' ? 'an' : 'a'
-
-    if (bType === 'undefined') {
-      console.log(`Foreign language is missing ${article} ${aType} at path ${currentPath.join('.')}`)
-    } else if (aType === 'object') {
-      if (bType !== 'object') {
-        console.log(`Type mismatch! English has ${aType} while foreign has ${bType} at path ${currentPath.join['.']}`)
-      } else {
-        walker(aVal, bVal, currentPath)
-      }
-    }
-  })
-}
-
-walker(english, foreign)
diff --git a/test/unit/index.js b/test/unit/index.js
index 03b19e32..642099db 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -9,5 +9,5 @@ testsContext.keys().forEach(testsContext)
 // require all src files except main.js for coverage.
 // you can also change this to match only the subset of files that
 // you want coverage for.
-const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
-srcContext.keys().forEach(srcContext)
+// const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
+// srcContext.keys().forEach(srcContext)
diff --git a/test/unit/specs/services/gesture_service/gesture_service.spec.js b/test/unit/specs/services/gesture_service/gesture_service.spec.js
index 4a1b009a..a91f95db 100644
--- a/test/unit/specs/services/gesture_service/gesture_service.spec.js
+++ b/test/unit/specs/services/gesture_service/gesture_service.spec.js
@@ -9,7 +9,7 @@ const mockTouchEvent = (x, y) => ({
   ]
 })
 
-describe.only('GestureService', () => {
+describe('GestureService', () => {
   describe('swipeGesture', () => {
     it('calls the callback on a successful swipe', () => {
       let swiped = false
-- 
cgit v1.2.3-70-g09d2


From 2b5cf61a8f9a84467495721f170df7ae1288959b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2019 21:53:51 +0300
Subject: firefox

---
 .gitlab-ci.yml          |   2 +
 package.json            |   3 +-
 src/i18n/compare        |   2 +-
 test/unit/index.js      |   4 --
 test/unit/karma.conf.js |  11 +++++-
 yarn.lock               | 101 +++++-------------------------------------------
 6 files changed, 23 insertions(+), 100 deletions(-)

(limited to 'test')

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 89cf648e..69084ddd 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -15,6 +15,8 @@ lint:
     - npm run lint
 
 test:
+  services:
+    - firefox
   stage: test
   script:
     - yarn
diff --git a/package.json b/package.json
index b226b292..43907f3e 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "karma": "^3.0.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.2.0",
-    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-firefox-launcher": "^1.1.0",
     "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
@@ -91,7 +91,6 @@
     "nightwatch": "^0.9.8",
     "opn": "^4.0.2",
     "ora": "^0.3.0",
-    "phantomjs-prebuilt": "^2.1.3",
     "raw-loader": "^0.5.1",
     "sass": "^1.17.3",
     "sass-loader": "git://github.com/webpack-contrib/sass-loader",
diff --git a/src/i18n/compare b/src/i18n/compare
index 69cbe112..4dc1e47d 100755
--- a/src/i18n/compare
+++ b/src/i18n/compare
@@ -1,4 +1,4 @@
-//#!/usr/bin/env node
+#!/usr/bin/env node
 const arg = process.argv[2]
 
 if (typeof arg === 'undefined') {
diff --git a/test/unit/index.js b/test/unit/index.js
index 642099db..83a2dcdb 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,7 +1,3 @@
-// Polyfill fn.bind() for PhantomJS
-/* eslint-disable no-extend-native */
-Function.prototype.bind = require('function-bind')
-
 // require all test files (files that ends with .spec.js)
 const testsContext = require.context('./specs', true, /\.spec$/)
 testsContext.keys().forEach(testsContext)
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 8b4145e2..8465523a 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -53,11 +53,18 @@ module.exports = function (config) {
     // 1. install corresponding karma launcher
     //    http://karma-runner.github.io/0.13/config/browsers.html
     // 2. add it to the `browsers` array below.
-    browsers: ['PhantomJS'],
+    browsers: ['FirefoxHeadless'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['mocha'],
+    customLaunchers: {
+      'FirefoxHeadless': {
+        base: 'Firefox',
+        flags: [
+          '-headless',
+        ]
+      }
+    },
     files: [
-      '../../node_modules/@babel/polyfill/dist/polyfill.js',
       './index.js'
     ],
     preprocessors: {
diff --git a/yarn.lock b/yarn.lock
index 7c9411d0..98992dba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2705,11 +2705,6 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es6-promise@^4.0.3:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.6.tgz#b685edd8258886365ea62b57d30de28fadcd974f"
-  integrity sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q==
-
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -3124,7 +3119,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-zip@^1.6.5, extract-zip@^1.6.7:
+extract-zip@^1.6.7:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
   integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
@@ -3396,15 +3391,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
-  integrity sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-
 fs-minipass@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
@@ -3587,7 +3573,7 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
@@ -3729,14 +3715,6 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-hasha@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/hasha/-/hasha-2.2.0.tgz#78d7cbfc1e6d66303fe79837365984517b2f6ee1"
-  integrity sha1-eNfL/B5tZjA/55g3NlmEUXsvbuE=
-  dependencies:
-    is-stream "^1.0.1"
-    pinkie-promise "^2.0.0"
-
 he@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -4276,11 +4254,6 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
-is-stream@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
 is-svg@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
@@ -4516,13 +4489,6 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -4544,6 +4510,11 @@ karma-coverage@^1.1.1:
     minimatch "^3.0.0"
     source-map "^0.5.1"
 
+karma-firefox-launcher@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/karma-firefox-launcher/-/karma-firefox-launcher-1.1.0.tgz#2c47030452f04531eb7d13d4fc7669630bb93339"
+  integrity sha512-LbZ5/XlIXLeQ3cqnCbYLn+rOVhuMIK9aZwlP6eOLGzWdo1UVp7t6CN3DP4SafiRLjexKwHeKHDm0c38Mtd3VxA==
+
 karma-mocha-reporter@^2.2.1:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz#15120095e8ed819186e47a0b012f3cd741895560"
@@ -4560,14 +4531,6 @@ karma-mocha@^1.2.0:
   dependencies:
     minimist "1.2.0"
 
-karma-phantomjs-launcher@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/karma-phantomjs-launcher/-/karma-phantomjs-launcher-1.0.4.tgz#d23ca34801bda9863ad318e3bb4bd4062b13acd2"
-  integrity sha1-0jyjSAG9qYY60xjju0vUBisTrNI=
-  dependencies:
-    lodash "^4.0.1"
-    phantomjs-prebuilt "^2.1.7"
-
 karma-sinon-chai@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-2.0.2.tgz#e28c109b989973abafc28a7c9f09ef24a05e07c2"
@@ -4631,11 +4594,6 @@ karma@^3.0.0:
     tmp "0.0.33"
     useragent "2.3.0"
 
-kew@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b"
-  integrity sha1-edk9LTM2PW/dKXCzNdkUGtWR15s=
-
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -4660,13 +4618,6 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
   integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
 
-klaw@^1.0.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
-  integrity sha1-QIhDO0azsbolnXh4XY6W9zugJDk=
-  optionalDependencies:
-    graceful-fs "^4.1.9"
-
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -5053,7 +5004,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.1, lodash@^4.16.4, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.5.0:
+lodash@^4.16.4, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.5.0:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -6093,21 +6044,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-phantomjs-prebuilt@^2.1.3, phantomjs-prebuilt@^2.1.7:
-  version "2.1.16"
-  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz#efd212a4a3966d3647684ea8ba788549be2aefef"
-  integrity sha1-79ISpKOWbTZHaE6ouniFSb4q7+8=
-  dependencies:
-    es6-promise "^4.0.3"
-    extract-zip "^1.6.5"
-    fs-extra "^1.0.0"
-    hasha "^2.2.0"
-    kew "^0.7.0"
-    progress "^1.1.8"
-    request "^2.81.0"
-    request-progress "^2.0.1"
-    which "^1.2.10"
-
 phoenix@^1.3.0:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.4.2.tgz#b71491dbf18613c17b3704c0fb2102d23c7b3c07"
@@ -6523,11 +6459,6 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-progress@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
-  integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
-
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -6942,14 +6873,7 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request-progress@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-2.0.1.tgz#5d36bb57961c673aa5b788dbc8141fdf23b44e08"
-  integrity sha1-XTa7V5YcZzqlt4jbyBQf3yO0Tgg=
-  dependencies:
-    throttleit "^1.0.0"
-
-request@^2.81.0, request@^2.88.0:
+request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -7820,11 +7744,6 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-throttleit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
-  integrity sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=
-
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -8397,7 +8316,7 @@ whet.extend@~0.9.9:
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
   integrity sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=
 
-which@^1.0.9, which@^1.1.1, which@^1.2.10, which@^1.2.9:
+which@^1.0.9, which@^1.1.1, which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-- 
cgit v1.2.3-70-g09d2


From 3e685149816d3b0bd7a8a25030ed448d1b51bbb5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 28 Apr 2019 20:46:01 +0300
Subject: fix tests

---
 test/unit/specs/components/user_profile.spec.js |  2 ++
 yarn.lock                                       | 16 ----------------
 2 files changed, 2 insertions(+), 16 deletions(-)

(limited to 'test')

diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 847481f3..6de9491a 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -39,6 +39,7 @@ const externalProfileStore = new Vuex.Store({
   getters: testGetters,
   state: {
     api: {
+      fetchers: {},
       backendInteractor: backendInteractorService('')
     },
     interface: {
@@ -106,6 +107,7 @@ const localProfileStore = new Vuex.Store({
   getters: testGetters,
   state: {
     api: {
+      fetchers: {},
       backendInteractor: backendInteractorService('')
     },
     interface: {
diff --git a/yarn.lock b/yarn.lock
index 489bd9f3..cfc600c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8120,13 +8120,6 @@ vue-chat-scroll@^1.2.1:
   resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.3.5.tgz#a5ee5bae5058f614818a96eac5ee3be4394a2f68"
   integrity sha512-bOBIv3AQp9D+YkhUBwVG4vBblRTeAtqQqx3Agl8fHNNm33aHMWB74U1m45Ll+JI3B0xfyWw6htJ2o5qoiFX9ZQ==
 
-vue-compose@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/vue-compose/-/vue-compose-0.7.1.tgz#1c11c4cd5e2c8f2743b03fce8ab43d78aabc20b3"
-  integrity sha512-OAObuO3n0qH5sSupLxrNxdkRNz8p+CiIBcsczp5x8QofnoWrEiluVIsW1xwIbW7aTcnDvkDSGlrlXQn6E3xqDw==
-  dependencies:
-    vue-hoc "0.x.x"
-
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"
@@ -8139,20 +8132,11 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
-vue-hoc@0.x.x:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/vue-hoc/-/vue-hoc-0.4.7.tgz#4d3322ba89b8b0e42b19045ef536c21d948a4fac"
-  integrity sha512-bFHE7mf1bBBQSYg36Zg3ON0BawtRSxhiVS2wkDXq4LldSyBoH84WmfR+JijYenICiZTv81dbrYVFTf8S/FT1aQ==
-
 vue-hot-reload-api@^2.2.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
-vue-hot-reload-api@^2.0.11:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"
-
 vue-i18n@^7.3.2:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-7.8.1.tgz#2ce4b6efde679a1e05ddb5d907bfc1bc218803b2"
-- 
cgit v1.2.3-70-g09d2