From b13e2bde2406e6f30d8ff2d3ecbfe9703ae079f9 Mon Sep 17 00:00:00 2001
From: rainbow napkin <ourforest@tuta.io>
Date: Sun, 8 Dec 2024 04:33:17 -0500
Subject: [PATCH] Continued css clean-up.

---
 src/views/channel.ejs                         |  12 +-
 src/views/channelSettings.ejs                 |   2 +-
 src/views/partial/adminPanel/channelList.ejs  |   8 +-
 src/views/partial/adminPanel/userBanList.ejs  |  14 +-
 src/views/partial/adminPanel/userList.ejs     |  24 +--
 src/views/partial/channelSettings/banList.ejs |  20 +-
 .../partial/channelSettings/userList.ejs      |  12 +-
 src/views/partial/popup/channelUserBan.ejs    |   4 +-
 src/views/partial/popup/userBan.ejs           |   4 +-
 src/views/profile.ejs                         |   2 +-
 www/css/adminPanel.css                        |  21 +-
 www/css/channel.css                           |  37 +---
 www/css/global.css                            |  31 +++
 www/css/profile.css                           |   2 +-
 www/css/theme/movie-night.css                 | 193 +++++++++---------
 www/js/channelSettings.js                     |   2 +-
 www/js/profile.js                             |   2 +-
 www/js/utils.js                               |   2 +-
 18 files changed, 189 insertions(+), 203 deletions(-)

diff --git a/src/views/channel.ejs b/src/views/channel.ejs
index fba0ca2..f8a5762 100644
--- a/src/views/channel.ejs
+++ b/src/views/channel.ejs
@@ -98,12 +98,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                         <div class="chat-panel" id="chat-area">
                             <div class="chat-panel" id="chat-panel-buffer-div">
                             </div>
-                            <div class="chat-panel" id="chat-panel-control-div">
-                                <i class="chat-panel chat-panel-control bi-gear-fill" id="chat-panel-settings-icon"></i>
-                                <i class="chat-panel chat-panel-control bi-magic" id="chat-panel-admin-icon"></i>
-                                <i class="chat-panel chat-panel-control bi-images" id="chat-panel-emote-icon"></i>
-                                <input class="chat-panel chat-panel-control" id="chat-panel-prompt" placeholder="Chat...">
-                                <button class="chat-panel chat-panel-control" id="chat-panel-send-button">Send</button>
+                            <div class="chat-panel control-prompt" id="chat-panel-control-div">
+                                <i class="chat-panel chat-panel-control control-prompt bi-gear-fill" id="chat-panel-settings-icon"></i>
+                                <i class="chat-panel chat-panel-control control-prompt bi-magic" id="chat-panel-admin-icon"></i>
+                                <i class="chat-panel chat-panel-control control-prompt bi-images" id="chat-panel-emote-icon"></i>
+                                <input class="chat-panel chat-panel-control control-prompt" id="chat-panel-prompt" placeholder="Chat...">
+                                <button class="chat-panel chat-panel-control positive-button" id="chat-panel-send-button">Send</button>
                             </div>
                         </div>
                     </div>
diff --git a/src/views/channelSettings.ejs b/src/views/channelSettings.ejs
index 5533ef0..9e016e4 100644
--- a/src/views/channelSettings.ejs
+++ b/src/views/channelSettings.ejs
@@ -30,7 +30,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             <%- include('partial/channelSettings/settings.ejs'); %>
             <%- include('partial/channelSettings/permList.ejs'); %>
         </div>
-        <button href="javascript:" id="channel-delete">Delete Channel</button>
+        <button href="javascript:" class="danger-button" id="chan-delete">Delete Channel</button>
         <footer>
             <%- include('partial/scripts', {user}); %>
             <script src="/js/channelSettings.js"></script>
diff --git a/src/views/partial/adminPanel/channelList.ejs b/src/views/partial/adminPanel/channelList.ejs
index 767ef70..6fb77b0 100644
--- a/src/views/partial/adminPanel/channelList.ejs
+++ b/src/views/partial/adminPanel/channelList.ejs
@@ -20,10 +20,10 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             <td id="admin-channel-list-entry-img-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
                 <h3>Img</h3>
             </td>
-            <td id="admin-channel-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-channel-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Name</h3>
             </td>
