From 8c911fcc2ce984696b72a2c6513bcee2b10c40f3 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Mon, 26 Oct 2015 12:34:57 +0100
Subject: [PATCH] add eye icon and tooltip to profile token toggle

---
 app/styles/app/layouts/profile.sass  | 21 +++++++++++++++++++++
 app/styles/app/modules/tooltips.sass |  8 ++++++++
 app/templates/profile/accounts.hbs   | 18 +++++++++++++++---
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass
index e3a183e5..ca0634a6 100644
--- a/app/styles/app/layouts/profile.sass
+++ b/app/styles/app/layouts/profile.sass
@@ -239,6 +239,27 @@ p.profile-user-last
     right: 1em
     @extend .icon--dismiss-red
 
+.profile-token-toggle
+  .icon-eye
+    vertical-align: middle
+    path
+      fill: #B6B7B9
+    polygon
+      stroke: #B6B7B9
+      fill: #fff
+    &:hover
+      path
+        fill: #666666
+      polygon
+        stroke: #666666
+        fill: #fff
+  &.is-visible
+    .icon-eye
+      polygon
+        fill: #B6B7B9
+      &:hover
+        polygon
+          fill: #666666
 
 #unadministerable-hooks
   p
diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass
index 7a8625dc..cc6b17f2 100644
--- a/app/styles/app/modules/tooltips.sass
+++ b/app/styles/app/modules/tooltips.sass
@@ -84,3 +84,11 @@
     height: 3.2em
     &:before
       left: 2em
+
+.tooltip--profile
+  @extend %tooltip
+  .tooltip-bubble
+    left: -120%
+    &:before
+      left: 35%
+
diff --git a/app/templates/profile/accounts.hbs b/app/templates/profile/accounts.hbs
index 71226e63..f2805372 100644
--- a/app/templates/profile/accounts.hbs
+++ b/app/templates/profile/accounts.hbs
@@ -12,10 +12,22 @@
         <p class="profile-user-last">Token: 
 
         {{#if isVisible}}
-          <strong>{{auth.currentUser.token}}</strong><a {{action 'tokenVisibility'}} class="profile-token-toggle">&lharu;</a>
-        {{else}}
-          <a {{action 'tokenVisibility'}} class="profile-token-toggle">&rharu;</a>
+          <strong>{{auth.currentUser.token}}</strong>
         {{/if}}
+        <a {{action 'tokenVisibility'}} class="profile-token-toggle tooltip--profile {{if isVisible 'is-visible'}} dropdown">
+          <span class="tooltip-bubble">
+            {{#if isVisible}}hide token{{else}}show token{{/if}}
+          </span>
+          <span class="icon-eye">
+            <svg x="0px" y="0px" viewBox="2 -1 17 17" width="20" height="18" xml:space="preserve">
+              <g>
+                <path  d="M17.4,9.6c-0.1-0.2-3.3-4.1-7.4-4.1s-7.3,4-7.4,4.1c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.2,3.3,4.1,7.4,4.1
+                  s7.3-4,7.4-4.1C17.6,10.2,17.6,9.8,17.4,9.6z M10,13.2c-2.8,0-5.2-2.3-6.1-3.2C4.8,9.1,7.2,6.8,10,6.8c2.8,0,5.2,2.3,6.1,3.2
+                  C15.2,10.9,12.8,13.2,10,13.2z"/>
+                <polygon points="10 7, 7.4000000954 10, 10 13, 12.5999999046 10, 10 7"/>
+              </g>
+            </svg>
+          </span></a>
         </p>
       </div>
     </div>