From 6532462b95fbea1a19508fcdfa50df02b083b657 Mon Sep 17 00:00:00 2001
From: Maxim Filippov <colixer@gmail.com>
Date: Thu, 6 Dec 2018 04:05:35 +0300
Subject: Move old routes to /p, use /nickname for user profiles

---
 src/components/user_card_content/user_card_content.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 4b8a730f..bde1d139 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -2,20 +2,20 @@
 <div id="heading" class="profile-panel-background" :style="headingStyle">
   <div class="panel-heading text-center">
     <div class='user-info'>
-      <router-link @click.native="activatePanel('timeline')" to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
+      <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser">
         <i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
       </router-link>
       <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
         <i class="icon-link-ext usersettings"></i>
       </a>
       <div class='container'>
-        <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
+        <router-link :to="{ name: 'user-profile', params: { name: user.screen_name } }">
           <StillImage class="avatar" :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
           <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
-          <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
+          <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { name: user.screen_name } }">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From e4a34cc4d4dcd882e8a546813215dcac95e4ceab Mon Sep 17 00:00:00 2001
From: Maxim Filippov <colixer@gmail.com>
Date: Thu, 13 Dec 2018 19:57:11 +0300
Subject: Use 'userProfileLink' to generate user-profile link

---
 src/components/chat_panel/chat_panel.js                      |  2 +-
 src/components/chat_panel/chat_panel.vue                     |  9 ++++-----
 src/components/notification/notification.js                  |  4 ++++
 src/components/notification/notification.vue                 |  4 +++-
 src/components/status/status.js                              |  4 ++++
 src/components/status/status.vue                             | 12 +++++++++---
 src/components/user_card/user_card.js                        |  6 ++++++
 src/components/user_card/user_card.vue                       |  3 ++-
 src/components/user_card_content/user_card_content.js        |  4 ++++
 src/components/user_card_content/user_card_content.vue       |  4 ++--
 src/components/who_to_follow_panel/who_to_follow_panel.js    |  4 ++++
 src/components/who_to_follow_panel/who_to_follow_panel.vue   |  6 +++---
 .../user_profile_link_generator.js                           | 12 ++++++------
 .../user_profile_link_generator.spec.js                      | 12 ++++++------
 14 files changed, 58 insertions(+), 28 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index 959b5c3a..e649e907 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -13,7 +13,7 @@ const chatPanel = {
       return this.$store.state.chat.messages
     },
     userProfileLink (user) {
-      return generateProfileLink(user, user.name)
+      return generateProfileLink(user.id, user.screen_name)
     }
   },
   methods: {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 182ea347..b253342e 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -13,8 +13,10 @@
             <img :src="message.author.avatar" />
           </span>
           <div class="chat-content">
-            <router-link class="chat-name" :to="userProfileLink(message.author)">
-              {{message.author.username}}
+            <router-link
+              class="chat-name"
+              :to="userProfileLink(message.author)">
+                {{message.author.username}}
             </router-link>
             <br>
             <span class="chat-text">
@@ -67,9 +69,6 @@
   overflow-x: hidden;
 }
 
-.chat-name {
-}
-
 .chat-message {
   display: flex;
   padding: 0.2em 0.5em
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index c786f2cc..95d094f4 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -2,6 +2,7 @@ import Status from '../status/status.vue'
 import StillImage from '../still-image/still-image.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const Notification = {
   data () {
@@ -28,6 +29,9 @@ const Notification = {
       const highlight = this.$store.state.config.highlight
       const user = this.notification.action.user
       return highlightStyle(highlight[user.screen_name])
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
     }
   }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 40146513..a34301b7 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -28,7 +28,9 @@
         <small class="timeago"><router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
-        <router-link :to="{ name: 'user-profile', params: { name: notification.action.user.screen_name } }">@{{notification.action.user.screen_name}}</router-link>
+        <router-link :to="userProfileLink(notification.action.user)">
+          @{{notification.action.user.screen_name}}
+        </router-link>
       </div>
       <template v-else>
         <status v-if="notification.status"  class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index ad6f4184..fbf99a23 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -7,6 +7,7 @@ import UserCardContent from '../user_card_content/user_card_content.vue'
 import StillImage from '../still-image/still-image.vue'
 import { filter, find } from 'lodash'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const Status = {
   name: 'Status',
@@ -203,6 +204,9 @@ const Status = {
         return 'small'
       }
       return 'normal'
+    },
+    userProfileLink (id, name) {
+      return generateProfileLink(id, name)
     }
   },
   components: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 2ef9074e..f51d9b79 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -2,7 +2,11 @@
   <div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
