user-tokens as uneditable-input instead of well

views/app/index.html

@@ -76,7 +76,7 @@
   <!-- Game Over Modal -->
   <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}"> 
     <app:myModal noDismiss=true modalId='dead-modal'>
-        <span class="well pull-right">Tokens: {tokens(_user.balance)}</span>
+        <app:userTokens/>
         <table>
           <tr>
             <td><img src="/img/BrowserQuest/habitrpg_mods/dead.png" /></td>
@@ -166,7 +166,7 @@
       </app:taskColumn>
       <!-- Re-Roll modal -->
       <app:myModal modalId='reroll-modal' header="Reset Your Tasks">
-        <span class="well pull-right">Tokens: {tokens(_user.balance)}</span>
+        <app:userTokens/>
         <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='token-cost'>Not enough tokens</span>
@@ -254,6 +254,15 @@
     {{{/}}}
     <div class="modal-body">{{{content}}}</div>
   </div>
+
+<userTokens:>
+  <div class="pull-right">
+    <div class="input-append">
+      <span class="uneditable-input" style="width:auto;">{tokens(_user.balance)}</span>
+      <span class="add-on">Tokens</span>
+    </div>
+  </div>
+  <!--<span class="well pull-right">Tokens: {tokens(_user.balance)}</span>-->
   
 <taskColumn: nonvoid>
   <div class="span3 well {{{type}}}s">
@@ -412,4 +421,4 @@
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
   </script>
-  {/}
+  {/}