Merge remote-tracking branch 'origin/develop' into vue3

* origin/develop: (320 commits)
  Apply 1 suggestion(s) to 1 file(s)
  Make it possible to localize user highlight options
  remove shoutbox test hacks
  fix shoutbox header, use custom scroll-to-bottom system, remove vue-chat-scroll, temporarily add chat test hack
  update changelog with 2.3.0
  change icons around
  Translated using Weblate (Japanese)
  Update timeline_quick_settings.js
  add screen_name_ui to tests
  separate screen_name and screen_name_ui with decoded punycode
  Update CHANGELOG.md
  add basic validation for statusless status notifications
  changelog mention
  fix chat unread badge
  update shelljs to get rid of warnings on build
  save a few characters
  focus input in emoji picker and react picker
  fix vue warnings
  add only to wording
  basic loggedin check for reply filtering
  ...

.mailmap

@@ -0,0 +1 @@
+rinpatch <rin@patch.cx> <rinpatch@sdf.org>

CHANGELOG.md

@@ -5,27 +5,107 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 ### Added
+- Added a quick settings to timeline header for easier access
+- Added option to mark posts as sensitive by default
+
+## [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
+- 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
+
+### 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 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
 - 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
+
 
 ## [2.1.1] - 2020-09-08
 ### Changed
@@ -152,8 +232,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

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>

package.json

@@ -32,9 +32,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": "^3.0.2",
-    "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^9.0.0-beta.6",
     "vue-router": "^4.0.0-rc.1",
     "vuelidate": "^0.7.6",
@@ -55,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",
@@ -102,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",

src/App.js

@@ -15,6 +15,7 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
 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',
@@ -50,17 +51,18 @@ export default {
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
-    background () {
+    userBackground () { return this.currentUser.background_image },
-      return this.currentUser.background_image || this.$store.state.instance.background
+    instanceBackground () {
+      return this.mergedConfig.hideInstanceWallpaper
+        ? null
+        : this.$store.state.instance.background
     },
+    background () { return this.userBackground || this.instanceBackground },
     bgStyle () {
-      return {
+      if (this.background) {
-        'background-image': `url(${this.background})`
+        return {
-      }
+          '--body-background-image': `url(${this.background})`
-    },
+        }
-    bgAppStyle () {
-      return {
-        '--body-background-image': `url(${this.background})`
       }
     },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
@@ -77,7 +79,8 @@ export default {
       return {
         'order': this.$store.state.instance.sidebarRight ? 99 : 0
       }
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   },
   methods: {
     updateMobileState () {

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-], .svg-inline--fa {
+  i[class*=icon-],
+  .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
   }
@@ -107,7 +111,8 @@ button {
     background-color: $fallback--fg;
     background-color: var(--btnPressed, $fallback--fg);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnPressedText, $fallback--text);
     }
@@ -120,7 +125,8 @@ button {
     background-color: $fallback--fg;
     background-color: var(--btnDisabled, $fallback--fg);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnDisabledText, $fallback--text);
     }
@@ -134,7 +140,8 @@ button {
     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 {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnToggledText, $fallback--text);
     }
@@ -149,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 {
@@ -303,6 +341,10 @@ input, textarea, .select, .input {
       box-sizing: border-box;
     }
   }
+
+  &.resize-height {
+    resize: vertical;
+  }
 }
 
 option {
@@ -442,6 +484,7 @@ main-router {
     color: $fallback--faint;
     color: var(--panelFaint, $fallback--faint);
   }
+
   .faint-link {
     color: $fallback--faint;
     color: var(--faintLink, $fallback--faint);
@@ -453,11 +496,8 @@ main-router {
     overflow-x: hidden;
   }
 
-  button {
+  .button-default,
-    flex-shrink: 0;
+  .alert {
-  }
-
-  button, .alert {
     // height: 100%;
     line-height: 21px;
     min-height: 0;
@@ -468,8 +508,11 @@ main-router {
     align-self: stretch;
   }
 
-  button {
+  .button-default {
-    &, i[class*=icon-] {
+    flex-shrink: 0;
+
+    &,
+    i[class*=icon-] {
       color: $fallback--text;
       color: var(--btnPanelText, $fallback--text);
     }
@@ -492,7 +535,8 @@ main-router {
     }
   }
 
-  a {
+  a,
+  .-link {
     color: $fallback--link;
     color: var(--panelLink, $fallback--link)
   }
@@ -507,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);
   }
 }
 
@@ -542,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 {
@@ -603,19 +648,24 @@ nav {
     flex-grow: 0;
   }
 }
+
 .badge {
+  box-sizing: border-box;
   display: inline-block;
   border-radius: 99px;
-  min-width: 22px;
+  max-width: 10em;
-  max-width: 22px;
+  min-width: 1.7em;
-  min-height: 22px;
+  height: 1.3em;
-  max-height: 22px;
+  padding: 0.15em 0.15em;
-  font-size: 15px;
-  line-height: 22px;
-  text-align: center;
   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;
@@ -792,7 +842,7 @@ nav {
   }
 }
 
-.btn.btn-default {
+.btn.button-default {
   min-height: 28px;
 }
 
@@ -829,6 +879,11 @@ nav {
   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) {

src/App.vue

@@ -1,12 +1,11 @@
 <template>
   <div
     id="app"
-    :style="bgAppStyle"
+    :style="bgStyle"
   >
     <div
       id="app_bg_wrapper"
       class="app-bg-wrapper"
-      :style="bgStyle"
     />
     <MobileNav v-if="isMobileLayout" />
     <DesktopNav v-else />

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 })
@@ -326,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 })

src/components/account_actions/account_actions.js

@@ -35,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({

src/components/account_actions/account_actions.vue

@@ -4,6 +4,7 @@
       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,7 +62,7 @@
       </div>
       <div
         slot="trigger"
-        class="btn btn-default ellipsis-button"
+        class="ellipsis-button"
       >
         <FAIcon
           class="icon"

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') }}

src/components/attachment/attachment.js

@@ -8,14 +8,18 @@ import {
   faFile,
   faMusic,
   faImage,
-  faVideo
+  faVideo,
+  faPlayCircle,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faFile,
   faMusic,
   faImage,
-  faVideo
+  faVideo,
+  faPlayCircle,
+  faTimes
 )
 
 const Attachment = {

src/components/attachment/attachment.vue

@@ -42,15 +42,13 @@
         icon="play-circle"
       />
     </a>
-    <div
+    <button
       v-if="nsfw && hideNsfwLocal && !hidden"
-      class="hider"
+      class="button-unstyled hider"
+      @click.prevent="toggleHidden"
     >
-      <a
+      <FAIcon icon="times" />
-        href="#"
+    </button>
-        @click.prevent="toggleHidden"
-      >Hide</a>
-    </div>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
@@ -234,15 +232,23 @@
   .hider {
     position: absolute;
     right: 0;
-    white-space: nowrap;
     margin: 10px;
-    padding: 5px;
+    padding: 0;
-    background: rgba(230,230,230,0.6);
-    font-weight: bold;
     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 {

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 />

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

src/components/chat/chat.js

@@ -6,7 +6,7 @@ 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,
@@ -73,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 ''
       }
@@ -234,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 }
 
@@ -241,6 +248,7 @@ 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) {
           // 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
@@ -287,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 })
+              }
             })
           })
         })

src/components/chat/chat.scss

@@ -98,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 {
@@ -138,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 {

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
+}

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>

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>
 

src/components/chat_message/chat_message.scss

@@ -31,9 +31,6 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
   }
 
   .popover {

src/components/chat_message/chat_message.vue

@@ -53,7 +53,7 @@
                 <div slot="content">
                   <div class="dropdown-menu">
                     <button
-                      class="dropdown-item dropdown-item-icon"
+                      class="button-default dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
@@ -62,7 +62,7 @@
                 </div>
                 <button
                   slot="trigger"
-                  class="menu-icon"
+                  class="button-default menu-icon"
                   :title="$t('chats.more')"
                 >
                   <FAIcon icon="ellipsis-h" />

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' })
       }
     }
   }

src/components/chat_panel/chat_panel.js

@@ -35,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
+        })
+      }
+    }
   }
 }
 

src/components/chat_panel/chat_panel.vue

@@ -10,17 +10,15 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <span>{{ $t('shoutbox.title') }}</span>
+          {{ $t('shoutbox.title') }}
           <FAIcon
             v-if="floating"
             icon="times"
+            class="close-icon"
           />
         </div>
       </div>
-      <div
+      <div class="chat-window">
-        v-chat-scroll
-        class="chat-window"
-      >
         <div
           v-for="message in messages"
           :key="message.id"