-        <small><router-link :to="{ name: 'user-profile', params: { name: status.user.screen_name } }">{{status.user.screen_name}}</router-link></small>
+        <small>
+          <router-link :to="userProfileLink(status.user.id, status.user.screen_name)">
+            {{status.user.screen_name}}
+          </router-link>
+        </small>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
         <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
       </div>
@@ -34,10 +38,12 @@
                 <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
                 <h4 class="user-name" v-else>{{status.user.name}}</h4>
                 <span class="links">
-                  <router-link :to="{ name: 'user-profile', params: { name: status.user.screen_name } }">{{status.user.screen_name}}</router-link>
+                  <router-link :to="userProfileLink(status.user.id, status.user.screen_name)">
+                    {{status.user.screen_name}}
+                  </router-link>
                   <span v-if="status.in_reply_to_screen_name" class="faint reply-info">
                     <i class="icon-right-open"></i>
-                    <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_screen_name } }">
+                    <router-link :to="userProfileLink(status.in_reply_to_user_id, status.in_reply_to_screen_name)">
                       {{status.in_reply_to_screen_name}}
                     </router-link>
                   </span>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index a019627a..5d9089ae 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,4 +1,5 @@
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const UserCard = {
   props: [
@@ -26,6 +27,11 @@ const UserCard = {
       this.$store.state.api.backendInteractor.denyUser(this.user.id)
       this.$store.dispatch('removeFollowRequest', this.user)
     }
+  },
+  computed: {
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
+    }
   }
 }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 3e1a7205..40f04f25 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -19,7 +19,8 @@
           {{ $t('user_card.follows_you') }}
         </span>
       </div>
-      <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { name: user.screen_name } }">
+
+      <router-link class='user-screen-name' :to="userProfileLink(user)">
         @{{user.screen_name}}
       </router-link>
     </div>
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index d22d4ec1..abdac58e 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -1,5 +1,6 @@
 import StillImage from '../still-image/still-image.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ],
@@ -40,6 +41,9 @@ export default {
       const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
       return Math.round(this.user.statuses_count / days)
     },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
+    },
     userHighlightType: {
       get () {
         const data = this.$store.state.config.highlight[this.user.screen_name]
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index bde1d139..6e48f3f9 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -9,13 +9,13 @@
         <i class="icon-link-ext usersettings"></i>
       </a>
       <div class='container'>
-        <router-link :to="{ name: 'user-profile', params: { name: user.screen_name } }">
+        <router-link :to="userProfileLink(user)">
           <StillImage class="avatar" :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
           <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
-          <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { name: user.screen_name } }">
+          <router-link class='user-screen-name' :to="userProfileLink(user)">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 49b8f5b6..4507d9e5 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -1,4 +1,5 @@
 import apiService from '../../services/api/api.service.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 function showWhoToFollow (panel, reply) {
   var users = reply
@@ -91,6 +92,9 @@ const WhoToFollowPanel = {
     },
     suggestionsEnabled () {
       return this.$store.state.instance.suggestionsEnabled
+    },
+    userProfileLink (id, name) {
+      return generateProfileLink(id, name)
     }
   },
   watch: {
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 35722ffa..a62e8360 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -8,9 +8,9 @@
       </div>
       <div class="panel-body who-to-follow">
         <p>
-          <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { name: name1 } }">{{ name1 }}</router-link><br>
-          <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { name: name2 } }">{{ name2 }}</router-link><br>
-          <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { name: name3 } }">{{ name3 }}</router-link><br>
+          <img v-bind:src="img1"/> <router-link :to="userProfileLink(id1, name1)">{{ name1 }}</router-link><br>
+          <img v-bind:src="img2"/> <router-link :to="userProfileLink(id2, name2)">{{ name2 }}</router-link><br>
+          <img v-bind:src="img3"/> <router-link :to="userProfileLink(id3, name3)">{{ name3 }}</router-link><br>
           <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
         </p>
       </div>
