Frontend styling

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;

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;

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;

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;

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;

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" { "✗" }
  }
  }
 }