-            <td id="admin-channel-list-entry-description-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-channel-list-entry-description-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Description</h3>
             </td>
         </tr>
@@ -34,12 +34,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                     <img id="admin-channel-list-entry-img-<%- channel.name %>" class="admin-list-entry admin-list-entry-item" src="<%- channel.thumbnail %>">
                 </a>
             </td>
-            <td id="admin-channel-list-entry-name-<%- channel.name %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-channel-list-entry-name-<%- channel.name %>" class="admin-list-entry admin-list-entry-item not-first-col">
                 <a href="/c/<%- channel.name %>" class="admin-list-entry admin-list-entry-item">
                     <%- channel.name %>
                 </a>
             </td>
-            <td id="admin-channel-list-entry-description-<%- channel.name %>" class="admin-list-entry admin-list-entry-large admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-channel-list-entry-description-<%- channel.name %>" class="admin-list-entry admin-list-entry-large admin-list-entry-item not-first-col">
                 <%- channel.description %>
             </td> 
         </tr>
diff --git a/src/views/partial/adminPanel/userBanList.ejs b/src/views/partial/adminPanel/userBanList.ejs
index fd19fd4..93932fc 100644
--- a/src/views/partial/adminPanel/userBanList.ejs
+++ b/src/views/partial/adminPanel/userBanList.ejs
@@ -20,25 +20,25 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             <td id="admin-ban-list-entry-img-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
                 <h3>Img</h3>
             </td>
-            <td id="admin-ban-list-entry-id-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-ban-list-entry-id-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>ID</h3>
             </td> 
-            <td id="admin-ban-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-ban-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Name</h3>
             </td> 
-            <td id="admin-ban-list-entry-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-ban-list-entry-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Sign-Up<br>Date</h3>
             </td>
-            <td id="admin-ban-list-entry-ban-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-ban-list-entry-ban-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Ban<br>Date</h3>
             </td>
-            <td id="admin-ban-list-entry-expiration-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-ban-list-entry-expiration-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Expires</h3>
             </td>
-            <td id="admin-ban-list-entry-expiration-type-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-ban-list-entry-expiration-type-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Expiration<br>Action</h3>
             </td>
-            <td id="admin-ban-list-entry-actions-type-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-ban-list-entry-actions-type-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 &nbsp;
             </td>
         </tr>
diff --git a/src/views/partial/adminPanel/userList.ejs b/src/views/partial/adminPanel/userList.ejs
index fdbcd10..764717b 100644
--- a/src/views/partial/adminPanel/userList.ejs
+++ b/src/views/partial/adminPanel/userList.ejs
@@ -20,22 +20,22 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             <td id="admin-user-list-entry-img-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
                 <h3>Img</h3>
             </td>
-            <td id="admin-user-list-entry-id-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-id-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>ID</h3>
             </td> 
-            <td id="admin-user-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Name</h3>
             </td> 
-            <td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-rank-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Rank</h3>
             </td> 
-            <td id="admin-user-list-entry-mail-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-mail-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>E-Mail</h3>
             </td>
-            <td id="admin-user-list-entry-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 <h3>Sign-Up<br>Date</h3>
             </td>
-            <td id="admin-user-list-entry-control-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-control-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
                 &nbsp;
             </td>
         </tr>
@@ -46,17 +46,17 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                     <img id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item" src="<%- curUser.img %>">
                 </a>
             </td>
-            <td id="admin-user-list-entry-id-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-id-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
                 <a href="/profile/<%- curUser.user %>" class="admin-list-entry admin-list-entry-item">
                     <%- curUser.id %>
                 </a>
             </td>
-            <td id="admin-user-list-entry-name-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-name-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
                 <a href="/profile/<%- curUser.user %>" class="admin-list-entry admin-list-entry-item">
                     <%- curUser.user %>
                 </a>
             </td>
