From b85999611c6797aad5db2f266fd4e5fe7302565e Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Mon, 8 Jun 2015 11:24:09 -0700
Subject: [PATCH] Better delete button.

---
 src/components/ContainerListItem.react.js |  2 +-
 styles/left-panel.less                    | 22 ++++++++++++----------
 styles/theme.less                         |  1 +
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/ContainerListItem.react.js b/src/components/ContainerListItem.react.js
index 065c50a2ec..7a3da947db 100644
--- a/src/components/ContainerListItem.react.js
+++ b/src/components/ContainerListItem.react.js
@@ -108,7 +108,7 @@ var ContainerListItem = React.createClass({
             </div>
           </div>
           <div className="action">
-            <span className="icon icon-delete btn-delete" onClick={this.handleDeleteContainer}></span>
+            <span className="btn circular" onClick={this.handleDeleteContainer}><span className="icon icon-delete"></span></span>
           </div>
         </li>
       </Router.Link>
diff --git a/styles/left-panel.less b/styles/left-panel.less
index 9568219588..0e0607bcfe 100644
--- a/styles/left-panel.less
+++ b/styles/left-panel.less
@@ -109,11 +109,13 @@
               color: white;
               opacity: 0.8;
             }
-            .btn-delete {
-              font-size: 24px;
-              color: white;
-              position: relative;
-              z-index: 9999;
+            .action {
+              .btn {
+                border: 1px solid white;
+                .icon {
+                  color: white;
+                }
+              }
             }
             .state-new {
               .at2x('container-white.png', @container-state-size, @container-state-size);
@@ -180,11 +182,11 @@
           position: relative;
           top: 0.2rem;
           text-align: right;
-          .btn-delete {
-            font-size: 24px;
-            color: @gray-lighter;
-            position: relative;
-            z-index: 9999;
+          .btn {
+            border: 1px solid @gray-lighter;
+            .icon {
+              color: @gray-lighter;
+            }
           }
         }
         .state {
diff --git a/styles/theme.less b/styles/theme.less
index bfc7e4645a..2feffce788 100644
--- a/styles/theme.less
+++ b/styles/theme.less
@@ -215,6 +215,7 @@ input[type="text"] {
   &:active,
   &.active {
     background-image: none;
+    box-shadow: none;
   }
 
   &:focus,