Merge pull request #479 from testmycode/add-button-styles

Add button styles to my page and logout

Author: nygrenh

app/assets/stylesheets/application.scss

@@ -10,3 +10,20 @@
 @import "font-awesome";
 @import "breadcrumb";
 @import "footer";
+
+$user-button-color: white;
+
+.btn-user {
+  @extend .btn-light;
+  &.nav-link {
+    color: black !important;
+    background-color: $user-button-color;
+  }
+  &:hover {
+    background-color: darken($user-button-color, 15%)
+  }
+}
+
+.nav-item {
+  margin: 0 0.4rem 0.4rem 0;
+}

app/views/layouts/_navigation.html.erb

@@ -18,8 +18,8 @@
       </ul>
       <ul class="navbar-nav ml-auto">
         <% if signed_in? %>
-          <li class="nav-item mr-3">
-            <%= navigation_link fa_icon("user lg", text: current_user.login), participant_path(current_user) %>
+          <li class="nav-item">
+            <%= link_to fa_icon("user lg", text: current_user.login), participant_path(current_user), class: 'btn btn-user' %>
           </li>
           <li class="nav-item"><%= link_to 'Sign out', signout_path, method: :delete, id: 'logout-link', class: 'btn btn-danger' %></li>
         <% else %>