-            <td id="admin-user-list-entry-rank-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-rank-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
                 <% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%>
                     <select id="admin-user-list-rank-select-<%- curUser.user %>" class="admin-user-list-rank-select">
                         <%rankEnum.slice().reverse().forEach((rank)=>{ %>
@@ -67,13 +67,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                     <%- curUser.rank %>
                 <% } %>
             </td>
-            <td id="admin-user-list-entry-email-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-email-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
                     <%- curUser.email ? curUser.email : "N/A" %>
             </td>
-            <td id="admin-user-list-entry-date-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-date-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
                     <%- curUser.date.toUTCString() %>
             </td>
-            <td id="admin-user-list-entry-action-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item admin-list-entry-not-first-col">
+            <td id="admin-user-list-entry-action-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
                 <!-- It's either this or add whitespce >:( -->
                 <i class="bi-radioactive admin-user-list-icon admin-user-list-nuke-icon" id="admin-user-list-nuke-icon-<%- curUser.user %>" title="Nuke Account: <%- curUser.user %>"></i><i class="bi-fire admin-user-list-icon admin-user-list-ban-icon" id="admin-user-list-ban-icon-<%- curUser.user %>" title="Ban User: <%- curUser.user %>"></i><i class="bi-arrow-clockwise admin-user-list-icon admin-user-list-pw-reset-icon" id="admin-user-list-pw-reset-icon-<%- curUser.user %>" title="Generate Password Reset Link for <%- curUser.user %>"></i>
             </td>
diff --git a/src/views/partial/channelSettings/banList.ejs b/src/views/partial/channelSettings/banList.ejs
index bf45bb8..d07ac0f 100644
--- a/src/views/partial/channelSettings/banList.ejs
+++ b/src/views/partial/channelSettings/banList.ejs
@@ -15,19 +15,19 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div class="admin-list-div">
     <h3 id="channel-ban-title">Channel Bans:</h3>
-    <span id="new-ban-span" class="admin-list-new-span">
-        <input placeholder="Add Username..." id="new-ban-input" class="admin-list-new-input">
-        <button id="new-ban-button">Ban</button>
-    </span>
+    <div class="control-prompt">
+        <input placeholder="Add Username..." id="new-ban-input" class="control-prompt">
+        <button id="new-ban-button" class="danger-button">Ban</button>
+    </div>
     <table id="admin-ban-list-table" class="admin-list-table">
         <tr class="admin-list-entry-title-row">
             <td class="admin-list-entry-item admin-list-entry admin-list-entry-img-title"><h3>Img</h3></td>
-            <td id="admin-user-list-entry-id-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>ID</h3></td>
-            <td class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Name</h3></td>
-            <td class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Ban<br>Alts</h3></td>
-            <td id="channel-user-list-entry-ban-date-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Ban Date</h3></td>
-            <td id="channel-user-list-entry-expiration-date-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Expires</h3></td>
-            <td id="channel-user-list-entry-actions-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col">&nbsp;</td>
+            <td id="admin-user-list-entry-id-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>ID</h3></td>
+            <td class="admin-list-entry-item admin-list-entry not-first-col"><h3>Name</h3></td>
+            <td class="admin-list-entry-item admin-list-entry not-first-col"><h3>Ban<br>Alts</h3></td>
+            <td id="channel-user-list-entry-ban-date-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>Ban Date</h3></td>
+            <td id="channel-user-list-entry-expiration-date-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>Expires</h3></td>
+            <td id="channel-user-list-entry-actions-title" class="admin-list-entry-item admin-list-entry not-first-col">&nbsp;</td>
         </tr>
         <!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
     </table>
diff --git a/src/views/partial/channelSettings/userList.ejs b/src/views/partial/channelSettings/userList.ejs
index 5712a9c..a5a2930 100644
--- a/src/views/partial/channelSettings/userList.ejs
+++ b/src/views/partial/channelSettings/userList.ejs
@@ -16,20 +16,20 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <div class="admin-list-div">
     <h3 id="channel-rank-title">Channel Ranks:</h3>
     <sup id="channel-rank-sup">Users set to default channel rank 'user' will NOT be listed below.</sup>
-    <span id="new-rank-span" class="admin-list-new-span">
-        <input placeholder="Add Username..." id="new-rank-input" class="admin-list-new-input">
+    <div class="control-prompt">
+        <input placeholder="Add Username..." id="new-rank-input" class="control-prompt">
         <select id="new-rank-select">
             <%rankEnum.slice().reverse().forEach((rank)=>{ %>
                 <option value="<%= rank %>"><%= rank %></option>
             <% }); %>
         </select>
-    </span>
+    </div>
     <table class="admin-list-table">
         <tr class="admin-list-entry-title-row">
             <td class="admin-list-entry-item admin-list-entry admin-list-entry-img-title"><h3>Img</h3></td>
-            <td id="admin-user-list-entry-id-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>ID</h3></td>
-            <td class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Name</h3></td>
-            <td id="channel-user-list-entry-rank-title" class="admin-list-entry-item admin-list-entry admin-list-entry-not-first-col"><h3>Rank</h3></td>
+            <td id="admin-user-list-entry-id-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>ID</h3></td>
+            <td class="admin-list-entry-item admin-list-entry not-first-col"><h3>Name</h3></td>
+            <td id="channel-user-list-entry-rank-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>Rank</h3></td>
         </tr>
         <!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
     </table>
diff --git a/src/views/partial/popup/channelUserBan.ejs b/src/views/partial/popup/channelUserBan.ejs
index 47cfd88..46a6ee7 100644
--- a/src/views/partial/popup/channelUserBan.ejs
+++ b/src/views/partial/popup/channelUserBan.ejs
@@ -15,7 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <!-- I could turn this into partials which get called by both this and userBan but that seems like a lot of work to avoid a quick copy/pase
 even if I'm usually against that, sometimes you gotta break da rulez :P -->
-<link rel="stylesheet" type="text/css" href="/css/popup/userBan.css">
+<link rel="stylesheet" type="text/css" href="/css/popup/ban.css">
 <h3 class="popup-title">Ban NULL</h3>
 <form class="ban-popup-content" action="javascript:">
     <span>
@@ -34,6 +34,6 @@ even if I'm usually against that, sometimes you gotta break da rulez :P -->
     <span id="ban-popup-button-span">
         <button id="ban-popup-cancel-button">Cancel</button>
         <span id="ban-popup-button-span-spacer"></span>
-        <button id="ban-popup-ban-button">Ban</button>
+        <button id="ban-popup-ban-button" class="danger-button">Ban</button>
     </span>
 </form>
\ No newline at end of file
diff --git a/src/views/partial/popup/userBan.ejs b/src/views/partial/popup/userBan.ejs
index c9cb60d..84c9be6 100644
--- a/src/views/partial/popup/userBan.ejs
+++ b/src/views/partial/popup/userBan.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
-<link rel="stylesheet" type="text/css" href="/css/popup/userBan.css">
+<link rel="stylesheet" type="text/css" href="/css/popup/ban.css">
 <h3 class="popup-title">Ban NULL</h3>
 <form class="ban-popup-content" action="javascript:">
     <span>
@@ -28,6 +28,6 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
     <span id="ban-popup-button-span">
         <button id="ban-popup-cancel-button">Cancel</button>
         <span id="ban-popup-button-span-spacer"></span>
-        <button id="ban-popup-ban-button">Ban</button>
+        <button id="ban-popup-ban-button" class="danger-button">Ban</button>
     </span>
 </form>
\ No newline at end of file
diff --git a/src/views/profile.ejs b/src/views/profile.ejs
index 84b8e89..0783555 100644
--- a/src/views/profile.ejs
+++ b/src/views/profile.ejs
@@ -66,7 +66,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                         <input class="account-settings-password-reset" id="account-settings-password-reset-confirm" placeholder="Confirm New Password" type="password">
                     </span>
                     <span class="account-settings" id="account-settings-delete">
-                        <a href="javascript:" class="account-settings" id="account-settings-delete-link">Delete Account</a>
+                        <button href="javascript:" class="account-settings danger-button" id="account-settings-delete-button">Delete Account</button>
                     </span>
                 </div>
             <% } %>
