14 files changed, 40 insertions, 31 deletions
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index e16cc7cd..fe57924e 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -9,7 +9,7 @@
 
     <a class="image-attachment" v-if="type === 'image' && !hidden"
       :href="attachment.url" target="_blank">
-      <img referrerpolicy="no-referrer" :src="attachment.url"></img>
+      <img class="base05-border" referrerpolicy="no-referrer" :src="attachment.url"></img>
     </a>
 
     <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
@@ -97,10 +97,6 @@
                   h1 {
                       font-size: 14px;
                       margin: 0px;
-
-                      a {
-                          color: black;
-                      }
                   }
               }
           }
@@ -111,7 +107,8 @@
 
               img {
                   width: 100%;
-                  border: 1px solid;
+                  border-style: solid;
+                  border-width: 1px;
                   border-radius: 0.5em;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 60b3f044..00d3e062 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Status</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Status</div>
     <div class="panel-body">
       <div class="timeline">
         <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 6eaf0607..fd53b505 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -8,14 +8,13 @@
 <script src="./favorite_button.js" ></script>
 
 <style lang='scss'>
-  @import '../../_variables.scss';
   .favorite-button {
       cursor: pointer;
       &:hover {
-        color: $main-color;
+        color: orange;
       }
   }
   .icon-star {
-      color: $main-color;
+      color: orange;
   }
 </style>
diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
index af8ba5fe..88c477ab 100644
--- a/src/components/friends_timeline/friends_timeline.vue
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Friends Timeline</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Friends Timeline</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
     </div>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index be1e970c..c0169a08 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">
+  <div class="login panel panel-default base00-background">
     <!-- Default panel contents -->
-    <div class="panel-heading">
+    <div class="panel-heading base01-background base04">
       Log in
     </div>
     <div class="panel-body">
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index 6287ca11..cf97f9ee 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Mentions</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Mentions</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
     </div>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index b709d914..2082f41a 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="nav-panel">
-    <div class="panel panel-default">
+    <div class="panel panel-default base01-background">
       <ul>
         <li v-if='currentUser'>
           <router-link to='/main/friends'>
@@ -38,7 +38,7 @@
  }
 
  .nav-panel li {
-     border-bottom: 1px solid silver;
+     border-bottom: 1px solid;
      padding: 0.5em;
      padding-left: 1em;
  }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 6f5dd721..ba5d8971 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">
-      <div class="panel-heading">Notifications ({{visibleNotifications.length}})</div>
+    <div class="panel panel-default base00-background">
+      <div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification">
           <a :href="notification.action.user.statusnet_profile_url">
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
index 94cdaf17..282bb15b 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.vue
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">THE WHOLE KNOWN NETWORK</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
     </div>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 22a2a2b8..ada40005 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Public Timeline</div>
+  <div class="timeline panel panel-default base00-background">
+    <div class="panel-heading base01-background base04">Public Timeline</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
     </div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 42499407..e043f6e2 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -120,10 +120,10 @@
  .status {
      padding: 0.5em;
      padding-right: 1em;
-     border-bottom: 1px solid silver;
+     border-bottom: 1px solid;
  }
 
  .status-el:last-child .status {
-     border: none
+     border-bottom: none
  }
 </style>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 7de3ffca..3da31f14 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="timeline">
     <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-      <div class="new-status-notification">
+      <div class="base01-background base05-border new-status-notification">
         <p class="text-center" >
           {{timeline.newStatusCount}} new statuses
         </p>
@@ -9,7 +9,7 @@
     </a>
     <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
     <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
-      <div class="new-status-notification">
+      <div class="base01-background base05-border new-status-notification">
         <p class="text-center" >
           Load older statuses.
         </p>
@@ -18,3 +18,16 @@
   </div>
 </template>
 <script src="./timeline.js"></script>
+
+<style lang="scss">
+ .new-status-notification {
+   border-style: solid;
+   border-width: 1px 0 1px 0;
+   font-size: 1.1em;
+
+   p {
+     margin: 0px;
+     padding: 10px;
+   }
+ }
+</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index d9e661a9..fb121e3c 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -26,7 +26,7 @@
         </div>
       </div>
     </div>
-    <div class="panel-body">
+    <div class="panel-body base00-background">
       <div class="user-counts">
         <div class="user-count">
           <h5>Statuses</h5>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 8ecf1391..c5a5ff43 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -4,7 +4,7 @@
 
       <user-card-content :user="user"></user-card-content>
 
-      <div class="panel-footer">
+      <div class="panel-footer base00-background">
         <post-status-form v-if='user'></post-status-form>
       </div>
     </div>