From 82b25946a097f60924bbe36b1c492acd82c14fcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lera=20Elvo=C3=A9?= <yagich@poto.cafe>
Date: Tue, 20 May 2025 13:48:39 +0300
Subject: [PATCH] buttons

---
 sass/style.scss                 | 22 +++++++++++++++++++++-
 static/style.css                | 33 ++++++++++++++++++++++++++++++++-
 views/base.etlua                |  3 ++-
 views/user/delete_confirm.etlua |  2 +-
 views/user/settings.etlua       |  6 +++---
 views/user/user.etlua           | 20 ++++++++++----------
 6 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/sass/style.scss b/sass/style.scss
index eef0c99..53e1962 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -14,7 +14,7 @@ $button_color: color.adjust($accent_color, $hue: 90);
 
 %button-base {
   cursor: default;
-  // color: black;
+  color: black;
   font-size: 0.9rem;
   text-decoration: none;
   border: 1px solid black;
@@ -51,6 +51,8 @@ body {
 
 #topnav {
   @include navbar($accent_color);
+  justify-content: space-between;
+  align-items: center;
 }
 
 #bottomnav {
@@ -63,6 +65,11 @@ body {
   background-color: $dark_bg;
 }
 
+.site-title {
+  display: inline;
+  padding-right: 30px;
+}
+
 .thread-title {
   margin: 0;
 }
@@ -138,6 +145,15 @@ button, input[type="submit"], .linkbutton {
     color: white;
     @include button(red);
   }
+  
+  &.warn {
+    @include button(#fbfb8d);
+  }
+}
+
+// not sure why this one has to be separate, but if it's included in the rule above everything breaks
+input[type="file"]::file-selector-button {
+  @include button($button_color);
 }
 
 .pagebutton {
@@ -158,3 +174,7 @@ button, input[type="submit"], .linkbutton {
   min-width: 20px;
   text-align: center;
 }
+
+.modform {
+  display: inline;
+}
diff --git a/static/style.css b/static/style.css
index af40f2d..94cd026 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,6 +1,7 @@
 /* src: */
-.currentpage, .pagebutton, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
+.currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
   cursor: default;
+  color: black;
   font-size: 0.9rem;
   text-decoration: none;
   border: 1px solid black;
@@ -20,6 +21,8 @@ body {
   display: flex;
   justify-content: end;
   background-color: #c1ceb1;
+  justify-content: space-between;
+  align-items: center;
 }
 
 #bottomnav {
@@ -35,6 +38,11 @@ body {
   background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
 }
 
+.site-title {
+  display: inline;
+  padding-right: 30px;
+}
+
 .thread-title {
   margin: 0;
 }
@@ -119,6 +127,25 @@ button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:h
 button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
   background-color: rgb(149.175, 80.325, 80.325);
 }
+button.warn, input[type=submit].warn, .linkbutton.warn {
+  background-color: #fbfb8d;
+}
+button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
+  background-color: rgb(251.8, 251.8, 163.8);
+}
+button.warn:active, input[type=submit].warn:active, .linkbutton.warn:active {
+  background-color: rgb(198.3813559322, 198.3813559322, 154.4186440678);
+}
+
+input[type=file]::file-selector-button {
+  background-color: rgb(177, 206, 204.5);
+}
+input[type=file]::file-selector-button:hover {
+  background-color: rgb(192.6, 215.8, 214.6);
+}
+input[type=file]::file-selector-button:active {
+  background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
+}
 
 .pagebutton {
   background-color: rgb(177, 206, 204.5);
@@ -143,3 +170,7 @@ button.critical:active, input[type=submit].critical:active, .linkbutton.critical
   min-width: 20px;
   text-align: center;
 }
+
+.modform {
+  display: inline;
+}
diff --git a/views/base.etlua b/views/base.etlua
index 5bf0b94..2b0fbcb 100644
--- a/views/base.etlua
+++ b/views/base.etlua
@@ -7,7 +7,8 @@
   <% else %>
     <title>Porom</title>
   <% end %>
-  <link rel="stylesheet" href="/static/style.css">
+  <% math.randomseed(os.time()) %>
+  <link rel="stylesheet" href="<%= "/static/style.css?" .. math.random(1, 100) %>">
 </head>
 <body>
   <% content_for("inner") %>
