Merge branch 'develop' of https://git.pleroma.social/pleroma/pleroma-fe into simplePolicy_reasons_for_instance_specific_policies

2021-03-20 08:56:21 +01:00 · 2021-03-20 08:56:21 +01:00 · ab620e2cff
commit ab620e2cff
parent 8fa8d17a83 aacd909846
234 changed files with 13106 additions and 4399 deletions
--- a/.mailmap
+++ b/.mailmap
@ -0,0 +1 @@
+rinpatch <rin@patch.cx> <rinpatch@sdf.org>
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,17 +5,116 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).

 ## [Unreleased]
 ### Added
- New option to optimize timeline rendering to make the site more responsive (enabled by default)
+- Added a quick settings to timeline header for easier access
+- Added option to mark posts as sensitive by default
+- Added quick filters for notifications

-## [Unreleased patch]
+
+## [2.3.0] - 2021-03-01
+### Fixed
+- Button to remove uploaded media in post status form is now properly placed and sized.
+- Fixed shoutbox not working in mobile layout
+- Fixed missing highlighted border in expanded conversations again
+- Fixed some UI jumpiness when opening images particularly in chat view
+- Fixed chat unread badge looking weird
+- Fixed punycode names not working properly
+- Fixed notifications crashing on an invalid notification
+
+### Changed
+- Display 'people voted' instead of 'votes' for multi-choice polls
+- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel
+- Renamed "Timeline" to "Home Timeline" to be more clear
+- Optimized chat to not get horrible performance after keeping the same chat open for a long time
+- When opening emoji picker or react picker, it automatically focuses the search field
+- Language picker now uses native language names
+
+### Added
+- Added reason field for registration when approval is required
+- Group staff members by role in the About page
+
+
+## [2.2.3] - 2021-01-18
+### Added
+- Added Report button to status ellipsis menu for easier reporting
+
+### Fixed
+- Follows/Followers tabs on user profiles now display the content properly.
+- Handle punycode in screen names
+- Fixed local dev mode having non-functional websockets in some cases
+- Show notices for websocket events (errors, abnormal closures, reconnections)
+- Fix not being able to re-enable websocket until page refresh
+- Fix annoying issue where timeline might have few posts when streaming is enabled
+
+### Changed
+- Don't filter own posts when they hit your wordfilter
+
+
+## [2.2.2] - 2020-12-22
+### Added
+- Mouseover titles for emojis in reaction picker
+- Support to input emoji into the search box in reaction picker
+- Added some missing unicode emoji
+- Added the upload limit to the Features panel in the About page
+- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
+
+### Fixed
+- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
+- Fixed timeline errors locking timelines
+- Fixed missing highlighted border in expanded conversations
+- Fixed custom emoji not working in profile field names
+- Fixed pinned statuses not appearing in user profiles
+- Fixed some elements not being keyboard navigation friendly
+- Fixed error handling when updating various profile images
+- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
+- Fixed custom emoji not showing in poll options before voting
+- Fixed link color not applied to instance name in topbar
+
+### Changed
+- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
+- Made reply/fav/repeat etc buttons easier to hit
+- Adjusted timeline menu clickable area to match the visible button
+- Moved external source link from status heading to the ellipsis menu
+- Disabled horizontal textarea resize
+- Wallpaper is now top-aligned, horizontally centered.
+
+
+## [2.2.1] - 2020-11-11
+### Fixed
+- Fixed regression in react popup alignment and overflowing
+
+
+## [2.2.0] - 2020-11-06
+### Added
+- New option to optimize timeline rendering to make the site more responsive (enabled by default)
+- New instance option `logoLeft` to move logo to the left side in desktop nav bar
+- Import/export a muted users
+- Proper handling of deletes when using websocket streaming
+- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
+- Added a small red badge to the favicon when there's unread notifications
+- Added the NSFW alert to link previews
+
+### Fixed
+- Fixed clicking NSFW hider through status popover
+- Fixed chat-view back button being hard to click
+- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages
+- Fixed multiple regressions in CSS styles
+- Fixed multiple issues with input fields when using CJK font as default
+- Fixed search field in navbar infringing into logo in some cases
+- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch.
+
+### Changed
+- Clicking immediately when timeline shifts is now blocked to prevent misclicks
+- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
+- Some icons changed for better accessibility (lock, globe)
+- Logo is now clickable
+- Changed default logo to SVG version
+
+
+## [2.1.2] - 2020-09-17
 ### Fixed
 - Fixed chats list not updating its order when new messages come in
 - Fixed chat messages sometimes getting lost when you receive a message at the same time
- Fixed clicking NSFW hider through status popover

-### Added
- Import/export a muted users
- Proper handling of deletes when using websocket streaming

 ## [2.1.1] - 2020-09-08
 ### Changed
@ -142,8 +241,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Ability to change user's email
 - About page
 - Added remote user redirect
- Bookmarks
+
 ### Changed
 - changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes
+
 ### Fixed
 - improved hotkey behavior on autocomplete popup
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -3,7 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
-var FontelloPlugin = require("fontello-webpack-plugin")

 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -94,15 +93,6 @@ module.exports = {
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, '..', 'src/sw.js'),
      filename: 'sw-pleroma.js'
-    }),
-    new FontelloPlugin({
-      config: require('../static/fontello.json'),
-      host: 'https://fontello.com',
-      name: 'fontello',
-      output: {
-        css: 'static/[name].' + now + '.css',  // [hash] is not supported. Use the current timestamp instead for versioning.
-        font: 'static/font/[name].' + now + '.[ext]'
-      }
    })
  ]
 }
