Improve token description

2 files changed, 5 insertions, 3 deletions

diff --git a/frontend/css/style.css b/frontend/css/style.css
index b43d6fe..9d019b0 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -92,7 +92,7 @@ a:hover, a:focus {
 
 .access-token-input {
     padding: 5px 0;
-    width: 450px;
+    width: 487px;
 }
 
 .access-token-input > input, .access-token-input i {
diff --git a/frontend/index.html b/frontend/index.html
index 20154da..920f8cc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -37,10 +37,12 @@
   </el-dialog>
 
   <el-dialog title="Access Tokens" :visible.sync="accessTokensDialogVisible" width="30%">
-    Tokens can be used with the surfer <a href="https://www.npmjs.com/package/cloudron-surfer" target="_blank">cli tool</a> or using the Api directly.
-    They are shared between all users.
+    Access tokens are useful to programmatically deploy assets for example within a CI/CD pipeline.
+    For this they can be used with the surfer <a href="https://www.npmjs.com/package/cloudron-surfer" target="_blank">cli tool</a> or using the Api directly.
     <br/>
     <br/>
+    <el-alert title="Tokens are shared between all users." type="warning" show-icon :closable="false"></el-alert>
+    <br/>
     <div>
       <div v-for="accessToken in accessTokens">
         <el-input suffix-icon="el-icon-copy-document" v-model="accessToken" class="access-token-input" @focus="onCopyAccessToken" size="small"></el-input>