diff --git a/www/css/adminPanel.css b/www/css/adminPanel.css
index 4c10844..2355116 100644
--- a/www/css/adminPanel.css
+++ b/www/css/adminPanel.css
@@ -28,14 +28,6 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     padding: 1em 15%;
 }
 
-.admin-list-table{
-    border-spacing: 0px;
-}
-
-td.admin-list-entry{
-    padding: 0.3em 1em;
-}
-
 .admin-list-entry{
     text-align: center;
 }
@@ -95,17 +87,6 @@ img.admin-list-entry-item{
     text-align: center;
 }
 
-.admin-list-new-span{
-    display: flex;
-    padding: 0 1em;
-    height: 1.5em;
-    margin-bottom: 1em;
-}
-
-.admin-list-new-input{
-    flex-grow: 1;
-}
-
 #new-rank-select{
     margin: auto;
     height: 1.3em;
@@ -121,7 +102,7 @@ img.admin-list-entry-item{
     height: 1.5em;
 }
 
-#channel-delete{
+#chan-delete{
     margin: auto auto 2em;
 }
 
diff --git a/www/css/channel.css b/www/css/channel.css
index a5de122..29877f9 100644
--- a/www/css/channel.css
+++ b/www/css/channel.css
@@ -123,29 +123,6 @@ div#chat-panel-main-div{
     flex-direction: column;
 }
 
