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 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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;
     }
 }