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

---
 src/components/user_card_content/user_card_content.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 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 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: {
-- 
cgit v1.2.3-70-g09d2


From ede4d77cfd882ea37ae2bd331d14a95af9129205 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Wed, 22 Feb 2017 23:08:14 +0200
Subject: 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(-)

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

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>
-- 
cgit v1.2.3-70-g09d2


From 715bfb3dca55d5a5d688e8e81c9eb137deeced9b Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Thu, 23 Feb 2017 00:24:37 +0200
Subject: 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(-)

(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 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;
     }
-- 
cgit v1.2.3-70-g09d2


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

---
 src/components/user_card_content/user_card_content.vue | 4 +---
 1 file changed, 1 insertion(+), 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 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 () {
-- 
cgit v1.2.3-70-g09d2


From 9dfcf8a301c37b359cf18880732ad63b413ce63e Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 17:32:41 +0200
Subject: 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 ++++++++++++++++++++--
 src/components/notifications/notifications.scss    |  4 ++++
 src/components/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(-)

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

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;
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


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

---
 src/components/user_card_content/user_card_content.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 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 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;
+    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 536a7176df5531ed5b5128dd3de2fc21a95c373a Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Sat, 25 Feb 2017 13:13:08 +0200
Subject: 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(-)

(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 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;
 }
-- 
cgit v1.2.3-70-g09d2


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

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

(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 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;
 }
-- 
cgit v1.2.3-70-g09d2

