Refactor css

Apply different styles to reply, retweet and favorite buttons

src/App.scss

@@ -1,7 +1,4 @@
-$main-color: #f58d2c;
+@import './_variables.scss';
-$main-background: white;
-$darkened-background: whitesmoke;
-
 #app {
     background-color: $main-color;
     background-size: cover;
@@ -225,9 +222,10 @@ status.ng-enter.ng-enter-active {
 }
 
 .fa {
-    color: $main-color;
+    color: grey;
 }
 
+
 .status-actions {
     width: 50%;
     display: flex;

src/_variables.scss

@@ -0,0 +1,6 @@
+$main-color: #f58d2c;
+$main-background: white;
+$darkened-background: whitesmoke;
+$green: #0fa00f;
+$blue: #0095ff;
+

src/components/favorite_button/favorite_button.vue

@@ -7,8 +7,15 @@
 
 <script src="./favorite_button.js" ></script>
 
-<style>
+<style lang='scss'>
+  @import '../../_variables.scss';
   .favorite-button {
-     cursor: pointer
+      cursor: pointer;
+      &:hover {
+        color: $main-color;
+      }
+  }
+  .icon-star {
+      color: $main-color;
   }
 </style>

src/components/retweet_button/retweet_button.vue

@@ -7,12 +7,16 @@
 
 <script src="./retweet_button.js" ></script>
 
-<style>
+<style lang='scss'>
+  @import '../../_variables.scss';
   .icon-retweet {
-     cursor: pointer
+     cursor: pointer;
+     &:hover {
+      color: $green;
+     }
   }
   .retweeted {
      cursor: auto;
-     color: green;
+     color: $green;
   }
 </style>

src/components/status/status.vue

@@ -51,6 +51,7 @@
 <script src="./status.js" ></script>
 
 <style lang="scss">
+  @import '../../_variables.scss';
   .status-el {
      hyphens: auto;
      overflow-wrap: break-word;
@@ -71,4 +72,8 @@
   .status-actions {
      padding-top: 5px;
   }
+
+  .icon-reply:hover {
+     color: $blue;
+  }
 </style>