-div#chat-panel-control-div{
-    height: 2em;
-    display: flex;
-    flex-direction: row;
-    margin: 0.5em;
-}
-
-i.chat-panel-control{
-    height: 1em;
-    margin: auto;
-    margin-left: 0.5em;
-    cursor: pointer;
-}
-
-#chat-panel-settings-icon{
-    margin-left: 1em;
-}
-
-#chat-panel-prompt{
-    margin-left: 0.5em;
-    width: 100%;
-}
-
 p#chat-panel-high-level-paragraph{
     margin: auto;
     margin-left: 0;
@@ -161,10 +138,6 @@ p.panel-head-element{
     appearance: none;
 }
 
-input#chat-panel-prompt{
-    flex: 1;
-}
-
 #chat-panel-send-button{
     margin: auto;
     margin-right: 1em;
@@ -235,6 +208,10 @@ span.user-entry{
     display: none;
 }
 
+#chat-panel-settings-icon{
+    margin-left: 1em;
+}
+
 #cpanel-active-div{
     position: absolute;
     z-index: 4;
@@ -257,4 +234,10 @@ span.user-entry{
     display: flex;
     flex-direction: row;
     flex: 1;
+}
+
+#chat-panel-control-div{
+    height: 2em;
+    padding: 0;
+    margin: 0.5em;
 }
\ No newline at end of file
diff --git a/www/css/global.css b/www/css/global.css
index fccf6eb..1fa9b14 100644
--- a/www/css/global.css
+++ b/www/css/global.css
@@ -14,6 +14,7 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
+/* Global Styles */
 html{
     height: 100%;
 }
@@ -25,7 +26,35 @@ body{
     flex-direction: column;
     
 }
+table{
+    border-spacing: 0px;
+}
 
+td{
+    padding: 0.3em 1em;
+}
+
+div.control-prompt{
+    display: flex;
+    flex-direction: row;
+    margin: 0.5em 0;
+    padding: 0.2em 0.5em;
+}
+
+i.control-prompt{
+    height: 1em;
+    margin: auto;
+    margin-left: 0.5em;
+    cursor: pointer;
+}
+
+input.control-prompt{
+    margin-left: 0.5em;
+    width: 100%;
+    flex: 1;
+}
+
+/* Navbar */
 #navbar{
     display: flex;
     padding: 0.5em;
@@ -50,6 +79,8 @@ p.navbar-item, input.navbar-item{
     padding: 0.2em;
 }
 
+/* Popup Container */
+
 .popup-backer{
     position: fixed;
     top: 0;
diff --git a/www/css/profile.css b/www/css/profile.css
index 7ffda07..4490f0f 100644
--- a/www/css/profile.css
+++ b/www/css/profile.css
@@ -38,6 +38,6 @@ input.account-settings-password-reset{
     display: block;
 }
 
-a#account-settings-delete-link{
+a#account-settings-delete-button{
     font-weight: bold;
 }
