update readme file with screenshot

README.md

@@ -9,7 +9,7 @@ Some of the advanced concepts explored in this project includes.
 - Used paperclip gem to achieve image upload for profile photo and cover image
 
 
-![screenshot](./ror-social.gif)
+![screenshot](./screenshot.gif)
 
 ## Built With
 

app/assets/stylesheets/application.scss

@@ -82,7 +82,7 @@ body {
   }
 }
 
-.active {
+.actived {
   background-color: $blue-sky !important;
   color: $text-light !important;
   fill: $text-light !important;

app/helpers/application_helper.rb

@@ -1,6 +1,6 @@
 module ApplicationHelper
   def active_class(url_action)
-    'active' if params[:action] == url_action
+    'actived' if params[:action] == url_action
   end
 
   def show_cover_image(user)

app/views/shared/_profile.html.erb

@@ -14,24 +14,59 @@
      </div>
 </div>
 
-<h6 class="border-bottom pb-3">FOLLOWED BY</h6>
 
-    <% @user.followers.each do |follower| %>
-    <div class="d-flex flex-row flex-wrap align-items-center mt-3 mb-4 who-to-follow">
-            <div class="author">
-                <%= show_photo(follower, 'side-photo')%>
+    <ul class="nav nav-tabs" id="myTab" role="tablist">
+        <li class="nav-item">
+            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Followed by</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Following</a>
+        </li>
+        </ul>
+
+    <div class="tab-content" id="myTabContent">
+    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+
+        <% @user.followers.each do |follower| %>
+            <div class="d-flex flex-row flex-wrap align-items-center mt-3 mb-4 who-to-follow">
+                    <div class="author">
+                        <%= show_photo(follower, 'side-photo')%>
+                    </div>
+                    <div class="follow-content d-flex flex-wrap flex-row justify-content-between">
+                        <h6><strong>
+
+                        <%= link_to follower.fullname, profile_path(follower.username), class: "text-dark" %></strong><br>
+                        <small class="text-gray">@<%= follower.username %></small>
+                        </h6>
+
+                        <%= display_follow_btn(follower, 'shared/follow_icon') %>
+
+                    </div>
             </div>
-            <div class="follow-content d-flex flex-wrap flex-row justify-content-between">
-                <h6><strong>
-
-                 <%= link_to follower.fullname, profile_path(follower.username), class: "text-dark" %></strong><br>
-                 <small class="text-gray">@<%= follower.username %></small>
-                 </h6>
-
-                 <%= display_follow_btn(follower, 'shared/follow_icon') %>
-
+         <% end %>
+
+    </div>
+    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+
+        <% @user.follows.each do |follow| %>
+            <div class="d-flex flex-row flex-wrap align-items-center mt-3 mb-4 who-to-follow">
+                    <div class="author">
+                        <%= show_photo(follow, 'side-photo')%>
+                    </div>
+                    <div class="follow-content d-flex flex-wrap flex-row justify-content-between">
+                        <h6><strong>
+
+                        <%= link_to follow.fullname, profile_path(follow.username), class: "text-dark" %></strong><br>
+                        <small class="text-gray">@<%= follow.username %></small>
+                        </h6>
+
+                        <%= display_follow_btn(follow, 'shared/follow_icon') %>
+
+                    </div>
             </div>
+         <% end %>
+
+    </div>
     </div>
-    <% end %>
 
 </div>