diff --git a/src/services/user_profile_link_generator/user_profile_link_generator.js b/src/services/user_profile_link_generator/user_profile_link_generator.js
index 1a2ea472..3e245b15 100644
--- a/src/services/user_profile_link_generator/user_profile_link_generator.js
+++ b/src/services/user_profile_link_generator/user_profile_link_generator.js
@@ -1,10 +1,10 @@
-const generateProfileLink = (user, name = '') => {
-  const baseLinkParams = { name: 'user-profile' }
-  const { id } = user
-
-  return { ...baseLinkParams, params: (isExternal(user) ? { id } : { name }) }
+const generateProfileLink = (id, screenName) => {
+  return {
+    name: 'user-profile',
+    params: (isExternal(screenName) ? { id } : { name: screenName })
+  }
 }
 
-const isExternal = ({screen_name}) => (screen_name.indexOf('@') > -1)
+const isExternal = screenName => (screenName.indexOf('@') > -1)
 
 export default generateProfileLink
diff --git a/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js b/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js
index dbb2ba9d..5718b8b9 100644
--- a/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js
+++ b/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js
@@ -2,14 +2,14 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 
 describe('generateProfileLink', () => {
   it('returns obj for local user', () => {
-    const user = { screen_name: 'john' }
-
-    expect(generateProfileLink(user, 'jack')).to.eql({ name: 'user-profile', params: { name: 'jack' } })
+    expect(generateProfileLink(1, 'jack')).to.eql({
+      name: 'user-profile', params: { name: 'jack' }
+    })
   })
 
   it('returns obj for external user', () => {
-    const user = { screen_name: 'john@domain', id: 1 }
-
-    expect(generateProfileLink(user)).to.eql({ name: 'user-profile', params: { id: 1 } })
+    expect(generateProfileLink(1, 'john@domain')).to.eql({
+      name: 'user-profile', params: { id: 1 }
+    })
   })
 })
-- 
cgit v1.2.3-70-g09d2


From be27494ca15986af03087a2b74d9288bd95b3f51 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Dec 2018 20:42:14 +0300
Subject: Make user profile page cleaner

---
 src/components/user_card_content/user_card_content.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index a40aff35..085334b6 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -25,7 +25,7 @@
         <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
           {{ $t('user_card.follows_you') }}
         </div>
-        <div class="floater" v-if="switcher || isOtherUser">
+        <div class="floater" v-if="isOtherUser && (loggedIn || !switcher)">
           <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
           <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
           <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
@@ -67,7 +67,7 @@
             </button>
           </span>
         </div>
-        <div class='mute' v-if='isOtherUser'>
+        <div class='mute' v-if='isOtherUser && loggedIn'>
           <span v-if='user.muted'>
             <button @click="toggleMute" class="pressed">
               {{ $t('user_card.muted') }}
-- 
cgit v1.2.3-70-g09d2


From 67c2a607aa960abb23cc6ba3c4014891bb67097d Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Tue, 18 Dec 2018 18:26:14 +0000
Subject: Feature/bigger icons for mobile / #211

---
 src/App.scss                                       | 58 ++++++++++++++--------
 src/App.vue                                        |  8 +--
 src/boot/after_store.js                            | 13 +++--
 src/components/delete_button/delete_button.vue     |  2 +-
 src/components/favorite_button/favorite_button.vue |  4 +-
 .../post_status_form/post_status_form.vue          |  4 +-
 src/components/retweet_button/retweet_button.vue   |  6 +--
 src/components/status/status.vue                   | 14 +++---
 src/components/style_switcher/preview.vue          |  8 +--
 .../user_card_content/user_card_content.vue        |  2 +-
 src/components/user_finder/user_finder.vue         |  5 +-
 src/components/user_settings/user_settings.vue     |  6 +--
 12 files changed, 76 insertions(+), 54 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/App.scss b/src/App.scss
index 7f33cd51..9c8e2ad3 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -237,13 +237,11 @@ i[class*=icon-] {
   flex-wrap: wrap;
 
   .nav-icon {
-    font-size: 1.1em;
     margin-left: 0.4em;
   }
 
   &.right {
     justify-content: flex-end;
-    padding-right: 20px;
   }
 }
 
@@ -251,7 +249,8 @@ i[class*=icon-] {
   flex: 1
 }
 
-nav {
+.nav-bar {
+  padding: 0;
   width: 100%;
   align-items: center;
   position: fixed;
@@ -295,10 +294,13 @@ nav {
   }
 
   .inner-nav {
+    margin: auto;
+    box-sizing: border-box;
+    padding-left: 10px;
+    padding-right: 10px;
     display: flex;
     align-items: center;
     flex-basis: 970px;
-    margin: auto;
     height: 50px;
 
     a, a i {
@@ -466,7 +468,7 @@ nav {
 
     &.hidden {
       opacity: 0;
-      max-width: 20px;
+      max-width: 5px;
     }
   }
 }
@@ -606,22 +608,8 @@ nav {
   }
 }
 
-@media all and (max-width: 959px) {
-  .mobile-hidden {
-    display: none;
-  }
-
-  .panel-switcher {
-    display: flex;
-  }
-
-  .container {
-    padding: 0 0 0 0;
-  }
-
-  .panel {
-    margin: 0.5em 0 0.5em 0;
-  }
+.item.right {
+  text-align: right;
 }
 
 .visibility-tray {
@@ -650,3 +638,31 @@ nav {
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
 }
+
+@media all and (max-width: 959px) {
+  .mobile-hidden {
+    display: none;
+  }
+
+  .panel-switcher {
+    display: flex;
+  }
+
+  .container {
+    padding: 0;
+  }
+
+  .panel {
+    margin: 0.5em 0 0.5em 0;
+  }
+
+  .button-icon {
+    font-size: 1.2em;
+  }
+
+  .status .status-actions {
+    div {
+      max-width: 4em;
+    }
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index a3a7ecf6..4d4680e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app" v-bind:style="style">
-    <nav class='container' @click="scrollToTop()" id="nav">
+    <nav class='nav-bar container' @click="scrollToTop()" id="nav">
       <div class='logo' :style='logoBgStyle'>
         <div class='mask' :style='logoMaskStyle'></div>
         <img :src='logo' :style='logoStyle'>
@@ -13,9 +13,9 @@
           <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
         <div class='item right'>
-          <user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
-          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
+          <user-finder class="button-icon nav-icon" @toggled="onFinderToggled"></user-finder>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
+          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
         </div>
       </div>
     </nav>
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 8cd13df7..5b9e5c96 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -13,12 +13,17 @@ const afterStoreSetup = ({ store, i18n }) => {
       store.dispatch('setInstanceOption', { name: 'name', value: name })
       store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
       store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
-      store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
-      store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
-      store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
-      store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
       store.dispatch('setInstanceOption', { name: 'server', value: server })
 
+      // TODO: default values for this stuff, added if to not make it break on
+      // my dev config out of the box.
+      if (uploadlimit) {
+        store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
+        store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
+        store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
+        store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
+      }
+
       if (data.nsfwCensorImage) {
         store.dispatch('setInstanceOption', { name: 'nsfwCensorImage', value: data.nsfwCensorImage })
       }
diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
index b458b0dc..f4c91cfd 100644
--- a/src/components/delete_button/delete_button.vue
+++ b/src/components/delete_button/delete_button.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="canDelete">
     <a href="#" v-on:click.prevent="deleteStatus()">
-      <i class='icon-cancel delete-status'></i>
+      <i class='button-icon icon-cancel delete-status'></i>
     </a>
   </div>
 </template>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 1decd070..05ce6bd0 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="loggedIn">
-    <i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
+    <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
     <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
   <div v-else>
-    <i :class='classes' class='favorite-button' :title="$t('tool_tip.favorite')"/>
+    <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
     <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index b448faec..398f1871 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -75,11 +75,11 @@
       </div>
       <div class='alert error' v-if="error">
         Error: {{ error }}
-        <i class="icon-cancel" @click="clearError"></i>
+        <i class="button-icon icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
         <div class="media-upload-wrapper" v-for="file in newStatus.files">
-          <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
+          <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
           <div class="media-upload-container attachment">
             <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
             <video v-if="type(file) === 'video'" :src="file.image" controls></video>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index c957fb77..6370f9dc 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-      <i :class='classes' class='retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
+      <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
       <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
     </template>
     <template v-else>
-      <i :class='classes' class='icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
+      <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
     </template>
   </div>
   <div v-else-if="!loggedIn">
-    <i :class='classes' class='icon-retweet' :title="$t('tool_tip.repeat')"></i>
+    <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
     <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3283de45..1b102d93 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -8,7 +8,7 @@
           </router-link>
         </small>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
-        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
       </div>
     </template>
     <template v-else>
@@ -48,7 +48,7 @@
                     </router-link>
                   </span>
                   <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')">
-                    <i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
+                    <i class="button-icon icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
                   </a>
                 </span>
               </div>
@@ -63,18 +63,18 @@
               <router-link class="timeago" @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }">
                 <timeago :since="status.created_at" :auto-update="60"></timeago>
               </router-link>
-              <div class="visibility-icon" v-if="status.visibility">
+              <div class="button-icon visibility-icon" v-if="status.visibility">
                 <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
               </div>
               <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source">
-                <i class="icon-link-ext-alt"></i>
+                <i class="button-icon icon-link-ext-alt"></i>
               </a>
               <template v-if="expandable">
                 <a href="#" @click.prevent="toggleExpanded" title="Expand">
-                  <i class="icon-plus-squared"></i>
+                  <i class="button-icon icon-plus-squared"></i>
                 </a>
               </template>
-              <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
+              <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
             </div>
           </div>
 
@@ -101,7 +101,7 @@
           <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
             <div v-if="loggedIn">
               <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
-                <i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
+                <i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i>
               </a>
             </div>
             <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 09a136e9..634f5b35 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -37,10 +37,10 @@
         </i18n>
 
         <div class="icons">
-          <i style="color: var(--cBlue)" class="icon-reply"/>
-          <i style="color: var(--cGreen)" class="icon-retweet"/>
-          <i style="color: var(--cOrange)" class="icon-star"/>
-          <i style="color: var(--cRed)" class="icon-cancel"/>
+          <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
+          <i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
+          <i style="color: var(--cOrange)" class="button-icon icon-star"/>
+          <i style="color: var(--cRed)" class="button-icon icon-cancel"/>
         </div>
       </div>
     </div>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ed8bba43..1b6ccfaa 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -3,7 +3,7 @@
   <div class="panel-heading text-center">
     <div class='user-info'>
       <router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser">
-        <i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
+        <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
       </router-link>
       <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
         <i class="icon-link-ext usersettings"></i>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index 9efdfab7..eeb76c35 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -7,7 +7,7 @@
       <button class="btn search-button" @click="findUser(username)">
         <i class="icon-search"/>
       </button>
-      <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
+      <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
     </template>
   </div>
 </template>
@@ -29,7 +29,8 @@
     height: 29px;
   }
   .user-finder-input {
-    max-width: 80%;
+    // TODO: do this properly without a rough guesstimate of 2 icons + paddings
+    max-width: calc(100% - 30px - 30px - 20px);
   }
 
   .search-button {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index b238571d..4bc2eeec 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -49,7 +49,7 @@
             <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="avatarUploadError">
               Error: {{ avatarUploadError }}
-              <i class="icon-cancel" @click="clearUploadError('avatar')"></i>
+              <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
             </div>
           </div>
           <div class="setting-item">
@@ -66,7 +66,7 @@
             <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="bannerUploadError">
               Error: {{ bannerUploadError }}
-              <i class="icon-cancel" @click="clearUploadError('banner')"></i>
+              <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
             </div>
           </div>
           <div class="setting-item">
@@ -81,7 +81,7 @@
             <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="backgroundUploadError">
               Error: {{ backgroundUploadError }}
-              <i class="icon-cancel" @click="clearUploadError('background')"></i>
+              <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
             </div>
           </div>
         </div>
-- 
cgit v1.2.3-70-g09d2