diff --git a/views/user/delete_confirm.etlua b/views/user/delete_confirm.etlua
index 5b5e394..dc183ef 100644
--- a/views/user/delete_confirm.etlua
+++ b/views/user/delete_confirm.etlua
@@ -8,5 +8,5 @@
 
 <form method="post" action="<%= url_for("user_delete", {username = user.username}) %>">
   <input type="password" name="password" id="password" autocomplete="current-password" placeholder="Password" required><br>
-  <input type="submit" value="Delete my account (NO UNDO)">
+  <input class="critical" type="submit" value="Delete my account (NO UNDO)">
 </form>
diff --git a/views/user/settings.etlua b/views/user/settings.etlua
index 509de34..f893f11 100644
--- a/views/user/settings.etlua
+++ b/views/user/settings.etlua
@@ -4,7 +4,7 @@
 <% end %>
 <form method="post" action="<%= url_for("user_set_avatar", {username = user.username}) %>" enctype="multipart/form-data">
   <img src="<%= avatar_url(user) %>"><br>
-  <input type="file" name="avatar" accept="image/*"><br>
+  <input id="file" type="file" name="avatar" accept="image/*">
   <input type="submit" value="Update avatar">
 <% if not user:is_default_avatar() then %>
   <input type="submit" value="Clear avatar" formaction="<%= url_for("user_clear_avatar", {username = user.username}) %>">
@@ -14,7 +14,7 @@
 <form method="post" action="">
   <label for="status">Status</label>
   <input type="text" id="status" name="status" value="<%= user.status %>" maxlength="30"><br>
-  <input type="submit" value="Save">
+  <input type="submit" value="Save status">
 </form>
 <br>
-<a href="<%= url_for("user_delete_confirm", {username = user.username}) %>">Delete account</a>
+<a class="linkbutton critical" href="<%= url_for("user_delete_confirm", {username = user.username}) %>">Delete account</a>
diff --git a/views/user/user.etlua b/views/user/user.etlua
index a394823..5cb4a2e 100644
--- a/views/user/user.etlua
+++ b/views/user/user.etlua
@@ -8,9 +8,9 @@
   <h2>You are a guest. An Moderator needs to approve your account before you will be able to post.</h2>
 <% end %>
 <% if user_is_me then %>
-  <a href="<%= url_for("user_settings", {username = user.username}) %>">Settings</a>
+  <a class="linkbutton" href="<%= url_for("user_settings", {username = user.username}) %>">Settings</a>
   <form method="post" action="<%= url_for("user_logout", {user_id = me.id}) %>">
-    <input type="submit" value="Log out">
+    <input class="warn" type="submit" value="Log out">
   </form>
 <% end %>
 
@@ -18,23 +18,23 @@
   <h1>Moderator controls</h2>
   <% if user:is_guest() then %>
     <p>This user is a guest. They signed up on <%= os.date("%c", user.created_at) %>.</p>
-    <form method="post" action="<%= url_for("confirm_user", {user_id = user.id}) %>">
+    <form class="modform" method="post" action="<%= url_for("confirm_user", {user_id = user.id}) %>">
       <input type="submit" value="Confirm user">
     </form>
   <% else %> <% --[[ user is not guest ]] %>
     <p>This user signed up on <%= os.date("%c", user.created_at) %> and was confirmed on <%= os.date("%c", user.confirmed_on) %>.</p>
     <% if user.permission < me.permission then %>
-    <form method="post" action="<%= url_for("guest_user", {user_id = user.id}) %>">
-      <input type="submit" value="Demote user to guest (soft ban)">
+    <form class="modform" method="post" action="<%= url_for("guest_user", {user_id = user.id}) %>">
+      <input class="warn" type="submit" value="Demote user to guest (soft ban)">
     </form>
     <% end %>
     <% if me:is_admin() and not user:is_mod() then %>
-      <form method="post" action="<%= url_for("mod_user", {user_id = user.id}) %>">
-        <input type="submit" value="Promote user to moderator">
+      <form class="modform" method="post" action="<%= url_for("mod_user", {user_id = user.id}) %>">
+        <input class="warn" type="submit" value="Promote user to moderator">
       </form>
-    <% elseif user.permission < me.permission then %>
-      <form method="post" action="<%= url_for("demod_user", {user_id = user.id}) %>">
-        <input type="submit" value="Demote user to regular user">
+    <% elseif user:is_mod() and user.permission < me.permission then %>
+      <form class="modform" method="post" action="<%= url_for("demod_user", {user_id = user.id}) %>">
+        <input class="critical" type="submit" value="Demote user to regular user">
       </form>
     <% end %>
   <% end %>