From 9e4e33730c81faa8d2293360fc9af27378ce4591 Mon Sep 17 00:00:00 2001
From: cyqsimon <28627918+cyqsimon@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:25:15 +0800
Subject: [PATCH] Frontend styling

---
 data/style.scss            | 29 +++++++++++++++++++++++++----
 data/themes/archlinux.scss |  2 ++
 data/themes/monokai.scss   |  2 ++
 data/themes/squirrel.scss  |  2 ++
 data/themes/zenburn.scss   |  2 ++
 src/renderer.rs            |  2 +-
 6 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/data/style.scss b/data/style.scss
index 6c0d284f9..6bd1734bb 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -244,6 +244,10 @@ table thead th.date {
     width: 21em;
 }
 
+table thead th.actions {
+    width: 4em;
+}
+
 table tbody tr:nth-child(odd) {
     background: var(--odd_row_background);
 }
@@ -269,6 +273,22 @@ td.date-cell {
     justify-content: space-between;
 }
 
+td.actions-cell button {
+    padding: 0.1rem 0.3rem;
+    border-radius: 0.2rem;
+    border: none;
+}
+
+td.actions-cell .rm_form {
+    display: flex;
+    place-content: center;
+}
+
+td.actions-cell .rm_form button {
+    background: var(--rm_button_background);
+    color: var(--rm_button_text_color);
+}
+
 .history {
     color: var(--date_text_color);
 }
@@ -542,19 +562,19 @@ th span.active span {
 }
 
 @mixin theme($name) {
-    @if $name == squirrel {
+    @if $name ==squirrel {
         @include squirrel.theme();
     }
 
-    @else if $name == archlinux {
+    @else if $name ==archlinux {
         @include archlinux.theme();
     }
 
-    @else if $name == monokai {
+    @else if $name ==monokai {
         @include monokai.theme();
     }
 
-    @else if $name == zenburn {
+    @else if $name ==zenburn {
         @include zenburn.theme();
     }
 
@@ -577,6 +597,7 @@ body:not([data-theme]) nav .theme li[data-theme="default"] a {
 @each $theme in $themes {
     body[data-theme="#{$theme}"] {
         @include theme($theme);
+
         // highlight the currently active theme in the theme selection menu
         nav .theme li[data-theme="#{$theme}"] a {
             @extend %active_theme_link;
diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss
index f95b8bb45..6ff5daeb0 100644
--- a/data/themes/archlinux.scss
+++ b/data/themes/archlinux.scss
@@ -38,6 +38,8 @@ $generate_default: true !default;
   --upload_form_background: #4b5162;
   --upload_button_background: #ea95ff;
   --upload_button_text_color: #ffffff;
+  --rm_button_background: #ea95ff;
+  --rm_button_text_color: #ffffff;
   --drag_background: #3333338f;
   --drag_border_color: #fefefe;
   --drag_text_color: #fefefe;
diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss
index 4a477947b..f1eb885cd 100644
--- a/data/themes/monokai.scss
+++ b/data/themes/monokai.scss
@@ -38,6 +38,8 @@ $generate_default: true !default;
   --upload_form_background: #49483e;
   --upload_button_background: #ae81ff;
   --upload_button_text_color: #f8f8f0;
+  --rm_button_background: #ae81ff;
+  --rm_button_text_color: #f8f8f0;
   --drag_background: #3333338f;
   --drag_border_color: #f8f8f2;
   --drag_text_color: #f8f8f2;
diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss
index 9eb572e16..f88a07a49 100644
--- a/data/themes/squirrel.scss
+++ b/data/themes/squirrel.scss
@@ -38,6 +38,8 @@ $generate_default: true !default;
   --upload_form_background: #f2f2f2;
   --upload_button_background: #d02474;
   --upload_button_text_color: #ffffff;
+  --rm_button_background: #d02474;
+  --rm_button_text_color: #ffffff;
   --drag_background: #3333338f;
   --drag_border_color: #ffffff;
   --drag_text_color: #ffffff;
diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss
index 9eb4d112b..2aa97649a 100644
--- a/data/themes/zenburn.scss
+++ b/data/themes/zenburn.scss
@@ -38,6 +38,8 @@ $generate_default: true !default;
   --upload_form_background: #777777;
   --upload_button_background: #cc9393;
   --upload_button_text_color: #efefef;
+  --rm_button_background: #cc9393;
+  --rm_button_text_color: #efefef;
   --drag_background: #3333338f;
   --drag_border_color: #efefef;
   --drag_text_color: #efefef;
diff --git a/src/renderer.rs b/src/renderer.rs
index 992e78512..dfe23e881 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -503,7 +503,7 @@ fn rm_form(rm_route: &str, encoded_path: &str) -> Markup {
     let rm_action = format!("{rm_route}?path={encoded_path}");
     html! {
         form class="rm_form" action=(rm_action) method="POST" {
-            button type="submit" { "X" }
+            button type="submit" { "✗" }
         }
     }
 }