--- a/config/index.js
+++ b/config/index.js
@ -3,6 +3,11 @@ const path = require('path')
 let settings = {}
 try {
  settings = require('./local.json')
+  if (settings.target && settings.target.endsWith('/')) {
+    // replacing trailing slash since it can conflict with some apis
+    // and that's how actual BE reports its url
+    settings.target = settings.target.replace(/\/$/, '')
+  }
  console.log('Using local dev server settings (/config/local.json):')
  console.log(JSON.stringify(settings, null, 2))
 } catch (e) {
--- a/index.html
+++ b/index.html
@ -3,7 +3,6 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <title>Pleroma</title>
    <!--server-generated-meta-->
    <link rel="icon" type="image/png" href="/favicon.png">
  </head>
--- a/package.json
+++ b/package.json
@ -18,6 +18,10 @@
  "dependencies": {
    "@babel/runtime": "^7.7.6",
    "@chenfengyuan/vue-qrcode": "^1.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
    "body-scroll-lock": "^2.6.4",
    "chromatism": "^3.0.0",
    "cropperjs": "^1.4.3",
@ -27,9 +31,9 @@
    "parse-link-header": "^1.0.1",
    "phoenix": "^1.3.0",
    "portal-vue": "^2.1.4",
+    "punycode.js": "^2.1.0",
    "v-click-outside": "^2.1.1",
    "vue": "^2.6.11",
-    "vue-chat-scroll": "^1.2.1",
    "vue-i18n": "^7.3.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.6.11",
@ -51,7 +55,7 @@
    "babel-plugin-lodash": "^3.3.4",
    "chai": "^3.5.0",
    "chalk": "^1.1.3",
-    "chromedriver": "^2.21.2",
+    "chromedriver": "^87.0.1",
    "connect-history-api-fallback": "^1.1.0",
    "cross-spawn": "^4.0.2",
    "css-loader": "^0.28.0",
@ -68,7 +72,6 @@
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "file-loader": "^3.0.1",
-    "fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^3.0.0",
    "http-proxy-middleware": "^0.17.2",
@ -99,7 +102,7 @@
    "selenium-server": "2.53.1",
    "semver": "^5.3.0",
    "serviceworker-webpack-plugin": "^1.0.0",
-    "shelljs": "^0.7.4",
+    "shelljs": "^0.8.4",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "stylelint": "^13.6.1",
--- a/src/App.js
+++ b/src/App.js
@ -1,7 +1,6 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
-import SearchBar from './components/search_bar/search_bar.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@ -11,10 +10,12 @@ import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
 import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
+import DesktopNav from './components/desktop_nav/desktop_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
+import { mapGetters } from 'vuex'

 export default {
  name: 'app',
@ -22,7 +23,6 @@ export default {
    UserPanel,
    NavPanel,
    Notifications,
-    SearchBar,
    InstanceSpecificPanel,
    FeaturesPanel,
    WhoToFollowPanel,
@ -31,21 +31,14 @@ export default {
    SideDrawer,
    MobilePostStatusButton,
    MobileNav,
+    DesktopNav,
    SettingsModal,
    UserReportingModal,
    PostStatusModal,
    GlobalNoticeList
  },
  data: () => ({
-    mobileActivePanel: 'timeline',
-    searchBarHidden: true,
-    supportsMask: window.CSS && window.CSS.supports && (
-      window.CSS.supports('mask-size', 'contain') ||
-        window.CSS.supports('-webkit-mask-size', 'contain') ||
-        window.CSS.supports('-moz-mask-size', 'contain') ||
-        window.CSS.supports('-ms-mask-size', 'contain') ||
-        window.CSS.supports('-o-mask-size', 'contain')
-    )
+    mobileActivePanel: 'timeline'
  }),
  created () {
    // Load the locale from the storage
@ -58,44 +51,21 @@ export default {
  },
  computed: {
    currentUser () { return this.$store.state.users.currentUser },
-    background () {
-      return this.currentUser.background_image || this.$store.state.instance.background
+    userBackground () { return this.currentUser.background_image },
+    instanceBackground () {
+      return this.mergedConfig.hideInstanceWallpaper
+        ? null
+        : this.$store.state.instance.background
    },
-    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
-    logoStyle () {
-      return {
-        'visibility': this.enableMask ? 'hidden' : 'visible'
-      }
-    },
-    logoMaskStyle () {
-      return this.enableMask ? {
-        'mask-image': `url(${this.$store.state.instance.logo})`
-      } : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      }
-    },
-    logoBgStyle () {
-      return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`,
-        opacity: this.searchBarHidden ? 1 : 0
-      }, this.enableMask ? {} : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      })
-    },
-    logo () { return this.$store.state.instance.logo },
+    background () { return this.userBackground || this.instanceBackground },
    bgStyle () {
-      return {
-        'background-image': `url(${this.background})`
+      if (this.background) {
+        return {
+          '--body-background-image': `url(${this.background})`
+        }
      }
    },
-    bgAppStyle () {
-      return {
-        '--body-background-image': `url(${this.background})`
-      }
-    },
-    sitename () { return this.$store.state.instance.name },
    chat () { return this.$store.state.chat.channel.state === 'joined' },
-    hideSitename () { return this.$store.state.instance.hideSitename },
    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
    showInstanceSpecificPanel () {
      return this.$store.state.instance.showInstanceSpecificPanel &&
@ -109,22 +79,10 @@ export default {
      return {
        'order': this.$store.state.instance.sidebarRight ? 99 : 0
      }
-    }
+    },
+    ...mapGetters(['mergedConfig'])
  },
  methods: {
-    scrollToTop () {
-      window.scrollTo(0, 0)
-    },
-    logout () {
-      this.$router.replace('/main/public')
-      this.$store.dispatch('logout')
-    },
-    onSearchBarToggled (hidden) {
-      this.searchBarHidden = hidden
-    },
-    openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
-    },
    updateMobileState () {
      const mobileLayout = windowWidth() <= 800
      const layoutHeight = windowHeight()
--- a/src/App.scss
+++ b/src/App.scss
@ -14,7 +14,9 @@
  right: -20px;
  background-size: cover;
  background-repeat: no-repeat;
-  background-position: 0 50%;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-position: 50% 50px;
 }

 i[class^='icon-'] {
@ -33,6 +35,7 @@ h4 {
  max-width: 980px;
  align-content: flex-start;
 }
+
 .underlay {
  background-color: rgba(0,0,0,0.15);
  background-color: var(--underlay, rgba(0,0,0,0.15));
@ -69,7 +72,7 @@ a {
  color: var(--link, $fallback--link);
 }

-button {
+.button-default {
  user-select: none;
  color: $fallback--text;
  color: var(--btnText, $fallback--text);
@ -85,7 +88,8 @@ button {
  font-family: sans-serif;
  font-family: var(--interfaceFont, sans-serif);

-  i[class*=icon-] {
+  i[class*=icon-],
+  .svg-inline--fa {
    color: $fallback--text;
    color: var(--btnText, $fallback--text);
  }
@ -106,6 +110,8 @@ button {
    color: var(--btnPressedText, $fallback--text);
    background-color: $fallback--fg;
    background-color: var(--btnPressed, $fallback--fg);
+
+    svg,
    i {
      color: $fallback--text;
      color: var(--btnPressedText, $fallback--text);
@ -118,6 +124,8 @@ button {
    color: var(--btnDisabledText, $fallback--text);
    background-color: $fallback--fg;
    background-color: var(--btnDisabled, $fallback--fg);
+
+    svg,
    i {
      color: $fallback--text;
      color: var(--btnDisabledText, $fallback--text);
@ -131,6 +139,8 @@ button {
    background-color: var(--btnToggled, $fallback--fg);
    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
    box-shadow: var(--buttonPressedShadow);
+
+    svg,
    i {
      color: $fallback--text;
      color: var(--btnToggledText, $fallback--text);
@ -146,6 +156,37 @@ button {
  }
 }

+.button-unstyled {
+  background: none;
+  border: none;
+  outline: none;
+  display: inline;
+  text-align: initial;
+  font-size: 100%;
+  font-family: inherit;
+  padding: 0;
+  line-height: unset;
+  cursor: pointer;
+  box-sizing: content-box;
+  color: inherit;
+
+  &.-link {
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
+  }
+
+  &.-fullwidth {
+    width: 100%;
+  }
+
+  &.-hover-highlight {
+    &:hover svg {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+}
+
 input, textarea, .select, .input {

  &.unstyled {
@ -185,7 +226,7 @@ input, textarea, .select, .input {
    opacity: 0.5;
  }

-  .icon-down-open {
+  .select-down-icon {
    position: absolute;
    top: 0;
    bottom: 0;
@ -300,6 +341,10 @@ input, textarea, .select, .input {
      box-sizing: border-box;
    }
  }
+
+  &.resize-height {
+    resize: vertical;
+  }
 }

 option {
@ -318,7 +363,7 @@ option {
  }
 }

-i[class*=icon-] {
+i[class*=icon-], .svg-inline--fa  {
  color: $fallback--icon;
  color: var(--icon, $fallback--icon);
 }
@ -356,117 +401,10 @@ i[class*=icon-] {
  padding: 0 10px 0 10px;
 }

-.item {
-  flex: 1;
-  line-height: 50px;
-  height: 50px;
-  overflow: hidden;
-  display: flex;
-  flex-wrap: wrap;
-
-  .nav-icon {
-    margin-left: 0.4em;
-  }
-
-  &.right {
-    justify-content: flex-end;
-  }
-}
-
 .auto-size {
  flex: 1
 }

-.nav-bar {
-  padding: 0;
-  width: 100%;
-  align-items: center;
-  position: fixed;
-  height: 50px;
-  box-sizing: border-box;
-
-  button {
-    &, i[class*=icon-] {
-      color: $fallback--text;
-      color: var(--btnTopBarText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedTopBar, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedTopBarText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledTopBarText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledTopBarText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--btnToggledTopBar, $fallback--fg)
-    }
-  }
-
-
-  .logo {
-    display: flex;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    align-items: stretch;
-    justify-content: center;
-    flex: 0 0 auto;
-    z-index: -1;
-    transition: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 100ms;
-
-    .mask {
-      mask-repeat: no-repeat;
-      mask-position: center;
-      mask-size: contain;
-      background-color: $fallback--fg;
-      background-color: var(--topBarText, $fallback--fg);
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    img {
-      height: 100%;
-      object-fit: contain;
-      display: block;
-      flex: 0;
-    }
-  }
-
-  .inner-nav {
-    position: relative;
-    margin: auto;
-    box-sizing: border-box;
-    padding-left: 10px;
-    padding-right: 10px;
-    display: flex;
-    align-items: center;
-    flex-basis: 970px;
-    height: 50px;
-
-    a, a i {
-      color: $fallback--link;
-      color: var(--topBarLink, $fallback--link);
-    }
-  }
-}
-
 main-router {
  flex: 1;
 }
@ -546,6 +484,7 @@ main-router {
    color: $fallback--faint;
    color: var(--panelFaint, $fallback--faint);
  }
+
  .faint-link {
    color: $fallback--faint;
    color: var(--faintLink, $fallback--faint);
@ -557,11 +496,8 @@ main-router {
    overflow-x: hidden;
  }

-  button {
-    flex-shrink: 0;
-  }
-
-  button, .alert {
+  .button-default,
+  .alert {
    // height: 100%;
    line-height: 21px;
    min-height: 0;
@ -572,8 +508,11 @@ main-router {
    align-self: stretch;
  }

-  button {
-    &, i[class*=icon-] {
+  .button-default {
+    flex-shrink: 0;
+
+    &,
+    i[class*=icon-] {
      color: $fallback--text;
      color: var(--btnPanelText, $fallback--text);
    }
@ -596,7 +535,8 @@ main-router {
    }
  }

-  a {
+  a,
+  .-link {
    color: $fallback--link;
    color: var(--panelLink, $fallback--link)
  }
@ -611,15 +551,15 @@ main-router {
  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);

-
  .faint {
    color: $fallback--faint;
    color: var(--panelFaint, $fallback--faint);
  }

-  a {
+  a,
+  .-link {
    color: $fallback--link;
-    color: var(--panelLink, $fallback--link)
+    color: var(--panelLink, $fallback--link);
  }
 }

@ -646,6 +586,7 @@ nav {
  color: var(--faint, $fallback--faint);
  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
  box-shadow: var(--topBarShadow);
+  box-sizing: border-box;
 }

 .fade-enter-active, .fade-leave-active {
@ -707,19 +648,24 @@ nav {
    flex-grow: 0;
  }
 }
+
 .badge {
+  box-sizing: border-box;
  display: inline-block;
  border-radius: 99px;
-  min-width: 22px;
-  max-width: 22px;
-  min-height: 22px;
-  max-height: 22px;
-  font-size: 15px;
-  line-height: 22px;
-  text-align: center;
+  max-width: 10em;
+  min-width: 1.7em;
+  height: 1.3em;
+  padding: 0.15em 0.15em;
  vertical-align: middle;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 0.9em;
+  line-height: 1;
+  text-align: center;
  white-space: nowrap;
-  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;

  &.badge-notification {
    background-color: $fallback--cRed;
@ -760,6 +706,15 @@ nav {
      color: var(--alertWarningPanelText, $fallback--text);
    }
  }
+
+  &.success {
+    background-color: var(--alertSuccess, $fallback--alertWarning);
+    color: var(--alertSuccessText, $fallback--text);
+
+    .panel-heading & {
+      color: var(--alertSuccessPanelText, $fallback--text);
+    }
+  }
 }

 .faint {
@ -776,16 +731,6 @@ nav {
  }
 }

-@media all and (min-width: 800px) {
-  .logo {
-    opacity: 1 !important;
-  }
-}
-
-.item.right {
-  text-align: right;
-}
-
 .visibility-notice {
  padding: .5em;
  border: 1px solid $fallback--faint;
@ -807,8 +752,16 @@ nav {
  }
 }

-.button-icon {
-  font-size: 1.2em;
+.fa-scale-110 {
+  &.svg-inline--fa {
+    font-size: 1.1em;
+  }
+}
+
+.fa-old-padding {
+  &.svg-inline--fa {
+    padding: 0 0.3em;
+  }
 }

@keyframes shakeError {
@ -898,7 +851,7 @@ nav {
  }
 }

-.btn.btn-default {
+.btn.button-default {
  min-height: 28px;
 }

@ -930,27 +883,16 @@ nav {
  background-color: var(--panel, $fallback--fg);
 }

-.unread-chat-count {
-  font-size: 0.9em;
-  font-weight: bolder;
-  font-style: normal;
-  position: absolute;
-  right: 0.6rem;
-  padding: 0 0.3em;
-  min-width: 1.3rem;
-  min-height: 1.3rem;
-  max-height: 1.3rem;
-  line-height: 1.3rem;
-  max-width: 10em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .chat-layout {
  // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
  overflow: hidden;
  height: 100%;

+  // Get rid of scrollbar on body as scrolling happens on different element
+  body {
+    overflow: hidden;
+  }
+
  // Ensures the fixed position of the mobile browser bars on scroll up / down events.
  // Prevents the mobile browser bars from overlapping or hiding the message posting form.
  @media all and (max-width: 800px) {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,82 +1,14 @@
 <template>
  <div
    id="app"
-    :style="bgAppStyle"
+    :style="bgStyle"
  >
    <div
      id="app_bg_wrapper"
      class="app-bg-wrapper"
-      :style="bgStyle"
    />
    <MobileNav v-if="isMobileLayout" />
-    <nav
-      v-else
-      id="nav"
-      class="nav-bar container"
-      @click="scrollToTop()"
-    >
-      <div class="inner-nav">
-        <div
-          class="logo"
-          :style="logoBgStyle"
-        >
-          <div
-            class="mask"
-            :style="logoMaskStyle"
-          />
-          <img
-            :src="logo"
-            :style="logoStyle"
-          >
-        </div>
-        <div class="item">
-          <router-link
-            v-if="!hideSitename"
-            class="site-name"
-            :to="{ name: 'root' }"
-            active-class="home"
-          >
-            {{ sitename }}
-          </router-link>
-        </div>
-        <div class="item right">
-          <search-bar
-            v-if="currentUser || !privateMode"
-            class="nav-icon mobile-hidden"
-            @toggled="onSearchBarToggled"
-            @click.stop.native
-          />
-          <a
-            href="#"
-            class="mobile-hidden"
-            @click.stop="openSettingsModal"
-          >
-            <i
-              class="button-icon icon-cog nav-icon"
-              :title="$t('nav.preferences')"
-            />
-          </a>
-          <a
-            v-if="currentUser && currentUser.role === 'admin'"
-            href="/pleroma/admin/#/login-pleroma"
-            class="mobile-hidden"
-            target="_blank"
-          ><i
-            class="button-icon icon-gauge nav-icon"
-            :title="$t('nav.administration')"
-          /></a>
-          <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>
-      </div>
-    </nav>
+    <DesktopNav v-else />
    <div class="app-bg-wrapper app-container-wrapper" />
    <div
      id="content"
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -7,6 +7,7 @@ import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import { applyTheme } from '../services/style_setter/style_setter.js'
+import FaviconService from '../services/favicon_service/favicon_service.js'

 let staticInitialResults = null

@ -50,6 +51,7 @@ const getInstanceConfig = async ({ store }) => {
      const vapidPublicKey = data.pleroma.vapid_public_key

      store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
+      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })

      if (vapidPublicKey) {
        store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
@ -130,6 +132,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
      ? 0
      : config.logoMargin
  })
+  copyInstanceOption('logoLeft')
  store.commit('authFlow/setInitialStrategy', config.loginMethod)

  copyInstanceOption('redirectRootNoLogin')
@ -325,6 +328,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
  const width = windowWidth()
  store.dispatch('setMobileLayout', width <= 800)

+  FaviconService.initFaviconService()
+
  const overrides = window.___pleromafe_dev_overrides || {}
  const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
  store.dispatch('setInstanceOption', { name: 'server', value: server })
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@ -1,6 +1,14 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisV
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisV
+)

 const AccountActions = {
  props: [
@ -27,7 +35,7 @@ const AccountActions = {
      this.$store.dispatch('unblockUser', this.user.id)
    },
    reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
+      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
    },
    openChat () {
      this.$router.push({
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@ -1,9 +1,10 @@
 <template>
-  <div class="account-actions">
+  <div class="AccountActions">
    <Popover
      trigger="click"
      placement="bottom"
      :bound-to="{ x: 'container' }"
+      remove-padding
    >
      <div
        slot="content"
@ -13,14 +14,14 @@
          <template v-if="relationship.following">
            <button
              v-if="relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
              @click="hideRepeats"
            >
              {{ $t('user_card.hide_repeats') }}
            </button>
            <button
              v-if="!relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
              @click="showRepeats"
            >
              {{ $t('user_card.show_repeats') }}
@ -32,27 +33,27 @@
          </template>
          <button
            v-if="relationship.blocking"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
            @click="unblockUser"
          >
            {{ $t('user_card.unblock') }}
          </button>
          <button
            v-else
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
            @click="blockUser"
          >
            {{ $t('user_card.block') }}
          </button>
          <button
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
            @click="reportUser"
          >
            {{ $t('user_card.report') }}
          </button>
          <button
            v-if="pleromaChatMessagesAvailable"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
            @click="openChat"
          >
            {{ $t('user_card.message') }}
@ -61,9 +62,12 @@
      </div>
      <div
        slot="trigger"
-        class="btn btn-default ellipsis-button"
+        class="ellipsis-button"
      >
-        <i class="icon-ellipsis trigger-button" />
+        <FAIcon
+          class="icon"
+          icon="ellipsis-v"
+        />
      </div>
    </Popover>
  </div>
@ -73,22 +77,22 @@

 <style lang="scss">
@import '../../_variables.scss';
-.account-actions {
-  margin: 0 .8em;
-}
+.AccountActions {
+  button.dropdown-item {
+    margin-left: 0;
+  }

-.account-actions button.dropdown-item {
-  margin-left: 0;
-}
+  .ellipsis-button {
+    cursor: pointer;
+    width: 2.5em;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+    text-align: center;

-.account-actions .trigger-button {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  opacity: .8;
-  cursor: pointer;
-  &:hover {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
  }
 }
 </style>
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@ -8,7 +8,7 @@
        {{ $t('general.error_retry') }}
      </p>
      <button
-        class="btn"
+        class="btn button-default"
        @click="retry"
      >
        {{ $t('general.retry') }}
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@ -3,6 +3,24 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFile,
+  faMusic,
+  faImage,
+  faVideo,
+  faPlayCircle,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFile,
+  faMusic,
+  faImage,
+  faVideo,
+  faPlayCircle,
+  faTimes
+)

 const Attachment = {
  props: [
@ -39,10 +57,10 @@ const Attachment = {
      return this.attachment.description
    },
    placeholderIconClass () {
-      if (this.type === 'image') return 'icon-picture'
-      if (this.type === 'video') return 'icon-video'
-      if (this.type === 'audio') return 'icon-music'
-      return 'icon-doc'
+      if (this.type === 'image') return 'image'
+      if (this.type === 'video') return 'video'
+      if (this.type === 'audio') return 'music'
+      return 'file'
    },
    referrerpolicy () {
      return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@ -12,7 +12,7 @@
      :alt="attachment.description"
      :title="attachment.description"
    >
-      <span :class="placeholderIconClass" />
+      <FAIcon :icon="placeholderIconClass" />
      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
    </a>
  </div>
@ -36,20 +36,19 @@
        :src="nsfwImage"
        :class="{'small': isSmall}"
      >
-      <i
+      <FAIcon
        v-if="type === 'video'"
-        class="play-icon icon-play-circled"
+        class="play-icon"
+        icon="play-circle"
      />
    </a>
-    <div
+    <button
      v-if="nsfw && hideNsfwLocal && !hidden"
-      class="hider"
+      class="button-unstyled hider"
+      @click.prevent="toggleHidden"
    >
-      <a
-        href="#"
-        @click.prevent="toggleHidden"
-      >Hide</a>
-    </div>
+      <FAIcon icon="times" />
+    </button>

    <a
      v-if="type === 'image' && (!hidden || preloadImage)"
@ -83,9 +82,10 @@
        @play="$emit('play')"
        @pause="$emit('pause')"
      />
-      <i
+      <FAIcon
        v-if="!allowPlay"
-        class="play-icon icon-play-circled"
+        class="play-icon"
+        icon="play-circle"
      />
    </a>

@ -142,6 +142,10 @@
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
+
+    svg {
+      color: inherit;
+    }
  }

  .nsfw-placeholder {
@ -228,15 +232,23 @@
  .hider {
    position: absolute;
    right: 0;
-    white-space: nowrap;
    margin: 10px;
-    padding: 5px;
-    background: rgba(230,230,230,0.6);
-    font-weight: bold;
+    padding: 0;
    z-index: 4;
-    line-height: 1;
    border-radius: $fallback--tooltipRadius;
    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    text-align: center;
+    width: 2em;
+    height: 2em;
+    font-size: 1.25em;
+    // TODO: theming? hard to theme with unknown background image color
+    background: rgba(230, 230, 230, 0.7);
+    .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    &:hover .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.9);
+    }
  }

  video {
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@ -42,7 +42,7 @@
          class="basic-user-card-screen-name"
          :to="userProfileLink(user)"
        >
-          @{{ user.screen_name }}
+          @{{ user.screen_name_ui }}
        </router-link>
      </div>
      <slot />
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@ -3,7 +3,7 @@
    <div class="block-card-content-container">
      <button
        v-if="blocked"
-        class="btn btn-default"
+        class="btn button-default"
        :disabled="progress"
        @click="unblockUser"
      >
@ -16,7 +16,7 @@
      </button>
      <button
        v-else
-        class="btn btn-default"
+        class="btn button-default"
        :disabled="progress"
        @click="blockUser"
      >
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -6,11 +6,24 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
+
+library.add(
+  faChevronDown,
+  faChevronLeft
+)

 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
 const SAFE_RESIZE_TIME_OFFSET = 100
+const MARK_AS_READ_DELAY = 1500
+const MAX_RETRIES = 10

 const Chat = {
  components: {
@ -24,7 +37,8 @@ const Chat = {
      hoveredMessageChainId: undefined,
      lastScrollPosition: {},
      scrollableContainerHeight: '100%',
-      errorLoadingChat: false
+      errorLoadingChat: false,
+      messageRetriers: {}
    }
  },
  created () {
@ -59,7 +73,7 @@ const Chat = {
    },
    formPlaceholder () {
      if (this.recipient) {
-        return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
+        return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
      } else {
        return ''
      }
@ -94,7 +108,7 @@ const Chat = {
      const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
      this.$nextTick(() => {
        if (bottomedOutBeforeUpdate) {
-          this.scrollDown({ forceRead: !document.hidden })
+          this.scrollDown()
        }
      })
    },
@ -200,7 +214,7 @@ const Chat = {
      this.$nextTick(() => {
        scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
      })
-      if (forceRead || this.newMessageCount > 0) {
+      if (forceRead) {
        this.readChat()
      }
    },
@ -208,7 +222,10 @@ const Chat = {
      if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
      if (document.hidden) { return }
      const lastReadId = this.currentChatMessageService.maxId
-      this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
+      this.$store.dispatch('readChat', {
+        id: this.currentChat.id,
+        lastReadId
+      })
    },
    bottomedOut (offset) {
      return isBottomedOut(this.$refs.scrollable, offset)
@ -217,6 +234,13 @@ const Chat = {
      const scrollable = this.$refs.scrollable
      return scrollable && scrollable.scrollTop <= 0
    },
+    cullOlderCheck () {
+      window.setTimeout(() => {
+        if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
+          this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
+        }
+      }, 5000)
+    },
    handleScroll: _.throttle(function () {
      if (!this.currentChat) { return }

@ -224,13 +248,20 @@ const Chat = {
        this.fetchChat({ maxId: this.currentChatMessageService.minId })
      } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
        this.jumpToBottomButtonVisible = false
+        this.cullOlderCheck()
        if (this.newMessageCount > 0) {
-          this.readChat()
+          // Use a delay before marking as read to prevent situation where new messages
+          // arrive just as you're leaving the view and messages that you didn't actually
+          // get to see get marked as read.
+          window.setTimeout(() => {
+            // Don't mark as read if the element doesn't exist, user has left chat view
+            if (this.$el) this.readChat()
+          }, MARK_AS_READ_DELAY)
        }
      } else {
        this.jumpToBottomButtonVisible = true
      }
-    }, 100),
+    }, 200),
    handleScrollUp (positionBeforeLoading) {
      const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
      this.$refs.scrollable.scrollTo({
@ -264,6 +295,14 @@ const Chat = {
              if (isFirstFetch) {
                this.updateScrollableContainerHeight()
              }
+
+              // In vertical screens, the first batch of fetched messages may not always take the
+              // full height of the scrollable container.
+              // If this is the case, we want to fetch the messages until the scrollable container
+              // is fully populated so that the user has the ability to scroll up and load the history.
+              if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
+                this.fetchChat({ maxId: this.currentChatMessageService.minId })
+              }
            })
          })
        })
@ -292,42 +331,74 @@ const Chat = {
      })
      this.fetchChat({ isFirstFetch: true })
    },
-    sendMessage ({ status, media }) {
+    handleAttachmentPosting () {
+      this.$nextTick(() => {
+        this.handleResize()
+        // When the posting form size changes because of a media attachment, we need an extra resize
+        // to account for the potential delay in the DOM update.
+        setTimeout(() => {
+          this.updateScrollableContainerHeight()
+        }, SAFE_RESIZE_TIME_OFFSET)
+        this.scrollDown({ forceRead: true })
+      })
+    },
+    sendMessage ({ status, media, idempotencyKey }) {
      const params = {
        id: this.currentChat.id,
-        content: status
+        content: status,
+        idempotencyKey
      }

      if (media[0]) {
        params.mediaId = media[0].id
      }

-      return this.backendInteractor.sendChatMessage(params)
+      const fakeMessage = buildFakeMessage({
+        attachments: media,
+        chatId: this.currentChat.id,
+        content: status,
+        userId: this.currentUser.id,
+        idempotencyKey
+      })
+
+      this.$store.dispatch('addChatMessages', {
+        chatId: this.currentChat.id,
+        messages: [fakeMessage]
+      }).then(() => {
+        this.handleAttachmentPosting()
+      })
+
+      return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
+    },
+    doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
+      if (retriesLeft <= 0) return
+
+      this.backendInteractor.sendChatMessage(params)
        .then(data => {
          this.$store.dispatch('addChatMessages', {
            chatId: this.currentChat.id,
-            messages: [data],
-            updateMaxId: false
-          }).then(() => {
-            this.$nextTick(() => {
-              this.handleResize()
-              // When the posting form size changes because of a media attachment, we need an extra resize
-              // to account for the potential delay in the DOM update.
-              setTimeout(() => {
-                this.updateScrollableContainerHeight()
-              }, SAFE_RESIZE_TIME_OFFSET)
-              this.scrollDown({ forceRead: true })
-            })
+            updateMaxId: false,
+            messages: [{ ...data, fakeId: fakeMessage.id }]
          })

          return data
        })
        .catch(error => {
          console.error('Error sending message', error)
-          return {
-            error: this.$t('chats.error_sending_message')
+          this.$store.dispatch('handleMessageError', {
+            chatId: this.currentChat.id,
+            fakeId: fakeMessage.id,
+            isRetry: retriesLeft !== MAX_RETRIES
+          })
+          if ((error.statusCode >= 500 && error.statusCode < 600) || error.message === 'Failed to fetch') {
+            this.messageRetriers[fakeMessage.id] = setTimeout(() => {
+              this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
+            }, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
          }
+          return {}
        })
+
+      return Promise.resolve(fakeMessage)
    },
    goBack () {
      this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@ -25,7 +25,7 @@
    min-height: 100%;
    margin: 0 0 0 0;
    border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
+    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;

    &::after {
      border-radius: 0;
@ -58,12 +58,10 @@

  .go-back-button {
    cursor: pointer;
-    margin-right: 1.4em;
-
-    i {
-      display: flex;
-      align-items: center;
-    }
+    width: 28px;
+    text-align: center;
+    padding: 0.6em;
+    margin: -0.6em 0.6em -0.6em -0.6em;
  }

  .jump-to-bottom-button {
@ -78,7 +76,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: 0.35s all;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
@ -100,10 +98,10 @@
    .unread-message-count {
      font-size: 0.8em;
      left: 50%;
-      transform: translate(-50%, 0);
-      border-radius: 100%;
      margin-top: -1rem;
-      padding: 0;
+      padding: 0.1em;
+      border-radius: 50px;
+      position: absolute;
    }

    .chat-loading-error {
@ -140,11 +138,21 @@
    }

    .chat-view-heading {
+      box-sizing: border-box;
      position: static;
      z-index: 9999;
      top: 0;
      margin-top: 0;
      border-radius: 0;
+
+      /* This practically overlays the panel heading color over panel background
+       * color. This is needed because we allow transparent panel background and
+       * it doesn't work well in this "disjointed panel header" case
+       */
+      background:
+        linear-gradient(to top, var(--panel), var(--panel)),
+        linear-gradient(to top, var(--bg), var(--bg));
+      height: 50px;
    }

    .scrollable-message-list {
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@ -14,7 +14,10 @@
            class="go-back-button"
            @click="goBack"
          >
-            <i class="button-icon icon-left-open" />
+            <FAIcon
+              size="lg"
+              icon="chevron-left"
+            />
          </a>
          <div class="title text-center">
            <ChatTitle
@ -58,14 +61,15 @@
              :class="{ 'visible': jumpToBottomButtonVisible }"
              @click="scrollDown({ behavior: 'smooth' })"
            >
-              <i class="icon-down-open">
+              <span>
+                <FAIcon icon="chevron-down" />
                <div
                  v-if="newMessageCount"
                  class="badge badge-notification unread-chat-count unread-message-count"
                >
                  {{ newMessageCount }}
                </div>
-              </i>
+              </span>
            </div>
            <PostStatusForm
              :disable-subject="true"
@ -76,6 +80,7 @@
              :disable-sensitivity-checkbox="true"
              :disable-submit="errorLoadingChat || !currentChat"
              :disable-preview="true"
+              :optimistic-posting="true"
              :post-handler="sendMessage"
              :submit-on-enter="!mobileLayout"
              :preserve-focus="!mobileLayout"
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@ -24,3 +24,10 @@ export const isBottomedOut = (el, offset = 0) => {
 export const scrollableContainerHeight = (inner, header, footer) => {
  return inner.offsetHeight - header.clientHeight - footer.clientHeight
 }
+
+// Returns whether or not the scrollbar is visible.
+export const isScrollable = (el) => {
+  if (!el) return
+
+  return el.scrollHeight > el.clientHeight
+}
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@ -10,7 +10,10 @@
      <span class="title">
        {{ $t("chats.chats") }}
      </span>
-      <button @click="newChat">
+      <button
+        class="button-default"
+        @click="newChat"
+      >
        {{ $t("chats.new") }}
      </button>
    </div>
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@ -21,6 +21,12 @@
          />
        </span>
        <span class="heading-right" />
+        <div class="time-wrapper">
+          <Timeago
+            :time="chat.updated_at"
+            :auto-update="60"
+          />
+        </div>
      </div>
      <div class="chat-preview">
        <StatusContent
@ -35,12 +41,6 @@
        </div>
      </div>
    </div>
-    <div class="time-wrapper">
-      <Timeago
-        :time="chat.updated_at"
-        :auto-update="60"
-      />
-    </div>
  </div>
 </template>

--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@ -7,6 +7,16 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import StatusContent from '../status_content/status_content.vue'
 import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faEllipsisH
+)

 const ChatMessage = {
  name: 'ChatMessage',
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@ -24,16 +24,13 @@
    }
  }

-  .icon-ellipsis {
+  .menu-icon {
    cursor: pointer;

    &:hover, .extra-button-popover.open & {
      color: $fallback--text;
      color: var(--text, $fallback--text);
    }
-
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
  }

  .popover {
@ -101,6 +98,19 @@
    }
  }

+  .pending {
+    .status-content.media-body, .created-at {
+      color: var(--faint);
+    }
+  }
+
+  .error {
+    .status-content.media-body, .created-at {
+      color: $fallback--cRed;
+      color: var(--badgeNotification, $fallback--cRed);
+    }
+  }
+
  .incoming {
    a {
      color: var(--chatMessageIncomingLink, $fallback--link);
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@ -32,7 +32,7 @@
        >
          <div
            class="media status"
-            :class="{ 'without-attachment': !hasAttachment }"
+            :class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
            style="position: relative"
            @mouseenter="hovered = true"
            @mouseleave="hovered = false"
@ -53,18 +53,19 @@
                <div slot="content">
                  <div class="dropdown-menu">
                    <button
-                      class="dropdown-item dropdown-item-icon"
+                      class="button-default dropdown-item dropdown-item-icon"
                      @click="deleteMessage"
                    >
-                      <i class="icon-cancel" /> {{ $t("chats.delete") }}
+                      <FAIcon icon="times" /> {{ $t("chats.delete") }}
                    </button>
                  </div>
                </div>
                <button
                  slot="trigger"
+                  class="button-default menu-icon"
                  :title="$t('chats.more')"
                >
-                  <i class="icon-ellipsis" />
+                  <FAIcon icon="ellipsis-h" />
                </button>
              </Popover>
            </div>
--- a/src/components/chat_message_date/chat_message_date.vue
+++ b/src/components/chat_message_date/chat_message_date.vue
@ -5,6 +5,8 @@
 </template>

 <script>
+import localeService from 'src/services/locale/locale.service.js'
+
 export default {
  name: 'Timeago',
  props: ['date'],
@ -16,7 +18,7 @@ export default {
      if (this.date.getTime() === today.getTime()) {
        return this.$t('display_date.today')
      } else {
-        return this.date.toLocaleDateString('en', { day: 'numeric', month: 'long' })
+        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
      }
    }
  }
--- a/src/components/chat_new/chat_new.js
+++ b/src/components/chat_new/chat_new.js
@ -1,6 +1,16 @@
 import { mapState, mapGetters } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)

 const chatNew = {
  components: {
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@ -8,9 +8,7 @@
    }
  }

-  .icon-search {
-    font-size: 1.5em;
-    float: right;
+  .search-icon {
    margin-right: 0.3em;
  }

@ -25,5 +23,9 @@

  .go-back-button {
    cursor: pointer;
+    width: 28px;
+    text-align: center;
+    padding: 0.6em;
+    margin: -0.6em 0.6em -0.6em -0.6em;
  }
 }
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@ -11,12 +11,18 @@
        class="go-back-button"
        @click="goBack"
      >
-        <i class="button-icon icon-left-open" />
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
      </a>
    </div>
    <div class="input-wrap">
      <div class="input-search">
-        <i class="button-icon icon-search" />
+        <FAIcon
+          class="search-icon fa-scale-110 fa-old-padding"
+          icon="search"
+        />
      </div>
      <input
        ref="search"
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@ -1,4 +1,14 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBullhorn,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBullhorn,
+  faTimes
+)

 const chatPanel = {
  props: [ 'floating' ],
@ -25,6 +35,18 @@ const chatPanel = {
    userProfileLink (user) {
      return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
    }
+  },
+  watch: {
+    messages (newVal) {
+      const scrollEl = this.$el.querySelector('.chat-window')
+      if (!scrollEl) return
+      if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
+        this.$nextTick(() => {
+          if (!scrollEl) return
+          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
+        })
+      }
+    }
  }
 }

--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@ -10,17 +10,15 @@
        @click.stop.prevent="togglePanel"
      >
        <div class="title">
-          <span>{{ $t('shoutbox.title') }}</span>
-          <i
+          {{ $t('shoutbox.title') }}
+          <FAIcon
            v-if="floating"
-            class="icon-cancel"
+            icon="times"
+            class="close-icon"
          />
        </div>
      </div>
-      <div
-        v-chat-scroll
-        class="chat-window"
-      >
+      <div class="chat-window">
        <div
          v-for="message in messages"
          :key="message.id"
@ -63,7 +61,10 @@
        @click.stop.prevent="togglePanel"
      >
        <div class="title">
-          <i class="icon-megaphone" />
+          <FAIcon
+            class="icon"
+            icon="bullhorn"
+          />
          {{ $t('shoutbox.title') }}
        </div>
      </div>
@ -87,9 +88,17 @@
 .chat-panel {
  .chat-heading {
    cursor: pointer;
-    .icon-comment-empty {
+
+    .icon {
      color: $fallback--text;
      color: var(--text, $fallback--text);
+      margin-right: 0.5em;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
    }
  }

--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@ -12,7 +12,7 @@ export default Vue.component('chat-title', {
  ],
  computed: {
    title () {
-      return this.user ? this.user.screen_name : ''
+      return this.user ? this.user.screen_name_ui : ''
    },
    htmlTitle () {
      return this.user ? this.user.name_html : ''
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@ -8,13 +8,13 @@
      class="rating"
    >
      <span v-if="contrast.aaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
      </span>
      <span v-if="!contrast.aaa && contrast.aa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
      </span>
      <span v-if="!contrast.aaa && !contrast.aa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
      </span>
    </span>
    <span
@ -23,19 +23,32 @@
      :title="hint_18pt"
    >
      <span v-if="contrast.laaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
      </span>
      <span v-if="!contrast.laaa && contrast.laa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
      </span>
      <span v-if="!contrast.laaa && !contrast.laa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
      </span>
    </span>
  </span>
 </template>

 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+)
+
 export default {
  props: {
    large: {
@ -85,6 +98,7 @@ export default {
  .rating {
    display: inline-block;
    text-align: center;
+    margin-left: 0.5em;
  }
 }
 </style>
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -10,12 +10,13 @@
      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>
-      </span>
+      <button
+        v-if="collapsable"
+        class="button-unstyled -link"
+        @click.prevent="toggleExpanded"
+      >
+        {{ $t('timeline.collapse') }}
+      </button>
    </div>
    <status
      v-for="status in conversation"
@ -49,7 +50,6 @@

 .Conversation {
  .conversation-status {
-    border-left: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--border, $fallback--border);
@ -57,13 +57,6 @@
  }

  &.-expanded {
-    .conversation-status {
-      border-color: $fallback--border;
-      border-color: var(--border, $fallback--border);
-      border-left-color: $fallback--cRed;
-      border-left-color: var(--cRed, $fallback--cRed);
-    }
-
    .conversation-status:last-child {
      border-bottom: none;
      border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@ -0,0 +1,89 @@
+import SearchBar from 'components/search_bar/search_bar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+)
+
+export default {
+  components: {
+    SearchBar
+  },
+  data: () => ({
+    searchBarHidden: true,
+    supportsMask: window.CSS && window.CSS.supports && (
+      window.CSS.supports('mask-size', 'contain') ||
+        window.CSS.supports('-webkit-mask-size', 'contain') ||
+        window.CSS.supports('-moz-mask-size', 'contain') ||
+        window.CSS.supports('-ms-mask-size', 'contain') ||
+        window.CSS.supports('-o-mask-size', 'contain')
+    )
+  }),
+  computed: {
+    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
+    logoStyle () {
+      return {
+        'visibility': this.enableMask ? 'hidden' : 'visible'
+      }
+    },
+    logoMaskStyle () {
+      return this.enableMask ? {
+        'mask-image': `url(${this.$store.state.instance.logo})`
+      } : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      }
+    },
+    logoBgStyle () {
+      return Object.assign({
+        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        opacity: this.searchBarHidden ? 1 : 0
+      }, this.enableMask ? {} : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      })
+    },
+    logo () { return this.$store.state.instance.logo },
+    sitename () { return this.$store.state.instance.name },
+    hideSitename () { return this.$store.state.instance.hideSitename },
+    logoLeft () { return this.$store.state.instance.logoLeft },
+    currentUser () { return this.$store.state.users.currentUser },
+    privateMode () { return this.$store.state.instance.private }
+  },
+  methods: {
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    onSearchBarToggled (hidden) {
+      this.searchBarHidden = hidden
+    },
+    openSettingsModal () {
+      this.$store.dispatch('openSettingsModal')
+    }
+  }
+}
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -0,0 +1,117 @@
+@import '../../_variables.scss';
+
+.DesktopNav {
+  height: 50px;
+  width: 100%;
+  position: fixed;
+
+  a {
+    color: var(--topBarLink, $fallback--link);
+  }
+
+  .inner-nav {
+    display: grid;
+    grid-template-rows: 50px;
+    grid-template-columns: 2fr auto 2fr;
+    grid-template-areas: "sitename logo actions";
+    box-sizing: border-box;
+    padding: 0 1.2em;
+    margin: auto;
+    max-width: 980px;
+  }
+
+  &.-logoLeft {
+    grid-template-columns: auto 2fr 2fr;
+    grid-template-areas: "logo sitename actions";
+  }
+
+  .button-default {
+    &, svg {
+      color: $fallback--text;
+      color: var(--btnTopBarText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPressedTopBar, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPressedTopBarText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnDisabledTopBarText, $fallback--text);
+    }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnToggledTopBarText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btnToggledTopBar, $fallback--fg)
+    }
+  }
+
+  .logo {
+    grid-area: logo;
+    position: relative;
+    transition: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
+
+    @media all and (min-width: 800px) {
+      opacity: 1 !important;
+    }
+
+    .mask {
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      background-color: $fallback--fg;
+      background-color: var(--topBarText, $fallback--fg);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    img {
+      display: inline-block;
+      height: 50px;
+    }
+  }
+
+  .nav-icon {
+    margin-left: 0.2em;
+    width: 2em;
+    height: 100%;
+    text-align: center;
+
+    .svg-inline--fa {
+      color: $fallback--link;
+      color: var(--topBarLink, $fallback--link);
+    }
+  }
+
+  .sitename {
+    grid-area: sitename;
+  }
+
+  .actions {
+    grid-area: actions;
+  }
+
+  .item {
+    flex: 1;
+    line-height: 50px;
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+
+    &.right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+}
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -0,0 +1,81 @@
+<template>
+  <nav
+    id="nav"
+    class="DesktopNav"
+    :class="{ '-logoLeft': logoLeft }"
+    @click="scrollToTop()"
+  >
+    <div class="inner-nav">
+      <div class="item sitename">
+        <router-link
+          v-if="!hideSitename"
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+        >
+          {{ sitename }}
+        </router-link>
+      </div>
+      <router-link
+        class="logo"
+        :to="{ name: 'root' }"
+        :style="logoBgStyle"
+      >
+        <div
+          class="mask"
+          :style="logoMaskStyle"
+        />
+        <img
+          :src="logo"
+          :style="logoStyle"
+        >
+      </router-link>
+      <div class="item right actions">
+        <search-bar
+          v-if="currentUser || !privateMode"
+          @toggled="onSearchBarToggled"
+          @click.stop.native
+        />
+        <button
+          class="button-unstyled nav-icon"
+          @click.stop="openSettingsModal"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="cog"
+            :title="$t('nav.preferences')"
+          />
+        </button>
+        <a
+          v-if="currentUser && currentUser.role === 'admin'"
+          href="/pleroma/admin/#/login-pleroma"
+          class="nav-icon"
+          target="_blank"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="tachometer-alt"
+            :title="$t('nav.administration')"
+          />
+        </a>
+        <button
+          v-if="currentUser"
+          class="button-unstyled nav-icon"
+          @click.prevent="logout"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+            :title="$t('login.logout')"
+          />
+        </button>
+      </div>
+    </div>
+  </nav>
+</template>
+<script src="./desktop_nav.js"></script>
+
+<style src="./desktop_nav.scss" lang="scss"></style>
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@ -6,7 +6,7 @@
    <ProgressButton
      v-if="muted"
      :click="unmuteDomain"
-      class="btn btn-default"
+      class="btn button-default"
    >
      {{ $t('domain_mute_card.unmute') }}
      <template slot="progress">
@ -16,7 +16,7 @@
    <ProgressButton
      v-else
      :click="muteDomain"
-      class="btn btn-default"
+      class="btn button-default"
    >
      {{ $t('domain_mute_card.mute') }}
      <template slot="progress">
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -3,6 +3,15 @@ import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'

+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSmileBeam
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faSmileBeam
+)
+
 /**
 * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
 * without having to give up the comfort of <input/> and <textarea/> elements
@ -105,7 +114,8 @@ const EmojiInput = {
      showPicker: false,
      temporarilyHideSuggestions: false,
      keepOpen: false,
-      disableClickOutside: false
+      disableClickOutside: false,
+      suggestions: []
    }
  },
  components: {
@ -115,21 +125,6 @@ const EmojiInput = {
    padEmoji () {
      return this.$store.getters.mergedConfig.padEmoji
    },
-    suggestions () {
-      const firstchar = this.textAtCaret.charAt(0)
-      if (this.textAtCaret === firstchar) { return [] }
-      const matchedSuggestions = this.suggest(this.textAtCaret)
-      if (matchedSuggestions.length <= 0) {
-        return []
-      }
-      return take(matchedSuggestions, 5)
-        .map(({ imageUrl, ...rest }, index) => ({
-          ...rest,
-          // eslint-disable-next-line camelcase
-          img: imageUrl || '',
-          highlighted: index === this.highlighted
-        }))
-    },
    showSuggestions () {
      return this.focused &&
        this.suggestions &&
@ -179,14 +174,38 @@ const EmojiInput = {
  watch: {
    showSuggestions: function (newValue) {
      this.$emit('shown', newValue)
+    },
+    textAtCaret: async function (newWord) {
+      const firstchar = newWord.charAt(0)
+      this.suggestions = []
+      if (newWord === firstchar) return
+      const matchedSuggestions = await this.suggest(newWord)
+      // Async: cancel if textAtCaret has changed during wait
+      if (this.textAtCaret !== newWord) return
+      if (matchedSuggestions.length <= 0) return
+      this.suggestions = take(matchedSuggestions, 5)
+        .map(({ imageUrl, ...rest }) => ({
+          ...rest,
+          img: imageUrl || ''
+        }))
+    },
+    suggestions (newValue) {
+      this.$nextTick(this.resize)
    }
  },
  methods: {
+    focusPickerInput () {
+      const pickerEl = this.$refs.picker.$el
+      if (!pickerEl) return
+      const pickerInput = pickerEl.querySelector('input')
+      if (pickerInput) pickerInput.focus()
+    },
    triggerShowPicker () {
      this.showPicker = true
      this.$refs.picker.startEmojiLoad()
      this.$nextTick(() => {
        this.scrollIntoView()
+        this.focusPickerInput()
      })
      // This temporarily disables "click outside" handler
      // since external trigger also means click originates
@ -202,6 +221,7 @@ const EmojiInput = {
      if (this.showPicker) {
        this.scrollIntoView()
        this.$refs.picker.startEmojiLoad()
+        this.$nextTick(this.focusPickerInput)
      }
    },
    replace (replacement) {
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@ -6,13 +6,14 @@
  >
    <slot />
    <template v-if="enableEmojiPicker">
-      <div
+      <button
        v-if="!hideEmojiButton"
-        class="emoji-picker-icon"
+        class="button-unstyled emoji-picker-icon"
+        type="button"
        @click.prevent="togglePicker"
      >
-        <i class="icon-smile" />
-      </div>
+        <FAIcon :icon="['far', 'smile-beam']" />
+      </button>
      <EmojiPicker
        v-if="enableEmojiPicker"
        ref="picker"
@ -37,7 +38,7 @@
          v-for="(suggestion, index) in suggestions"
          :key="index"
          class="autocomplete-item"
-          :class="{ highlighted: suggestion.highlighted }"
+          :class="{ highlighted: index === highlighted }"
          @click.stop.prevent="onClick($event, suggestion)"
        >
          <span class="image">
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@ -1,4 +1,3 @@
-import { debounce } from 'lodash'
 /**
 * suggest - generates a suggestor function to be used by emoji-input
 * data: object providing source information for specific types of suggestions:
@ -11,19 +10,19 @@ import { debounce } from 'lodash'
 * doesn't support user linking you can just provide only emoji.
 */

-const debounceUserSearch = debounce((data, input) => {
-  data.updateUsersList(input)
-}, 500)
-
-export default data => input => {
-  const firstChar = input[0]
-  if (firstChar === ':' && data.emoji) {
-    return suggestEmoji(data.emoji)(input)
+export default data => {
+  const emojiCurry = suggestEmoji(data.emoji)
+  const usersCurry = data.store && suggestUsers(data.store)
+  return input => {
+    const firstChar = input[0]
+    if (firstChar === ':' && data.emoji) {
+      return emojiCurry(input)
+    }
+    if (firstChar === '@' && usersCurry) {
+      return usersCurry(input)
+    }
+    return []
  }
-  if (firstChar === '@' && data.users) {
-    return suggestUsers(data)(input)
-  }
-  return []
 }

 export const suggestEmoji = emojis => input => {
@ -57,50 +56,75 @@ export const suggestEmoji = emojis => input => {
    })
 }

-export const suggestUsers = data => input => {
-  const noPrefix = input.toLowerCase().substr(1)
-  const users = data.users
+export const suggestUsers = ({ dispatch, state }) => {
+  // Keep some persistent values in closure, most importantly for the
+  // custom debounce to work. Lodash debounce does not return a promise.
+  let suggestions = []
+  let previousQuery = ''
+  let timeout = null
+  let cancelUserSearch = null

-  const newUsers = users.filter(
-    user =>
-      user.screen_name.toLowerCase().startsWith(noPrefix) ||
-      user.name.toLowerCase().startsWith(noPrefix)
-
-    /* taking only 20 results so that sorting is a bit cheaper, we display
-     * only 5 anyway. could be inaccurate, but we ideally we should query
-     * backend anyway
-     */
-  ).slice(0, 20).sort((a, b) => {
-    let aScore = 0
-    let bScore = 0
-
-    // Matches on screen name (i.e. user@instance) makes a priority
-    aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
-    bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
-
-    // Matches on name takes second priority
-    aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
-    bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
-
-    const diff = (bScore - aScore) * 10
-
-    // Then sort alphabetically
-    const nameAlphabetically = a.name > b.name ? 1 : -1
-    const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
-
-    return diff + nameAlphabetically + screenNameAlphabetically
-    /* eslint-disable camelcase */
-  }).map(({ screen_name, name, profile_image_url_original }) => ({
-    displayText: screen_name,
-    detailText: name,
-    imageUrl: profile_image_url_original,
-    replacement: '@' + screen_name + ' '
-  }))
-
-  // BE search users to get more comprehensive results
-  if (data.updateUsersList) {
-    debounceUserSearch(data, noPrefix)
+  const userSearch = (query) => dispatch('searchUsers', { query })
+  const debounceUserSearch = (query) => {
+    cancelUserSearch && cancelUserSearch()
+    return new Promise((resolve, reject) => {
+      timeout = setTimeout(() => {
+        userSearch(query).then(resolve).catch(reject)
+      }, 300)
+      cancelUserSearch = () => {
+        clearTimeout(timeout)
+        resolve([])
+      }
+    })
+  }
+
+  return async input => {
+    const noPrefix = input.toLowerCase().substr(1)
+    if (previousQuery === noPrefix) return suggestions
+
+    suggestions = []
+    previousQuery = noPrefix
+    // Fetch more and wait, don't fetch if there's the 2nd @ because
+    // the backend user search can't deal with it.
+    // Reference semantics make it so that we get the updated data after
+    // the await.
+    if (!noPrefix.includes('@')) {
+      await debounceUserSearch(noPrefix)
+    }
+
+    const newSuggestions = state.users.users.filter(
+      user =>
+        user.screen_name.toLowerCase().startsWith(noPrefix) ||
+        user.name.toLowerCase().startsWith(noPrefix)
+    ).slice(0, 20).sort((a, b) => {
+      let aScore = 0
+      let bScore = 0
+
+      // Matches on screen name (i.e. user@instance) makes a priority
+      aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+      bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+
+      // Matches on name takes second priority
+      aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+      bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+
+      const diff = (bScore - aScore) * 10
+
+      // Then sort alphabetically
+      const nameAlphabetically = a.name > b.name ? 1 : -1
+      const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
+
+      return diff + nameAlphabetically + screenNameAlphabetically
+      /* eslint-disable camelcase */
+    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
+      displayText: screen_name_ui,
+      detailText: name,
+      imageUrl: profile_image_url_original,
+      replacement: '@' + screen_name + ' '
+    }))
+    /* eslint-enable camelcase */
+
+    suggestions = newSuggestions || []
+    return suggestions
  }
-  return newUsers
-  /* eslint-enable camelcase */
 }
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -1,4 +1,16 @@
 import Checkbox from '../checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBoxOpen,
+  faStickyNote,
+  faSmileBeam
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBoxOpen,
+  faStickyNote,
+  faSmileBeam
+)

 // At widest, approximately 20 emoji are visible in a row,
 // loading 3 rows, could be overkill for narrow picker
@ -177,13 +189,13 @@ const EmojiPicker = {
        {
          id: 'custom',
          text: this.$t('emoji.custom'),
-          icon: 'icon-smile',
+          icon: 'smile-beam',
          emojis: customEmojis
        },
        {
          id: 'standard',
          text: this.$t('emoji.unicode'),
-          icon: 'icon-picture',
+          icon: 'box-open',
          emojis: filterByKeyword(standardEmojis, this.keyword)
        }
      ]
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@ -82,7 +82,7 @@
      &.active {
        border-bottom: 4px solid;

-        i {
+        svg {
          color: $fallback--lightText;
          color: var(--lightText, $fallback--lightText);
        }
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@ -13,7 +13,10 @@
          :title="group.text"
          @click.prevent="highlight(group.id)"
        >
-          <i :class="group.icon" />
+          <FAIcon
+            :icon="group.icon"
+            fixed-width
+          />
        </span>
      </span>
      <span
@ -26,7 +29,10 @@
          :title="$t('emoji.stickers')"
          @click.prevent="toggleStickers"
        >
-          <i class="icon-star" />
+          <FAIcon
+            icon="sticky-note"
+            fixed-width
+          />
        </span>
      </span>
    </div>
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@ -6,7 +6,7 @@
      :users="accountsForEmoji[reaction.name]"
    >
      <button
-        class="emoji-reaction btn btn-default"
+        class="emoji-reaction btn button-default"
        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
        @click="emojiOnClick(reaction.name, $event)"
        @mouseenter="fetchEmojiReactionsByIfMissing()"
--- a/src/components/export_import/export_import.vue
+++ b/src/components/export_import/export_import.vue
@ -2,13 +2,13 @@
  <div class="import-export-container">
    <slot name="before" />
    <button
-      class="btn"
+      class="btn button-default"
      @click="exportData"
    >
      {{ exportLabel }}
    </button>
    <button
-      class="btn"
+      class="btn button-default"
      @click="importData"
    >
      {{ importLabel }}
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@ -1,3 +1,10 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const Exporter = {
  props: {
    getContent: {
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@ -1,12 +1,17 @@
 <template>
  <div class="exporter">
    <div v-if="processing">
-      <i class="icon-spin4 animate-spin exporter-processing" />
+      <FAIcon
+        icon="circle-notch"
+        size="lg"
+        spin
+      />
+
      <span>{{ processingMessage }}</span>
    </div>
    <button
      v-else
-      class="btn btn-default"
+      class="btn button-default"
      @click="process"
    >
      {{ exportButtonLabel }}
@ -19,7 +24,6 @@
 <style lang="scss">
 .exporter {
  &-processing {
-    font-size: 1.5em;
    margin: 0.25em;
  }
 }
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@ -1,4 +1,28 @@
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH,
+  faBookmark,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt,
+  faExternalLinkAlt
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faBookmark as faBookmarkReg,
+  faFlag
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faEllipsisH,
+  faBookmark,
+  faBookmarkReg,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt,
+  faExternalLinkAlt,
+  faFlag
+)

 const ExtraButtons = {
  props: [ 'status' ],
@ -44,6 +68,9 @@ const ExtraButtons = {
      this.$store.dispatch('unbookmark', { id: this.status.id })
        .then(() => this.$emit('onSuccess'))
        .catch(err => this.$emit('onError', err.error.error))
+    },
+    reportStatus () {
+      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
    }
  },
  computed: {
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@ -1,9 +1,11 @@
 <template>
  <Popover
+    class="ExtraButtons"
    trigger="click"
    placement="top"
-    class="extra-button-popover"
+    :offset="{ y: 5 }"
    :bound-to="{ x: 'container' }"
+    remove-padding
  >
    <div
      slot="content"
@ -12,71 +14,122 @@
      <div class="dropdown-menu">
        <button
          v-if="canMute && !status.thread_muted"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="muteConversation"
        >
-          <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.mute_conversation") }}</span>
        </button>
        <button
          v-if="canMute && status.thread_muted"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="unmuteConversation"
        >
-          <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.unmute_conversation") }}</span>
        </button>
        <button
          v-if="!status.pinned && canPin"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="pinStatus"
          @click="close"
        >
-          <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.pin") }}</span>
        </button>
        <button
          v-if="status.pinned && canPin"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="unpinStatus"
          @click="close"
        >
-          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.unpin") }}</span>
        </button>
        <button
          v-if="!status.bookmarked"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="bookmarkStatus"
          @click="close"
        >
-          <i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon
+            fixed-width
+            :icon="['far', 'bookmark']"
+          /><span>{{ $t("status.bookmark") }}</span>
        </button>
        <button
          v-if="status.bookmarked"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="unbookmarkStatus"
          @click="close"
        >
-          <i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon
+            fixed-width
+            icon="bookmark"
+          /><span>{{ $t("status.unbookmark") }}</span>
        </button>
        <button
          v-if="canDelete"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="deleteStatus"
          @click="close"
        >
-          <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon
+            fixed-width
+            icon="times"
+          /><span>{{ $t("status.delete") }}</span>
        </button>
        <button
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
          @click.prevent="copyLink"
          @click="close"
        >
-          <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon
+            fixed-width
+            icon="share-alt"
+          /><span>{{ $t("status.copy_link") }}</span>
+        </button>
+        <a
+          v-if="!status.is_local"
+          class="button-default dropdown-item dropdown-item-icon"
+          title="Source"
+          :href="status.external_url"
+          target="_blank"
+        >
+          <FAIcon
+            fixed-width
+            icon="external-link-alt"
+          /><span>{{ $t("status.external_source") }}</span>
+        </a>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click.prevent="reportStatus"
+          @click="close"
+        >
+          <FAIcon
+            fixed-width
+            :icon="['far', 'flag']"
+          /><span>{{ $t("user_card.report") }}</span>
        </button>
      </div>
    </div>
-    <i
+    <span
      slot="trigger"
-      class="icon-ellipsis button-icon"
-    />
+      class="popover-trigger"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </span>
  </Popover>
 </template>

@ -85,13 +138,21 @@
 <style lang="scss">
@import '../../_variables.scss';

-.icon-ellipsis {
-  cursor: pointer;
+.ExtraButtons {
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }

-  &:hover,
-  .extra-button-popover.open & {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+  .popover-trigger {
+    position: static;
+    padding: 10px;
+    margin: -10px;
+
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
  }
 }
 </style>
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@ -1,4 +1,14 @@
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faStar } from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar as faStarRegular
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faStar,
+  faStarRegular
+)

 const FavoriteButton = {
  props: ['status', 'loggedIn'],
@ -21,13 +31,6 @@ const FavoriteButton = {
    }
  },
  computed: {
-    classes () {
-      return {
-        'icon-star-empty': !this.status.favorited,
-        'icon-star': this.status.favorited,
-        'animate-spin': this.animated
-      }
-    },
    ...mapGetters(['mergedConfig'])
  }
 }
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@ -1,20 +1,31 @@
 <template>
-  <div v-if="loggedIn">
-    <i
-      :class="classes"
-      class="button-icon favorite-button fav-active"
+  <div class="FavoriteButton">
+    <button
+      v-if="loggedIn"
+      class="button-unstyled interactive"
+      :class="status.favorited && '-favorited'"
      :title="$t('tool_tip.favorite')"
      @click.prevent="favorite()"
-    />
-    <span v-if="!mergedConfig.hidePostStats && 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="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :icon="[status.favorited ? 'fas' : 'far', 'star']"
+        :spin="animated"
+      />
+    </button>
+    <span v-else>
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :title="$t('tool_tip.favorite')"
+        :icon="['far', 'star']"
+      />
+    </span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
+      class="action-counter"
+    >
+      {{ status.fave_num }}
+    </span>
  </div>
 </template>

@ -23,18 +34,29 @@
 <style lang="scss">
@import '../../_variables.scss';

-.fav-active {
-  cursor: pointer;
-  animation-duration: 0.6s;
+.FavoriteButton {
+  display: flex;

-  &:hover {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+  > :first-child {
+    padding: 10px;
+    margin: -10px -8px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .interactive {
+    .svg-inline--fa {
+      animation-duration: 0.6s;
+    }
+
+    &:hover .svg-inline--fa,
+    &.-favorited .svg-inline--fa {
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
+    }
  }
 }
-
-.favorite-button.icon-star {
-  color: $fallback--cOrange;
-  color: var(--cOrange, $fallback--cOrange);
-}
 </style>
--- a/src/components/features_panel/features_panel.js
+++ b/src/components/features_panel/features_panel.js
@ -1,3 +1,5 @@
+import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
+
 const FeaturesPanel = {
  computed: {
    chat: function () { return this.$store.state.instance.chatAvailable },
@ -6,7 +8,8 @@ const FeaturesPanel = {
    whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
    mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
    minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
-    textlimit: function () { return this.$store.state.instance.textlimit }
+    textlimit: function () { return this.$store.state.instance.textlimit },
+    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
  }
 }

--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@ -25,6 +25,7 @@
          </li>
          <li>{{ $t('features_panel.scope_options') }}</li>
          <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
+          <li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
        </ul>
      </div>
    </div>
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@ -1,6 +1,6 @@
 <template>
  <button
-    class="btn btn-default follow-button"
+    class="btn button-default follow-button"
    :class="{ toggled: isPressed }"
    :disabled="inProgress"
    :title="title"
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@ -2,13 +2,13 @@
  <basic-user-card :user="user">
    <div class="follow-request-card-content-container">
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="approveUser"
      >
        {{ $t('user_card.approve') }}
      </button>
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="denyUser"
      >
        {{ $t('user_card.deny') }}
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@ -1,4 +1,12 @@
 import { set } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)

 export default {
  props: [
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@ -41,7 +41,10 @@
          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
        </option>
      </select>
-      <i class="icon-down-open" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
    </label>
    <input
      v-if="isCustom"
--- a/src/components/global_notice_list/global_notice_list.js
+++ b/src/components/global_notice_list/global_notice_list.js
@ -1,3 +1,11 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)

 const GlobalNoticeList = {
  computed: {
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@ -9,10 +9,15 @@
      <div class="notice-message">
        {{ $t(notice.messageKey, notice.messageArgs) }}
      </div>
-      <i
-        class="button-icon icon-cancel"
+      <button
+        class="button-unstyled close-notice"
        @click="closeNotice(notice)"
-      />
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+        />
+      </button>
    </div>
  </div>
 </template>
@ -53,7 +58,7 @@
  .global-error {
    background-color: var(--alertPopupError, $fallback--cRed);
    color: var(--alertPopupErrorText, $fallback--text);
-    i {
+    .svg-inline--fa {
      color: var(--alertPopupErrorText, $fallback--text);
    }
  }
@ -61,17 +66,32 @@
  .global-warning {
    background-color: var(--alertPopupWarning, $fallback--cOrange);
    color: var(--alertPopupWarningText, $fallback--text);
-    i {
+    .svg-inline--fa {
      color: var(--alertPopupWarningText, $fallback--text);
    }
  }

+  .global-success {
+    background-color: var(--alertPopupSuccess, $fallback--cGreen);
+    color: var(--alertPopupSuccessText, $fallback--text);
+    .svg-inline--fa {
+      color: var(--alertPopupSuccessText, $fallback--text);
+    }
+  }
+
  .global-info {
    background-color: var(--alertPopupNeutral, $fallback--fg);
    color: var(--alertPopupNeutralText, $fallback--text);
-    i {
+    .svg-inline--fa {
      color: var(--alertPopupNeutralText, $fallback--text);
    }
  }
+
+  .close-notice {
+    padding-right: 0.2em;
+    .svg-inline--fa:hover {
+      opacity: 0.6;
+    }
+  }
 }
 </style>
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@ -1,5 +1,13 @@
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)

 const ImageCropper = {
  props: {
@ -43,8 +51,7 @@ const ImageCropper = {
      cropper: undefined,
      dataUrl: undefined,
      filename: undefined,
-      submitting: false,
-      submitError: null
+      submitting: false
    }
  },
  computed: {
@ -56,9 +63,6 @@ const ImageCropper = {
    },
    cancelText () {
      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
-    },
-    submitErrorMsg () {
-      return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
    }
  },
  methods: {
@ -72,12 +76,8 @@ const ImageCropper = {
    },
    submit (cropping = true) {
      this.submitting = true
-      this.avatarUploadError = null
      this.submitHandler(cropping && this.cropper, this.file)
        .then(() => this.destroy())
-        .catch((err) => {
-          this.submitError = err
-        })
        .finally(() => {
          this.submitting = false
        })
@ -103,9 +103,6 @@ const ImageCropper = {
        reader.readAsDataURL(this.file)
        this.$emit('changed', this.file, reader)
      }
-    },
-    clearError () {
-      this.submitError = null
    }
  },
  mounted () {
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@ -11,39 +11,30 @@
      </div>
      <div class="image-cropper-buttons-wrapper">
        <button
-          class="btn"
+          class="button-default btn"
          type="button"
          :disabled="submitting"
          @click="submit()"
          v-text="saveText"
        />
        <button
-          class="btn"
+          class="button-default btn"
          type="button"
          :disabled="submitting"
          @click="destroy"
          v-text="cancelText"
        />
        <button
-          class="btn"
+          class="button-default btn"
          type="button"
          :disabled="submitting"
          @click="submit(false)"
          v-text="saveWithoutCroppingText"
        />
-        <i
+        <FAIcon
          v-if="submitting"
-          class="icon-spin4 animate-spin"
-        />
-      </div>
-      <div
-        v-if="submitError"
-        class="alert error"
-      >
-        {{ submitErrorMsg }}
-        <i
-          class="button-icon icon-cancel"
-          @click="clearError"
+          spin
+          icon="circle-notch"
        />
      </div>
    </div>
--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@ -1,3 +1,14 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch,
+  faTimes
+)
+
 const Importer = {
  props: {
    submitHandler: {
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@ -7,27 +7,29 @@
        @change="change"
      >
    </form>
-    <i
+    <FAIcon
      v-if="submitting"
-      class="icon-spin4 animate-spin importer-uploading"
+      class="importer-uploading"
+      spin
+      icon="circle-notch"
    />
    <button
      v-else
-      class="btn btn-default"
+      class="btn button-default"
      @click="submit"
    >
      {{ submitButtonLabel }}
    </button>
    <div v-if="success">
-      <i
-        class="icon-cross"
+      <FAIcon
+        icon="times"
        @click="dismiss"
      />
      <p>{{ successMessage }}</p>
    </div>
    <div v-else-if="error">
-      <i
-        class="icon-cross"
+      <FAIcon
+        icon="times"
        @click="dismiss"
      />
      <p>{{ errorMessage }}</p>
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -12,31 +12,39 @@
        v-model="language"
      >
        <option
-          v-for="(langCode, i) in languageCodes"
-          :key="langCode"
-          :value="langCode"
+          v-for="lang in languages"
+          :key="lang.code"
+          :value="lang.code"
        >
-          {{ languageNames[i] }}
+          {{ lang.name }}
        </option>
      </select>
-      <i class="icon-down-open" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
    </label>
  </div>
 </template>

 <script>
 import languagesObject from '../../i18n/messages'
+import localeService from '../../services/locale/locale.service.js'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)

 export default {
  computed: {
-    languageCodes () {
-      return languagesObject.languages
-    },
-
-    languageNames () {
-      return _.map(this.languageCodes, this.getLanguageName)
+    languages () {
+      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
    },

    language: {
@ -50,11 +58,13 @@ export default {
  methods: {
    getLanguageName (code) {
      const specialLanguageNames = {
-        'ja': 'Japanese (日本語)',
-        'ja_easy': 'Japanese (やさしいにほんご)',
-        'zh': 'Chinese (简体中文)'
+        'ja_easy': 'やさしいにほんご',
+        'zh': '简体中文',
+        'zh_Hant': '繁體中文'
      }
-      return specialLanguageNames[code] || ISO6391.getName(code)
+      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
+      const browserLocale = localeService.internalToBrowserLocale(code)
+      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
    }
  }
 }
--- a/src/components/link-preview/link-preview.js
+++ b/src/components/link-preview/link-preview.js
@ -1,3 +1,5 @@
+import { mapGetters } from 'vuex'
+
 const LinkPreview = {
  name: 'LinkPreview',
  props: [
@ -15,11 +17,20 @@ const LinkPreview = {
      // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
      // as it makes sure to hide the image if somehow NSFW tagged preview can
      // exist.
-      return this.card.image && !this.nsfw && this.size !== 'hide'
+      return this.card.image && !this.censored && this.size !== 'hide'
+    },
+    censored () {
+      return this.nsfw && this.hideNsfwConfig
    },
    useDescription () {
      return this.card.description && /\S/.test(this.card.description)
-    }
+    },
+    hideNsfwConfig () {
+      return this.mergedConfig.hideNsfw
+    },
+    ...mapGetters([
+      'mergedConfig'
+    ])
  },
  created () {
    if (this.useImage) {
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@ -9,12 +9,17 @@
      <div
        v-if="useImage && imageLoaded"
        class="card-image"
-        :class="{ 'small-image': size === 'small' }"
      >
        <img :src="card.image">
      </div>
      <div class="card-content">
-        <span class="card-host faint">{{ card.provider_name }}</span>
+        <span class="card-host faint">
+          <span
+            v-if="censored"
+            class="nsfw-alert alert warning"
+          >{{ $t('status.nsfw') }}</span>
+          {{ card.provider_name }}
+        </span>
        <h4 class="card-title">{{ card.title }}</h4>
        <p
          v-if="useDescription"
@ -50,10 +55,6 @@
    }
  }

-  .small-image {
-    width: 80px;
-  }
-
  .card-content {
    max-height: 100%;
    margin: 0.5em;
@ -76,6 +77,10 @@
    max-height: calc(1.2em * 3 - 1px);
  }

+  .nsfw-alert {
+    margin: 2em 0;
+  }
+
  color: $fallback--text;
  color: var(--text, $fallback--text);
  border-style: solid;
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@ -1,5 +1,13 @@
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import oauthApi from '../../services/new_api/oauth.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)

 const LoginForm = {
  data: () => ({
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@ -61,7 +61,7 @@
            <button
              :disabled="loggingIn"
              type="submit"
-              class="btn btn-default"
+              class="btn button-default"
            >
              {{ $t('login.login') }}
            </button>
@ -76,8 +76,9 @@
    >
      <div class="alert error">
        {{ error }}
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
          @click="clearError"
        />
      </div>
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -3,6 +3,16 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronLeft,
+  faChevronRight
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronLeft,
+  faChevronRight
+)

 const MediaModal = {
  components: {
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -34,7 +34,10 @@
      class="modal-view-button-arrow modal-view-button-arrow--prev"
      @click.stop.prevent="goPrev"
    >
-      <i class="icon-left-open arrow-icon" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-left"
+      />
    </button>
    <button
      v-if="canNavigate"
@ -42,7 +45,10 @@
      class="modal-view-button-arrow modal-view-button-arrow--next"
      @click.stop.prevent="goNext"
    >
-      <i class="icon-right-open arrow-icon" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-right"
+      />
    </button>
  </Modal>
 </template>
@ -67,11 +73,21 @@
  }
 }

+@keyframes media-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .modal-image {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
  image-orientation: from-image; // NOTE: only FF supports this
+  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
 }

 .modal-view-button-arrow {
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@ -2,6 +2,14 @@
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'

+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faUpload, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUpload,
+  faCircleNotch
+)
+
 const mediaUpload = {
  data () {
    return {
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@ -1,30 +1,29 @@
 <template>
-  <div
+  <label
    class="media-upload"
    :class="{ disabled: disabled }"
+    :title="$t('tool_tip.media_upload')"
  >
-    <label
-      class="label"
-      :title="$t('tool_tip.media_upload')"
+    <FAIcon
+      v-if="uploading"
+      class="progress-icon"
+      icon="circle-notch"
+      spin
+    />
+    <FAIcon
+      v-if="!uploading"
+      class="new-icon"
+      icon="upload"
+    />
+    <input
+      v-if="uploadReady"
+      :disabled="disabled"
+      type="file"
+      style="position: fixed; top: -100em"
+      multiple="true"
+      @change="change"
    >
-      <i
-        v-if="uploading"
-        class="progress-icon icon-spin4 animate-spin"
-      />
-      <i
-        v-if="!uploading"
-        class="new-icon icon-upload"
-      />
-      <input
-        v-if="uploadReady"
-        :disabled="disabled"
-        type="file"
-        style="position: fixed; top: -100em"
-        multiple="true"
-        @change="change"
-      >
-    </label>
-  </div>
+  </label>
 </template>

 <script src="./media_upload.js" ></script>
@ -33,22 +32,6 @@
@import '../../_variables.scss';

 .media-upload {
-  .label {
-    display: inline-block;
-  }
-
-  .new-icon {
-    cursor: pointer;
-  }
-
-  .progress-icon {
-    display: inline-block;
-    line-height: 0;
-    &::before {
-      /* Overriding fontello to achieve the perfect speeeen */
-      margin: 0;
-      line-height: 0;
-    }
-  }
+  cursor: pointer;
 }
 </style>
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@ -1,5 +1,13 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)

 export default {
  data: () => ({
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@ -23,23 +23,25 @@
        <div class="form-group">
          <div class="login-bottom">
            <div>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
+                type="button"
                @click.prevent="requireTOTP"
              >
                {{ $t('login.enter_two_factor_code') }}
-              </a>
+              </button>
              <br>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
+                type="button"
                @click.prevent="abortMFA"
              >
                {{ $t('general.cancel') }}
-              </a>
+              </button>
            </div>
            <button
              type="submit"
-              class="btn btn-default"
+              class="btn button-default"
            >
              {{ $t('general.verify') }}
            </button>
@ -54,8 +56,9 @@
    >
      <div class="alert error">
        {{ error }}
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
          @click="clearError"
        />
      </div>
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@ -1,5 +1,14 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
+
 export default {
  data: () => ({
    code: null,
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@ -25,23 +25,25 @@
        <div class="form-group">
          <div class="login-bottom">
            <div>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
+                type="button"
                @click.prevent="requireRecovery"
              >
                {{ $t('login.enter_recovery_code') }}
-              </a>
+              </button>
              <br>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
+                type="button"
                @click.prevent="abortMFA"
              >
                {{ $t('general.cancel') }}
-              </a>
+              </button>
            </div>
            <button
              type="submit"
-              class="btn btn-default"
+              class="btn button-default"
            >
              {{ $t('general.verify') }}
            </button>
@ -56,8 +58,10 @@
    >
      <div class="alert error">
        {{ error }}
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          size="lg"
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
          @click="clearError"
        />
      </div>
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@ -3,6 +3,18 @@ import Notifications from '../notifications/notifications.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faBell,
+  faBars
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faBell,
+  faBars
+)

 const MobileNav = {
  components: {
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -1,49 +1,51 @@
 <template>
-  <div>
+  <div
+    class="MobileNav"
+  >
    <nav
      id="nav"
-      class="nav-bar container"
+      class="mobile-nav"
      :class="{ 'mobile-hidden': isChat }"
+      @click="scrollToTop()"
    >
-      <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" />
-            <div
-              v-if="unreadChatCount"
-              class="alert-dot"
-            />
-          </a>
-          <router-link
-            v-if="!hideSitename"
-            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"
-            />
-          </a>
-        </div>
+      <div class="item">
+        <button
+          class="button-unstyled mobile-nav-button"
+          @click.stop.prevent="toggleMobileSidebar()"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="bars"
+          />
+          <div
+            v-if="unreadChatCount"
+            class="alert-dot"
+          />
+        </button>
+        <router-link
+          v-if="!hideSitename"
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+        >
+          {{ sitename }}
+        </router-link>
+      </div>
+      <div class="item right">
+        <button
+          v-if="currentUser"
+          class="button-unstyled mobile-nav-button"
+          @click.stop.prevent="openMobileNotifications()"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="bell"
+          />
+          <div
+            v-if="unseenNotificationsCount"
+            class="alert-dot"
+          />
+        </button>
      </div>
    </nav>
    <div
@ -59,7 +61,10 @@
          class="mobile-nav-button"
          @click.stop.prevent="closeMobileNotifications()"
        >
-          <i class="button-icon icon-cancel" />
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="times"
+          />
        </a>
      </div>
      <div
@ -84,101 +89,124 @@
 <style lang="scss">
@import '../../_variables.scss';

-.mobile-inner-nav {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.mobile-nav-button {
-  display: flex;
-  justify-content: center;
-  width: 50px;
-  position: relative;
-  cursor: pointer;
-}
-
-.alert-dot {
-  border-radius: 100%;
-  height: 8px;
-  width: 8px;
-  position: absolute;
-  left: calc(50% - 4px);
-  top: calc(50% - 4px);
-  margin-left: 6px;
-  margin-top: -6px;
-  background-color: $fallback--cRed;
-  background-color: var(--badgeNotification, $fallback--cRed);
-}
-
-.mobile-notifications-drawer {
-  width: 100%;
-  height: 100vh;
-  overflow-x: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-  box-shadow: var(--panelShadow);
-  transition-property: transform;
-  transition-duration: 0.25s;
-  transform: translateX(0);
-  z-index: 1001;
-  -webkit-overflow-scrolling: touch;
-
-  &.closed {
-    transform: translateX(100%);
+.MobileNav {
+  .mobile-nav {
+    display: grid;
+    line-height: 50px;
+    height: 50px;
+    grid-template-rows: 50px;
+    grid-template-columns: 2fr auto;
+    width: 100%;
+    position: fixed;
+    box-sizing: border-box;
  }
-}

-.mobile-notifications-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 1;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  position: absolute;
-  color: var(--topBarText);
-  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--fg);
-  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
-  box-shadow: var(--topBarShadow);
-
-  .title {
-    font-size: 1.3em;
-    margin-left: 0.6em;
+  .mobile-inner-nav {
+    width: 100%;
+    display: flex;
+    align-items: center;
  }
-}

-.mobile-notifications {
-  margin-top: 50px;
-  width: 100vw;
-  height: calc(100vh - 50px);
-  overflow-x: hidden;
-  overflow-y: scroll;
+  .mobile-nav-button {
+    display: inline-block;
+    text-align: center;
+    padding: 0 1em;
+    position: relative;
+    cursor: pointer;
+  }

-  color: $fallback--text;
-  color: var(--text, $fallback--text);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+  .site-name {
+    padding: 0 .3em;
+    display: inline-block;
+  }

-  .notifications {
-    padding: 0;
-    border-radius: 0;
-    box-shadow: none;
-    .panel {
-      border-radius: 0;
-      margin: 0;
-      box-shadow: none;
+  .item {
+    /* moslty just to get rid of extra whitespaces */
+    display: flex;
+  }
+
+  .alert-dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
+  .mobile-notifications-drawer {
+    width: 100%;
+    height: 100vh;
+    overflow-x: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+    transition-property: transform;
+    transition-duration: 0.25s;
+    transform: translateX(0);
+    z-index: 1001;
+    -webkit-overflow-scrolling: touch;
+
+    &.closed {
+      transform: translateX(100%);
    }
-    .panel:after {
-      border-radius: 0;
+  }
+
+  .mobile-notifications-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    position: absolute;
+    color: var(--topBarText);
+    background-color: $fallback--fg;
+    background-color: var(--topBar, $fallback--fg);
+    box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+    box-shadow: var(--topBarShadow);
+
+    .title {
+      font-size: 1.3em;
+      margin-left: 0.6em;
    }
-    .panel .panel-heading {
+  }
+
+  .mobile-notifications {
+    margin-top: 50px;
+    width: 100vw;
+    height: calc(100vh - 50px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+
+    .notifications {
+      padding: 0;
      border-radius: 0;
      box-shadow: none;
+      .panel {
+        border-radius: 0;
+        margin: 0;
+        box-shadow: none;
+      }
+      .panel:after {
+        border-radius: 0;
+      }
+      .panel .panel-heading {
+        border-radius: 0;
+        box-shadow: none;
+      }
    }
  }
 }
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@ -1,4 +1,12 @@
 import { debounce } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPen
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPen
+)

 const HIDDEN_FOR_PAGES = new Set([
  'chats',
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@ -1,11 +1,11 @@
 <template>
  <div v-if="isLoggedIn">
    <button
-      class="new-status-button"
+      class="button-default new-status-button"
      :class="{ 'hidden': isHidden }"
      @click="openPostForm"
    >
-      <i class="icon-edit" />
+      <FAIcon icon="pen" />
    </button>
  </div>
 </template>
@ -39,7 +39,7 @@
    transform: translateY(150%);
  }

-  i {
+  svg {
    font-size: 1.5em;
    color: $fallback--text;
    color: var(--text, $fallback--text);
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@ -1,6 +1,11 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+
 import DialogModal from '../dialog_modal/dialog_modal.vue'
 import Popover from '../popover/popover.vue'

+library.add(faChevronDown)
+
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
 const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@ -12,13 +12,13 @@
        <div class="dropdown-menu">
          <span v-if="user.is_local">
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleRight(&quot;admin&quot;)"
            >
              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleRight(&quot;moderator&quot;)"
            >
              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -29,13 +29,13 @@
            />
          </span>
          <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
            @click="toggleActivationStatus()"
          >
            {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
          </button>
          <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
            @click="deleteUserDialog(true)"
          >
            {{ $t('user_card.admin_menu.delete_account') }}
@ -47,87 +47,88 @@
          />
          <span v-if="hasTagPolicy">
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.FORCE_NSFW)"
            >
-              {{ $t('user_card.admin_menu.force_nsfw') }}
              <span
                class="menu-checkbox"
                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
              />
+              {{ $t('user_card.admin_menu.force_nsfw') }}
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.STRIP_MEDIA)"
            >
-              {{ $t('user_card.admin_menu.strip_media') }}
              <span
                class="menu-checkbox"
                :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
              />
+              {{ $t('user_card.admin_menu.strip_media') }}
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.FORCE_UNLISTED)"
            >
-              {{ $t('user_card.admin_menu.force_unlisted') }}
              <span
                class="menu-checkbox"
                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
              />
+              {{ $t('user_card.admin_menu.force_unlisted') }}
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.SANDBOX)"
            >
-              {{ $t('user_card.admin_menu.sandbox') }}
              <span
                class="menu-checkbox"
                :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
              />
+              {{ $t('user_card.admin_menu.sandbox') }}
            </button>
            <button
              v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
            >
-              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
              <span
                class="menu-checkbox"
                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
              />
+              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
            </button>
            <button
              v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
            >
-              {{ $t('user_card.admin_menu.disable_any_subscription') }}
              <span
                class="menu-checkbox"
                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
              />
+              {{ $t('user_card.admin_menu.disable_any_subscription') }}
            </button>
            <button
              v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.QUARANTINE)"
            >
-              {{ $t('user_card.admin_menu.quarantine') }}
              <span
                class="menu-checkbox"
                :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
              />
+              {{ $t('user_card.admin_menu.quarantine') }}
            </button>
          </span>
        </div>
      </div>
      <button
        slot="trigger"
-        class="btn btn-default btn-block"
+        class="btn button-default btn-block moderation-tools-button"
        :class="{ toggled }"
      >
        {{ $t('user_card.admin_menu.moderation') }}
+        <FAIcon icon="chevron-down" />
      </button>
    </Popover>
    <portal to="modal">
@ -141,13 +142,13 @@
        <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
        <template slot="footer">
          <button
-            class="btn btn-default"
+            class="btn button-default"
            @click="deleteUserDialog(false)"
          >
            {{ $t('general.cancel') }}
          </button>
          <button
-            class="btn btn-default danger"
+            class="btn button-default danger"
            @click="deleteUser()"
          >
            {{ $t('user_card.admin_menu.delete_user') }}
@ -163,25 +164,6 @@
 <style lang="scss">
@import '../../_variables.scss';

-.menu-checkbox {
-  float: right;
-  min-width: 22px;
-  max-width: 22px;
-  min-height: 22px;
-  max-height: 22px;
-  line-height: 22px;
-  text-align: center;
-  border-radius: 0px;
-  background-color: $fallback--fg;
-  background-color: var(--input, $fallback--fg);
-  box-shadow: 0px 0px 2px black inset;
-  box-shadow: var(--inputShadow);
-
-  &.menu-checkbox-checked::after {
-    content: '✓';
-  }
-}
-
 .moderation-tools-popover {
  height: 100%;
  .trigger {
@ -189,4 +171,10 @@
    height: 100%;
  }
 }
+
+.moderation-tools-button {
+  svg,i {
+    font-size: 0.8em;
+  }
+}
 </style>
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@ -3,7 +3,7 @@
    <div class="mute-card-content-container">
      <button
        v-if="muted"
-        class="btn btn-default"
+        class="btn button-default"
        :disabled="progress"
        @click="unmuteUser"
      >
@ -16,7 +16,7 @@
      </button>
      <button
        v-else
-        class="btn btn-default"
+        class="btn button-default"
        :disabled="progress"
        @click="muteUser"
      >
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -1,22 +1,53 @@
-import { timelineNames } from '../timeline_menu/timeline_menu.js'
+import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'

+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faChevronDown,
+  faChevronUp,
+  faComments,
+  faBell,
+  faInfoCircle,
+  faStream
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faChevronDown,
+  faChevronUp,
+  faComments,
+  faBell,
+  faInfoCircle,
+  faStream
+)
+
 const NavPanel = {
  created () {
    if (this.currentUser && this.currentUser.locked) {
      this.$store.dispatch('startFetchingFollowRequests')
    }
  },
+  components: {
+    TimelineMenuContent
+  },
+  data () {
+    return {
+      showTimelines: false
+    }
+  },
+  methods: {
+    toggleTimelines () {
+      this.showTimelines = !this.showTimelines
+    }
+  },
  computed: {
-    onTimelineRoute () {
-      return !!timelineNames()[this.$route.name]
-    },
-    timelinesRoute () {
-      if (this.$store.state.interface.lastTimeline) {
-        return this.$store.state.interface.lastTimeline
-      }
-      return this.currentUser ? 'friends' : 'public-timeline'
-    },
    ...mapState({
      currentUser: state => state.users.currentUser,
      followRequestCount: state => state.api.followRequests.length,
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -1,45 +1,88 @@
 <template>
-  <div class="nav-panel">
+  <div class="NavPanel">
    <div class="panel panel-default">
      <ul>
        <li v-if="currentUser || !privateMode">
-          <router-link
-            :to="{ name: timelinesRoute }"
-            :class="onTimelineRoute && 'router-link-active'"
+          <button
+            class="button-unstyled menu-item"
+            @click="toggleTimelines"
          >
-            <i class="button-icon icon-home-2" />{{ $t("nav.timelines") }}
-          </router-link>
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="stream"
+            />{{ $t("nav.timelines") }}
+            <FAIcon
+              class="timelines-chevron"
+              fixed-width
+              :icon="showTimelines ? 'chevron-up' : 'chevron-down'"
+            />
+          </button>
+          <div
+            v-show="showTimelines"
+            class="timelines-background"
+          >
+            <TimelineMenuContent class="timelines" />
+          </div>
        </li>
        <li v-if="currentUser">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" />{{ $t("nav.interactions") }}
+          <router-link
+            class="menu-item"
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="bell"
+            />{{ $t("nav.interactions") }}
          </router-link>
        </li>
        <li v-if="currentUser && pleromaChatMessagesAvailable">
-          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+          >
            <div
              v-if="unreadChatCount"
-              class="badge badge-notification unread-chat-count"
+              class="badge badge-notification"
            >
              {{ unreadChatCount }}
            </div>
-            <i class="button-icon icon-chat" />{{ $t("nav.chats") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="comments"
+            />{{ $t("nav.chats") }}
          </router-link>
        </li>
        <li v-if="currentUser && currentUser.locked">
-          <router-link :to="{ name: 'friend-requests' }">
-            <i class="button-icon icon-user-plus" />{{ $t("nav.friend_requests") }}
+          <router-link
+            class="menu-item"
+            :to="{ name: 'friend-requests' }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="user-plus"
+            />{{ $t("nav.friend_requests") }}
            <span
              v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
            >
              {{ followRequestCount }}
            </span>
          </router-link>
        </li>
        <li>
-          <router-link :to="{ name: 'about' }">
-            <i class="button-icon icon-info-circled" />{{ $t("nav.about") }}
+          <router-link
+            class="menu-item"
+            :to="{ name: 'about' }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="info-circle"
+            />{{ $t("nav.about") }}
          </router-link>
        </li>
      </ul>
@ -52,84 +95,109 @@
 <style lang="scss">
@import '../../_variables.scss';

-.nav-panel .panel {
-  overflow: hidden;
-  box-shadow: var(--panelShadow);
-}
-.nav-panel ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.follow-request-count {
-  margin: -6px 10px;
-  background-color: $fallback--bg;
-  background-color: var(--input, $fallback--faint);
-}
-
-.nav-panel li {
-  border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  padding: 0;
-
-  &:first-child a {
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+.NavPanel {
+  .panel {
+    overflow: hidden;
+    box-shadow: var(--panelShadow);
  }

-  &:last-child a {
-    border-bottom-right-radius: $fallback--panelRadius;
-    border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-    border-bottom-left-radius: $fallback--panelRadius;
-    border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-}
-
-.nav-panel li:last-child {
-  border: none;
-}
-
-.nav-panel a {
-  display: block;
-  padding: 0.8em 0.85em;
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
  }

-  &.router-link-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
+  li {
+    position: relative;
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    padding: 0;

-    &:hover {
-      text-decoration: underline;
+    &:first-child .menu-item {
+      border-top-right-radius: $fallback--panelRadius;
+      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-top-left-radius: $fallback--panelRadius;
+      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    }
+
+    &:last-child .menu-item {
+      border-bottom-right-radius: $fallback--panelRadius;
+      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-bottom-left-radius: $fallback--panelRadius;
+      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
    }
  }
-}

-.nav-panel .button-icon {
-  margin-right: 0.5em;
-}
+  li:last-child {
+    border: none;
+  }

-.nav-panel .button-icon:before {
-  width: 1.1em;
+  .menu-item {
+    display: block;
+    box-sizing: border-box;
+    height: 3.5em;
+    line-height: 3.5em;
+    padding: 0 1em;
+    width: 100%;
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
+
+    &:hover {
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuText, $fallback--link);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+    }
+
+    &.router-link-active {
+      font-weight: bolder;
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--text;
+      color: var(--selectedMenuText, $fallback--text);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .timelines-chevron {
+    margin-left: 0.8em;
+    font-size: 1.1em;
+  }
+
+  .timelines-background {
+    padding: 0 0 0 0.6em;
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    border-top: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+
+  .timelines {
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+  }
+
+  .fa-scale-110 {
+    margin-right: 0.8em;
+  }
+
+  .badge {
+    position: absolute;
+    right: 0.6rem;
+    top: 1.25em;
+  }
 }
 </style>
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faEyeSlash,
+  faUser,
+  faSuitcaseRolling
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faUser,
+  faEyeSlash,
+  faSuitcaseRolling
+)

 const Notification = {
  data () {
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
  &.-muted {
@ -49,4 +51,34 @@
      display: block;
    }
  }
+
+  .type-icon {
+    margin: 0 0.1em;
+  }
+
+  &.-type--repeat .type-icon {
+    color: $fallback--cGreen;
+    color: var(--cGreen, $fallback--cGreen);
+  }
+
+  &.-type--follow .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--follow-request .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--like .type-icon {
+    color: orange;
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+
+  &.-type--move .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
 }
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -1,5 +1,5 @@
 <template>
-  <status
+  <Status
    v-if="notification.type === 'mention'"
    :compact="true"
    :statusoid="notification.status"
@ -11,19 +11,23 @@
    >
      <small>
        <router-link :to="userProfileLink">
-          {{ notification.from_profile.screen_name }}
+          {{ notification.from_profile.screen_name_ui }}
        </router-link>
      </small>
-      <a
-        href="#"
-        class="unmute"
+      <button
+        class="button-unstyled unmute"
        @click.prevent="toggleMute"
-      ><i class="button-icon icon-eye-off" /></a>
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="eye-slash"
+        />
+      </button>
    </div>
    <div
      v-else
-      class="non-mention"
-      :class="[userClass, { highlighted: userStyle }]"
+      class="Notification non-mention"
+      :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
      :style="[ userStyle ]"
    >
      <a
@ -50,36 +54,49 @@
            <bdi
              v-if="!!notification.from_profile.name_html"
              class="username"
-              :title="'@'+notification.from_profile.screen_name"
+              :title="'@'+notification.from_profile.screen_name_ui"
              v-html="notification.from_profile.name_html"
            />
            <!-- eslint-enable vue/no-v-html -->
            <span
              v-else
              class="username"
-              :title="'@'+notification.from_profile.screen_name"
+              :title="'@'+notification.from_profile.screen_name_ui"
            >{{ notification.from_profile.name }}</span>
            <span v-if="notification.type === 'like'">
-              <i class="fa icon-star lit" />
+              <FAIcon
+                class="type-icon"
+                icon="star"
+              />
              <small>{{ $t('notifications.favorited_you') }}</small>
            </span>
            <span v-if="notification.type === 'repeat'">
-              <i
-                class="fa icon-retweet lit"
+              <FAIcon
+                class="type-icon"
+                icon="retweet"
                :title="$t('tool_tip.repeat')"
              />
              <small>{{ $t('notifications.repeated_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow'">
-              <i class="fa icon-user-plus lit" />
+              <FAIcon
+                class="type-icon"
+                icon="user-plus"
+              />
              <small>{{ $t('notifications.followed_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow_request'">
-              <i class="fa icon-user lit" />
+              <FAIcon
+                class="type-icon"
+                icon="user"
+              />
              <small>{{ $t('notifications.follow_request') }}</small>
            </span>
            <span v-if="notification.type === 'move'">
-              <i class="fa icon-arrow-curved lit" />
+              <FAIcon
+                class="type-icon"
+                icon="suitcase-rolling"
+              />
              <small>{{ $t('notifications.migrated_to') }}</small>
            </span>
            <span v-if="notification.type === 'pleroma:emoji_reaction'">
@ -116,11 +133,16 @@
              />
            </span>
          </div>
-          <a
+          <button
            v-if="needMute"
-            href="#"
+            class="button-unstyled"
            @click.prevent="toggleMute"
-          ><i class="button-icon icon-eye-off" /></a>
+          >
+            <FAIcon
+              class="fa-scale-110 fa-old-padding"
+              icon="eye-slash"
+            />
+          </button>
        </span>
        <div
          v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@ -130,19 +152,21 @@
            :to="userProfileLink"
            class="follow-name"
          >
-            @{{ notification.from_profile.screen_name }}
+            @{{ notification.from_profile.screen_name_ui }}
          </router-link>
          <div
            v-if="notification.type === 'follow_request'"
            style="white-space: nowrap;"
          >
-            <i
-              class="icon-ok button-icon follow-request-accept"
+            <FAIcon
+              icon="check"
+              class="fa-scale-110 fa-old-padding follow-request-accept"
              :title="$t('tool_tip.accept_follow_request')"
              @click="approveUser()"
            />
-            <i
-              class="icon-cancel button-icon follow-request-reject"
+            <FAIcon
+              icon="times"
+              class="fa-scale-110 fa-old-padding follow-request-reject"
              :title="$t('tool_tip.reject_follow_request')"
              @click="denyUser()"
            />
@ -153,7 +177,7 @@
          class="move-text"
        >
          <router-link :to="targetUserProfileLink">
-            @{{ notification.target.screen_name }}
+            @{{ notification.target.screen_name_ui }}
          </router-link>
        </div>
        <template v-else>
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@ -0,0 +1,122 @@
+<template>
+  <Popover
+    trigger="click"
+    class="NotificationFilters"
+    placement="bottom"
+    :bound-to="{ x: 'container' }"
+  >
+    <template
+      v-slot:content
+    >
+      <div class="dropdown-menu">
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('likes')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.likes }"
+          />{{ $t('settings.notification_visibility_likes') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('repeats')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.repeats }"
+          />{{ $t('settings.notification_visibility_repeats') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('follows')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.follows }"
+          />{{ $t('settings.notification_visibility_follows') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('mentions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.mentions }"
+          />{{ $t('settings.notification_visibility_mentions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('emojiReactions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+          />{{ $t('settings.notification_visibility_emoji_reactions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('moves')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.moves }"
+          />{{ $t('settings.notification_visibility_moves') }}
+        </button>
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <FAIcon icon="filter" />
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter
+)
+
+export default {
+  components: { Popover },
+  computed: {
+    filters () {
+      return this.$store.getters.mergedConfig.notificationVisibility
+    }
+  },
+  methods: {
+    toggleNotificationFilter (type) {
+      this.$store.dispatch('setOption', {
+        name: 'notificationVisibility',
+        value: {
+          ...this.filters,
+          [type]: !this.filters[type]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.NotificationFilters {
+  align-self: stretch;
+
+  > button {
+    font-size: 1.2em;
+    padding-left: 0.7em;
+    padding-right: 0.2em;
+    line-height: 100%;
+    height: 100%;
+  }
+
+  .dropdown-item {
+    margin: 0;
+  }
+}
+
+</style>
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@ -1,15 +1,27 @@
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
+import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
  notificationsFromStore,
  filteredNotificationsFromStore,
  unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'
+import FaviconService from '../../services/favicon_service/favicon_service.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)

 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

 const Notifications = {
+  components: {
+    Notification,
+    NotificationFilters
+  },
  props: {
    // Disables display of panel header
    noHeading: Boolean,
@ -28,11 +40,6 @@ const Notifications = {
      seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
    }
  },
-  created () {
-    const store = this.$store
-    const credentials = store.state.users.currentUser.credentials
-    notificationsFetcher.fetchAndUpdate({ store, credentials })
-  },
  computed: {
    mainClass () {
      return this.minimalMode ? '' : 'panel panel-default'
@ -63,14 +70,13 @@ const Notifications = {
    },
    ...mapGetters(['unreadChatCount'])
  },
-  components: {
-    Notification
-  },
  watch: {
    unseenCountTitle (count) {
      if (count > 0) {
+        FaviconService.drawFaviconBadge()
        this.$store.dispatch('setPageTitle', `(${count})`)
      } else {
+        FaviconService.clearFaviconBadge()
        this.$store.dispatch('setPageTitle', '')
      }
    }
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -158,37 +158,6 @@
      margin-right: .2em;
    }

-    .icon-retweet.lit {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
-    }
-
-    .icon-user.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-user-plus.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-reply.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-star.lit {
-      color: orange;
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
-    }
-
-    .icon-arrow-curved.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
    .status-content {
      margin: 0;
      max-height: 300px;
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -15,20 +15,14 @@
            class="badge badge-notification unseen-count"
          >{{ unseenCount }}</span>
        </div>
-        <div
-          v-if="error"
-          class="loadmore-error alert error"
-          @click.prevent
-        >
-          {{ $t('timeline.error_fetching') }}
-        </div>
        <button
          v-if="unseenCount"
-          class="read-button"
+          class="button-default read-button"
          @click.prevent="markAsSeen"
        >
          {{ $t('notifications.read') }}
        </button>
+        <NotificationFilters />
      </div>
      <div class="panel-body">
        <div
@ -48,20 +42,24 @@
        >
          {{ $t('notifications.no_more_notifications') }}
        </div>
-        <a
+        <button
          v-else-if="!loading"
-          href="#"
+          class="button-unstyled -link -fullwidth"
          @click.prevent="fetchOlderNotifications()"
        >
          <div class="new-status-notification text-center panel-footer">
            {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
          </div>
-        </a>
+        </button>
        <div
          v-else
          class="new-status-notification text-center panel-footer"
        >
-          <i class="icon-spin3 animate-spin" />
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
        </div>
      </div>
    </div>
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@ -1,12 +1,27 @@
 <template>
  <div class="panel-loading">
    <span class="loading-text">
-      <i class="icon-spin4 animate-spin" />
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="3x"
+      />
      {{ $t('general.loading') }}
    </span>
  </div>
 </template>

+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
+export default {}
+</script>
+
 <style lang="scss">
@import 'src/_variables.scss';

@ -18,8 +33,7 @@
  font-size: 2em;
  color: $fallback--text;
  color: var(--text, $fallback--text);
-  .loading-text i {
-    font-size: 3em;
+  .loading-text svg {
    line-height: 0;
    vertical-align: middle;
    color: $fallback--text;
--- a/src/components/password_reset/password_reset.js
+++ b/src/components/password_reset/password_reset.js
@ -1,5 +1,13 @@
 import { mapState } from 'vuex'
 import passwordResetApi from '../../services/new_api/password_reset.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)

 const passwordReset = {
  data: () => ({
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@ -51,9 +51,9 @@
              <button
                :disabled="isPending"
                type="submit"
-                class="btn btn-default btn-block"
+                class="btn button-default btn-block"
              >
-                {{ $t('general.submit') }}
+                {{ $t('settings.save') }}
              </button>
            </div>
          </div>
@ -63,10 +63,10 @@
          >
            <span>{{ error }}</span>
            <a
-              class="button-icon dismiss"
+              class="fa-scale-110 fa-old-padding dismiss"
              @click.prevent="dismissError()"
            >
-              <i class="icon-cancel" />
+              <FAIcon icon="times" />
            </a>
          </p>
        </div>
@ -122,7 +122,7 @@
    padding-right: 2rem;
  }

-  .icon-cancel {
+  .dismiss {
    cursor: pointer;
  }
 }
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@ -42,14 +42,15 @@
          :value="index"
        >
        <label class="option-vote">
-          <div>{{ option.title }}</div>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="option.title_html" />
        </label>
      </div>
    </div>
    <div class="footer faint">
      <button
        v-if="!showResults"
-        class="btn btn-default poll-vote-button"
+        class="btn button-default poll-vote-button"
        type="button"
        :disabled="isDisabled"
        @click="vote"
@ -57,7 +58,12 @@
        {{ $t('polls.vote') }}
      </button>
      <div class="total">
-        {{ totalVotesCount }} {{ $t("polls.votes") }}&nbsp;·&nbsp;
+        <template v-if="typeof poll.voters_count === 'number'">
+          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
+        </template>
+        <template v-else>
+          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
+        </template>
      </div>
      <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
        <Timeago
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@ -1,5 +1,17 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faChevronDown,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faChevronDown,
+  faPlus
+)

 export default {
  name: 'PollForm',
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@ -21,24 +21,26 @@
          @keydown.enter.stop.prevent="nextOption(index)"
        >
      </div>
-      <div
+      <button
        v-if="options.length > 2"
-        class="icon-container"
+        class="delete-option button-unstyled -hover-highlight"
+        @click="deleteOption(index)"
      >
-        <i
-          class="icon-cancel"
-          @click="deleteOption(index)"
-        />
-      </div>
+        <FAIcon icon="times" />
+      </button>
    </div>
-    <a
+    <button
      v-if="options.length < maxOptions"
-      class="add-option faint"
+      class="add-option faint button-unstyled -hover-highlight"
      @click="addOption"
    >
-      <i class="icon-plus" />
+      <FAIcon
+        icon="plus"
+        size="sm"
+      />
+
      {{ $t("polls.add_option") }}
-    </a>
+    </button>
    <div class="poll-type-expiry">
      <div
        class="poll-type"
@ -56,7 +58,10 @@
            <option value="single">{{ $t('polls.single_choice') }}</option>
            <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
          </select>
-          <i class="icon-down-open" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
        </label>
      </div>
      <div
@ -84,7 +89,10 @@
              {{ $t(`time.${unit}_short`, ['']) }}
            </option>
          </select>
-          <i class="icon-down-open" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
        </label>
      </div>
    </div>
@ -104,7 +112,7 @@
  .add-option {
    align-self: flex-start;
    padding-top: 0.25em;
-    cursor: pointer;
+    padding-left: 0.1em;
  }

  .poll-option {
@ -123,10 +131,10 @@
    }
  }

-  .icon-container {
+  .delete-option {
    // Hack: Move the icon over the input box
-    width: 2em;
-    margin-left: -2em;
+    width: 1.5em;
+    margin-left: -1.5em;
    z-index: 1;
  }

@ -143,6 +151,7 @@
      border: none;
      box-shadow: none;
      background-color: transparent;
+      padding-right: 0.75em;
    }
  }

--- a/Show more
+++ b/Show more