3 files changed, 45 insertions, 37 deletions
diff --git a/view/css/mod_settings.css b/view/css/mod_settings.css
index e81d115d4..4236b3dff 100644
--- a/view/css/mod_settings.css
+++ b/view/css/mod_settings.css
@@ -7,5 +7,22 @@
 }
 
 .channel-menu {
-    margin-top: 24px;
+	margin-top: 24px;
+}
+
+.zat-example {
+	color: red;
+}
+
+#atoken-index {
+	width: 100%;
+}
+
+#atoken-index td:nth-child(1){
+	padding: 7px 3px 7px 10px;
+	white-space: nowrap;
+}
+
+.atoken-index-tool {
+	padding: 7px 10px;
 }
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index eeaf021c1..d61e60dc9 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1655,6 +1655,7 @@ main.fullscreen .section-content-wrapper-np {
 	display: none;
 }
 
+.atoken-index-row:hover td,
 .chatroom-index-row:hover td,
 .locs-index-row:hover td,
 [id^="cloud-index-"]:hover td,
@@ -2036,20 +2037,3 @@ dl.bb-dl > dd > li {
     border-style: solid;
     border-width: 5px;
 }
-
-.atoken-list {
-	margin-right: 5px;
-	list-style-type: none;
-}
-.atoken-list li {
-	margin-bottom: 10px;
-}
-.atoken-text {
-	margin: 5px 10px 5px 10px;
-}
-.atoken-example {
-	margin-left: 20px;
-}
-.zat-example {
-	color: red;
-}
-\ No newline at end of file
diff --git a/view/tpl/settings_tokens.tpl b/view/tpl/settings_tokens.tpl
index 6819a2e58..7e4b19507 100644
--- a/view/tpl/settings_tokens.tpl
+++ b/view/tpl/settings_tokens.tpl
@@ -3,31 +3,38 @@
 		<h2>{{$title}}</h2>
 		<div class="clear"></div>
 	</div>
-	<div class="atoken-text descriptive-text">{{$desc}}</div>
-	<div class="atoken-text descriptive-text">{{$desc2}}</div>
-	<div class="atoken-example">{{$url1}}<span class="zat-example">&f=&zat=<span class="token-mirror"></span></span></div>
-	<div class="atoken-example">{{$url2}}<span class="zat-example">&f=&zat=<span class="token-mirror"></span></span></div>
-	<br />
-	<form action="settings/tokens" id="settings-account-form" method="post" autocomplete="off" >
-		<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
-		{{if $atoken}}<input type="hidden" name="atoken_id" value="{{$atoken.atoken_id}}" />{{/if}}
-		<div class="section-content-tools-wrapper">
+	<div class="section-content-tools-wrapper">
+		<div class="section-content-info-wrapper">
+			{{$desc}}
+		</div>
+
+		<form action="settings/tokens" id="settings-account-form" method="post" autocomplete="off" >
+			<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+			{{if $atoken}}<input type="hidden" name="atoken_id" value="{{$atoken.atoken_id}}" />{{/if}}
 			{{include file="field_input.tpl" field=$name}}
 			{{include file="field_input.tpl" field=$token}}
 			{{include file="field_input.tpl" field=$expires}}
-			<div class="settings-submit-wrapper" >
+			<div class="settings-submit-wrapper form-group">
 				<button type="submit" name="submit" class="btn btn-primary">{{$submit}}</button>
 			</div>
-		</div>
-	</form>
+		</form>
+		<div class="descriptive-text">{{$desc2}}</div>
+		<ul>
+			<li>{{$url1}}<span class="zat-example">&f=&zat=<span class="token-mirror"></span></span></li>
+			<li>{{$url2}}<span class="zat-example">&f=&zat=<span class="token-mirror"></span></span></li>
+		</ul>
+	</div>
 	{{if $tokens}}
-	<div>
-	<ul class="atoken-list">
-	{{foreach $tokens as $t}}
-	<li><span class="pull-right atoken-drop"><a href="settings/tokens/{{$t.atoken_id}}/drop"><i class="fa fa-trash btn btn-xs btn-default"></i></a></span><a href="settings/tokens/{{$t.atoken_id}}">{{$t.atoken_name}}</a></li>
-	{{/foreach}}
-	</ul>
+	<div class="section-content-wrapper-np">
+		<table id="atoken-index">
+			{{foreach $tokens as $t}}
+			<tr id="atoken-index-{{$t.atoken_id}}" class="atoken-index-row">
+				<td width="99%"><a href="settings/tokens/{{$t.atoken_id}}">{{$t.atoken_name}}</a></td>
+				<td width="1%" class="atoken-index-tool"><i class="fa fa-trash-o drop-icons" onClick="dropItem('/settings/tokens/{{$t.atoken_id}}/drop', '#atoken-index-{{$t.atoken_id}}')"></i></td>
+			</tr>
+			{{/foreach}}
+		</table>
+
 	</div>
 	{{/if}}
-
 </div>