add styling to buttons and file input

1 files changed, 17 insertions, 6 deletions

diff --git a/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja b/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja
index 0eb5149..1f3c246 100644
--- a/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja
@@ -21,19 +21,30 @@ in a proprietary work, I am not going to enforce this in court.
 #}
 {%- extends "base.html.jinja" %}
 {% block title %} {{ _('web_ui.packages.load_from_disk.title') }} {% endblock %}
+{% block style %}
+  {{ super() }}
+
+  input[type="file"]::-webkit-file-selector-button,
+  input[type="file"]::file-selector-button {
+      display: none;
+  }
+{% endblock %}
 {% block main %}
+  <h3>{{ _('web_ui.packages.load_from_disk.heading') }}</h3>
   <form method="POST" enctype="multipart/form-data">
     <div>
-      <label for="packages_zipfile">
-	{{ _('web_ui.packages.load_from_disk.select_malcontent_zipfile') }}
-      </label>
+      <input id="packages_zipfile" name="packages_zipfile" type="file"
+	     accept=".zip,application/zip" required="">
     </div>
     <div>
-      <input id="packages_zipfile" name="packages_zipfile" type="file"
-	     required="">
+      <label class="green-button" for="packages_zipfile">
+	{{ _('web_ui.packages.load_from_disk.choose_zipfile_button') }}
+      </label>
     </div>
     <div>
-      <button>{{ _('web_ui.packages.load_from_disk.install_button') }}</button>
+      <button class="green-button">
+	{{ _('web_ui.packages.load_from_disk.install_button') }}
+      </button>
     </div>
   </form>
 {%- endblock %}