Button styles (#414)

renderer/index.css

@@ -113,28 +113,8 @@ table {
   opacity: 0.3;
 }
 
-/*
- * BUTTONS
- */
-
-a,
-i {
-  cursor: default;
-  -webkit-app-region: no-drag;
-}
-
-a:not(.disabled):hover,
-i:not(.disabled):hover {
-  -webkit-filter: brightness(1.3);
-}
-
-.btn {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  font-size: 22px;
-  transition: all 0.1s ease-out;
-  text-align: center;
+.float-right {
+  float: right;
 }
 
 /*
@@ -266,14 +246,18 @@ i:not(.disabled):hover {
   width: calc(100% - 20px);
   max-width: 600px;
   box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.4);
-  background-color: white;
+  background-color: #eee;
   color: #222;
   padding: 20px;
 }
 
-.create-torrent-modal input,
+.modal label {
+  font-size: 16px;
+  font-weight: bold;
+}
+
 .open-torrent-address-modal input {
-  width: calc(100% - 100px)
+  width: 100%;
 }
 
 .create-torrent-modal .torrent-attribute {
@@ -295,35 +279,71 @@ i:not(.disabled):hover {
   white-space: nowrap;
 }
 
-
-
 /*
  * BUTTONS
+ * See https://www.google.com/design/spec/components/buttons.html
  */
 
-button {
+a,
+i { /* Links and icons */
+  cursor: default;
+  -webkit-app-region: no-drag;
+}
+
+a:not(.disabled):hover,
+i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
+  -webkit-filter: brightness(1.3);
+}
+
+.button-round { /* Circular icon buttons, used on <i> tags */
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  font-size: 22px;
+  transition: all 0.1s ease-out;
+  text-align: center;
+}
+
+button { /* Rectangular text buttons */
   background: transparent;
   margin-left: 10px;
   padding: 0;
   border: none;
+  border-radius: 3px;
   font-size: 14px;
   font-weight: bold;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   color: #aaa;
+  outline: none;
 }
 
-button.primary {
-  color: #0cf;
+button.button-flat {
+  color: #222;
+  padding: 7px 18px;
 }
 
-button:hover {
-  -webkit-filter: brightness(1.1);
+button.button-flat:hover,
+button.button-flat:focus { /* Material design: focused */
+  background-color: rgba(153, 153, 153, 0.2);
 }
 
-button:active {
-  -webkit-filter: brightness(1.1);
-  text-shadow: none;
+button.button-flat:active { /* Material design: pressed */
+  background-color: rgba(153, 153, 153, 0.4);
+}
+
+button.button-raised {
+  background-color: #2196f3;
+  color: #eee;
+  padding: 7px 18px;
+}
+
+button.button-raised:hover,
+button.button-raised:focus {
+  background-color: #38a0f5;
+}
+
+button.button-raised:active {
+  background-color: #51abf6;
 }
 
 /*
@@ -336,7 +356,7 @@ input {
   padding: 6px;
   border: 1px solid #bbb;
   border-radius: 3px;
-  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
+  outline: none;
 }
 
 /*

renderer/views/open-torrent-address-modal.js

@@ -9,11 +9,13 @@ var {dispatch} = require('../lib/dispatcher')
 function OpenTorrentAddressModal (state) {
   return hx`
     <div class='open-torrent-address-modal'>
-      <p><strong>Enter torrent address or magnet link</strong></p>
+      <p><label>Enter torrent address or magnet link</label></p>
       <p>
         <input id='add-torrent-url' type='text' onkeypress=${handleKeyPress} />
-        <button class='primary' onclick=${handleOK}>OK</button>
-        <button class='cancel' onclick=${handleCancel}>Cancel</button>
+      </p>
+      <p class='float-right'>
+        <button class='button button-flat' onclick=${handleCancel}>CANCEL</button>
+          <button class='button button-raised' onclick=${handleOK}>OK</button>
       </p>
       <script>document.querySelector('#add-torrent-url').focus()</script>
     </div>

renderer/views/torrent-list.js

@@ -141,7 +141,7 @@ function TorrentList (state) {
     var playButton
     if (TorrentPlayer.isPlayableTorrent(torrentSummary)) {
       playButton = hx`
-        <i.btn.icon.play
+        <i.button-round.icon.play
           title=${playTooltip}
           class=${playClass}
           onclick=${dispatcher('play', infoHash)}>
@@ -153,7 +153,7 @@ function TorrentList (state) {
     return hx`
       <div class='buttons'>
         ${playButton}
-        <i.btn.icon.download
+        <i.button-round.icon.download
           class=${torrentSummary.status}
           title=${downloadTooltip}
           onclick=${dispatcher('toggleTorrent', infoHash)}>