From ca71722c1eaa5c2aa4597bef38ca812c15294359 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Tue, 21 Feb 2017 15:13:19 +0200
Subject: [PATCH 01/29] Files dropped into post_status_form text box get sent
 to media_upload for attachment upload, media_upload reorganized a bit to
 allow reuse of existing code.

---
 src/components/media_upload/media_upload.js   | 26 ++++++++++++++-----
 .../post_status_form/post_status_form.js      |  7 +++++
 .../post_status_form/post_status_form.vue     |  4 +--
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 3f2e3964..3f6fec5b 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -3,12 +3,22 @@ import statusPosterService from '../../services/status_poster/status_poster.serv
 
 const mediaUpload = {
   mounted () {
-    const store = this.$store
     const input = this.$el.querySelector('input')
-    const self = this
 
     input.addEventListener('change', ({target}) => {
       const file = target.files[0]
+      this.uploadFile(file)
+    })
+  },
+  data () {
+    return {
+      uploading: false
+    }
+  },
+  methods: {
+    uploadFile(file) {
+      const self = this
+      const store = this.$store
       const formData = new FormData()
       formData.append('media', file)
 
@@ -23,11 +33,15 @@ const mediaUpload = {
           self.$emit('upload-failed')
           self.uploading = false
         })
-    })
+    }
   },
