From dcbaeddde7d416035dc67b4bbd68f94c2ac6d6a7 Mon Sep 17 00:00:00 2001
From: Mihai Parparita <mihai@persistent.info>
Date: Sun, 2 Nov 2014 15:33:24 -0800
Subject: [PATCH] Use action button style everywhere.

Also some CSS cleanup.
---
 app/static/main.css                 | 122 ++++++++++++++++------------
 app/templates/index-signed-out.html |   2 +-
 app/templates/index.html            |  18 ++--
 app/templates/settings.html         |   4 +-
 4 files changed, 85 insertions(+), 61 deletions(-)

diff --git a/app/static/main.css b/app/static/main.css
index 8cc4148..4079097 100644
--- a/app/static/main.css
+++ b/app/static/main.css
@@ -10,6 +10,10 @@ a {
   text-decoration: none;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
 .header {
   position: relative;
   height: 164px;
@@ -54,17 +58,7 @@ a {
   color: #756344;
 }
 
-#sign-in-form {
-  text-align: center;
-}
-
-#sign-in-form .octicon-mark-github {
-  pointer-events: none;
-  vertical-align: -2px;
-  color: #76201b;
-}
-
-#sign-in-form input[type="submit"] {
+.action-button {
   outline: 0;
   -webkit-appearance: none;
   border: dashed 2px #b52e26;
@@ -74,9 +68,72 @@ a {
   border-radius: 8px;
   font-size: 18pt;
   font-weight: bold;
+  padding: 3px 5px;
+  cursor: pointer;
+  background: #fefcef;
+}
+
+.action-button:active {
+  background: #fff193;
+}
+
+form.inline {
+  display: inline;
+}
+
+input[type="submit"].inline {
+  -webkit-appearance: none;
+  display: inline;
+  background: transparent;
+  padding: 0;
+  border: 0;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10pt;
+  color: #4183c4;
+  cursor: pointer;
+}
+
+input[type="submit"].inline:hover {
+  text-decoration: underline;
+}
+
+input[type="submit"].inline.destructive {
+  text-decoration: underline;
+  color: #900;
+}
+
+.flash {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 4px;
+  color: #fff;
+  font-size: 12pt;
+  padding: 10px;
+  transition: opacity ease-in-out 300ms;
+  opacity: 0;
+}
+
+.flash.visible {
+  opacity: 1;
+}
+
+#sign-in-form {
+  text-align: center;
+}
+
+#sign-in-form .octicon-mark-github {
+  pointer-events: none;
+  vertical-align: -2px;
+  color: #76201b;
+  z-index: 1;
+  position: relative;
+}
+
+#sign-in-form input[type="submit"] {
   padding: 8px 5px 5px 43px;
   margin-left: -44px;
-  cursor: pointer;
 }
 
 #sign-in-form input[type="submit"]:before {
@@ -111,17 +168,11 @@ a {
   display: block;
 }
 
-#primary-actions,
-#primary-actions input[type="submit"] {
-  font-size: 14pt;
-}
-
 #primary-actions {
   margin: 2em 0;
-}
-
-#send-form {
-  display: inline;
+  text-align: center;
+  font-size: 14pt;
+  color: #999;
 }
 
 .setting {
@@ -185,32 +236,3 @@ a {
   margin-top: 1em;
   padding-top: 1em;
 }
-
-input[type="submit"].destructive {
-  -webkit-appearance: none;
-  display: inline;
-  background: transparent;
-  padding: 0;
-  border: 0;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10pt;
-  text-decoration: underline;
-  color: #900;
-}
-
-.flash {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: rgba(0, 0, 0, 0.75);
-  border-radius: 4px;
-  color: #fff;
-  font-size: 12pt;
-  padding: 10px;
-  transition: opacity ease-in-out 300ms;
-  opacity: 0;
-}
-
-.flash.visible {
-  opacity: 1;
-}
diff --git a/app/templates/index-signed-out.html b/app/templates/index-signed-out.html
index 82da82b..f68930e 100644
--- a/app/templates/index-signed-out.html
+++ b/app/templates/index-signed-out.html
@@ -4,7 +4,7 @@
 
 <form id="sign-in-form" method="POST" action="{{routeUrl "sign-in"}}">
   <span class="mega-octicon octicon-mark-github"></span>
-  <input type="submit" value="Sign In with GitHub">
+  <input type="submit" class="action-button" value="Sign In with GitHub">
   <label>
     <input type="checkbox" name="include_private" value="1" checked>
     Include private repositories
diff --git a/app/templates/index.html b/app/templates/index.html
index 08d0f95..47829eb 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -6,7 +6,7 @@
   {{template "flash" .}}
 {{end}}
 
-<p>
+<div>
   Signed in as
   <a href="https://github.com/{{.User.Login}}"
      title="{{.User.Name}}">
@@ -15,16 +15,18 @@
          height="20"
          border="0">{{.User.Login}}
   </a>.
-  <form method="POST" action="{{routeUrl "sign-out"}}">
-    <input type="submit" value="Sign Out">
+  <form class="inline" method="POST" action="{{routeUrl "sign-out"}}">
+    <input type="submit" class="inline" value="Sign Out">
   </form>
-</p>
+</div>
 
 <div id="primary-actions">
-  <a href="{{routeUrl "view-digest"}}">View Digest</a>
-  -
-  <form id="send-form" method="POST" action="{{routeUrl "send-digest"}}">
-    <input type="submit" value="Email Digest">
+  <form class="inline" method="GET" action="{{routeUrl "view-digest"}}">
+    <input type="submit" class="action-button" value="View Digest">
+  </form>
+  or
+  <form class="inline" method="POST" action="{{routeUrl "send-digest"}}">
+    <input type="submit" class="action-button" value="Email Digest">
   </form>
 </div>
 
diff --git a/app/templates/settings.html b/app/templates/settings.html
index 3afc279..a4ca2dd 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -129,13 +129,13 @@
   </label>
 </div>
 
-<input type="submit" value="Save Settings">
+<input type="submit" class="action-button" value="Save Settings">
 
 </form>
 
 <form id="delete-account-form" method="POST" action="{{routeUrl "delete-account"}}" onsubmit="return confirmDeleteAccount()">
   If you'd like all data that's stored about your GitHub account removed, you can
-  <input type="submit" value="Delete Your Account" class="destructive">.
+  <input type="submit" value="delete your account" class="inline destructive">.
 </form>
 
 <script>