\ No newline at end of file
diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index 55e967a..b31370c 100644
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@@ -14,7 +14,7 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
-/* global */
+/* Theme Variables */
 :root{
     --main-font: "open-sans", system-ui;
     --bg0: rgb(158, 158, 158);
@@ -28,13 +28,21 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
     --accent0: rgb(48, 47, 47);
     --accent0-alt0: rgb(34, 34, 34);
-    --accent0-warning: firebrick;
-    --accent0-warning-alt0: rgb(121, 11, 11);
     --accent1: rgb(245, 245, 245);
     --accent1-alt0: rgb(185, 185, 185);
     --accent2: var(--accent0-alt0);
 
     --focus0: rgb(51, 153, 51);
+    --focus0-alt0: rgb(229, 255, 229);
+    --focus0-alt1: rgb(12, 85, 12);
+    --focus-glow0: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
+    --focus-glow0-alt0: 2px 2px 3px var(--focus0-alt0), -2px 2px 3px var(--focus0-alt0), 2px -2px 3px var(--focus0-alt0), -2px -2px 3px var(--focus0-alt0);
+
+    --danger0: firebrick;
+    --danger0-alt0: rgb(121, 11, 11);
+    --danger0-alt1: rgb(255, 105, 105);
+    --danger-glow0: 2px 2px 3px var(--danger0), -2px 2px 3px var(--danger0), 2px -2px 3px var(--danger0), -2px -2px 3px var(--danger0);
+    --danger-glow0-alt1: 2px 2px 3px var(--danger0-alt1), -2px 2px 3px var(--danger0-alt1), 2px -2px 3px var(--danger0-alt1), -2px -2px 3px var(--danger0-alt1);
 
     --userlist-color0:rgb(63, 121, 71);
     --userlist-color1:rgb(143, 46, 26);
@@ -50,6 +58,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     --background-panel-effect-fast: none;
 }
 
+/* global */
 body{
     background-color: var(--bg0);
     font-family: var(--main-font);
@@ -61,28 +70,98 @@ a{
     color: var(--accent0);
 }
 
+a:hover{
+    color: var(--focus0-alt0);
+    text-shadow: var(--focus-glow0);
+}
+
 select{
     background-color: var(--bg2);
     border-radius: 0.5em;
     border: none;
 }
 
-button{
-    border-radius: 0.5em;
-}
-
-a:hover{
-    color: var(--accent0-alt0);
-}
-
 button{
     background-color: var(--bg0);
     color: var(--accent0);
     border: none;
+    border-radius: 0.5em;
+}
+
+button:hover{
+    color: var(--focus0-alt1);
+    background-color: var(--focus0-alt0);
+    box-shadow: var(--focus-glow0);
+}
+
+button:active{
+    color: var(--focus0-alt0);
+    background-color: var(--focus0-alt1);
+    box-shadow: var(--focus-glow0-alt0);
+}
+
+.danger-button{
+    background-color: var(--danger0);
+    color: var(--accent1);
+}
+
+.danger-button:hover{
+    background-color: var(--danger0-alt1);
+    color: var(--danger0-alt0);
+    box-shadow: var(--danger-glow0);
+}
+
+.danger-button:active{
+    background-color: var(--danger0-alt0);
+    color: var(--accent0-alt0);
+    box-shadow: var(--danger-glow0-alt1);
+}
+
+.positive-button{
+    background-color: var(--focus0);
+    color: white;
+}
+
+.positive-button:hover{
+    color: var(--focus0-alt1);
+    background-color: var(--focus0-alt0);
+}
+
+.positive-button:active{
+    color: var(--focus0-alt0);
+    background-color: var(--focus0-alt1);
+}
+
+tr{
+    box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
+}
+
+td.not-first-col{
+    box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
+}
+
+.admin-list-field,.admin-list-table{
+    background-color: var(--bg1);
+    color: var(--accent1);
+    box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
+    border-radius: 1em;
+}
+
+div.control-prompt{
+    border-radius: 1em;
+    background-color: white;
+}
+
+div.control-prompt:focus-within{
+    box-shadow: var(--focus-glow0);
+}
+
+input.control-prompt, input.control-prompt:focus{
+    border: none;
+    outline: none;
 }
 
 /* navbar */
-
 #navbar{
     background-color: var(--bg1);
 }
@@ -92,10 +171,6 @@ button{
     border: hidden;
 }
 
-a:hover.navbar-item{
-    color: var(--accent1-alt0);
-}
-
 .navbar-item input{
     background-color: var(--bg1-alt0);
 }
@@ -116,10 +191,6 @@ a.channel-guide-entry-item{
     color: var(--accent1);
 }
 
-a:hover.channel-guide-entry-item{
-    color: var(--accent1-alt0);
-}
-
 span.channel-guide-entry-item{
     background-color: var(--bg1-alt0);
     box-shadow: 0.2em 0.2em 0.1em black inset;
@@ -132,42 +203,7 @@ p.channel-guide-entry-item{
     background-color: var(--bg1-alt0);
 }
 
-/* account settings */
-a#account-settings-delete-link{
-    color: var(--accent0-warning);
-}
-
 /* channel settings/admin panel mixed */
