fix: 🐛 styling of admin and users pages

This commit is contained in:
2025-11-06 14:36:20 +00:00
parent 8909834a19
commit d56e0647f7
2 changed files with 23 additions and 23 deletions
+18 -18
View File
@@ -24,7 +24,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
<a href="/audit" class="bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 p-6 rounded-lg shadow-md flex items-center justify-between transition-colors"> <a href="/audit" class="bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 p-6 rounded-lg shadow-md flex items-center justify-between transition-colors">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<i class="fas fa-clipboard-list text-3xl text-blue-500"></i> <i class="fas fa-clipboard-list text-3xl text-gray-600 dark:text-gray-400"></i>
<div> <div>
<h3 class="text-lg font-bold">Audit Log</h3> <h3 class="text-lg font-bold">Audit Log</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">View system activity</p> <p class="text-sm text-gray-600 dark:text-gray-400">View system activity</p>
@@ -34,7 +34,7 @@
</a> </a>
<a href="/users" class="bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 p-6 rounded-lg shadow-md flex items-center justify-between transition-colors"> <a href="/users" class="bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 p-6 rounded-lg shadow-md flex items-center justify-between transition-colors">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<i class="fas fa-users text-3xl text-green-500"></i> <i class="fas fa-users text-3xl text-gray-600 dark:text-gray-400"></i>
<div> <div>
<h3 class="text-lg font-bold">User Management</h3> <h3 class="text-lg font-bold">User Management</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Manage users & roles</p> <p class="text-sm text-gray-600 dark:text-gray-400">Manage users & roles</p>
@@ -49,7 +49,7 @@
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Subnet Management</h2> <h2 class="text-2xl font-bold">Subnet Management</h2>
{% if can_add_subnet %} {% if can_add_subnet %}
<button onclick="showAddSubnetModal()" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-6 py-2 rounded-lg font-medium"> <button onclick="showAddSubnetModal()" class="bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-6 py-2 rounded-lg font-medium">
<i class="fas fa-plus mr-2"></i>Add Subnet <i class="fas fa-plus mr-2"></i>Add Subnet
</button> </button>
{% endif %} {% endif %}
@@ -60,34 +60,34 @@
<table class="w-full"> <table class="w-full">
<thead> <thead>
<tr class="border-b border-gray-600"> <tr class="border-b border-gray-600">
<th class="text-left p-3">Name</th> <th class="text-center p-3">Name</th>
<th class="text-left p-3">CIDR</th> <th class="text-center p-3">CIDR</th>
<th class="text-left p-3">Site</th> <th class="text-center p-3">Site</th>
<th class="text-left p-3">Actions</th> <th class="text-center p-3">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for subnet in subnets %} {% for subnet in subnets %}
<tr class="border-b border-gray-600 hover:bg-gray-300 dark:hover:bg-zinc-700"> <tr class="border-b border-gray-600 hover:bg-gray-300 dark:hover:bg-zinc-700">
<td class="p-3 font-medium">{{ subnet.name }}</td> <td class="p-3 font-medium text-center">{{ subnet.name }}</td>
<td class="p-3 font-mono text-sm">{{ subnet.cidr }}</td> <td class="p-3 font-mono text-sm text-center">{{ subnet.cidr }}</td>
<td class="p-3"> <td class="p-3 text-center">
<span class="px-2 py-1 bg-blue-200 dark:bg-blue-800 rounded text-sm">{{ subnet.site }}</span> <span class="px-2 py-1 bg-gray-300 dark:bg-zinc-700 rounded text-sm">{{ subnet.site }}</span>
</td> </td>
<td class="p-3"> <td class="p-3 text-center">
<div class="flex items-center space-x-2"> <div class="flex items-center justify-center space-x-2">
<a href="/subnet/{{ subnet.id }}" class="text-blue-500 hover:text-blue-700" title="View Subnet"> <a href="/subnet/{{ subnet.id }}" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300" title="View Subnet">
<i class="fas fa-eye"></i> <i class="fas fa-eye"></i>
</a> </a>
{% if can_edit_subnet %} {% if can_edit_subnet %}
<button onclick="editSubnet({{ subnet.id }}, '{{ subnet.name|replace("'", "\\'") }}', '{{ subnet.cidr|replace("'", "\\'") }}', '{{ subnet.site|replace("'", "\\'") }}')" class="text-green-500 hover:text-green-700" title="Edit Subnet"> <button onclick="editSubnet({{ subnet.id }}, '{{ subnet.name|replace("'", "\\'") }}', '{{ subnet.cidr|replace("'", "\\'") }}', '{{ subnet.site|replace("'", "\\'") }}')" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Edit Subnet">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</button> </button>
{% endif %} {% endif %}
{% if can_delete_subnet %} {% if can_delete_subnet %}
<form action="/delete_subnet" method="POST" onsubmit="return confirm('Are you sure you want to delete this subnet and all its IPs? This action is irreversible.');" class="inline"> <form action="/delete_subnet" method="POST" onsubmit="return confirm('Are you sure you want to delete this subnet and all its IPs? This action is irreversible.');" class="inline">
<input type="hidden" name="subnet_id" value="{{ subnet.id }}"> <input type="hidden" name="subnet_id" value="{{ subnet.id }}">
<button type="submit" class="text-red-500 hover:text-red-700" title="Delete Subnet"> <button type="submit" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Delete Subnet">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</form> </form>
@@ -126,8 +126,8 @@
<span id="cidr-error" class="text-red-500 text-sm hidden"></span> <span id="cidr-error" class="text-red-500 text-sm hidden"></span>
</div> </div>
<div class="flex justify-end space-x-2 mt-6"> <div class="flex justify-end space-x-2 mt-6">
<button type="button" onclick="closeAddSubnetModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button> <button type="button" onclick="closeAddSubnetModal()" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
<button type="submit" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Add Subnet</button> <button type="submit" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Add Subnet</button>
</div> </div>
</form> </form>
</div> </div>
+5 -5
View File
@@ -77,20 +77,20 @@
</td> </td>
{% if can_manage_users %} {% if can_manage_users %}
<td class="p-2 text-center"> <td class="p-2 text-center">
<button onclick="editUser({{ user[0] }}, '{{ user[1]|replace("'", "\\'") }}', '{{ user[2]|replace("'", "\\'") }}', {{ user[3] if user[3] else 'null' }}, '{{ user[5]|replace("'", "\\'") if user[5] else '' }}')" class="text-blue-500 hover:text-blue-700 mr-2 hover:cursor-pointer" title="Edit User"> <button onclick="editUser({{ user[0] }}, '{{ user[1]|replace("'", "\\'") }}', '{{ user[2]|replace("'", "\\'") }}', {{ user[3] if user[3] else 'null' }}, '{{ user[5]|replace("'", "\\'") if user[5] else '' }}')" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 mr-2 hover:cursor-pointer" title="Edit User">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</button> </button>
<form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to regenerate the API key for this user?');" class="inline mr-2"> <form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to regenerate the API key for this user?');" class="inline mr-2">
<input type="hidden" name="action" value="regenerate_api_key"> <input type="hidden" name="action" value="regenerate_api_key">
<input type="hidden" name="user_id" value="{{ user[0] }}"> <input type="hidden" name="user_id" value="{{ user[0] }}">
<button type="submit" class="text-yellow-500 hover:text-yellow-700 hover:cursor-pointer" title="Regenerate API Key"> <button type="submit" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Regenerate API Key">
<i class="fas fa-key"></i> <i class="fas fa-key"></i>
</button> </button>
</form> </form>
<form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');" class="inline"> <form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');" class="inline">
<input type="hidden" name="action" value="delete_user"> <input type="hidden" name="action" value="delete_user">
<input type="hidden" name="user_id" value="{{ user[0] }}"> <input type="hidden" name="user_id" value="{{ user[0] }}">
<button type="submit" class="text-red-500 hover:text-red-700 hover:cursor-pointer" title="Delete User"> <button type="submit" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Delete User">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</form> </form>
@@ -127,10 +127,10 @@
</div> </div>
{% if can_manage_roles %} {% if can_manage_roles %}
<div class="flex space-x-2"> <div class="flex space-x-2">
<button type="button" onclick="editRole({{ role[0] }}, '{{ role[1]|replace("'", "\\'") }}', '{{ (role[2] or '')|replace("'", "\\'") }}'); return false;" class="text-blue-500 hover:text-blue-700 hover:cursor-pointer" title="Edit Role"> <button type="button" onclick="editRole({{ role[0] }}, '{{ role[1]|replace("'", "\\'") }}', '{{ (role[2] or '')|replace("'", "\\'") }}'); return false;" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Edit Role">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</button> </button>
<button type="button" onclick="deleteRole({{ role[0] }}, '{{ role[1]|replace("'", "\\'") }}'); return false;" class="text-red-500 hover:text-red-700 hover:cursor-pointer" title="Delete Role"> <button type="button" onclick="deleteRole({{ role[0] }}, '{{ role[1]|replace("'", "\\'") }}'); return false;" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Delete Role">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>