add styling to buttons and file input

4 files changed, 38 insertions, 9 deletions

diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index eb9680f..b41a106 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -56,6 +56,22 @@ in a proprietary work, I am not going to enforce this in court.
 	      background-color: #fcc;
 	  }
 
+	  .green-button {
+	          background-color: #4caf50;
+	          border: none;
+	          border-radius: 2px;
+	          color: white;
+	          text-align: center;
+	          text-decoration: none;
+	          display: inline-block;
+	          padding: 5px 10px;
+	          -moz-user-select: none;
+	          user-select: none;
+	          cursor: pointer;
+	          font: 400 0.9em sans-serif;
+	          margin: 2px;
+	  }
+
           .hide {
 	      display: none !important;
           }
@@ -70,7 +86,7 @@ in a proprietary work, I am not going to enforce this in court.
 
 	  ul#nav > li {
 	      list-style-type: none;
-	      background-color: #70AF70;
+	      background-color: #70af70;
 	      font-size: 115%;
 	      padding: 10px;
 	      display: inline-block;
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 %}
diff --git a/src/hydrilla/proxy/web_ui/templates/repos.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos.html.jinja
index 05c948e..3e61a83 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos.html.jinja
@@ -29,7 +29,7 @@ in a proprietary work, I am not going to enforce this in court.
 {% block main %}
   <h3>{{ _('web_ui.repos.heading') }}</h3>
   <div>
-    <a href="{{ url_for('.add_repo_get') }}" class="button">
+    <a href="{{ url_for('.add_repo_get') }}" class="green-button">
       {{ _('web_ui.repos.add_repo_button') }}
     </a>
   </div>
diff --git a/src/hydrilla/proxy/web_ui/templates/repos__add.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos__add.html.jinja
index cbe7105..3fdcbd3 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos__add.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos__add.html.jinja
@@ -56,7 +56,9 @@ in a proprietary work, I am not going to enforce this in court.
       <input id="url_field" name="url" required="">
     </div>
     <div>
-      <button class="button">{{ _('web_ui.repos.add.submit_button') }}</button>
+      <button class="green-button">
+	{{ _('web_ui.repos.add.submit_button') }}
+      </button>
     </div>
   </form>
 {% endblock %}