Improving UX for app_details page

server/views/app_details.html

@@ -1,23 +1,28 @@
 {% extends "layout.html" %} {% block title %}BetaFox - {{app.name}}{% endblock %} {% block template_name %}app_details.html{% endblock %} {% block content %}
 
 <h2>{{version.manifest.name}}</h2>
-<h3>Install Link</h3>
-<div class="install-link">
-  <a href="{{version.installUrl}}">Install Current</a> Version {{version.version}}  <a href="" class="share">Share</a>
+<div class="install-link-block">
+  <h3>Install Page</h3>
+  <p>This link is the install page for the latest version of your app.</p>
+  <div class="install-link">
+    <a href="{{version.installUrl}}" class="button">Latest (Version {{version.version}})</a>
+  </div>
 </div>
 <h3>Version History</h3>
 <ol class="versions">
   {% for ver in versions %}
   <li id='version-{{ver[0]}}'><a href="/app/v/{{ ver[0] | string | urlencode }}/install/{{ app.code | urlencode }}">Version {{ ver[1] }}</a>
     &mdash;
-    <button class="delete-version delete" data-app-code="{{ app.code }}" data-version-id="{{ ver[0] }}">Delete this Version</button>
+    <button class="delete-version delete" data-app-code="{{ app.code }}" data-version-id="{{ ver[0] }}">Delete</button>
   </li>
   {% endfor %}
 </ol>
-<h3>Upload New Version</h3>
-{% include "includes/_upload_app_form.html" %}
+<div class="upload-new-version">
+  <h3>Upload New Version</h3>
+  {% include "includes/_upload_app_form.html" %}
+</div>
 <h3>Delete App</h3>
-<p>Delete this app and all of it's versions:
-  <button class="delete-app delete" data-app-code="{{ app.code }}">Delete App</button>
+<p>Completely delete this app and all of it's versions:
+  <button class="delete-app delete" data-app-code="{{ app.code }}">Delete</button>
 </p>
 {% endblock %} {% block page_js %}{{ cachify_js('/js/delete.js') }}{% endblock %}

server/views/confirm_delete_app.html

@@ -3,7 +3,7 @@
 {% block template_name %}confirm_delete_app.html{% endblock %}
 {% block content %}
 
-<h2>Confirm Deletion of {{app.name}}</h2>
+<h2>Confirm Deletion of &quot;{{app.name}}&quot;</h2>
 <h3>Please Confirm</h3>
 <p>Type the name of your App, to confirm you really want to delete it and all uploaded versions of it.</p>
 
@@ -11,6 +11,6 @@
 
 <input type="text" id="app-name" name="app-name" value="" />
 <input type="hidden" id="expected-app-name" name="expected-app-name" value="{{ app.name }}" />
-<button class="confirm-delete-app delete" data-app-code="{{ app.code }}">Delete App</button>
+Confirm <button class="confirm-delete-app delete" data-app-code="{{ app.code }}">Delete</button>
 {% endblock %}
 {% block page_js %}{{ cachify_js('/js/delete.js') }}{% endblock %}

www/css/main.css

@@ -130,6 +130,54 @@ code {
   font-family: Courier, monospace;
 }
 
+/* Install pages */
+.install-link-block {
+  background-color: #EEE;
+  color: #000;
+  padding: 0.5em auto;
+}
+
+.install-link-block p {
+  margin-bottom: 0.5em;
+}
+.install-link-block .button {
+    color: #FFF;
+  background-color: #42cafe;
+  border-radius: 5px;
+  padding: 10px;
+  margin: 1em 0.5em 0.5em 0em;
+  font-size: 1.125em;
+  line-height: 1.5em;
+}
+
+button.delete {
+  width: 100px;
+  background-color: #f54b3c;
+  color: #FFF;
+  border-radius: 5px;
+}
+
+button.delete:hover {
+  background-color: #b63932;
+  color: #EEE;
+}
+
+button.delete:active {
+  background-color: #ff6c70;
+  color: #333;
+}
+
+.upload-new-version {
+  margin: 0.5em auto;
+  border: solid 1px #333;
+}
+h3 {
+  margin: 0.5em auto;
+}
+
+
+/* end Install */
+
 /* Behavior */
 ol.versions {
   list-style: none;