From 5eea14a780a8b96de4cb97cb2251e613763c96ea Mon Sep 17 00:00:00 2001
From: Dennis1993 <Dennis1993@users.noreply.github.com>
Date: Sat, 17 Apr 2021 20:18:47 +0200
Subject: [PATCH] Optimize space between icon and text in navigation (#2672)

* straighten navigation

Position of the text are not the same in every entry. This change unifies the distance between icon and text

* define space between text and icon

add the same space between icon and text in the navigation.
---
 app/assets/stylesheets/application.scss            |  4 ++++
 app/views/admins/components/_menu_buttons.html.erb | 14 +++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 13b0c128..fb85489f 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -187,3 +187,7 @@ table {
 .btn i {
   transition: all .15s;
 }
+
+.nav-icon i {
+  width: 35px;
+}
diff --git a/app/views/admins/components/_menu_buttons.html.erb b/app/views/admins/components/_menu_buttons.html.erb
index 858a1bf7..7387e97c 100644
--- a/app/views/admins/components/_menu_buttons.html.erb
+++ b/app/views/admins/components/_menu_buttons.html.erb
@@ -18,28 +18,28 @@
   <% highest_role.name %>
   <% if highest_role.get_permission("can_manage_users") || highest_role.name == "super_admin" %>
     <%= link_to admins_path, class: "list-group-item list-group-item-action dropdown-item #{"active" if active_page == "index"}" do %>
-      <span class="icon mr-3"><i class="fas fa-users"></i></span><%= t("administrator.users.title") %>
+      <span class="icon nav-icon"><i class="fas fa-users"></i></span><%= t("administrator.users.title") %>
     <% end %>
   <% end %>
   <% if highest_role.get_permission("can_manage_rooms_recordings") || highest_role.name == "super_admin" %>
     <%= link_to admin_rooms_path, class: "list-group-item list-group-item-action dropdown-item #{"active" if active_page == "server_rooms"}" do %>
-      <span class="icon mr-4"><i class="fas fa-binoculars"></i></span><%= t("administrator.rooms.title") %>
+      <span class="icon nav-icon"><i class="fas fa-binoculars"></i></span><%= t("administrator.rooms.title") %>
     <% end %>
     <%= link_to admin_recordings_path, class: "list-group-item list-group-item-action dropdown-item #{"active" if active_page == "server_recordings"}" do %>
-      <span class="icon mr-4"><i class="fas fa-video"></i></span><%= t("administrator.recordings.title") %>
+      <span class="icon nav-icon"><i class="fas fa-video"></i></span><%= t("administrator.recordings.title") %>
     <% end %>
   <% end %>
   <% if highest_role.get_permission("can_edit_site_settings") || highest_role.name == "super_admin" %>
     <%= link_to admin_site_settings_path, class: "list-group-item list-group-item-action dropdown-item #{"active" if active_page == "site_settings"}" do %>
-      <span class="icon mr-4"><i class="fas fa-cogs"></i></span><%= t("administrator.site_settings.title") %>
+      <span class="icon nav-icon"><i class="fas fa-cogs"></i></span><%= t("administrator.site_settings.title") %>
     <% end %>
     <%= link_to admin_room_configuration_path, class: "list-group-item list-group-item-action dropdown-item #{"active" if active_page == "room_configuration"}" do %>
-      <span class="icon mr-4"><i class="fas fa-sliders-h"></i></span><%= t("administrator.room_configuration.title") %>
+      <span class="icon nav-icon"><i class="fas fa-sliders-h"></i></span><%= t("administrator.room_configuration.title") %>
     <% end %>
   <% end %>
   <% if highest_role.get_permission("can_edit_roles")  || highest_role.name == "super_admin" %>
     <%= link_to admin_roles_path, class: "list-group-item list-group-item-action dropdown-item #{"active" if active_page == "roles"}" do %>
-      <span class="icon mr-4"><i class="fas fa-user-tag"></i></span><%= t("administrator.roles.title") %>
+      <span class="icon nav-icon"><i class="fas fa-user-tag"></i></span><%= t("administrator.roles.title") %>
     <% end %>
   <% end %>
-</div>
\ No newline at end of file
+</div>