@@ -94,6 +92,13 @@
     .icon {
       color: $fallback--text;
       color: var(--text, $fallback--text);
+      margin-right: 0.5em;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
   }
 

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 : ''

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">
+      <button
-        <a
+        v-if="collapsable"
-          href="#"
+        class="button-unstyled -link"
-          @click.prevent="toggleExpanded"
+        @click.prevent="toggleExpanded"
-        >{{ $t('timeline.collapse') }}</a>
+      >
-      </span>
+        {{ $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;

src/components/desktop_nav/desktop_nav.scss

@@ -5,6 +5,10 @@
   width: 100%;
   position: fixed;
 
+  a {
+    color: var(--topBarLink, $fallback--link);
+  }
+
   .inner-nav {
     display: grid;
     grid-template-rows: 50px;
@@ -21,7 +25,7 @@
     grid-template-areas: "logo sitename actions";
   }
 
-  button {
+  .button-default {
     &, svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
@@ -80,12 +84,13 @@
   .nav-icon {
     margin-left: 0.2em;
     width: 2em;
+    height: 100%;
     text-align: center;
-  }
 
-  a, a svg {
+    .svg-inline--fa {
-    color: $fallback--link;
+      color: $fallback--link;
-    color: var(--topBarLink, $fallback--link);
+      color: var(--topBarLink, $fallback--link);
+    }
   }
 
   .sitename {

src/components/desktop_nav/desktop_nav.vue

@@ -36,9 +36,8 @@
           @toggled="onSearchBarToggled"
           @click.stop.native
         />
-        <a
+        <button
-          href="#"
+          class="button-unstyled nav-icon"
-          class="nav-icon"
           @click.stop="openSettingsModal"
         >
           <FAIcon
@@ -47,29 +46,32 @@
             icon="cog"
             :title="$t('nav.preferences')"
           />
-        </a>
+        </button>
         <a
           v-if="currentUser && currentUser.role === 'admin'"
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
-        ><FAIcon
+        >
-          fixed-width
+          <FAIcon
-          class="fa-scale-110 fa-old-padding"
+            fixed-width
-          icon="tachometer-alt"
+            class="fa-scale-110 fa-old-padding"
-          :title="$t('nav.administration')"
+            icon="tachometer-alt"
-        /></a>
+            :title="$t('nav.administration')"
-        <a
+          />
+        </a>
+        <button
           v-if="currentUser"
-          href="#"
+          class="button-unstyled nav-icon"
-          class="nav-icon"
           @click.prevent="logout"
-        ><FAIcon
+        >
-          fixed-width
+          <FAIcon
-          class="fa-scale-110 fa-old-padding"
+            fixed-width
-          icon="sign-out-alt"
+            class="fa-scale-110 fa-old-padding"
-          :title="$t('login.logout')"
+            icon="sign-out-alt"
-        /></a>
+            :title="$t('login.logout')"
+          />
+        </button>
       </div>
     </div>
   </nav>

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

src/components/emoji_input/emoji_input.js

@@ -114,7 +114,8 @@ const EmojiInput = {
       showPicker: false,
       temporarilyHideSuggestions: false,
       keepOpen: false,
-      disableClickOutside: false
+      disableClickOutside: false,
+      suggestions: []
     }
   },
   components: {
@@ -124,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 &&
@@ -188,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
@@ -211,6 +221,7 @@ const EmojiInput = {
       if (this.showPicker) {
         this.scrollIntoView()
         this.$refs.picker.startEmojiLoad()
+        this.$nextTick(this.focusPickerInput)
       }
     },
     replace (replacement) {

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"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
-      </div>
+      </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">

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) => {
+export default data => {
-  data.updateUsersList(input)
+  const emojiCurry = suggestEmoji(data.emoji)
-}, 500)
+  const usersCurry = data.store && suggestUsers(data.store)
-
+  return input => {
-export default data => input => {
+    const firstChar = input[0]
-  const firstChar = input[0]
+    if (firstChar === ':' && data.emoji) {
-  if (firstChar === ':' && data.emoji) {
+      return emojiCurry(input)
-    return suggestEmoji(data.emoji)(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 => {
+export const suggestUsers = ({ dispatch, state }) => {
-  const noPrefix = input.toLowerCase().substr(1)
+  // Keep some persistent values in closure, most importantly for the
-  const users = data.users
+  // 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(
+  const userSearch = (query) => dispatch('searchUsers', { query })
-    user =>
+  const debounceUserSearch = (query) => {
-      user.screen_name.toLowerCase().startsWith(noPrefix) ||
+    cancelUserSearch && cancelUserSearch()
-      user.name.toLowerCase().startsWith(noPrefix)
+    return new Promise((resolve, reject) => {
-
+      timeout = setTimeout(() => {
-    /* taking only 20 results so that sorting is a bit cheaper, we display
+        userSearch(query).then(resolve).catch(reject)
-     * only 5 anyway. could be inaccurate, but we ideally we should query
+      }, 300)
-     * backend anyway
+      cancelUserSearch = () => {
-     */
+        clearTimeout(timeout)
-  ).slice(0, 20).sort((a, b) => {
+        resolve([])
-    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
+  return async input => {
-    bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+    const noPrefix = input.toLowerCase().substr(1)
-
+    if (previousQuery === noPrefix) return suggestions
-    // Matches on name takes second priority
+
-    aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+    suggestions = []
-    bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+    previousQuery = noPrefix
-
+    // Fetch more and wait, don't fetch if there's the 2nd @ because
-    const diff = (bScore - aScore) * 10
+    // the backend user search can't deal with it.
-
+    // Reference semantics make it so that we get the updated data after
-    // Then sort alphabetically
+    // the await.
-    const nameAlphabetically = a.name > b.name ? 1 : -1
+    if (!noPrefix.includes('@')) {
-    const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
+      await debounceUserSearch(noPrefix)
-
+    }
-    return diff + nameAlphabetically + screenNameAlphabetically
+
-    /* eslint-disable camelcase */
+    const newSuggestions = state.users.users.filter(
-  }).map(({ screen_name, name, profile_image_url_original }) => ({
+      user =>
-    displayText: screen_name,
+        user.screen_name.toLowerCase().startsWith(noPrefix) ||
-    detailText: name,
+        user.name.toLowerCase().startsWith(noPrefix)
-    imageUrl: profile_image_url_original,
+    ).slice(0, 20).sort((a, b) => {
-    replacement: '@' + screen_name + ' '
+      let aScore = 0
-  }))
+      let bScore = 0
-
+
-  // BE search users to get more comprehensive results
+      // Matches on screen name (i.e. user@instance) makes a priority
-  if (data.updateUsersList) {
+      aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
-    debounceUserSearch(data, noPrefix)
+      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 */
 }

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()"

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 }}

src/components/exporter/exporter.vue

@@ -11,7 +11,7 @@
     </div>
     <button
       v-else
-      class="btn btn-default"
+      class="btn button-default"
       @click="process"
     >
       {{ exportButtonLabel }}

src/components/extra_buttons/extra_buttons.js

@@ -5,10 +5,12 @@ import {
   faBookmark,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg
+  faBookmark as faBookmarkReg,
+  faFlag
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
@@ -17,7 +19,9 @@ library.add(
   faBookmarkReg,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt,
+  faFlag
 )
 
 const ExtraButtons = {
@@ -64,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: {

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,7 +14,7 @@
       <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"
         >
           <FAIcon
@@ -22,7 +24,7 @@
         </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"
         >
           <FAIcon
@@ -32,7 +34,7 @@
         </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"
         >
@@ -43,7 +45,7 @@
         </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"
         >
@@ -54,7 +56,7 @@
         </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"
         >
@@ -65,7 +67,7 @@
         </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"
         >
@@ -76,7 +78,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="deleteStatus"
           @click="close"
         >
@@ -86,7 +88,7 @@
           /><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"
         >
@@ -95,11 +97,36 @@
             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>
-    <span slot="trigger">
+    <span
+      slot="trigger"
+      class="popover-trigger"
+    >
       <FAIcon
-        class="ExtraButtons fa-scale-110 fa-old-padding"
+        class="fa-scale-110 fa-old-padding"
         icon="ellipsis-h"
       />
     </span>
@@ -112,13 +139,20 @@
 @import '../../_variables.scss';
 
 .ExtraButtons {
-  cursor: pointer;
+  /* override of popover internal stuff */
-  position: static;
+  .popover-trigger-button {
+    width: auto;
+  }
 
-  &:hover,
+  .popover-trigger {
-  .extra-button-popover.open & {
+    position: static;
-    color: $fallback--text;
+    padding: 10px;
-    color: var(--text, $fallback--text);
+    margin: -10px;
+
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
   }
 }
 </style>

src/components/favorite_button/favorite_button.js

@@ -31,11 +31,6 @@ const FavoriteButton = {
     }
   },
   computed: {
-    classes () {
-      return {
-        '-favorited': this.status.favorited
-      }
-    },
     ...mapGetters(['mergedConfig'])
   }
 }

src/components/favorite_button/favorite_button.vue

@@ -1,23 +1,31 @@
 <template>
-  <div v-if="loggedIn">
+  <div class="FavoriteButton">
-    <FAIcon
+    <button
-      :class="classes"
+      v-if="loggedIn"
-      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
+      class="button-unstyled interactive"
+      :class="status.favorited && '-favorited'"
       :title="$t('tool_tip.favorite')"
-      :icon="[status.favorited ? 'fas' : 'far', 'star']"
-      :spin="animated"
       @click.prevent="favorite()"
-    />
+    >
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+      <FAIcon
-  </div>
+        class="fa-scale-110 fa-old-padding"
-  <div v-else>
+        :icon="[status.favorited ? 'fas' : 'far', 'star']"
-    <FAIcon
+        :spin="animated"
-      :class="classes"
+      />
-      class="FavoriteButton fa-scale-110 fa-old-padding"
+    </button>
-      :title="$t('tool_tip.favorite')"
+    <span v-else>
-      :icon="['far', 'star']"
+      <FAIcon
-    />
+        class="fa-scale-110 fa-old-padding"
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+        :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>
 
@@ -27,19 +35,28 @@
 @import '../../_variables.scss';
 
 .FavoriteButton {
-  &.-interactive {
+  display: flex;
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+  > :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);
     }
   }
-
-  &.-favorited {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
-  }
 }
 </style>

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) }
   }
 }
 

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>

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"

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') }}

src/components/global_notice_list/global_notice_list.vue

@@ -9,11 +9,15 @@
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
-      <FAIcon
+      <button
-        class="fa-scale-110 fa-old-padding"
+        class="button-unstyled close-notice"
-        icon="times"
         @click="closeNotice(notice)"
-      />
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+        />
+      </button>
     </div>
   </div>
 </template>
@@ -54,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);
     }
   }
@@ -62,7 +66,7 @@
   .global-warning {
     background-color: var(--alertPopupWarning, $fallback--cOrange);
     color: var(--alertPopupWarningText, $fallback--text);
-    i {
+    .svg-inline--fa {
       color: var(--alertPopupWarningText, $fallback--text);
     }
   }
@@ -70,9 +74,16 @@
   .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>

src/components/image_cropper/image_cropper.js

@@ -2,12 +2,10 @@ import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes,
   faCircleNotch
 )
 
@@ -53,8 +51,7 @@ const ImageCropper = {
       cropper: undefined,
       dataUrl: undefined,
       filename: undefined,
-      submitting: false,
+      submitting: false
-      submitError: null
     }
   },
   computed: {
@@ -66,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: {
@@ -82,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
         })
@@ -113,9 +103,6 @@ const ImageCropper = {
         reader.readAsDataURL(this.file)
         this.$emit('changed', this.file, reader)
       }
-    },
-    clearError () {
-      this.submitError = null
     }
   },
   mounted () {

src/components/image_cropper/image_cropper.vue

@@ -11,21 +11,21 @@
       </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)"
@@ -37,17 +37,6 @@
           icon="circle-notch"
         />
       </div>
-      <div
-        v-if="submitError"
-        class="alert error"
-      >
-        {{ submitErrorMsg }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearError"
-        />
-      </div>
     </div>
     <input
       ref="input"

src/components/importer/importer.vue

@@ -15,7 +15,7 @@
     />
     <button
       v-else
-      class="btn btn-default"
+      class="btn button-default"
       @click="submit"
     >
       {{ submitButtonLabel }}

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -12,11 +12,11 @@
         v-model="language"
       >
         <option
-          v-for="(langCode, i) in languageCodes"
+          v-for="lang in languages"
-          :key="langCode"
+          :key="lang.code"
-          :value="langCode"
+          :value="lang.code"
         >
-          {{ languageNames[i] }}
+          {{ lang.name }}
         </option>
       </select>
       <FAIcon
@@ -29,6 +29,7 @@
 
 <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'
@@ -42,12 +43,8 @@ library.add(
 
 export default {
   computed: {
-    languageCodes () {
+    languages () {
-      return languagesObject.languages
+      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
-    },
-
-    languageNames () {
-      return _.map(this.languageCodes, this.getLanguageName)
     },
 
     language: {
@@ -61,11 +58,13 @@ export default {
   methods: {
     getLanguageName (code) {
       const specialLanguageNames = {
-        'ja': 'Japanese (日本語)',
+        'ja_easy': 'やさしいにほんご',
-        'ja_easy': 'Japanese (やさしいにほんご)',
+        'zh': '简体中文',
-        'zh': 'Chinese (简体中文)'
+        '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)
     }
   }
 }

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) {

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;

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>

src/components/media_modal/media_modal.vue

@@ -73,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 {

src/components/media_upload/media_upload.vue

@@ -1,33 +1,29 @@
 <template>
-  <div
+  <label
     class="media-upload"
     :class="{ disabled: disabled }"
+    :title="$t('tool_tip.media_upload')"
   >
-    <label
+    <FAIcon
-      class="label"
+      v-if="uploading"
-      :title="$t('tool_tip.media_upload')"
+      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"
     >
-      <FAIcon
+  </label>
-        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"
-      >
-    </label>
-  </div>
 </template>
 
 <script src="./media_upload.js" ></script>
@@ -36,12 +32,6 @@
 @import '../../_variables.scss';
 
 .media-upload {
-  .label {
+  cursor: pointer;
-    display: inline-block;
-  }
-
-  .new-icon {
-    cursor: pointer;
-  }
 }
  </style>

src/components/mfa_form/recovery_form.vue

@@ -23,23 +23,25 @@
         <div class="form-group">
           <div class="login-bottom">
             <div>
-              <a
+              <button
-                href="#"
+                class="button-unstyled -link"
+                type="button"
                 @click.prevent="requireTOTP"
               >
                 {{ $t('login.enter_two_factor_code') }}
-              </a>
+              </button>
               <br>
-              <a
+              <button
-                href="#"
+                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>

src/components/mfa_form/totp_form.vue

@@ -25,23 +25,25 @@
         <div class="form-group">
           <div class="login-bottom">
             <div>
-              <a
+              <button
-                href="#"
+                class="button-unstyled -link"
+                type="button"
                 @click.prevent="requireRecovery"
               >
                 {{ $t('login.enter_recovery_code') }}
-              </a>
+              </button>
               <br>
-              <a
+              <button
-                href="#"
+                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>

src/components/mobile_nav/mobile_nav.vue

@@ -9,9 +9,8 @@
       @click="scrollToTop()"
     >
       <div class="item">
-        <a
+        <button
-          href="#"
+          class="button-unstyled mobile-nav-button"
-          class="mobile-nav-button"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -22,7 +21,7 @@
             v-if="unreadChatCount"
             class="alert-dot"
           />
-        </a>
+        </button>
         <router-link
           v-if="!hideSitename"
           class="site-name"
@@ -33,10 +32,9 @@
         </router-link>
       </div>
       <div class="item right">
-        <a
+        <button
           v-if="currentUser"
-          class="mobile-nav-button"
+          class="button-unstyled mobile-nav-button"
-          href="#"
           @click.stop.prevent="openMobileNotifications()"
         >
           <FAIcon
@@ -47,7 +45,7 @@
             v-if="unseenNotificationsCount"
             class="alert-dot"
           />
-        </a>
+        </button>
       </div>
     </nav>
     <div
@@ -110,12 +108,23 @@
   }
 
   .mobile-nav-button {
+    display: inline-block;
     text-align: center;
-    margin: 0 1em;
+    padding: 0 1em;
     position: relative;
     cursor: pointer;
   }
 
+  .site-name {
+    padding: 0 .3em;
+    display: inline-block;
+  }
+
+  .item {
+    /* moslty just to get rid of extra whitespaces */
+    display: flex;
+  }
+
   .alert-dot {
     border-radius: 100%;
     height: 8px;

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isLoggedIn">
     <button
-      class="new-status-button"
+      class="button-default new-status-button"
       :class="{ 'hidden': isHidden }"
       @click="openPostForm"
     >

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,84 +47,84 @@
           />
           <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"
         :class="{ toggled }"
       >
         {{ $t('user_card.admin_menu.moderation') }}
@@ -141,13 +141,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 +163,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 {

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

src/components/nav_panel/nav_panel.vue

@@ -27,7 +27,7 @@
           <router-link :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>
@@ -47,7 +47,7 @@
             />{{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
             >
               {{ followRequestCount }}
             </span>
@@ -84,12 +84,6 @@
     padding: 0;
   }
 
-  .follow-request-count {
-    vertical-align: baseline;
-    background-color: $fallback--bg;
-    background-color: var(--input, $fallback--faint);
-  }
-
   li {
     position: relative;
     border-bottom: 1px solid;
@@ -156,21 +150,10 @@
     margin-right: 0.8em;
   }
 
-  .unread-chat-count {
+  .badge {
-    font-size: 0.9em;
-    font-weight: bolder;
-    font-style: normal;
     position: absolute;
     right: 0.6rem;
     top: 1.25em;
-    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;
   }
 }
 </style>

src/components/notification/notification.vue

@@ -11,17 +11,18 @@
     >
       <small>
         <router-link :to="userProfileLink">
-          {{ notification.from_profile.screen_name }}
+          {{ notification.from_profile.screen_name_ui }}
         </router-link>
       </small>
-      <a
+      <button
-        href="#"
+        class="button-unstyled unmute"
-        class="unmute"
         @click.prevent="toggleMute"
-      ><FAIcon
+      >
-        class="fa-scale-110 fa-old-padding"
+        <FAIcon
-        icon="eye-slash"
+          class="fa-scale-110 fa-old-padding"
-      /></a>
+          icon="eye-slash"
+        />
+      </button>
     </div>
     <div
       v-else
@@ -53,14 +54,14 @@
             <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'">
               <FAIcon
@@ -132,14 +133,16 @@
               />
             </span>
           </div>
-          <a
+          <button
             v-if="needMute"
-            href="#"
+            class="button-unstyled"
             @click.prevent="toggleMute"
-          ><FAIcon
+          >
-            class="fa-scale-110 fa-old-padding"
+            <FAIcon
-            icon="eye-slash"
+              class="fa-scale-110 fa-old-padding"
-          /></a>
+              icon="eye-slash"
+            />
+          </button>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@@ -149,7 +152,7 @@
             :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'"
@@ -174,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>

src/components/notifications/notifications.js

@@ -6,6 +6,7 @@ import {
   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'
 
@@ -75,8 +76,10 @@ const Notifications = {
   watch: {
     unseenCountTitle (count) {
       if (count > 0) {
+        FaviconService.drawFaviconBadge()
         this.$store.dispatch('setPageTitle', `(${count})`)
       } else {
+        FaviconService.clearFaviconBadge()
         this.$store.dispatch('setPageTitle', '')
       }
     }

src/components/notifications/notifications.vue

@@ -15,16 +15,9 @@
             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') }}
@@ -48,15 +41,15 @@
         >
           {{ $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"

src/components/password_reset/password_reset.vue

@@ -51,7 +51,7 @@
               <button
                 :disabled="isPending"
                 type="submit"
-                class="btn btn-default btn-block"
+                class="btn button-default btn-block"
               >
                 {{ $t('general.submit') }}
               </button>

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

src/components/poll/poll_form.vue

@@ -21,20 +21,17 @@
           @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)"
       >
-        <FAIcon
+        <FAIcon icon="times" />
-          icon="times"
+      </button>
-          class="delete"
-          @click="deleteOption(index)"
-        />
-      </div>
     </div>
-    <a
+    <button
       v-if="options.length < maxOptions"
-      class="add-option faint"
+      class="add-option faint button-unstyled -hover-highlight"
       @click="addOption"
     >
       <FAIcon
@@ -43,7 +40,7 @@
       />
 
       {{ $t("polls.add_option") }}
-    </a>
+    </button>
     <div class="poll-type-expiry">
       <div
         class="poll-type"
@@ -116,7 +113,6 @@
     align-self: flex-start;
     padding-top: 0.25em;
     padding-left: 0.1em;
-    cursor: pointer;
   }
 
   .poll-option {
@@ -135,19 +131,11 @@
     }
   }
 
-  .icon-container {
+  .delete-option {
     // Hack: Move the icon over the input box
     width: 1.5em;
     margin-left: -1.5em;
     z-index: 1;
-
-    .delete {
-      cursor: pointer;
-
-      &:hover {
-        color: inherit;
-      }
-    }
   }
 
   .poll-type-expiry {
@@ -163,6 +151,7 @@
       border: none;
       box-shadow: none;
       background-color: transparent;
+      padding-right: 0.75em;
     }
   }
 

src/components/popover/popover.js

@@ -3,25 +3,35 @@ const Popover = {
   props: {
     // Action to trigger popover: either 'hover' or 'click'
     trigger: String,
+
     // Either 'top' or 'bottom'
     placement: String,
+
     // Takes object with properties 'x' and 'y', values of these can be
     // 'container' for using offsetParent as boundaries for either axis
     // or 'viewport'
     boundTo: Object,
+
     // Takes a selector to use as a replacement for the parent container
     // for getting boundaries for x an y axis
     boundToSelector: String,
+
     // Takes a top/bottom/left/right object, how much space to leave
     // between boundary and popover element
     margin: Object,
+
     // Takes a x/y object and tells how many pixels to offset from
     // anchor point on either axis
     offset: Object,
+
     // Replaces the classes you may want for the popover container.
     // Use 'popover-default' in addition to get the default popover
     // styles with your custom class.
-    popoverClass: String
+    popoverClass: String,
+
+    // If true, subtract padding when calculating position for the popover,
+    // use it when popover offset looks to be different on top vs bottom.
+    removePadding: Boolean
   },
   data () {
     return {
@@ -96,9 +106,15 @@ const Popover = {
       if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
       if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
 
+      let vPadding = 0
+      if (this.removePadding && usingTop) {
+        const anchorStyle = getComputedStyle(anchorEl)
+        vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
+      }
+
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
-        ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
+        ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
         : yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
@@ -112,9 +128,12 @@ const Popover = {
       }
     },
     showPopover () {
-      if (this.hidden) this.$emit('show')
+      const wasHidden = this.hidden
       this.hidden = false
-      this.$nextTick(this.updateStyles)
+      this.$nextTick(() => {
+        if (wasHidden) this.$emit('show')
+        this.updateStyles()
+      })
     },
     hidePopover () {
       if (!this.hidden) this.$emit('close')

src/components/popover/popover.vue

@@ -3,12 +3,14 @@
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
-    <div
+    <button
       ref="trigger"
+      class="button-unstyled -fullwidth popover-trigger-button"
+      type="button"
       @click="onClick"
     >
       <slot name="trigger" />
-    </div>
+    </button>
     <div
       v-if="!hidden"
       ref="content"
@@ -30,6 +32,10 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.popover-trigger-button {
+  display: block;
+}
+
 .popover {
   z-index: 8;
   position: absolute;
@@ -76,10 +82,9 @@
 
   .dropdown-item {
     line-height: 21px;
-    margin-right: 5px;
     overflow: auto;
     display: block;
-    padding: .25rem 1.0rem .25rem 1.5rem;
+    padding: .5em 0.75em;
     clear: both;
     font-weight: 400;
     text-align: inherit;
@@ -90,14 +95,14 @@
     box-shadow: none;
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
 
     --btnText: var(--popoverText, $fallback--text);
 
     &-icon {
-      padding-left: 0.5rem;
-
       svg {
-        margin-right: 0.25rem;
+        width: 22px;
+        margin-right: 0.75rem;
         color: var(--menuPopoverIcon, $fallback--icon)
       }
     }
@@ -116,6 +121,33 @@
       }
     }
 
+    .menu-checkbox {
+      display: inline-block;
+      vertical-align: middle;
+      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);
+      margin-right: 0.75em;
+
+      &.menu-checkbox-checked::after {
+        font-size: 1.25em;
+        content: '✓';
+      }
+
+      &.menu-checkbox-radio::after {
+        font-size: 2em;
+        content: '•';
+      }
+    }
+
   }
 }
 </style>

src/components/post_status_form/post_status_form.js

@@ -115,7 +115,7 @@ const PostStatusForm = {
       ? this.copyMessageScope
       : this.$store.state.users.currentUser.default_scope
 
-    const { postContentType: contentType } = this.$store.getters.mergedConfig
+    const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
 
     return {
       dropFiles: [],
@@ -126,7 +126,7 @@ const PostStatusForm = {
       newStatus: {
         spoilerText: this.subject || '',
         status: statusText,
-        nsfw: false,
+        nsfw: !!sensitiveByDefault,
         files: [],
         poll: {},
         mediaDescriptions: {},
@@ -159,8 +159,7 @@ const PostStatusForm = {
           ...this.$store.state.instance.emoji,
           ...this.$store.state.instance.customEmoji
         ],
-        users: this.$store.state.users.users,
+        store: this.$store
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
       })
     },
     emojiSuggestor () {
@@ -531,7 +530,7 @@ const PostStatusForm = {
             !(isFormBiggerThanScroller &&
               this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
       const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
-      const targetScroll = currentScroll + totalDelta
+      const targetScroll = Math.round(currentScroll + totalDelta)
 
       if (scrollerRef === window) {
         scrollerRef.scroll(0, targetScroll)

src/components/post_status_form/post_status_form.vue

@@ -24,12 +24,12 @@
           tag="p"
           class="visibility-notice"
         >
-          <a
+          <button
-            href="#"
+            class="button-unstyled -link"
             @click="openProfileTab"
           >
             {{ $t('post_status.account_not_locked_warning_link') }}
-          </a>
+          </button>
         </i18n>
         <p
           v-if="!hideScopeNotice && newStatus.visibility === 'public'"
@@ -243,38 +243,34 @@
             @upload-failed="uploadFailed"
             @all-uploaded="finishedUploadingFiles"
           />
-          <div
+          <button
-            class="emoji-icon"
+            class="emoji-icon button-unstyled"
+            :title="$t('emoji.add_emoji')"
+            @click="showEmojiPicker"
           >
-            <div
+            <FAIcon icon="smile-beam" />
-              :title="$t('emoji.add_emoji')"
+          </button>
-              class="btn btn-default"
+          <button
-              @click="showEmojiPicker"
-            >
-              <FAIcon icon="smile-beam" />
-            </div>
-          </div>
-          <div
             v-if="pollsAvailable"
-            class="poll-icon"
+            class="poll-icon button-unstyled"
             :class="{ selected: pollFormVisible }"
             :title="$t('polls.add_poll')"
             @click="togglePollForm"
           >
             <FAIcon icon="poll-h" />
-          </div>
+          </button>
         </div>
         <button
           v-if="posting"
           disabled
-          class="btn btn-default"
+          class="btn button-default"
         >
           {{ $t('post_status.posting') }}
         </button>
         <button
           v-else-if="isOverLengthLimit"
           disabled
-          class="btn btn-default"
+          class="btn button-default"
         >
           {{ $t('general.submit') }}
         </button>
@@ -282,7 +278,7 @@
         <button
           v-else
           :disabled="uploadingFiles || disableSubmit"
-          class="btn btn-default"
+          class="btn button-default"
           @touchstart.stop.prevent="postStatus($event, newStatus)"
           @click.stop.prevent="postStatus($event, newStatus)"
         >
@@ -306,11 +302,12 @@
           :key="file.url"
           class="media-upload-wrapper"
         >
-          <FAIcon
+          <button
-            class="fa-scale-110 fa-old-padding"
+            class="button-unstyled hider"
-            icon="times"
             @click="removeMediaFile(file)"
-          />
+          >
+            <FAIcon icon="times" />
+          </button>
           <attachment
             :attachment="file"
             :set-media="() => $store.dispatch('setMedia', newStatus.files)"
@@ -520,26 +517,11 @@
   }
 
    .attachments .media-upload-wrapper {
-    padding: 0 0.5em;
+    position: relative;
 
     .attachment {
       margin: 0;
       padding: 0;
-      position: relative;
-    }
-
-    .fa-scale-110 fa-old-padding {
-      position: absolute;
-      margin: 10px;
-      margin: .75em;
-      padding: .5em;
-      background: rgba(230,230,230,0.6);
-      z-index: 2;
-      color: black;
-      border-radius: $fallback--attachmentRadius;
-      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-      font-weight: bold;
-      cursor: pointer;
     }
   }
 

src/components/react_button/react_button.js

@@ -23,17 +23,31 @@ const ReactButton = {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
       close()
+    },
+    focusInput () {
+      this.$nextTick(() => {
+        const input = this.$el.querySelector('input')
+        if (input) input.focus()
+      })
     }
   },
   computed: {
     commonEmojis () {
-      return ['👍', '😠', '👀', '😂', '🔥']
+      return [
+        { displayText: 'thumbsup', replacement: '👍' },
+        { displayText: 'angry', replacement: '😠' },
+        { displayText: 'eyes', replacement: '👀' },
+        { displayText: 'joy', replacement: '😂' },
+        { displayText: 'fire', replacement: '🔥' }
+      ]
     },
     emojis () {
       if (this.filterWord !== '') {
         const filterWordLowercase = this.filterWord.toLowerCase()
         let orderedEmojiList = []
         for (const emoji of this.$store.state.instance.emoji) {
+          if (emoji.replacement === this.filterWord) return [emoji]
+
           const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
           if (indexOfFilterWord > -1) {
             if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {

src/components/react_button/react_button.vue

@@ -1,9 +1,12 @@
 <template>
   <Popover
     trigger="click"
+    class="ReactButton"
     placement="top"
     :offset="{ y: 5 }"
-    class="react-button-popover"
+    :bound-to="{ x: 'container' }"
+    remove-padding
+    @show="focusInput"
   >
     <div
       slot="content"
@@ -19,17 +22,19 @@
       <div class="reaction-picker">
         <span
           v-for="emoji in commonEmojis"
-          :key="emoji"
+          :key="emoji.replacement"
           class="emoji-button"
-          @click="addReaction($event, emoji, close)"
+          :title="emoji.displayText"
+          @click="addReaction($event, emoji.replacement, close)"
         >
-          {{ emoji }}
+          {{ emoji.replacement }}
         </span>
         <div class="reaction-picker-divider" />
         <span
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
+          :title="emoji.displayText"
           @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
@@ -37,12 +42,16 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <FAIcon
+    <span
       slot="trigger"
-      class="fa-scale-110 fa-old-padding add-reaction-button"
+      class="popover-trigger"
-      :icon="['far', 'smile-beam']"
       :title="$t('tool_tip.add_reaction')"
-    />
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :icon="['far', 'smile-beam']"
+      />
+    </span>
   </Popover>
 </template>
 
@@ -51,62 +60,72 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.reaction-picker-filter {
+.ReactButton {
-  padding: 0.5em;
+  .reaction-picker-filter {
-  display: flex;
+    padding: 0.5em;
-  input {
+    display: flex;
-    flex: 1;
+
+    input {
+      flex: 1;
+    }
   }
-}
 
-.reaction-picker-divider {
+  .reaction-picker-divider {
-  height: 1px;
+    height: 1px;
-  width: 100%;
+    width: 100%;
-  margin: 0.5em;
+    margin: 0.5em;
-  background-color: var(--border, $fallback--border);
+    background-color: var(--border, $fallback--border);
-}
+  }
 
-.reaction-picker {
+  .reaction-picker {
-  width: 10em;
+    width: 10em;
-  height: 9em;
+    height: 9em;
-  font-size: 1.5em;
+    font-size: 1.5em;
-  overflow-y: scroll;
+    overflow-y: scroll;
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  padding: 0.5em;
+    padding: 0.5em;
-  text-align: center;
+    text-align: center;
-  align-content: flex-start;
+    align-content: flex-start;
-  user-select: none;
+    user-select: none;
 
-  mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+    mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-    linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+          linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-    linear-gradient(to top, white, white);
+          linear-gradient(to top, white, white);
-  transition: mask-size 150ms;
+    transition: mask-size 150ms;
-  mask-size: 100% 20px, 100% 20px, auto;
+    mask-size: 100% 20px, 100% 20px, auto;
-  // Autoprefixed seem to ignore this one, and also syntax is different
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
 
-  .emoji-button {
+    /* Autoprefixed seem to ignore this one, and also syntax is different */
-    cursor: pointer;
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
 
-    flex-basis: 20%;
+    .emoji-button {
-    line-height: 1.5em;
+      cursor: pointer;
-    align-content: center;
 
-    &:hover {
+      flex-basis: 20%;
-      transform: scale(1.25);
+      line-height: 1.5em;
+      align-content: center;
+
+      &:hover {
+        transform: scale(1.25);
+      }
+    }
+  }
+
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
+  .popover-trigger {
+    padding: 10px;
+    margin: -10px;
+
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
   }
 }
 
-.add-reaction-button {
-  cursor: pointer;
-
-  &:hover {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-  }
-}
-
 </style>

src/components/registration/registration.js

@@ -10,7 +10,8 @@ const registration = {
       fullname: '',
       username: '',
       password: '',
-      confirm: ''
+      confirm: '',
+      reason: ''
     },
     captcha: {}
   }),
@@ -24,7 +25,8 @@ const registration = {
         confirm: {
           required,
           sameAsPassword: sameAs('password')
-        }
+        },
+        reason: { required: requiredIf(() => this.accountApprovalRequired) }
       }
     }
   },
@@ -38,7 +40,10 @@ const registration = {
   computed: {
     token () { return this.$route.params.token },
     bioPlaceholder () {
-      return this.$t('registration.bio_placeholder').replace(/\s*\n\s*/g, ' \n')
+      return this.replaceNewlines(this.$t('registration.bio_placeholder'))
+    },
+    reasonPlaceholder () {
+      return this.replaceNewlines(this.$t('registration.reason_placeholder'))
     },
     ...mapState({
       registrationOpen: (state) => state.instance.registrationOpen,
@@ -46,7 +51,8 @@ const registration = {
       isPending: (state) => state.users.signUpPending,
       serverValidationErrors: (state) => state.users.signUpErrors,
       termsOfService: (state) => state.instance.tos,
-      accountActivationRequired: (state) => state.instance.accountActivationRequired
+      accountActivationRequired: (state) => state.instance.accountActivationRequired,
+      accountApprovalRequired: (state) => state.instance.accountApprovalRequired
     })
   },
   methods: {
@@ -73,6 +79,9 @@ const registration = {
     },
     setCaptcha () {
       this.getCaptcha().then(cpt => { this.captcha = cpt })
+    },
+    replaceNewlines (str) {
+      return str.replace(/\s*\n\s*/g, ' \n')
     }
   }
 }

src/components/registration/registration.vue

@@ -162,6 +162,23 @@
               </ul>
             </div>
 
+            <div
+              v-if="accountApprovalRequired"
+              class="form-group"
+            >
+              <label
+                class="form--label"
+                for="reason"
+              >{{ $t('registration.reason') }}</label>
+              <textarea
+                id="reason"
+                v-model="user.reason"
+                :disabled="isPending"
+                class="form-control"
+                :placeholder="reasonPlaceholder"
+              />
+            </div>
+
             <div
               v-if="captcha.type != 'none'"
               id="captcha-group"
@@ -211,7 +228,7 @@
               <button
                 :disabled="isPending"
                 type="submit"
-                class="btn btn-default"
+                class="btn button-default"
               >
                 {{ $t('general.submit') }}
               </button>

src/components/remote_follow/remote_follow.vue

@@ -16,7 +16,7 @@
       >
       <button
         click="submit"
-        class="remote-button"
+        class="button-default remote-button"
       >
         {{ $t('user_card.remote_follow') }}
       </button>

src/components/reply_button/reply_button.vue

@@ -1,20 +1,28 @@
 <template>
-  <div>
+  <div class="ReplyButton">
-    <FAIcon
+    <button
       v-if="loggedIn"
-      class="ReplyButton fa-scale-110 fa-old-padding -interactive"
+      class="button-unstyled interactive"
-      icon="reply"
-      :title="$t('tool_tip.reply')"
       :class="{'-active': replying}"
-      @click.prevent="$emit('toggle')"
-    />
-    <FAIcon
-      v-else
-      icon="reply"
-      class="ReplyButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.reply')"
-    />
+      @click.prevent="$emit('toggle')"
-    <span v-if="status.replies_count > 0">
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="reply"
+      />
+    </button>
+    <span v-else>
+      <FAIcon
+        icon="reply"
+        class="fa-scale-110 fa-old-padding"
+        :title="$t('tool_tip.reply')"
+      />
+    </span>
+    <span
+      v-if="status.replies_count > 0"
+      class="action-counter"
+    >
       {{ status.replies_count }}
     </span>
   </div>
@@ -26,14 +34,25 @@
 @import '../../_variables.scss';
 
 .ReplyButton {
-  &.-interactive {
+  display: flex;
-    cursor: pointer;
 
-    &:hover,
+  > :first-child {
-    &.-active {
+    padding: 10px;
+    margin: -10px -8px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .interactive {
+    &:hover .svg-inline--fa,
+    &.-active .svg-inline--fa {
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
     }
   }
+
 }
 </style>

src/components/retweet_button/retweet_button.js

@@ -24,11 +24,6 @@ const RetweetButton = {
     }
   },
   computed: {
-    classes () {
-      return {
-        '-repeated': this.status.repeated
-      }
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }

src/components/retweet_button/retweet_button.vue

@@ -1,33 +1,38 @@
 <template>
-  <div v-if="loggedIn">
+  <div class="RetweetButton">
-    <template v-if="visibility !== 'private' && visibility !== 'direct'">
+    <button
+      v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
+      class="button-unstyled interactive"
+      :class="status.repeated && '-repeated'"
+      :title="$t('tool_tip.repeat')"
+      @click.prevent="retweet()"
+    >
       <FAIcon
-        :class="classes"
+        class="fa-scale-110 fa-old-padding"
-        class="RetweetButton fa-scale-110 fa-old-padding -interactive"
         icon="retweet"
         :spin="animated"
-        :title="$t('tool_tip.repeat')"
-        @click.prevent="retweet()"
       />
-      <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
+    </button>
-    </template>
+    <span v-else-if="loggedIn">
-    <template v-else>
       <FAIcon
-        :class="classes"
+        class="fa-scale-110 fa-old-padding"
-        class="RetweetButton fa-scale-110 fa-old-padding"
         icon="lock"
         :title="$t('timeline.no_retweet_hint')"
       />
-    </template>
+    </span>
-  </div>
+    <span v-else>
-  <div v-else-if="!loggedIn">
+      <FAIcon
-    <FAIcon
+        class="fa-scale-110 fa-old-padding"
-      :class="classes"
+        icon="retweet"
-      class="fa-scale-110 fa-old-padding"
+        :title="$t('tool_tip.repeat')"
-      icon="retweet"
+      />
-      :title="$t('tool_tip.repeat')"
+    </span>
-    />
+    <span
-    <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
+      v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
+      class="no-event"
+    >
+      {{ status.repeat_num }}
+    </span>
   </div>
 </template>
 
@@ -37,19 +42,28 @@
 @import '../../_variables.scss';
 
 .RetweetButton {
-  &.-interactive {
+  display: flex;
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+  > :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,
+    &.-repeated .svg-inline--fa {
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
   }
-
-  &.-repeated {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
-  }
 }
 </style>

src/components/scope_selector/scope_selector.vue

@@ -3,54 +3,58 @@
     v-if="!showNothing"
     class="ScopeSelector"
   >
-    <span
+    <button
       v-if="showDirect"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
+      type="button"
       @click="changeVis('direct')"
     >
       <FAIcon
         icon="envelope"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
+    </button>
-    <span
+    <button
       v-if="showPrivate"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
+      type="button"
       @click="changeVis('private')"
     >
       <FAIcon
         icon="lock"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
+    </button>
-    <span
+    <button
       v-if="showUnlisted"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
+      type="button"
       @click="changeVis('unlisted')"
     >
       <FAIcon
         icon="lock-open"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
+    </button>
-    <span
+    <button
       v-if="showPublic"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
+      type="button"
       @click="changeVis('public')"
     >
       <FAIcon
         icon="globe"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
+    </button>
   </div>
 </template>
 

src/components/search/search.vue

@@ -14,7 +14,8 @@
         @keyup.enter="newQuery(searchTerm)"
       >
       <button
-        class="btn search-button"
+        class="btn button-default search-button"
+        type="submit"
         @click="newQuery(searchTerm)"
       >
         <FAIcon icon="search" />

src/components/search_bar/search_bar.vue

@@ -3,17 +3,19 @@
     class="SearchBar"
     :class="{ '-expanded': !hidden }"
   >
-    <a
+    <button
       v-if="hidden"
-      href="#"
+      class="button-unstyled nav-icon"
-      class="nav-icon"
       :title="$t('nav.search')"
-    ><FAIcon
+      type="button"
-      fixed-width
-      class="fa-scale-110 fa-old-padding"
-      icon="search"
       @click.prevent.stop="toggleHidden"
-    /></a>
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="search"
+      />
+    </button>
     <template v-else>
       <input
         id="search-bar-input"
@@ -25,7 +27,8 @@
         @keyup.enter="find(searchTerm)"
       >
       <button
-        class="btn search-button"
+        class="button-default search-button"
+        type="submit"
         @click="find(searchTerm)"
       >
         <FAIcon
@@ -33,14 +36,17 @@
           icon="search"
         />
       </button>
-      <span>
+      <button
+        class="button-unstyled cancel-search"
+        type="button"
+        @click.prevent.stop="toggleHidden"
+      >
         <FAIcon
           fixed-width
           icon="times"
           class="cancel-icon fa-scale-110 fa-old-padding"
-          @click.prevent.stop="toggleHidden"
         />
-      </span>
+      </button>
     </template>
   </div>
 </template>
@@ -69,8 +75,11 @@
     flex: 1 0 auto;
   }
 
+  .cancel-search {
+    height: 50px;
+  }
+
   .cancel-icon {
-    cursor: pointer;
     color: $fallback--text;
     color: var(--btnTopBarText, $fallback--text);
   }

src/components/settings_modal/helpers/boolean_setting.vue

@@ -0,0 +1,57 @@
+<template>
+  <label
+    class="BooleanSetting"
+  >
+    <Checkbox
+      :checked="state"
+      :disabled="disabled"
+      @change="update"
+    >
+      <span
+        v-if="!!$slots.default"
+        class="label"
+      >
+        <slot />
+      </span>
+      <ModifiedIndicator :changed="isChanged" />
+    </Checkbox>
+  </label>
+</template>
+
+<script>
+import { get, set } from 'lodash'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    Checkbox,
+    ModifiedIndicator
+  },
+  props: [
+    'path',
+    'disabled'
+  ],
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.BooleanSetting {
+}
+</style>

src/components/settings_modal/helpers/modified_indicator.vue

@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="changed"
+    class="ModifiedIndicator"
+  >
+    <Popover
+      trigger="hover"
+    >
+      <span slot="trigger">
+        &nbsp;
+        <FAIcon
+          icon="wrench"
+        />
+      </span>
+      <div
+        slot="content"
+        class="modified-tooltip"
+      >
+        {{ $t('settings.setting_changed') }}
+      </div>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench
+)
+
+export default {
+  components: { Popover },
+  props: ['changed']
+}
+</script>
+
+<style lang="scss">
+.ModifiedIndicator {
+  display: inline-block;
+  position: relative;
+
+  .modified-tooltip {
+    margin: 0.5em 1em;
+    min-width: 10em;
+    text-align: center;
+  }
+}
+</style>

src/components/settings_modal/helpers/shared_computed_object.js

@@ -1,29 +1,15 @@
-import {
+import { defaultState as configDefaultState } from 'src/modules/config.js'
-  instanceDefaultProperties,
-  multiChoiceProperties,
-  defaultState as configDefaultState
-} from 'src/modules/config.js'
 
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Getting localized values for instance-default properties
+  // Getting values for default properties
-  ...instanceDefaultProperties
+  ...Object.keys(configDefaultState)
-    .filter(key => multiChoiceProperties.includes(key))
     .map(key => [
       key + 'DefaultValue',
       function () {
-        return this.$store.getters.instanceDefaultConfig[key]
+        return this.$store.getters.defaultConfig[key]
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...instanceDefaultProperties
-    .filter(key => !multiChoiceProperties.includes(key))
-    .map(key => [
-      key + 'LocalizedValue',
-      function () {
-        return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
       }
     ])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),

src/components/settings_modal/settings_modal.vue

@@ -30,13 +30,13 @@
           </template>
         </transition>
         <button
-          class="btn"
+          class="btn button-default"
           @click="peekModal"
         >
           {{ $t('general.peek') }}
         </button>
         <button
-          class="btn"
+          class="btn button-default"
           @click="closeModal"
         >
           {{ $t('general.close') }}

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,5 +1,5 @@
 import { filter, trim } from 'lodash'
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -18,7 +18,7 @@ const FilteringTab = {
     }
   },
   components: {
-    Checkbox
+    BooleanSetting
   },
   computed: {
     ...SharedComputedObject(),

src/components/settings_modal/tabs/filtering_tab.vue

@@ -5,34 +5,34 @@
         <span class="label">{{ $t('settings.notification_visibility') }}</span>
         <ul class="option-list">
           <li>
-            <Checkbox v-model="notificationVisibility.likes">
+            <BooleanSetting path="notificationVisibility.likes">
               {{ $t('settings.notification_visibility_likes') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.repeats">
+            <BooleanSetting path="notificationVisibility.repeats">
               {{ $t('settings.notification_visibility_repeats') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.follows">
+            <BooleanSetting path="notificationVisibility.follows">
               {{ $t('settings.notification_visibility_follows') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.mentions">
+            <BooleanSetting path="notificationVisibility.mentions">
               {{ $t('settings.notification_visibility_mentions') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.moves">
+            <BooleanSetting path="notificationVisibility.moves">
               {{ $t('settings.notification_visibility_moves') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.emojiReactions">
+            <BooleanSetting path="notificationVisibility.emojiReactions">
               {{ $t('settings.notification_visibility_emoji_reactions') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
         </ul>
       </div>
@@ -60,14 +60,14 @@
         </label>
       </div>
       <div>
-        <Checkbox v-model="hidePostStats">
+        <BooleanSetting path="hidePostStats">
-          {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
+          {{ $t('settings.hide_post_stats') }}
-        </Checkbox>
+        </BooleanSetting>
       </div>
       <div>
-        <Checkbox v-model="hideUserStats">
+        <BooleanSetting path="hideUserStats">
-          {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
+          {{ $t('settings.hide_user_stats') }}
-        </Checkbox>
+        </BooleanSetting>
       </div>
     </div>
     <div class="setting-item">
@@ -76,12 +76,13 @@
         <textarea
           id="muteWords"
           v-model="muteWordsString"
+          class="resize-height"
         />
       </div>
       <div>
-        <Checkbox v-model="hideFilteredStatuses">
+        <BooleanSetting path="hideFilteredStatuses">
-          {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
+          {{ $t('settings.hide_filtered_statuses') }}
-        </Checkbox>
+        </BooleanSetting>
       </div>
     </div>
   </div>

src/components/settings_modal/tabs/general_tab.js

@@ -1,4 +1,4 @@
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -26,7 +26,7 @@ const GeneralTab = {
     }
   },
   components: {
-    Checkbox,
+    BooleanSetting,
     InterfaceLanguageSwitcher
   },
   computed: {
@@ -34,6 +34,10 @@ const GeneralTab = {
       return this.$store.state.instance.postFormats || []
     },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
     ...SharedComputedObject()
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -7,9 +7,14 @@
           <interface-language-switcher />
         </li>
         <li v-if="instanceSpecificPanelPresent">
-          <Checkbox v-model="hideISP">
+          <BooleanSetting path="hideISP">
             {{ $t('settings.hide_isp') }}
-          </Checkbox>
+          </BooleanSetting>
+        </li>
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -17,51 +22,51 @@
       <h2>{{ $t('nav.timeline') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideMutedPosts">
+          <BooleanSetting path="hideMutedPosts">
-            {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
+            {{ $t('settings.hide_muted_posts') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="collapseMessageWithSubject">
+          <BooleanSetting path="collapseMessageWithSubject">
-            {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
+            {{ $t('settings.collapse_subject') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="streaming">
+          <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
+              <BooleanSetting
-                v-model="pauseOnUnfocused"
+                path="pauseOnUnfocused"
                 :disabled="!streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
-              </Checkbox>
+              </BooleanSetting>
             </li>
           </ul>
         </li>
         <li>
-          <Checkbox v-model="useStreamingApi">
+          <BooleanSetting path="useStreamingApi">
             {{ $t('settings.useStreamingApi') }}
             <br>
             <small>
               {{ $t('settings.useStreamingApiWarning') }}
             </small>
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="emojiReactionsOnTimeline">
+          <BooleanSetting path="emojiReactionsOnTimeline">
             {{ $t('settings.emoji_reactions_on_timeline') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="virtualScrolling">
+          <BooleanSetting path="virtualScrolling">
             {{ $t('settings.virtual_scrolling') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -70,14 +75,14 @@
       <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="scopeCopy">
+          <BooleanSetting path="scopeCopy">
-            {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
+            {{ $t('settings.scope_copy') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="alwaysShowSubjectInput">
+          <BooleanSetting path="alwaysShowSubjectInput">
-            {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
+            {{ $t('settings.subject_input_always_show') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
           <div>
@@ -138,19 +143,24 @@
           </div>
         </li>
         <li>
-          <Checkbox v-model="minimalScopesMode">
+          <BooleanSetting path="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
+            {{ $t('settings.minimal_scopes_mode') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="autohideFloatingPostButton">
+          <BooleanSetting path="sensitiveByDefault">
+            {{ $t('settings.sensitive_by_default') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="autohideFloatingPostButton">
             {{ $t('settings.autohide_floating_post_button') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="padEmoji">
+          <BooleanSetting path="padEmoji">
             {{ $t('settings.pad_emoji') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -159,14 +169,14 @@
       <h2>{{ $t('settings.attachments') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideAttachments">
+          <BooleanSetting path="hideAttachments">
             {{ $t('settings.hide_attachments_in_tl') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="hideAttachmentsInConv">
+          <BooleanSetting path="hideAttachmentsInConv">
             {{ $t('settings.hide_attachments_in_convo') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
           <label for="maxThumbnails">
@@ -174,7 +184,7 @@
           </label>
           <input
             id="maxThumbnails"
-            v-model.number="maxThumbnails"
+            path.number="maxThumbnails"
             class="number-input"
             type="number"
             min="0"
@@ -182,48 +192,48 @@
           >
         </li>
         <li>
-          <Checkbox v-model="hideNsfw">
+          <BooleanSetting path="hideNsfw">
             {{ $t('settings.nsfw_clickthrough') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <ul class="setting-list suboptions">
           <li>
-            <Checkbox
+            <BooleanSetting
-              v-model="preloadImage"
+              path="preloadImage"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.preload_images') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox
+            <BooleanSetting
-              v-model="useOneClickNsfw"
+              path="useOneClickNsfw"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
         </ul>
         <li>
-          <Checkbox v-model="stopGifs">
+          <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="loopVideo">
+          <BooleanSetting path="loopVideo">
             {{ $t('settings.loop_video') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
+              <BooleanSetting
-                v-model="loopVideoSilentOnly"
+                path="loopVideoSilentOnly"
                 :disabled="!loopVideo || !loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
-              </Checkbox>
+              </BooleanSetting>
               <div
                 v-if="!loopSilentAvailable"
                 class="unavailable"
@@ -234,14 +244,14 @@
           </ul>
         </li>
         <li>
-          <Checkbox v-model="playVideosInModal">
+          <BooleanSetting path="playVideosInModal">
             {{ $t('settings.play_videos_in_modal') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="useContainFit">
+          <BooleanSetting path="useContainFit">
             {{ $t('settings.use_contain_fit') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -250,9 +260,9 @@
       <h2>{{ $t('settings.notifications') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="webPushNotifications">
+          <BooleanSetting path="webPushNotifications">
             {{ $t('settings.enable_web_push_notifications') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -261,9 +271,9 @@
       <h2>{{ $t('settings.fun') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="greentext">
+          <BooleanSetting path="greentext">
-            {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
+            {{ $t('settings.greentext') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>

src/components/settings_modal/tabs/mutes_and_blocks_tab.vue

@@ -27,7 +27,7 @@
           <div class="bulk-actions">
             <ProgressButton
               v-if="selected.length > 0"
-              class="btn btn-default bulk-action-button"
+              class="btn button-default bulk-action-button"
               :click="() => blockUsers(selected)"
             >
               {{ $t('user_card.block') }}
@@ -37,7 +37,7 @@
             </ProgressButton>
             <ProgressButton
               v-if="selected.length > 0"
-              class="btn btn-default"
+              class="btn button-default"
               :click="() => unblockUsers(selected)"
             >
               {{ $t('user_card.unblock') }}
@@ -85,7 +85,7 @@
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
@@ -95,7 +95,7 @@
                 </ProgressButton>
                 <ProgressButton
                   v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
@@ -141,7 +141,7 @@
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                   :click="() => unmuteDomains(selected)"
                 >
                   {{ $t('domain_mute_card.unmute') }}

src/components/settings_modal/tabs/notifications_tab.vue

@@ -21,7 +21,7 @@
       <p>{{ $t('settings.notification_mutes') }}</p>
       <p>{{ $t('settings.notification_blocks') }}</p>
       <button
-        class="btn btn-default"
+        class="btn button-default"
         @click="updateNotificationSettings"
       >
         {{ $t('general.submit') }}

src/components/settings_modal/tabs/profile_tab.js

@@ -45,9 +45,7 @@ const ProfileTab = {
       banner: null,
       bannerPreview: null,
       background: null,
-      backgroundPreview: null,
+      backgroundPreview: null
-      bannerUploadError: null,
-      backgroundUploadError: null
     }
   },
   components: {
@@ -68,8 +66,7 @@ const ProfileTab = {
           ...this.$store.state.instance.emoji,
           ...this.$store.state.instance.customEmoji
         ],
-        users: this.$store.state.users.users,
+        store: this.$store
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
       })
     },
     emojiSuggestor () {
@@ -79,10 +76,7 @@ const ProfileTab = {
       ] })
     },
     userSuggestor () {
-      return suggestor({
+      return suggestor({ store: this.$store })
-        users: this.$store.state.users.users,
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
-      })
     },
     fieldsLimits () {
       return this.$store.state.instance.fieldsLimits
@@ -166,18 +160,18 @@ const ProfileTab = {
       if (file.size > this.$store.state.instance[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = [
+        this.$store.dispatch('pushGlobalNotice', {
-          this.$t('upload.error.base'),
+          messageKey: 'upload.error.message',
-          this.$t(
+          messageArgs: [
-            'upload.error.file_too_big',
+            this.$t('upload.error.file_too_big', {
-            {
               filesize: filesize.num,
               filesizeunit: filesize.unit,
               allowedsize: allowedsize.num,
               allowedsizeunit: allowedsize.unit
-            }
+            })
-          )
+          ],
-        ].join(' ')
+          level: 'error'
+        })
         return
       }
       // eslint-disable-next-line no-undef
@@ -217,8 +211,9 @@ const ProfileTab = {
               that.$store.commit('setCurrentUser', user)
               resolve()
             })
-            .catch((err) => {
+            .catch((error) => {
-              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
+              that.displayUploadError(error)
+              reject(error)
             })
         }
 
@@ -239,24 +234,27 @@ const ProfileTab = {
           this.$store.commit('setCurrentUser', user)
           this.bannerPreview = null
         })
-        .catch((err) => {
+        .catch(this.displayUploadError)
-          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
+        .finally(() => { this.bannerUploading = false })
-        })
-        .then(() => { this.bannerUploading = false })
     },
     submitBackground (background) {
       if (!this.backgroundPreview && background !== '') { return }
 
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
+      this.$store.state.api.backendInteractor.updateProfileImages({ background })
-        if (!data.error) {
+        .then((data) => {
           this.$store.commit('addNewUsers', [data])
           this.$store.commit('setCurrentUser', data)
           this.backgroundPreview = null
-        } else {
+        })
-          this.backgroundUploadError = this.$t('upload.error.base') + data.error
+        .catch(this.displayUploadError)
-        }
+        .finally(() => { this.backgroundUploading = false })
-        this.backgroundUploading = false
+    },
+    displayUploadError (error) {
+      this.$store.dispatch('pushGlobalNotice', {
+        messageKey: 'upload.error.message',
+        messageArgs: [error.message],
+        level: 'error'
       })
     }
   }

src/components/settings_modal/tabs/profile_tab.scss

@@ -111,16 +111,17 @@
   .profile-fields {
     display: flex;
 
-    &>.emoji-input {
+    & > .emoji-input {
       flex: 1 1 auto;
-      margin: 0 .2em .5em;
+      margin: 0 0.2em 0.5em;
       min-width: 0;
     }
 
-    &>.icon-container {
+    .delete-field {
       width: 20px;
       align-self: center;
-      margin: 0 .2em .5em;
+      margin: 0 0.2em 0.5em;
+      padding: 0 0.5em;
     }
   }
 }

src/components/settings_modal/tabs/profile_tab.vue

@@ -11,7 +11,7 @@
         <input
           id="username"
           v-model="newName"
-          classname="name-changer"
+          class="name-changer"
         >
       </EmojiInput>
       <p>{{ $t('settings.bio') }}</p>
@@ -22,7 +22,7 @@
       >
         <textarea
           v-model="newBio"
-          classname="bio"
+          class="bio resize-height"
         />
       </EmojiInput>
       <p>
@@ -124,24 +124,24 @@
               :placeholder="$t('settings.profile_fields.value')"
             >
           </EmojiInput>
-          <div
+          <button
-            class="icon-container"
+            class="delete-field button-unstyled -hover-highlight"
+            @click="deleteField(i)"
           >
             <FAIcon
               v-show="newFields.length > 1"
               icon="times"
-              @click="deleteField(i)"
             />
-          </div>
+          </button>
         </div>
-        <a
+        <button
           v-if="newFields.length < maxFields"
-          class="add-field faint"
+          class="add-field faint button-unstyled -hover-highlight"
           @click="addField"
         >
           <FAIcon icon="plus" />
           {{ $t("settings.profile_fields.add_field") }}
-        </a>
+        </button>
       </div>
       <p>
         <Checkbox v-model="bot">
@@ -150,7 +150,7 @@
       </p>
       <button
         :disabled="newName && newName.length === 0"
-        class="btn btn-default"
+        class="btn button-default"
         @click="updateProfile"
       >
         {{ $t('general.submit') }}
@@ -179,7 +179,7 @@
       <button
         v-show="pickAvatarBtnVisible"
         id="pick-avatar"
-        class="btn"
+        class="button-default btn"
         type="button"
       >
         {{ $t('settings.upload_a_photo') }}
@@ -224,22 +224,11 @@
       />
       <button
         v-else-if="bannerPreview"
-        class="btn btn-default"
+        class="btn button-default"
         @click="submitBanner(banner)"
       >
         {{ $t('general.submit') }}
       </button>
-      <div
-        v-if="bannerUploadError"
-        class="alert error"
-      >
-        Error: {{ bannerUploadError }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearUploadError('banner')"
-        />
-      </div>
     </div>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_background') }}</h2>
@@ -274,23 +263,11 @@
       />
       <button
         v-else-if="backgroundPreview"
-        class="btn btn-default"
+        class="btn button-default"
         @click="submitBackground(background)"
       >
         {{ $t('general.submit') }}
       </button>
-      <div
-        v-if="backgroundUploadError"
-        class="alert error"
-      >
-        Error: {{ backgroundUploadError }}
-        <FAIcon
-          size="lg"
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearUploadError('background')"
-        />
-      </div>
     </div>
   </div>
 </template>

src/components/settings_modal/tabs/security_tab/confirm.vue

@@ -2,14 +2,14 @@
   <div>
     <slot />
     <button
-      class="btn btn-default"
+      class="btn button-default"
       :disabled="disabled"
       @click="confirm"
     >
       {{ $t('general.confirm') }}
     </button>
     <button
-      class="btn btn-default"
+      class="btn button-default"
       :disabled="disabled"
       @click="cancel"
     >

src/components/settings_modal/tabs/security_tab/mfa.vue

@@ -29,7 +29,7 @@
           />
           <button
             v-if="!confirmNewBackupCodes"
-            class="btn btn-default"
+            class="btn button-default"
             @click="getBackupCodes"
           >
             {{ $t('settings.mfa.generate_new_recovery_codes') }}
@@ -61,7 +61,7 @@
 
         <button
           v-if="canSetupOTP"
-          class="btn btn-default"
+          class="btn button-default"
           @click="cancelSetup"
         >
           {{ $t('general.cancel') }}
@@ -69,7 +69,7 @@
 
         <button
           v-if="canSetupOTP"
-          class="btn btn-default"
+          class="btn button-default"
           @click="setupOTP"
         >
           {{ $t('settings.mfa.setup_otp') }}
@@ -108,13 +108,13 @@
                 >
                 <div class="confirm-otp-actions">
                   <button
-                    class="btn btn-default"
+                    class="btn button-default"
                     @click="doConfirmOTP"
                   >
                     {{ $t('settings.mfa.confirm_and_enable') }}
                   </button>
                   <button
-                    class="btn btn-default"
+                    class="btn button-default"
                     @click="cancelSetup"
                   >
                     {{ $t('general.cancel') }}

src/components/settings_modal/tabs/security_tab/mfa_totp.vue

@@ -4,7 +4,7 @@
       <strong>{{ $t('settings.mfa.otp') }}</strong>
       <button
         v-if="!isActivated"
-        class="btn btn-default"
+        class="btn button-default"
         @click="doActivate"
       >
         {{ $t('general.enable') }}
@@ -12,7 +12,7 @@
 
       <button
         v-if="isActivated"
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="deactivate"
         @click="doDeactivate"
       >

src/components/settings_modal/tabs/security_tab/security_tab.js

@@ -1,6 +1,7 @@
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Mfa from './mfa.vue'
+import localeService from 'src/services/locale/locale.service.js'
 
 const SecurityTab = {
   data () {
@@ -37,7 +38,7 @@ const SecurityTab = {
         return {
           id: oauthToken.id,
           appName: oauthToken.app_name,
-          validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
+          validUntil: new Date(oauthToken.valid_until).toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale))
         }
       })
     }

src/components/settings_modal/tabs/security_tab/security_tab.vue

@@ -19,7 +19,7 @@
         >
       </div>
       <button
-        class="btn btn-default"
+        class="btn button-default"
         @click="changeEmail"
       >
         {{ $t('general.submit') }}
@@ -57,7 +57,7 @@
         >
       </div>
       <button
-        class="btn btn-default"
+        class="btn button-default"
         @click="changePassword"
       >
         {{ $t('general.submit') }}
@@ -92,7 +92,7 @@
             <td>{{ oauthToken.validUntil }}</td>
             <td class="actions">
               <button
-                class="btn btn-default"
+                class="btn button-default"
                 @click="revokeToken(oauthToken.id)"
               >
                 {{ $t('settings.revoke_token') }}
@@ -116,7 +116,7 @@
           type="password"
         >
         <button
-          class="btn btn-default"
+          class="btn button-default"
           @click="deleteAccount"
         >
           {{ $t('settings.delete_account') }}
@@ -130,7 +130,7 @@
       </p>
       <button
         v-if="!deletingAccount"
-        class="btn btn-default"
+        class="btn button-default"
         @click="confirmDelete"
       >
         {{ $t('general.submit') }}