From 3ac85d97d632bf74cd4a41c32bdb6d1ef3479f64 Mon Sep 17 00:00:00 2001
From: MrKeksi <mrkeksi@users.noreply.github.com>
Date: Fri, 26 Jun 2020 19:36:38 +0200
Subject: [PATCH] Desgin for Manage Users Tabs (#1777)

* Update _subtitle.html.erb

* Update _manage_users_tags.html.erb

* Update admins.scss

* Update _primary_themes.scss

* Update _manage_users_tags.html.erb
---
 app/assets/stylesheets/admins.scss            |  8 ++---
 .../components/_manage_users_tags.html.erb    | 29 +++++++++++--------
 .../shared/components/_subtitle.html.erb      |  8 -----
 lib/assets/_primary_themes.scss               |  8 +++++
 4 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/admins.scss b/app/assets/stylesheets/admins.scss
index 3e872d74..b2422eb4 100644
--- a/app/assets/stylesheets/admins.scss
+++ b/app/assets/stylesheets/admins.scss
@@ -84,10 +84,8 @@
   color: white !important;
 }
 
-.manage-users-tab {
-  &:hover {
-    cursor: pointer;
-  }
+#manage-users-nav.nav-tabs .nav-item {
+  margin-bottom: -1px;
 }
 
 #merge-account-arrow {
@@ -96,4 +94,4 @@
   right: 47%;
   z-index: 999;
   background: white;
-}
\ No newline at end of file
+}
diff --git a/app/views/admins/components/_manage_users_tags.html.erb b/app/views/admins/components/_manage_users_tags.html.erb
index e622c867..2a39cb13 100644
--- a/app/views/admins/components/_manage_users_tags.html.erb
+++ b/app/views/admins/components/_manage_users_tags.html.erb
@@ -14,20 +14,25 @@
 %>
 
 <div class="form-group mt-n3">
-  <div class="row">
-    <div class="col-12 tags">
-      <span id="active" class="btn btn-sm tag manage-users-tab <%= 'selected' if @tab == 'active' %>">
+  <nav class="row m-0">
+    <div class="nav col nav-tabs m-0 p-0" id="manage-users-nav" role="tablist" style="justify-content: space-around;">
+      <a class="nav-item p-3 nav-link <%= 'active' if @tab == 'active' %>" id="Active" href="?tab=active" role="tab" aria-selected="true"><i class="fas mr-3 fa-users"></i>
         <%= t("roles.active") %>
-      </span>
-      <span id="pending" class="btn btn-sm tag manage-users-tab <%= 'selected' if @tab == 'pending' %>">
+      </a>
+      <a class="nav-item p-3 nav-link <%= 'active' if @tab == 'pending' %>" id="Pending" href="?tab=pending" role="tab" aria-selected="false"><i class="fas mr-3 fa-user-clock"></i>
         <%= t("roles.pending") %>
-      </span>
-      <span id="denied" class="btn btn-sm tag manage-users-tab <%= 'selected' if @tab == 'denied' %>">
+      </a>
+      <a class="nav-item p-3 nav-link <%= 'active' if @tab == 'denied' %>" id="Denied" href="?tab=denied" role="tab" aria-selected="false"><i class="fas mr-3 fa-user-times"></i>
         <%= t("roles.banned") %>
-      </span>
-      <span id="deleted" class="btn btn-sm tag manage-users-tab <%= 'selected' if @tab == 'deleted' %>">
+      </a>
+      <a class="nav-item p-3 nav-link <%= 'active' if @tab == 'deleted' %>" id="Deleted" href="?tab=deleted" role="tab" aria-selected="false"><i class="far mr-2 fa-trash-alt"></i>
         <%= t("roles.deleted") %>
-      </span>
+      </a>
+      <% if admin_invite_registration %>
+          <%= link_to "#inviteModal", :class => "nav-item p-3 btn-primary", "id": "invite-user", "style": "margin-left: auto;", "data-toggle": "modal" do %>
+            <%= t("administrator.users.invite") %><i class="fas fa-paper-plane ml-3"></i>
+          <% end %>
+      <% end %>
     </div>
-  </div>
-</div>
\ No newline at end of file
+  </nav>
+</div>
diff --git a/app/views/shared/components/_subtitle.html.erb b/app/views/shared/components/_subtitle.html.erb
index 01699cc3..aedde264 100644
--- a/app/views/shared/components/_subtitle.html.erb
+++ b/app/views/shared/components/_subtitle.html.erb
@@ -20,14 +20,6 @@
     </div>
 
     <div class="col-md-6 mb-4">
-      <% if admin_invite_registration %>
-        <div id="invite-user" class="d-inline-block float-right ml-3">
-          <%= link_to "#inviteModal", :class => "btn btn-primary", "data-toggle": "modal" do %>
-            <%= t("administrator.users.invite") %> <i class="fas fa-paper-plane ml-1"></i>
-          <% end %>
-        </div>
-      <% end %>
-
       <div id="search-bar" class="d-inline-block float-right">
         <div class="input-group">
           <input id="search-input" type="text" class="form-control" placeholder="<%= t("settings.search") %>..." value="<%= @search %>">
diff --git a/lib/assets/_primary_themes.scss b/lib/assets/_primary_themes.scss
index e493602b..732778bc 100644
--- a/lib/assets/_primary_themes.scss
+++ b/lib/assets/_primary_themes.scss
@@ -80,6 +80,14 @@ a {
   }
 }
 
+.nav-tabs .nav-link:not(.active){
+  color: #9aa0ac !important;
+  &:hover:not(.disabled) {
+    border-color: $primary-color;
+    color: $primary-color !important;
+  }
+}
+
 .dropdown-item {
   color: #6e7687 !important;
   &:hover {