Merge branch 'feature/slicker-buttons' into 'develop'

Feature/slicker buttons

See merge request !90

src/App.scss

@@ -33,9 +33,14 @@ button{
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 2px black;
+    font-size: 14px;
+    font-family: sans-serif;
 
     &:hover {
-        opacity: 0.8;
+        box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
     }
 }
 

src/App.vue

@@ -13,8 +13,8 @@
     </nav>
     <div class="container" id="content">
       <div class="panel-switcher">
-        <button @click="activatePanel('sidebar')">Sidebar</button>
-        <button @click="activatePanel('timeline')">Timeline</button>
+        <button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button>
+        <button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button>
       </div>
       <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
         <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">

src/components/notifications/notifications.vue

@@ -4,7 +4,7 @@
       <div class="panel-heading base01-background base04">
         <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
         Notifications
-        <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button>
+        <button @click.prevent="markAsSeen" class="base05 base01-background read-button">Read!</button>
       </div>
       <div class="panel-body base03-border">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>

src/components/timeline/timeline.vue

@@ -4,15 +4,15 @@
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+      <button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
         Show new ({{timeline.newStatusCount}})
       </button>
-      <button @click.prevent class="base06 error no-press loadmore-button" v-if="timelineError">
+      <div @click.prevent class="base06 error  loadmore-text" v-if="timelineError">
           Error fetching updates
-      </button>
-      <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timelineError">
+      </div>
+      <div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
         Up-to-date
-      </button>
+      </div>
     </div>
     <div class="panel-body">
       <div class="timeline">
@@ -43,18 +43,26 @@
     .loadmore-button {
       position: absolute;
       right: 0.6em;
+      font-size: 14px;
 
       min-width: 6em;
       height: 1.8em;
       line-height: 100%;
     }
+    .loadmore-text {
+      position: absolute;
+      right: 0.6em;
+      font-size: 14px;
+      min-width: 6em;
+      border-radius: 5px;
+      font-family: sans-serif;
+      text-align: center;
+      padding: 0 0.5em 0 0.5em;
+      opacity: 0.8;
+    }
     .error {
       background-color: rgba(255, 48, 16, 0.65);
     }
-    .no-press {
-      opacity: 0.8;
-      cursor: default;
-    }
   }