-  data () {
-    return {
-      uploading: false
+  props: [
+    'dropFiles'
+  ],
+  watch: {
+    'dropFiles': function (fileInfos) {
+      if (!this.uploading)
+        this.uploadFile(fileInfos[0])
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 3365c569..e798b196 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -84,6 +84,7 @@ const PostStatusForm = {
     }
 
     return {
+      dropFiles: [],
       submitDisabled: false,
       newStatus: {
         status: statusText,
@@ -141,6 +142,12 @@ const PostStatusForm = {
     },
     type (fileInfo) {
       return fileTypeService.fileType(fileInfo.mimetype)
+    },
+    fileDrop (e) {
+      if(e.dataTransfer.files.length > 0) {
+        e.preventDefault()  // allow dropping text like before
+        this.dropFiles = e.dataTransfer.files
+      }
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 1bad41c7..57572f65 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"  @keyup.ctrl.enter="postStatus(newStatus)"></textarea>
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"  @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class='form-bottom'>
-        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit"></media-upload>
+        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
         <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
       </div>
     </form>

From f385e64a7c3922fee229cd9bf907dd0949090f13 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Tue, 21 Feb 2017 15:23:46 +0100
Subject: [PATCH 02/29] Update vue-style-loader.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 568aa87a..52733425 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue-loader": "^11.1.0",
-    "vue-style-loader": "^1.0.0",
+    "vue-style-loader": "^2.0.0",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.8.3",
     "webpack-hot-middleware": "^2.12.2",

From 137a7e643d22be6461f79cc134df1e459c576228 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Tue, 21 Feb 2017 15:24:05 +0100
Subject: [PATCH 03/29] Remove flex from general attachments.

---
 src/components/attachment/attachment.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 738a1e86..e0eba6a9 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -16,8 +16,6 @@
 
     <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 
-    <span v-if="type === 'unknown'">Don't know how to display this...</span>
-
     <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
       <div v-if="attachment.thumb_url" class="image">
         <img :src="attachment.thumb_url"></img>
@@ -38,12 +36,12 @@
       flex-wrap: wrap;
       .attachment {
           flex: 1 0 30%;
-          display: flex;
           margin: 0.5em 0.8em 0.6em 0.1em;
           align-self: flex-start;
 
           &.html {
             flex-basis: 100%;
+            display: flex;
           }
 
           .hider {

From 40fe40d96b2a4dadf706637954b529ee80af75a4 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Tue, 21 Feb 2017 15:24:35 +0100
Subject: [PATCH 04/29] Better attachment removal styling.

---
 src/components/post_status_form/post_status_form.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 1bad41c7..ebb92b26 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,11 +6,11 @@
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
+          <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
           <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>
           <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
           <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
-          <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
         </div>
       </div>
       <div class='form-bottom'>
@@ -52,6 +52,15 @@
 
      .attachments {
          padding: 0.5em;
+
+         i {
+            position: absolute;
+            margin: 10px;
+            padding: 5px;
+            background: rgba(230,230,230,0.6);
+            border-radius: 0.5em;
+            font-weight: bold;
+         }
      }
 
      form {

From 892b826df59203a920bfebbd2ac37ef62dcf411b Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Tue, 21 Feb 2017 21:48:48 +0100
Subject: [PATCH 05/29] Small style adjustment, add meta-enter posting.

---
 src/components/media_upload/media_upload.js          | 5 +++--
 src/components/post_status_form/post_status_form.js  | 2 +-
 src/components/post_status_form/post_status_form.vue | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 3f6fec5b..746970aa 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -16,7 +16,7 @@ const mediaUpload = {
     }
   },
   methods: {
-    uploadFile(file) {
+    uploadFile (file) {
       const self = this
       const store = this.$store
       const formData = new FormData()
@@ -40,8 +40,9 @@ const mediaUpload = {
   ],
   watch: {
     'dropFiles': function (fileInfos) {
-      if (!this.uploading)
+      if (!this.uploading) {
         this.uploadFile(fileInfos[0])
+      }
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index e798b196..d55525bb 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -144,7 +144,7 @@ const PostStatusForm = {
       return fileTypeService.fileType(fileInfo.mimetype)
     },
     fileDrop (e) {
-      if(e.dataTransfer.files.length > 0) {
+      if (e.dataTransfer.files.length > 0) {
         e.preventDefault()  // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
       }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d9138109..eceef4a2 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"  @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop"></textarea>
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">

From aa3512205dedff9df4b041ecd7eeb8c083e8ff2f Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 10:32:09 +0100
Subject: [PATCH 06/29] Only save every minute.

---
 src/lib/persisted_state.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index de1e5383..31ced37d 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -51,7 +51,7 @@ export default function createPersistedState ({
     }
     return value && value !== 'undefined' ? JSON.parse(value) : undefined
   },
-  setState = throttle(defaultSetState, 5000),
+  setState = throttle(defaultSetState, 60000),
   reducer = defaultReducer,
   storage = defaultStorage,
   subscriber = store => handler => store.subscribe(handler)

From 874f9765318897bfde0cf80c9e75da9b3b66f25d Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Wed, 22 Feb 2017 11:54:09 +0200
Subject: [PATCH 07/29] Hide Follow-button and 'Follows you' text when not
 logged in

---
 .../user_card_content/user_card_content.vue           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 59cee734..ee4384fa 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -7,18 +7,18 @@
         <div class='user-name'>{{user.name}}</div>
         <div class='user-screen-name'>@{{user.screen_name}}</div>
         <div v-if="isOtherUser" class="user-interactions">
-          <div v-if="user.follows_you" class="following base06">
+          <div v-if="user.follows_you && loggedIn" class="following base06">
             Follows you!
           </div>
-          <div class="follow">
+          <div class="follow" v-if="loggedIn">
             <span v-if="user.following">
               <!--Following them!-->
-              <button @click="unfollowUser" class="base06 base01-background base06-border">
+              <button @click="unfollowUser" class="base06 base01-background">
                 Unfollow
               </button>
             </span>
             <span v-if="!user.following">
-              <button @click="followUser" class="base01 base04-background base01-border">
+              <button @click="followUser" class="base01 base04-background">
                 Follow
               </button>
             </span>
@@ -66,6 +66,9 @@
       },
       isOtherUser () {
         return this.user !== this.$store.state.users.currentUser
+      },
+      loggedIn () {
+        return this.$store.state.users.currentUser
       }
     },
     methods: {

From 6c385ae80aaf763db7f973b5dc1e3bd21367a2a7 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Wed, 22 Feb 2017 14:53:05 +0200
Subject: [PATCH 08/29] Make drag&drop work on more browsers/platforms, make
 the Upload button accept drops as well.

---
 src/components/media_upload/media_upload.js        | 14 ++++++++++++++
 src/components/media_upload/media_upload.vue       |  2 +-
 .../post_status_form/post_status_form.js           |  3 +++
 .../post_status_form/post_status_form.vue          |  2 +-
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 3f6fec5b..2f312ec9 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -33,6 +33,20 @@ const mediaUpload = {
           self.$emit('upload-failed')
           self.uploading = false
         })
+    },
+    fileDrop (e) {
+      if(e.dataTransfer.files.length > 0) {
+        e.preventDefault()  // allow dropping text like before
+        this.uploadFile(e.dataTransfer.files[0])
+      }
+    },
+    fileDrag (e) {
+      let types = e.dataTransfer.types
+      if(types.contains('Files')) {
+        e.dataTransfer.dropEffect = 'copy'
+      } else {
+        e.dataTransfer.dropEffect = 'none'
+      }
     }
   },
   props: [
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 3302db37..b839067b 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media-upload">
+  <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
     <label class="btn btn-default">
       <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
       <i class="fa icon-upload" v-if="!uploading"></i>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index e798b196..21d9759f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -148,6 +148,9 @@ const PostStatusForm = {
         e.preventDefault()  // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
       }
+    },
+    fileDrag (e) {
+      e.dataTransfer.dropEffect = 'copy';
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 57572f65..fa471ec5 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"  @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop"></textarea>
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"  @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">

From ec5d8b9833034604299496a8ae87741c2efa5b7b Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 21:14:55 +0100
Subject: [PATCH 09/29] Set colors into config so they can be used for more
 dynamic styles.

---
 src/modules/config.js                     |  5 ++--
 src/services/style_setter/style_setter.js | 28 +++++++++++++++--------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/modules/config.js b/src/modules/config.js
index a1276519..30155f45 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -2,7 +2,8 @@ import { set } from 'vue'
 import StyleSetter from '../services/style_setter/style_setter.js'
 
 const defaultState = {
-  name: 'Pleroma FE'
+  name: 'Pleroma FE',
+  colors: {}
 }
 
 const config = {
@@ -24,7 +25,7 @@ const config = {
           break
         case 'theme':
           const fullPath = `/static/css/${value}`
-          StyleSetter.setStyle(fullPath)
+          StyleSetter.setStyle(fullPath, commit)
       }
     }
   }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 0a5be77d..7129852d 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,4 +1,6 @@
-const setStyle = (href) => {
+import { times } from 'lodash'
+
+const setStyle = (href, commit) => {
   /***
       What's going on here?
       I want to make it easy for admins to style this application. To have
@@ -23,18 +25,26 @@ const setStyle = (href) => {
   const setDynamic = () => {
     const baseEl = document.createElement('div')
     body.appendChild(baseEl)
-    baseEl.setAttribute('class', 'base05')
-    const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color')
-    baseEl.setAttribute('class', 'base08')
-    const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color')
+
+    let colors = {}
+    times(16, (n) => {
+      const name = `base0${n.toString(16).toUpperCase()}`
+      baseEl.setAttribute('class', name)
+      const color = window.getComputedStyle(baseEl).getPropertyValue('color')
+      colors[name] = color
+    })
+
+    commit('setOption', { name: 'colors', value: colors })
+
+    body.removeChild(baseEl)
+
     const styleEl = document.createElement('style')
     head.appendChild(styleEl)
     const styleSheet = styleEl.sheet
-    body.removeChild(baseEl)
 
-    styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max')
-    styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max')
-    styleSheet.insertRule(`.base05-border { border-color: ${base05Color}`, 'index-max')
+    styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
+    styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
+    styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
     body.style.display = 'initial'
   }
   cssEl.addEventListener('load', setDynamic)

From ede4d77cfd882ea37ae2bd331d14a95af9129205 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Wed, 22 Feb 2017 23:08:14 +0200
Subject: [PATCH 10/29] Move profile picture to right side, make the names
 appear next to it, extend profile background pic further and fade it out with
 gradients, fix the crappy borders around the inline user card.

---
 src/App.scss                                  |  36 -----
 src/components/status/status.vue              |   2 +-
 .../user_card_content/user_card_content.vue   | 131 ++++++++++++++++--
 src/components/user_profile/user_profile.vue  |  43 +-----
 4 files changed, 127 insertions(+), 85 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 431aeb32..b0888ac7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -142,46 +142,10 @@ main-router {
     min-width: 0px;
 }
 
-.user-info {
-	color: white;
-    padding: 1em;
-    img {
-        border: 2px solid;
-        border-radius: 0.5em
-    }
-	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-	.user-name{
-		margin-top: 0.2em;
-	}
-    .user-screen-name {
-        margin-top: 0.3em;
-        font-weight: lighter;
-        padding-right: 0.1em;
-    }
-}
-
-.user-counts {
-    display: flex;
-    line-height:16px;
-    padding: 1em 1.5em 0em 1em;
-    text-align: center;
-}
-
-.user-count {
-    flex: 1;
-
-    h5 {
-    	font-size:1em;
-        font-weight: bolder;
-        margin: 0 0 0.25em;
-    }
-}
-
 .fa {
     color: grey;
 }
 
-
 .status-actions {
     width: 50%;
     display: flex;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f111c2d5..a97e6b75 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -157,7 +157,7 @@
  .usercard {
    border-style: solid;
    border-width: 1px;
-   border-radius: 1em;
+   border-radius: 0.5em;
    margin-bottom: 1em;
  }
 </style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ee4384fa..befe8bf2 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -1,11 +1,13 @@
 <template>
-  <div>
-    <div class="base00-background panel-heading text-center" v-bind:style="style">
+  <div id="heading" class="profile-panel-background base00-background" :style="headingStyle">
+    <div class="panel-heading text-center">
       <div class='user-info'>
-        <img :src="user.profile_image_url">
-        <span class="glyphicon glyphicon-user"></span>
-        <div class='user-name'>{{user.name}}</div>
-        <div class='user-screen-name'>@{{user.screen_name}}</div>
+        <div class='container'>
+          <img :src="user.profile_image_url">
+          <span class="glyphicon glyphicon-user"></span>
+          <div class='user-name'>{{user.name}}</div>
+          <div class='user-screen-name'>@{{user.screen_name}}</div>
+        </div>
         <div v-if="isOtherUser" class="user-interactions">
           <div v-if="user.follows_you && loggedIn" class="following base06">
             Follows you!
@@ -34,7 +36,7 @@
         </div>
       </div>
     </div>
-    <div class="panel-body base00-background">
+    <div class="panel-body profile-panel-body" :style="bodyStyle">
       <div class="user-counts">
         <div class="user-count">
           <h5>Statuses</h5>
@@ -58,12 +60,18 @@
   export default {
     props: [ 'user' ],
     computed: {
-      style () {
+      headingStyle () {
         return {
-          color: `#${this.user.profile_link_color}`,
           'background-image': `url(${this.user.cover_photo})`
         }
       },
+      bodyStyle () {
+        let color = '#1C2023'
+        console.log(this.color)
+        return {
+          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 70%)'
+        }
+      },
       isOtherUser () {
         return this.user !== this.$store.state.users.currentUser
       },
@@ -90,3 +98,108 @@
     }
   }
 </script>
+
+<style lang="scss">
+
+.profile-panel-background {
+  background-size: cover;
+  border-radius: 0.5em 0.5em 0 0;
+}
+
+.profile-panel-body {
+  padding-top: 0em;
+  top: -0em;
+  padding-top: 4em;
+}
+
+.user-info {
+	color: white;
+  padding: 1em 1em 1em 1em;
+  margin-bottom: -4em;
+
+  .container{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: flex-start;
+    justify-content: center;
+    max-height: 60px;
+  }
+
+  img {
+      border: 2px solid;
+      border-radius: 0.5em;
+      flex: 1 0 100%;
+      max-width: 48px;
+      max-height: 48px;
+  }
+
+	text-shadow: 0 2px 2px rgba(0, 0, 0, 1.0);
+
+	.user-name{
+		margin-top: 0.0em;
+    margin-left: 0.6em;
+    flex: 0 0 auto;
+    align-self: flex-start;
+	}
+
+  .user-screen-name {
+      margin-top: 0.0em;
+      margin-left: 0.6em;
+      font-weight: lighter;
+      font-size: 15px;
+      padding-right: 0.1em;
+      flex: 0 0 auto;
+      align-self: flex-start;
+  }
+  
+  .user-interactions {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+
+    div {
+      flex: 1;
+    }
+    margin-top: 0.5em;
+    margin-bottom: -1.2em;
+
+    .following {
+      font-size: 14px;
+      flex: 0 0 100%;
+      margin-bottom: 0.5em;
+    }
+
+    .mute {
+      max-width: 200px;
+    }
+
+    .follow {
+      max-width: 200px;
+    }
+
+    button {
+      width: 80%;
+      height: 100%;
+      border: 1px solid;
+    }
+  }
+}
+
+.user-counts {
+    display: flex;
+    line-height:16px;
+    padding: 1em 1.5em 0em 1em;
+    text-align: center;
+}
+
+.user-count {
+    flex: 1;
+
+    h5 {
+    	font-size:1em;
+        font-weight: bolder;
+        margin: 0 0 0.25em;
+    }
+}
+</style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index b0d6db85..11a61bfc 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -7,45 +7,10 @@
 <script src="./user_profile.js"></script>
 
 <style lang="scss">
- .user-profile {
-   flex: 2;
-   flex-basis: 500px;
- }
 
- .user-info {
-     .user-interactions {
-         display: flex;
-         flex-flow: row wrap;
-         justify-content: center;
+.user-profile {
+  flex: 2;
+  flex-basis: 500px;
+}
 
-         div {
-             flex: 1;
-         }
-         margin-top: 0.5em;
-         margin-bottom: -1.2em;
-
-         .following {
-             font-size: 14px;
-             flex: 0 0 100%;
-             margin-bottom: 0.5em;
-         }
-
-         .mute {
-             max-width: 200px;
-         }
-
-         .follow {
-             max-width: 200px;
-         }
-
-         button {
-             width: 80%;
-             height: 100%;
-             border: 1px solid;
-         }
-     }
-     .user-screen-name {
-     	margin-top: 0.4em;
-     }
- }
 </style>

From 5abf857705a6e2eb1a81c29bf906999fd91624f4 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 22:33:28 +0100
Subject: [PATCH 11/29] Style fixes.

---
 src/components/media_upload/media_upload.js         | 4 ++--
 src/components/post_status_form/post_status_form.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 985916cf..7888d999 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -35,14 +35,14 @@ const mediaUpload = {
         })
     },
     fileDrop (e) {
-      if(e.dataTransfer.files.length > 0) {
+      if (e.dataTransfer.files.length > 0) {
         e.preventDefault()  // allow dropping text like before
         this.uploadFile(e.dataTransfer.files[0])
       }
     },
     fileDrag (e) {
       let types = e.dataTransfer.types
-      if(types.contains('Files')) {
+      if (types.contains('Files')) {
         e.dataTransfer.dropEffect = 'copy'
       } else {
         e.dataTransfer.dropEffect = 'none'
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 42ebcd48..4a409115 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -150,7 +150,7 @@ const PostStatusForm = {
       }
     },
     fileDrag (e) {
-      e.dataTransfer.dropEffect = 'copy';
+      e.dataTransfer.dropEffect = 'copy'
     }
   }
 }

From 9778d4cfc04450a4fd9f1330c35df8487c8993bf Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 22:43:40 +0100
Subject: [PATCH 12/29] More eslint fixes.

---
 src/components/delete_button/delete_button.js       | 4 ++--
 src/components/media_upload/media_upload.js         | 2 +-
 src/components/post_status_form/post_status_form.js | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js
index 726509d0..77da1b87 100644
--- a/src/components/delete_button/delete_button.js
+++ b/src/components/delete_button/delete_button.js
@@ -2,7 +2,7 @@ const DeleteButton = {
   props: [ 'status' ],
   methods: {
     deleteStatus () {
-      const confirmed = confirm('Do you really want to delete this status?')
+      const confirmed = window.confirm('Do you really want to delete this status?')
       if (confirmed) {
         this.$store.dispatch('deleteStatus', { id: this.status.id })
       }
@@ -10,7 +10,7 @@ const DeleteButton = {
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
-    canDelete () { return this.currentUser.rights.delete_others_notice || this.status.user.id == this.currentUser.id }
+    canDelete () { return this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id }
   }
 }
 
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 7888d999..8b4e7ad4 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -29,7 +29,7 @@ const mediaUpload = {
         .then((fileData) => {
           self.$emit('uploaded', fileData)
           self.uploading = false
-        }, (error) => {
+        }, (error) => { // eslint-disable-line handle-callback-err
           self.$emit('upload-failed')
           self.uploading = false
         })
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 4a409115..01aeeb68 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -49,7 +49,7 @@ const defaultCollection = {
   menuContainer: document.body,
 
   // column to search against in the object (accepts function or string)
-  lookup: ({name, screen_name}) => `${name} (@${screen_name})`,
+  lookup: ({name, screen_name}) => `${name} (@${screen_name})`, // eslint-disable-line camelcase
 
   // column that contains the content to insert by default
   fillAttr: 'screen_name',

From 715bfb3dca55d5a5d688e8e81c9eb137deeced9b Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Thu, 23 Feb 2017 00:24:37 +0200
Subject: [PATCH 13/29] Make gradient use the theme colors, adjust user
 interction elements, make profiles without bg use a darker gray solid color
 to not drown out white text.

---
 .../user_card_content/user_card_content.vue   | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index befe8bf2..2cdbb2fb 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="heading" class="profile-panel-background base00-background" :style="headingStyle">
+  <div id="heading" class="profile-panel-background" :style="headingStyle">
     <div class="panel-heading text-center">
       <div class='user-info'>
         <div class='container'>
@@ -66,10 +66,10 @@
         }
       },
       bodyStyle () {
-        let color = '#1C2023'
+        let color = this.$store.state.config.colors['base00']
         console.log(this.color)
         return {
-          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 70%)'
+          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 80%)'
         }
       },
       isOtherUser () {
@@ -102,6 +102,7 @@
 <style lang="scss">
 
 .profile-panel-background {
+  background-color: #121517;
   background-size: cover;
   border-radius: 0.5em 0.5em 0 0;
 }
@@ -114,7 +115,7 @@
 
 .user-info {
 	color: white;
-  padding: 1em 1em 1em 1em;
+  padding: 16px 16px 16px 16px;
   margin-bottom: -4em;
 
   .container{
@@ -134,7 +135,7 @@
       max-height: 48px;
   }
 
-	text-shadow: 0 2px 2px rgba(0, 0, 0, 1.0);
+	text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
 
 	.user-name{
 		margin-top: 0.0em;
@@ -152,34 +153,39 @@
       flex: 0 0 auto;
       align-self: flex-start;
   }
-  
+
   .user-interactions {
     display: flex;
     flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-between;
 
     div {
       flex: 1;
     }
-    margin-top: 0.5em;
-    margin-bottom: -1.2em;
+    margin-top: 0.7em;
+    margin-bottom: -1.0em;
 
     .following {
+      color: white;
       font-size: 14px;
       flex: 0 0 100%;
-      margin-bottom: 0.5em;
+      margin: -0.7em 0.0em 0.3em 0.0em;
+      padding-left: 16px;
+      text-align: left;
     }
 
     .mute {
-      max-width: 200px;
+      max-width: 220px;
+      min-height: 28px;
     }
 
     .follow {
-      max-width: 200px;
+      max-width: 220px;
+      min-height: 28px;
     }
 
     button {
-      width: 80%;
+      width: 92%;
       height: 100%;
       border: 1px solid;
     }

From 0e1ab69c33f155865adc27d940a2542ffdcec30a Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 23:37:12 +0100
Subject: [PATCH 14/29] Show actual status in notifications when mentioned.

---
 src/components/conversation/conversation.vue  |  4 +-
 src/components/notifications/notifications.js |  4 ++
 .../notifications/notifications.scss          | 62 ++++++++++---------
 .../notifications/notifications.vue           | 34 +++++-----
 src/components/status/status.vue              | 10 +--
 5 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 9675e69f..b1aff884 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background">
+  <div class="timeline panel panel-default base00-background conversation">
     <div class="panel-heading base01-background base04">
       Conversation
       <div v-if="collapsable">
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status" :expandable='false'></status>
       </div>
     </div>
   </div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8d5e212..390ade6a 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,4 +1,5 @@
 import { sortBy, take, filter } from 'lodash'
+import Status from '../status/status.vue'
 
 const Notifications = {
   data () {
@@ -6,6 +7,9 @@ const Notifications = {
       visibleNotificationCount: 10
     }
   },
+  components: {
+    Status
+  },
   computed: {
     notifications () {
       return this.$store.state.statuses.notifications
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 517afeaa..65efb103 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,42 +1,44 @@
 @import '../../_variables.scss';
 .notification {
-  padding: 0.4em 0 0 0.7em;
-  display: flex;
   border-bottom: 1px solid silver;
 
-  .text {
-    min-width: 0px;
-    word-wrap: break-word;
-    line-height:18px;
+  .notification-base {
+      padding: 0.4em 0 0 0.7em;
+      display: flex;
+      .avatar {
+          padding-top: 0.3em;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+      }
 
-    .icon-retweet {
-      color: $green;
-    }
+      .text {
+          min-width: 0px;
+          word-wrap: break-word;
+          line-height:18px;
 
-    .icon-reply {
-      color: $blue;
-    }
+          .icon-retweet {
+              color: $green;
+          }
 
-    h1 {
-      margin: 0 0 0.3em;
-      padding: 0;
-      font-size: 1em;
-      line-height:20px;
-    }
+          .icon-reply {
+              color: $blue;
+          }
 
-    padding: 0.3em 0.8em 0.5em;
-    p {
-      margin: 0;
-      margin-top: 0;
-      margin-bottom: 0.3em;
-    }
-  }
+          h1 {
+              margin: 0 0 0.3em;
+              padding: 0;
+              font-size: 1em;
+              line-height:20px;
+          }
 
-  .avatar {
-    padding-top: 0.3em;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
+          padding: 0.3em 0.8em 0.5em;
+          p {
+              margin: 0;
+              margin-top: 0;
+              margin-bottom: 0.3em;
+          }
+      }
   }
 
   &:last-child {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 785cc019..c14abf27 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,24 +4,26 @@
       <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
-          <a :href="notification.action.user.statusnet_profile_url">
-            <img class='avatar' :src="notification.action.user.profile_image_url_original">
-          </a>
-          <div class='text'>
-            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
-            <div v-if="notification.type === 'favorite'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-              <p>{{ notification.status.text }}</p>
-            </div>
-            <div v-if="notification.type === 'repeat'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-              <p>{{ notification.status.text }}</p>
-            </div>
-            <div v-if="notification.type === 'mention'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
-              <p>{{ notification.status.text }}</p>
+          <div class="notification-base">
+            <a :href="notification.action.user.statusnet_profile_url">
+              <img class='avatar' :src="notification.action.user.profile_image_url_original">
+            </a>
+            <div class='text'>
+              <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+              <div v-if="notification.type === 'favorite'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+                  <p>{{ notification.status.text }}</p>
+              </div>
+              <div v-if="notification.type === 'repeat'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+                  <p>{{ notification.status.text }}</p>
+              </div>
+              <div v-if="notification.type === 'mention'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+              </div>
             </div>
           </div>
+          <status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
         </div>
       </div>
     </div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f111c2d5..b0f468e5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
+  <div class="status-el base00-background" v-if="!status.deleted">
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -121,10 +121,6 @@
      }
  }
 
- .expanded-status {
-   border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
-
  .status-actions {
      padding-top: 5px;
  }
@@ -160,4 +156,8 @@
    border-radius: 1em;
    margin-bottom: 1em;
  }
+
+ .conversation .status-el {
+   border-left: 4px solid rgba(255, 48, 16, 0.65);
+ }
 </style>

From 9237f0b91834ed59ea4f7a6a8dca7fa732a3c74f Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Thu, 23 Feb 2017 00:39:41 +0200
Subject: [PATCH 15/29] Removed unnecessary debug stuff

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

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 2cdbb2fb..10064d5f 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -66,10 +66,8 @@
         }
       },
       bodyStyle () {
-        let color = this.$store.state.config.colors['base00']
-        console.log(this.color)
         return {
-          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 80%)'
+          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + this.$store.state.config.colors['base00'] + ' 80%)'
         }
       },
       isOtherUser () {

From 7c0f3ea666a866a3bb1f2e8da161ae69901e519b Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 23 Feb 2017 00:04:47 +0100
Subject: [PATCH 16/29] Add setting to hide all attachments.

---
 src/components/settings/settings.js  | 10 ++++++++++
 src/components/settings/settings.vue |  5 +++++
 src/components/status/status.js      |  1 +
 src/components/status/status.vue     |  2 +-
 src/main.js                          |  2 +-
 src/modules/config.js                |  3 ++-
 6 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index f979e7ab..61236af2 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -1,8 +1,18 @@
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 
 const settings = {
+  data () {
+    return {
+      hideAttachmentsLocal: this.$store.state.config.hideAttachments
+    }
+  },
   components: {
     StyleSwitcher
+  },
+  watch: {
+    hideAttachmentsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideAttachments', value })
+    }
   }
 }
 
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 57aafac8..f2f83953 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -8,6 +8,11 @@
         <h2>Theme</h2>
         <style-switcher></style-switcher>
       </div>
+      <div class="setting-item">
+        <h2>Attachments</h2>
+        <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
+        <label for="hideAttachments">Hide Attachments</label>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 46add8aa..22292ffa 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -17,6 +17,7 @@ const Status = {
     userExpanded: false
   }),
   computed: {
+    hideAttachments () { return this.$store.state.config.hideAttachments },
     retweet () { return !!this.statusoid.retweeted_status },
     retweeter () { return this.statusoid.user.name },
     status () {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b0f468e5..1e970ec6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -57,7 +57,7 @@
             <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
 
             <div v-if='status.attachments' class='attachments'>
-              <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
+              <attachment v-if="!hideAttachments" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
               </attachment>
             </div>
           </div>
diff --git a/src/main.js b/src/main.js
index 22879b34..51d281fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,7 +29,7 @@ Vue.use(VueTimeago, {
 })
 
 const persistedStateOptions = {
-  paths: ['users.users', 'statuses.notifications']
+  paths: ['users.users', 'statuses.notifications', 'config.hideAttachments']
 }
 
 const store = new Vuex.Store({
diff --git a/src/modules/config.js b/src/modules/config.js
index 30155f45..25de98ea 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -3,7 +3,8 @@ import StyleSetter from '../services/style_setter/style_setter.js'
 
 const defaultState = {
   name: 'Pleroma FE',
-  colors: {}
+  colors: {},
+  hideAttachments: false
 }
 
 const config = {

From 74931dece7d68167e5134e77e738c39f62a11146 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 23 Feb 2017 00:26:37 +0100
Subject: [PATCH 17/29] Revert "Show actual status in notifications when
 mentioned."

This reverts commit 0e1ab69c33f155865adc27d940a2542ffdcec30a.
---
 src/components/conversation/conversation.vue  |  4 +-
 src/components/notifications/notifications.js |  4 --
 .../notifications/notifications.scss          | 62 +++++++++----------
 .../notifications/notifications.vue           | 34 +++++-----
 src/components/status/status.vue              | 10 +--
 5 files changed, 53 insertions(+), 61 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index b1aff884..9675e69f 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background conversation">
+  <div class="timeline panel panel-default base00-background">
     <div class="panel-heading base01-background base04">
       Conversation
       <div v-if="collapsable">
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status" :expandable='false'></status>
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
       </div>
     </div>
   </div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 390ade6a..c8d5e212 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,5 +1,4 @@
 import { sortBy, take, filter } from 'lodash'
-import Status from '../status/status.vue'
 
 const Notifications = {
   data () {
@@ -7,9 +6,6 @@ const Notifications = {
       visibleNotificationCount: 10
     }
   },
-  components: {
-    Status
-  },
   computed: {
     notifications () {
       return this.$store.state.statuses.notifications
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 65efb103..517afeaa 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,44 +1,42 @@
 @import '../../_variables.scss';
 .notification {
+  padding: 0.4em 0 0 0.7em;
+  display: flex;
   border-bottom: 1px solid silver;
 
-  .notification-base {
-      padding: 0.4em 0 0 0.7em;
-      display: flex;
-      .avatar {
-          padding-top: 0.3em;
-          width: 32px;
-          height: 32px;
-          border-radius: 50%;
-      }
+  .text {
+    min-width: 0px;
+    word-wrap: break-word;
+    line-height:18px;
 
-      .text {
-          min-width: 0px;
-          word-wrap: break-word;
-          line-height:18px;
+    .icon-retweet {
+      color: $green;
+    }
 
-          .icon-retweet {
-              color: $green;
-          }
+    .icon-reply {
+      color: $blue;
+    }
 
-          .icon-reply {
-              color: $blue;
-          }
+    h1 {
+      margin: 0 0 0.3em;
+      padding: 0;
+      font-size: 1em;
+      line-height:20px;
+    }
 
-          h1 {
-              margin: 0 0 0.3em;
-              padding: 0;
-              font-size: 1em;
-              line-height:20px;
-          }
+    padding: 0.3em 0.8em 0.5em;
+    p {
+      margin: 0;
+      margin-top: 0;
+      margin-bottom: 0.3em;
+    }
+  }
 
-          padding: 0.3em 0.8em 0.5em;
-          p {
-              margin: 0;
-              margin-top: 0;
-              margin-bottom: 0.3em;
-          }
-      }
+  .avatar {
+    padding-top: 0.3em;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
   }
 
   &:last-child {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index c14abf27..785cc019 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,26 +4,24 @@
       <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
-          <div class="notification-base">
-            <a :href="notification.action.user.statusnet_profile_url">
-              <img class='avatar' :src="notification.action.user.profile_image_url_original">
-            </a>
-            <div class='text'>
-              <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
-              <div v-if="notification.type === 'favorite'">
-                <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-                  <p>{{ notification.status.text }}</p>
-              </div>
-              <div v-if="notification.type === 'repeat'">
-                <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-                  <p>{{ notification.status.text }}</p>
-              </div>
-              <div v-if="notification.type === 'mention'">
-                <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
-              </div>
+          <a :href="notification.action.user.statusnet_profile_url">
+            <img class='avatar' :src="notification.action.user.profile_image_url_original">
+          </a>
+          <div class='text'>
+            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+            <div v-if="notification.type === 'favorite'">
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <p>{{ notification.status.text }}</p>
+            </div>
+            <div v-if="notification.type === 'repeat'">
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <p>{{ notification.status.text }}</p>
+            </div>
+            <div v-if="notification.type === 'mention'">
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+              <p>{{ notification.status.text }}</p>
             </div>
           </div>
-          <status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
         </div>
       </div>
     </div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1e970ec6..ae9b9dd5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background" v-if="!status.deleted">
+  <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -121,6 +121,10 @@
      }
  }
 
+ .expanded-status {
+   border-left: 4px solid rgba(255, 48, 16, 0.65);
+ }
+
  .status-actions {
      padding-top: 5px;
  }
@@ -156,8 +160,4 @@
    border-radius: 1em;
    margin-bottom: 1em;
  }
-
- .conversation .status-el {
-   border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
 </style>

From a7db72d7a7667fc5f06953b37d32d6847e6dfc58 Mon Sep 17 00:00:00 2001
From: "Hector A. Escobedo" <ninjahector.escobedo@gmail.com>
Date: Wed, 22 Feb 2017 18:38:05 -0500
Subject: [PATCH 18/29] Add setting to toggle NSFW hiding.

---
 src/components/attachment/attachment.js  | 3 ++-
 src/components/attachment/attachment.vue | 4 ++--
 src/components/settings/settings.js      | 4 ++++
 src/components/settings/settings.vue     | 2 ++
 src/main.js                              | 5 ++++-
 src/modules/config.js                    | 3 ++-
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 57d21b28..8e959903 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -9,7 +9,8 @@ const Attachment = {
   ],
   data: () => ({
     nsfwImage,
-    showHidden: false
+    hideNsfwLocal: this.$store.state.config.hideNsfw,
+    showHidden: !this.hideNsfwLocal
   }),
   computed: {
     type () {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index e0eba6a9..577f8444 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="attachment" :class="type">
-    <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()">
+    <a class="image-attachment" v-if="hidden && hideNsfwLocal" v-on:click.prevent="toggleHidden()">
       <img :key="nsfwImage" :src="nsfwImage"></img>
     </a>
-    <div class="hider" v-if="nsfw && !hidden">
+    <div class="hider" v-if="nsfw && !hidden && hideNsfwLocal">
       <a href="#" @click.prevent="toggleHidden()">Hide</a>
     </div>
 
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 61236af2..7d58b64c 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -4,6 +4,7 @@ const settings = {
   data () {
     return {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments
+      hideNsfwLocal: this.$store.state.config.hideNsfw
     }
   },
   components: {
@@ -13,6 +14,9 @@ const settings = {
     hideAttachmentsLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachments', value })
     }
+    hideNsfwLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideNsfw', value })
+    }
   }
 }
 
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index f2f83953..89b89a39 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -12,6 +12,8 @@
         <h2>Attachments</h2>
         <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
         <label for="hideAttachments">Hide Attachments</label>
+        <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
+        <label for="hideNsfw">Enable clickthrough NSFW attachment hiding</label>
       </div>
     </div>
   </div>
diff --git a/src/main.js b/src/main.js
index 51d281fa..e553d9aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,7 +29,10 @@ Vue.use(VueTimeago, {
 })
 
 const persistedStateOptions = {
-  paths: ['users.users', 'statuses.notifications', 'config.hideAttachments']
+  paths: ['config.hideAttachments',
+          'config.hideNsfw',
+          'statuses.notifications',
+          'users.users']
 }
 
 const store = new Vuex.Store({
diff --git a/src/modules/config.js b/src/modules/config.js
index 25de98ea..896a6978 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -4,7 +4,8 @@ import StyleSetter from '../services/style_setter/style_setter.js'
 const defaultState = {
   name: 'Pleroma FE',
   colors: {},
-  hideAttachments: false
+  hideAttachments: false,
+  hideNsfw: true
 }
 
 const config = {

From c338940084d7311844d2dd5c11c92f95ab47f486 Mon Sep 17 00:00:00 2001
From: "Hector A. Escobedo" <ninjahector.escobedo@gmail.com>
Date: Wed, 22 Feb 2017 18:59:48 -0500
Subject: [PATCH 19/29] Fix syntax errors and hiding logic.

This has been tested.
---
 src/components/attachment/attachment.js  | 14 ++++++++------
 src/components/attachment/attachment.vue |  4 ++--
 src/components/settings/settings.js      |  4 ++--
 src/main.js                              |  6 +++---
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 8e959903..f4f6aebf 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -7,17 +7,19 @@ const Attachment = {
     'nsfw',
     'statusId'
   ],
-  data: () => ({
-    nsfwImage,
-    hideNsfwLocal: this.$store.state.config.hideNsfw,
-    showHidden: !this.hideNsfwLocal
-  }),
+  data () {
+    return {
+      nsfwImage,
+      hideNsfwLocal: this.$store.state.config.hideNsfw,
+      showHidden: false
+    }
+  },
   computed: {
     type () {
       return fileTypeService.fileType(this.attachment.mimetype)
     },
     hidden () {
-      return this.nsfw && !this.showHidden
+      return this.nsfw && this.hideNsfwLocal && !this.showHidden
     }
   },
   methods: {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 577f8444..45cc1929 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="attachment" :class="type">
-    <a class="image-attachment" v-if="hidden && hideNsfwLocal" v-on:click.prevent="toggleHidden()">
+    <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()">
       <img :key="nsfwImage" :src="nsfwImage"></img>
     </a>
-    <div class="hider" v-if="nsfw && !hidden && hideNsfwLocal">
+    <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
       <a href="#" @click.prevent="toggleHidden()">Hide</a>
     </div>
 
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 7d58b64c..c1b88f82 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -3,7 +3,7 @@ import StyleSwitcher from '../style_switcher/style_switcher.vue'
 const settings = {
   data () {
     return {
-      hideAttachmentsLocal: this.$store.state.config.hideAttachments
+      hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideNsfwLocal: this.$store.state.config.hideNsfw
     }
   },
@@ -13,7 +13,7 @@ const settings = {
   watch: {
     hideAttachmentsLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachments', value })
-    }
+    },
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     }
diff --git a/src/main.js b/src/main.js
index e553d9aa..81534cae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,9 +30,9 @@ Vue.use(VueTimeago, {
 
 const persistedStateOptions = {
   paths: ['config.hideAttachments',
-          'config.hideNsfw',
-          'statuses.notifications',
-          'users.users']
+    'config.hideNsfw',
+    'statuses.notifications',
+    'users.users']
 }
 
 const store = new Vuex.Store({

From d030462d12f64b6a1c594decac65c787f3a336c7 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 23 Feb 2017 01:54:22 +0100
Subject: [PATCH 20/29] Indentation.

---
 src/main.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/main.js b/src/main.js
index 81534cae..fa0a872f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,10 +29,12 @@ Vue.use(VueTimeago, {
 })
 
 const persistedStateOptions = {
-  paths: ['config.hideAttachments',
+  paths: [
+    'config.hideAttachments',
     'config.hideNsfw',
     'statuses.notifications',
-    'users.users']
+    'users.users'
+  ]
 }
 
 const store = new Vuex.Store({

From 2b2061b03f7e23913cf127e1b7e48e0b99f2aedd Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 23 Feb 2017 19:11:22 +0100
Subject: [PATCH 21/29] Switch to lz-string.

Pako was very slow in Chromium.
---
 package.json               |  2 +-
 src/lib/persisted_state.js |  8 ++++----
 yarn.lock                  | 14 ++++----------
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 52733425..e7aa7241 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,9 @@
     "babel-plugin-lodash": "^3.2.11",
     "diff": "^3.0.1",
     "karma-mocha-reporter": "^2.2.1",
+    "lz-string": "^1.4.4",
     "node-sass": "^3.10.1",
     "object-path": "^0.11.3",
-    "pako": "^1.0.4",
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
     "tributejs": "^2.1.0",
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 31ced37d..6a17ca99 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -1,7 +1,7 @@
 import merge from 'lodash.merge'
 import objectPath from 'object-path'
 import { throttle } from 'lodash'
-import { inflate, deflate } from 'pako'
+import lzstring from 'lz-string'
 
 const defaultReducer = (state, paths) => (
   paths.length === 0 ? state : paths.reduce((substate, path) => {
@@ -36,16 +36,16 @@ const defaultStorage = (() => {
 })()
 
 const defaultSetState = (key, state, storage) => {
-  return storage.setItem(key, deflate(JSON.stringify(state), { to: 'string' }))
+  return storage.setItem(key, lzstring.compressToUTF16(JSON.stringify(state)))
 }
 
 export default function createPersistedState ({
-  key = 'vuex',
+  key = 'vuex-lz',
   paths = [],
   getState = (key, storage) => {
     let value = storage.getItem(key)
     try {
-      value = inflate(value, { to: 'string' })
+      value = lzstring.decompressFromUTF16(value) // inflate(value, { to: 'string' })
     } catch (e) {
       console.log("Couldn't inflate value... Maybe upgrading")
     }
diff --git a/yarn.lock b/yarn.lock
index 4d5a5f61..92f734bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3549,6 +3549,10 @@ lru-cache@~2.6.5:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.6.5.tgz#e56d6354148ede8d7707b58d143220fd08df0fd5"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -4052,10 +4056,6 @@ pac-resolver@~1.2.1:
     regenerator "~0.8.13"
     thunkify "~2.1.1"
 
-pako@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.4.tgz#412cc97c3b7ff06dc6c2557fd4f03d06f5e708d4"
-
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -5629,12 +5629,6 @@ vue-router@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.2.1.tgz#b027f9fac2cf13462725e843d6dc631b6aa077f6"
 
-vue-style-loader@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-1.0.0.tgz#abeb7bd0f46313083741244d3079d4f14449e049"
-  dependencies:
-    loader-utils "^0.2.7"
-
 vue-style-loader@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-2.0.0.tgz#1a3bb55239ac541ee3af0301d66f16fc86786543"

From e0e507348cc22054e55e2be8fa6544845f597610 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 10:17:41 +0200
Subject: [PATCH 22/29] Give buttons cursor: pointer; Make border radii more
 consistent by not using em everywhere.

---
 src/App.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index b0888ac7..1e38275e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -32,6 +32,7 @@ a {
 button{
     border: none;
     border-radius: 5px;
+    cursor: pointer;
 
     &:hover {
         background-color: white;
@@ -102,11 +103,11 @@ main-router {
     flex-direction: column;
     margin: 0.5em;
 
-    border-radius: 0.5em;
+    border-radius: 10px;
 }
 
 .panel-heading {
-    border-radius: 0.5em 0.5em 0 0;
+    border-radius: 10px 10px 0 0;
     background-size: cover;
     padding: 0.6em 0;
     text-align: center;
@@ -115,7 +116,7 @@ main-router {
 }
 
 .panel-footer {
-    border-radius: 0 0 0.5em 0.5em;
+    border-radius: 0 0 10px 10px;
 }
 
 .panel-body > p {
@@ -128,7 +129,7 @@ main-router {
 #content {
     margin: auto;
     max-width: 980px;
-    border-radius: 1em;
+    border-radius: 10px;
     padding-bottom: 1em;
     background-color: rgba(0,0,0,0.1);
 }

From 9dfcf8a301c37b359cf18880732ad63b413ce63e Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 17:32:41 +0200
Subject: [PATCH 23/29] Align attachments with usercard, make buttons use theme
 colors, prettify login form, more border radii adjustment for consistency.

---
 src/App.scss                                  |  5 +++--
 src/components/attachment/attachment.vue      | 13 ++++++-----
 src/components/login_form/login_form.vue      | 22 +++++++++++++++++--
 .../notifications/notifications.scss          |  4 ++++
 .../notifications/notifications.vue           |  2 +-
 .../post_status_form/post_status_form.vue     | 13 ++++++-----
 src/components/status/status.vue              |  3 ++-
 .../user_card_content/user_card_content.vue   | 13 +++++------
 8 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1e38275e..75f825ee 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -35,7 +35,8 @@ button{
     cursor: pointer;
 
     &:hover {
-        background-color: white;
+        //background-color: white;
+        opacity: 0.8;
     }
 }
 
@@ -175,7 +176,7 @@ status-text-container {
             margin-top: 0.2em;
             float: right;
             margin-right: 0.3em;
-            border-radius: 20%;
+            border-radius: 5px;
         }
     }
 
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 45cc1929..ad60acf9 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -34,9 +34,10 @@
   .attachments {
       display: flex;
       flex-wrap: wrap;
+      margin-right: -0.8em;
       .attachment {
           flex: 1 0 30%;
-          margin: 0.5em 0.8em 0.6em 0.1em;
+          margin: 0.5em 0.8em 0.6em 0.0em;
           align-self: flex-start;
 
           &.html {
@@ -49,14 +50,14 @@
               margin: 10px;
               padding: 5px;
               background: rgba(230,230,230,0.6);
-              border-radius: 0.5em;
+              border-radius: 5px;
               font-weight: bold;
           }
 
           video {
               height: 100%;
               border: 1px solid;
-              border-radius: 0.5em;
+              border-radius: 5px;
               width: 100%;
           }
 
@@ -69,7 +70,7 @@
               height: 100%;
               flex: 1;
               border: 1px solid;
-              border-radius: 0.5em;
+              border-radius: 5px;
           }
 
 
@@ -89,7 +90,7 @@
                   flex: 1;
                   img {
                       border: 0px;
-                      border-radius: 0;
+                      border-radius: 5px;
                       height: 100%;
                       object-fit: cover;
                   }
@@ -113,7 +114,7 @@
                   width: 100%;
                   border-style: solid;
                   border-width: 1px;
-                  border-radius: 0.5em;
+                  border-radius: 5px;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
               }
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c0169a08..47495a48 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -5,7 +5,7 @@
       Log in
     </div>
     <div class="panel-body">
-      <form v-on:submit.prevent='submit(user)'>
+      <form v-on:submit.prevent='submit(user)' class='login-form'>
         <div class='form-group'>
           <label for='username'>Username</label>
           <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
@@ -15,7 +15,7 @@
           <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
         </div>
         <div class='form-group'>
-          <button :disabled="loggingIn" type='submit' class='btn btn-default'>Submit</button>
+          <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
         </div>
       </form>
     </div>
@@ -23,3 +23,21 @@
 </template>
 
 <script src="./login_form.js" ></script>
+
+<style lang="scss">
+
+.login-form {
+  input {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 0.2em;
+  }
+
+  .btn {
+    margin-top: 0.5em;
+    min-height: 28px;
+  }
+}
+
+</style>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 517afeaa..fe0cca10 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,4 +1,8 @@
 @import '../../_variables.scss';
+
+.notifications button {
+  min-height: 20px;
+}
 .notification {
   padding: 0.4em 0 0 0.7em;
   display: flex;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 785cc019..36908b1e 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default base00-background">
-      <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
+      <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button></div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
           <a :href="notification.action.user.statusnet_profile_url">
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d345ec13..ef8034a3 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control base05-border" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
@@ -15,7 +15,7 @@
       </div>
       <div class='form-bottom'>
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
-        <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
+        <button :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button>
       </div>
     </form>
   </div>
@@ -58,7 +58,7 @@
             margin: 10px;
             padding: 5px;
             background: rgba(230,230,230,0.6);
-            border-radius: 0.5em;
+            border-radius: 5px;
             font-weight: bold;
          }
      }
@@ -77,10 +77,11 @@
      }
 
      form textarea {
-         border: none;
-         border-radius: 2px;
+         border: solid;
+         border-width: 1px;
+         border-radius: 5px;
          line-height:16px;
-         padding: 0.5em;
+         padding: 5px;
          resize: vertical;
      }
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 712f1a7b..585bf621 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -157,7 +157,8 @@
  .usercard {
    border-style: solid;
    border-width: 1px;
-   border-radius: 0.5em;
+   border-radius: 10px;
    margin-bottom: 1em;
+   margin-top: 0.2em;
  }
 </style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 10064d5f..fcdc7cca 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -15,22 +15,22 @@
           <div class="follow" v-if="loggedIn">
             <span v-if="user.following">
               <!--Following them!-->
-              <button @click="unfollowUser" class="base06 base01-background">
+              <button @click="unfollowUser" class="base01 base04-background">
                 Unfollow
               </button>
             </span>
             <span v-if="!user.following">
-              <button @click="followUser" class="base01 base04-background">
+              <button @click="followUser" class="base05 base01-background">
                 Follow
               </button>
             </span>
           </div>
           <div class='mute' v-if='isOtherUser'>
             <span v-if='user.muted'>
-              <button @click="toggleMute" class="base04 base01-background base06-border">Unmute</button>
+              <button @click="toggleMute" class="base01 base04-background">Unmute</button>
             </span>
             <span v-if='!user.muted'>
-              <button @click="toggleMute" class="base01 base04-background base01-border">Mute</button>
+              <button @click="toggleMute" class="base05 base01-background">Mute</button>
             </span>
           </div>
         </div>
@@ -102,7 +102,7 @@
 .profile-panel-background {
   background-color: #121517;
   background-size: cover;
-  border-radius: 0.5em 0.5em 0 0;
+  border-radius: 10px;
 }
 
 .profile-panel-body {
@@ -127,7 +127,7 @@
 
   img {
       border: 2px solid;
-      border-radius: 0.5em;
+      border-radius: 5px;
       flex: 1 0 100%;
       max-width: 48px;
       max-height: 48px;
@@ -185,7 +185,6 @@
     button {
       width: 92%;
       height: 100%;
-      border: 1px solid;
     }
   }
 }

From 2bfd2190a0e61af57c41f6f93229e2f8505ab945 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 18:53:53 +0200
Subject: [PATCH 24/29] Mark unread notifs with the red line, make read notifs
 base01 again, center the heading text and move the button to the right of the
 panel.

---
 .../notifications/notifications.scss          | 94 +++++++++++--------
 .../notifications/notifications.vue           |  7 +-
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index fe0cca10..5da6d495 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,49 +1,65 @@
 @import '../../_variables.scss';
 
-.notifications button {
-  min-height: 20px;
-}
-.notification {
-  padding: 0.4em 0 0 0.7em;
-  display: flex;
-  border-bottom: 1px solid silver;
+.notifications {
 
-  .text {
-    min-width: 0px;
-    word-wrap: break-word;
-    line-height:18px;
-
-    .icon-retweet {
-      color: $green;
-    }
-
-    .icon-reply {
-      color: $blue;
-    }
-
-    h1 {
-      margin: 0 0 0.3em;
-      padding: 0;
-      font-size: 1em;
-      line-height:20px;
-    }
-
-    padding: 0.3em 0.8em 0.5em;
-    p {
-      margin: 0;
-      margin-top: 0;
-      margin-bottom: 0.3em;
+  .panel-heading {
+    // force the text to stay centered, while keeping
+    // the button in the right side of the panel heading
+    position: relative;
+    button {
+      position: absolute;
+      padding: 0.1em 0.3em 0.25em 0.3em;
+      right: 0.6em;
     }
   }
 
-  .avatar {
-    padding-top: 0.3em;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
+  .unseen {
+    border-left: 4px solid rgba(255, 48, 16, 0.65);
   }
 
-  &:last-child {
-    border: none
+  .notification {
+    padding: 0.4em 0 0 0.7em;
+    display: flex;
+    border-bottom: 1px solid silver;
+
+
+    .text {
+      min-width: 0px;
+      word-wrap: break-word;
+      line-height:18px;
+
+      .icon-retweet {
+        color: $green;
+      }
+
+      .icon-reply {
+        color: $blue;
+      }
+
+      h1 {
+        margin: 0 0 0.3em;
+        padding: 0;
+        font-size: 1em;
+        line-height:20px;
+      }
+
+      padding: 0.3em 0.8em 0.5em;
+      p {
+        margin: 0;
+        margin-top: 0;
+        margin-bottom: 0.3em;
+      }
+    }
+
+    .avatar {
+      padding-top: 0.3em;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+
+    &:last-child {
+      border: none
+    }
   }
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 36908b1e..41c274aa 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default base00-background">
-      <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button></div>
+      <div class="panel-heading base01-background base04">
+        Notifications ({{unseenCount}})
+        <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+      </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
+        <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
           <a :href="notification.action.user.statusnet_profile_url">
             <img class='avatar' :src="notification.action.user.profile_image_url_original">
           </a>

From cac47f712858b489103db82a73c2a804b37d4743 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 19:12:57 +0200
Subject: [PATCH 25/29] Make user card buttons more light-theme friendly
 without compromising the dark ones.

---
 .../user_card_content/user_card_content.vue      | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index fcdc7cca..b786ab8d 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -15,22 +15,22 @@
           <div class="follow" v-if="loggedIn">
             <span v-if="user.following">
               <!--Following them!-->
-              <button @click="unfollowUser" class="base01 base04-background">
-                Unfollow
+              <button @click="unfollowUser" class="base04 base00-background pressed">
+                Following!
               </button>
             </span>
             <span v-if="!user.following">
-              <button @click="followUser" class="base05 base01-background">
+              <button @click="followUser" class="base05 base02-background">
                 Follow
               </button>
             </span>
           </div>
           <div class='mute' v-if='isOtherUser'>
             <span v-if='user.muted'>
-              <button @click="toggleMute" class="base01 base04-background">Unmute</button>
+              <button @click="toggleMute" class="base04 base00-background pressed">Muted</button>
             </span>
             <span v-if='!user.muted'>
-              <button @click="toggleMute" class="base05 base01-background">Mute</button>
+              <button @click="toggleMute" class="base05 base02-background">Mute</button>
             </span>
           </div>
         </div>
@@ -183,9 +183,15 @@
     }
 
     button {
+      border: solid;
+      border-width: 1px;
       width: 92%;
       height: 100%;
     }
+    .pressed {
+      border: solid;
+      border-width: 1px;
+    }
   }
 }
 

From 142a8a1a76c1237078ef7ced163a4088638441ff Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 19:43:27 +0200
Subject: [PATCH 26/29] Fix poor choice of colors for input/textarea borders,
 adjust login form padding.

---
 src/components/login_form/login_form.vue             | 7 ++++---
 src/components/post_status_form/post_status_form.vue | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 47495a48..c0ea4313 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login panel panel-default base00-background">
     <!-- Default panel contents -->
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading base01-background">
       Log in
     </div>
     <div class="panel-body">
@@ -30,12 +30,13 @@
   input {
     border-width: 1px;
     border-style: solid;
+    border-color: silver;
     border-radius: 5px;
-    padding: 0.2em;
+    padding: 0.1em 0.2em 0.2em 0.2em;
   }
 
   .btn {
-    margin-top: 0.5em;
+    margin-top: 1.0em;
     min-height: 28px;
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ef8034a3..07280a41 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control base05-border" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
@@ -79,6 +79,7 @@
      form textarea {
          border: solid;
          border-width: 1px;
+         border-color: silver;
          border-radius: 5px;
          line-height:16px;
          padding: 5px;

From 614cbb556aeaa5c2ae845de942f8c8b99120df0c Mon Sep 17 00:00:00 2001
From: lambadalambda <gitgud@rogerbraun.net>
Date: Fri, 24 Feb 2017 16:50:32 -0500
Subject: [PATCH 27/29] Remove old commented style.

---
 src/App.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 75f825ee..0945c76b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -35,7 +35,6 @@ button{
     cursor: pointer;
 
     &:hover {
-        //background-color: white;
         opacity: 0.8;
     }
 }

From 536a7176df5531ed5b5128dd3de2fc21a95c373a Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Sat, 25 Feb 2017 13:13:08 +0200
Subject: [PATCH 28/29] Make the profile background use a new calculated color
 using the theme

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

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 10064d5f..3d2f8827 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -61,8 +61,12 @@
     props: [ 'user' ],
     computed: {
       headingStyle () {
+        let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
         return {
-          'background-image': `url(${this.user.cover_photo})`
+          backgroundColor: 'rgb(' + Math.floor(rgb[0] * 0.53) + ', ' +
+                                    Math.floor(rgb[1] * 0.56) + ', ' +
+                                    Math.floor(rgb[2] * 0.59) + ')',
+          backgroundImage: `url(${this.user.cover_photo})`
         }
       },
       bodyStyle () {
@@ -100,7 +104,7 @@
 <style lang="scss">
 
 .profile-panel-background {
-  background-color: #121517;
+
   background-size: cover;
   border-radius: 0.5em 0.5em 0 0;
 }

From e9820326e314cc881e5936a2260d2e42ceb0543a Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Sat, 25 Feb 2017 13:19:37 +0200
Subject: [PATCH 29/29] Clean up whitespace

---
 src/components/user_card_content/user_card_content.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 3d2f8827..a30eadf5 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -104,7 +104,6 @@
 <style lang="scss">
 
 .profile-panel-background {
-
   background-size: cover;
   border-radius: 0.5em 0.5em 0 0;
 }