From 53659d7ac8c58d6539907ddda9dd29de21efb04b Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Wed, 19 Sep 2012 09:48:22 -0400
Subject: [PATCH] use github's social-count classes for token-cost

---
 styles/app/index.styl | 40 ++++++++++++++++++++++++++++++++++++++++
 views/app/index.html  |  8 ++++----
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/styles/app/index.styl b/styles/app/index.styl
index 6be3e3d2ed..dc63f849e0 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -182,3 +182,43 @@ li:hover .task-meta-controls .hover-show
 #main                                                                                                                                                                                                                                        
   /*overflow:auto;*/                                                                                                                                                                                                                             
   padding-bottom: 250px; /* don't know why this works, sticky footers are weird */                                                                                                                                                                             
+
+/* ----- Adaptation of GH's social-count for Tokens -----*/ 
+  
+.token-cost
+  border: 1px solid #D4D4D4;
+  font-size: 11px;
+  font-weight: bold;
+  padding: 6px 7px 5px;
+  line-height: 20px;
+  margin-left: 8px;
+  border-radius: 3px;
+  color: #333;
+  background-color: #FAFAFA;
+  position: relative;
+  
+.token-cost::before
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: 6px solid #D4D4D4;
+  border-color: transparent #D4D4D4 transparent transparent;
+  position: absolute;
+  right: 100%;
+  margin-right: 0;
+  top: 50%;
+  margin-top: -6px;
+
+.token-cost::after
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: 6px solid #FAFAFA;
+  border-color: transparent #FAFAFA transparent transparent;
+  position: absolute;
+  right: 100%;
+  margin-right: -1px;
+  top: 50%;
+  margin-top: -6px;
\ No newline at end of file
diff --git a/views/app/index.html b/views/app/index.html
index c51666c12e..893686295c 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -83,10 +83,10 @@
             <td>
               <h3>Game Over</h3>
               {#if lessThan(_user.balance,0.50)}
-                <a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a>  <span class='label'>Not enough tokens</span>
+                <a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
               {else}
                 <p>
-                  <a x-bind=click:revive class="btn btn-danger btn-large">Continue</a>  <span class='label'>2 Tokens</span>
+                  <a x-bind=click:revive class="btn btn-danger btn-large">Continue</a><a class='token-cost'>2 Tokens</a>
                 </p>
               {/}
             </td>
@@ -169,9 +169,9 @@
         <span class="well pull-right">Tokens: {tokens(_user.balance)}</span>
         <p>Highly discouraged because red tasks provide good incentive to improve (<a target="_blank" href="https://github.com/lefnire/habitrpg#all-my-tasks-are-red-im-dying-too-fast">read more</a>). However, this becomes necessary after long bouts of bad habits.</p>
         {#if lessThan(_user.balance,1)}
-          <a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a>  <span class='label'>Not enough tokens</span>
+          <a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
         {else}
-          <button data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</button>  <span class='label'>4 Tokens</span>
+          <button data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</button><span class='token-cost'>4 Tokens</span>
         {/}
       </app:myModal>
     </div>