-
-#channel-delete, #ban-popup-ban-button, #new-ban-button{
-    background-color: var(--accent0-warning);
-    color: var(--accent1);
-}
-
-#channel-delete:hover, #ban-popup-ban-button:hover, #new-ban-button:hover{
-    background-color: var(--accent0-warning-alt0);
-}
-
-#channel-delete:active, #ban-popup-ban-button:active, #new-ban-button:active{
-    background-color: var(--accent0-warning-alt0);
-    color: var(--accent1-alt0);
-}
-
-.admin-list-field,.admin-list-table{
-    background-color: var(--bg1);
-    color: var(--accent1);
-    box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
-    border-radius: 1em;
-}
-
-tr.admin-list-entry{
-    box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
-}
-
-td.admin-list-entry-not-first-col{
-    box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
-}
-
 a.admin-list-entry-item{
     color: var(--accent1);
 }
@@ -176,26 +212,7 @@ a:hover.admin-list-entry-item{
     color: var(--accent1-alt0);
 }
 
-.admin-list-new-span{
-    background-color: white;
-    border-radius: 1em;
-}
-
-.admin-list-new-span:focus-within{
-    box-shadow: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
-}
-
-.admin-list-new-input{
-    border: none;
-}
-
-.admin-list-new-input:focus{
-    border: none;
-    outline: none;
-}
-
 /* channel */
-
 #media-panel-div{
     background-color: black;
 }
@@ -204,31 +221,10 @@ a:hover.admin-list-entry-item{
     background-color: var(--bg2);
 }
 
-#chat-panel-control-div{
-    background-color: white;
-}
-
-#chat-panel-control-div:focus-within{
-    box-shadow: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
-}
-
 #chat-area{
     background-color: var(--bg2);
 }
 
-div#chat-panel-control-div{
-    border-radius: 1em;
-}
-
-#chat-panel-prompt{
-    border: none;
-}
-
-#chat-panel-prompt:focus{
-    border: none;
-    outline: none;
-}
-
 .chat-entry{
     background-color: var(--bg2);
     border-bottom: 1px solid var(--bg2-alt1);
@@ -280,11 +276,6 @@ div#chat-panel-control-div{
     color: var(--accent1-alt0);
 }
 
-#chat-panel-send-button{
-    background-color: var(--focus0);
-    color: white;
-}
-
 select.panel-head-element{
     height: 1.2em;
     margin: auto;
@@ -319,5 +310,5 @@ select.panel-head-element{
 }
 
 #delete-account-popup-title, #delete-channel-popup-title{
-    color: var(--accent0-warning);
+    color: var(--danger0);
 }
\ No newline at end of file
diff --git a/www/js/channelSettings.js b/www/js/channelSettings.js
index 57989a9..0bdd035 100644
--- a/www/js/channelSettings.js
+++ b/www/js/channelSettings.js
@@ -333,7 +333,7 @@ class permList{
 class deleteBtn{
     constructor(channel){
         this.channel = channel;
-        this.delete = document.querySelector("#channel-delete");
+        this.delete = document.querySelector("#chan-delete");
     
         this.setupInput();
     }
diff --git a/www/js/profile.js b/www/js/profile.js
index 49d85e7..5b26adc 100644
--- a/www/js/profile.js
+++ b/www/js/profile.js
@@ -157,7 +157,7 @@ class passwordResetPrompt{
 
 class deleteAccountButton{
     constructor(){
-        this.deleteLink = document.querySelector('#account-settings-delete-link');
+        this.deleteLink = document.querySelector('#account-settings-delete-button');
 
         this.setupInput();
     }
diff --git a/www/js/utils.js b/www/js/utils.js
index fc47f67..64f7d2d 100644
--- a/www/js/utils.js
+++ b/www/js/utils.js
@@ -43,7 +43,7 @@ class canopyUXUtils{
 
         //If it's not the first column, mention it!
         if(!firstCol){
-            cell.classList.add("admin-list-entry-not-first-col");
+            cell.classList.add("not-first-col");
         }
 
         //check for arrays