Merge pull request #176 from vctrfrnndz/add-installed-button

Add installed button styles and text change

Author: sebadoom

css/app.css

@@ -2,7 +2,7 @@
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-PT2SNS');</script><!-- End Google Tag Manager —>--><nav class="navbar closed"><div class="container"><div class="top-mobile"><div class="menu-trigger"><span></span></div><a href="/" class="brand"><img src="/img/pic_logo.svg" class="icon"><img src="/img/logo.svg" class="logo"></a></div><nav class="menu"><a href="#debugger-io" class="scrollto">Debugger</a><a href="#libraries-io" class="scrollto">Libraries</a><a href="/introduction">Introduction</a><a href="https://ask.auth0.com/category/jwt" target="_blank">Ask</a><a href="http://swag.auth0.com/" target="_blank">Get a T-shirt!</a></nav><div class="social"><a href="https://auth0.com/" target="_blank" class="a0"><img src="/img/ico_a0_white.svg"></a><a href="https://twitter.com/auth0" target="_blank" class="twitter"><img src="/img/ico_twitter.svg"></a></div><a href="https://auth0.com/" target="_blank" class="supported">Supported by<img src="/img/ico_logo.svg"></a></div></nav><section class="banner-jwt"><div class="container"><a href="/" class="logo"><img src="/img/pic_logo.svg"></a><p>JSON Web Tokens are an open, industry standard&nbsp;<a href="https://tools.ietf.org/html/rfc7519" target="_blank">RFC 7519</a> method for representing claims securely between two parties.</p><p>JWT.IO allows you to decode, verify and generate JWT.</p><a href="/introduction" class="btn btn-lg">Learn more about jwt</a></div></section><section class="update-site"><span><strong>Love JWT.IO? </strong>Bring the debugger to your favorite browser with our new chrome extension.</span><a id="extension-button" class="extension-button"><svg width="14px" height="13px" viewbox="24 11 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="path-1" d="M30.0287226,15.7142857 L30.0287226,11 L31.600907,11 L31.600907,15.7142857 L36.3174603,15.7142857 L36.3174603,17.2857143 L31.600907,17.2857143 L31.600907,22 L30.0287226,22 L30.0287226,17.2857143 L25.3121693,17.2857143 L25.3121693,15.7142857 L30.0287226,15.7142857 Z"></path><filter id="filter-2" x="-50%" y="-50%" width="200%" height="200%" filterunits="objectBoundingBox"><feoffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feoffset><fegaussianblur stddeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></fegaussianblur><fecolormatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></fecolormatrix></filter></defs><g id="Rectangle-213" stroke="none" fill="none"><use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use><use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use></g></svg>Add to chrome</a></section><section id="debugger-io" class="debugger-jwt"><div class="container"><h1>Debugger</h1><div class="jwt-playground"><div class="algorithm"><span>Algorithm</span><div class="hide"><label><input type="radio" name="algorithm" value="HS256" checked=""></label><label><input type="radio" name="algorithm" value="RS256"></label></div><div class="jwt-select"><select><option name="algorithm" value="HS256" selected="">HS256</option><option name="algorithm" value="RS256">RS256</option></select></div></div><div class="algorithm-code"><div class="tab-nav"><div class="tab-link current"><a href="#encoded-jwt">Encoded<small>paste a token here</small></a></div><div class="tab-link"><a href="#decoded-jwt">Decoded<small>edit the payload and secret (only HS256 supported)</small></a></div></div><div class="tab-content"><div id="encoded-jwt" class="box-content current"><div class="input js-input"></div></div><div id="decoded-jwt" class="box-content"><div class="output"><div class="jwt-explained jwt-header"><p class="text-line">HEADER:<span>ALGORITHM & TOKEN TYPE</span></p><div class="js-header"></div></div><div class="jwt-explained jwt-payload"><p class="text-line">PAYLOAD:<span>DATA</span></p><div class="js-payload"></div></div><div class="jwt-explained jwt-signature"><p class="text-line">VERIFY SIGNATURE</p><pre class="pre-encode HS256">HMACSHA256(
+})(window,document,'script','dataLayer','GTM-PT2SNS');</script><!-- End Google Tag Manager —>--><nav class="navbar closed"><div class="container"><div class="top-mobile"><div class="menu-trigger"><span></span></div><a href="/" class="brand"><img src="/img/pic_logo.svg" class="icon"><img src="/img/logo.svg" class="logo"></a></div><nav class="menu"><a href="#debugger-io" class="scrollto">Debugger</a><a href="#libraries-io" class="scrollto">Libraries</a><a href="/introduction">Introduction</a><a href="https://ask.auth0.com/category/jwt" target="_blank">Ask</a><a href="http://swag.auth0.com/" target="_blank">Get a T-shirt!</a></nav><div class="social"><a href="https://auth0.com/" target="_blank" class="a0"><img src="/img/ico_a0_white.svg"></a><a href="https://twitter.com/auth0" target="_blank" class="twitter"><img src="/img/ico_twitter.svg"></a></div><a href="https://auth0.com/" target="_blank" class="supported">Supported by<img src="/img/ico_logo.svg"></a></div></nav><section class="banner-jwt"><div class="container"><a href="/" class="logo"><img src="/img/pic_logo.svg"></a><p>JSON Web Tokens are an open, industry standard&nbsp;<a href="https://tools.ietf.org/html/rfc7519" target="_blank">RFC 7519</a> method for representing claims securely between two parties.</p><p>JWT.IO allows you to decode, verify and generate JWT.</p><a href="/introduction" class="btn btn-lg">Learn more about jwt</a></div></section><section class="update-site"><span><strong>Love JWT.IO? </strong>Bring the debugger to your favorite browser with our new chrome extension.</span><a id="extension-button" class="extension-button"><svg width="14px" height="13px" viewbox="24 11 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="path-1" d="M30.0287226,15.7142857 L30.0287226,11 L31.600907,11 L31.600907,15.7142857 L36.3174603,15.7142857 L36.3174603,17.2857143 L31.600907,17.2857143 L31.600907,22 L30.0287226,22 L30.0287226,17.2857143 L25.3121693,17.2857143 L25.3121693,15.7142857 L30.0287226,15.7142857 Z"></path><filter id="filter-2" x="-50%" y="-50%" width="200%" height="200%" filterunits="objectBoundingBox"><feoffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feoffset><fegaussianblur stddeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></fegaussianblur><fecolormatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></fecolormatrix></filter></defs><g id="Rectangle-213" stroke="none" fill="none"><use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use><use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use></g></svg><span class="button-text">Add to chrome</span></a></section><section id="debugger-io" class="debugger-jwt"><div class="container"><h1>Debugger</h1><div class="jwt-playground"><div class="algorithm"><span>Algorithm</span><div class="hide"><label><input type="radio" name="algorithm" value="HS256" checked=""></label><label><input type="radio" name="algorithm" value="RS256"></label></div><div class="jwt-select"><select><option name="algorithm" value="HS256" selected="">HS256</option><option name="algorithm" value="RS256">RS256</option></select></div></div><div class="algorithm-code"><div class="tab-nav"><div class="tab-link current"><a href="#encoded-jwt">Encoded<small>paste a token here</small></a></div><div class="tab-link"><a href="#decoded-jwt">Decoded<small>edit the payload and secret (only HS256 supported)</small></a></div></div><div class="tab-content"><div id="encoded-jwt" class="box-content current"><div class="input js-input"></div></div><div id="decoded-jwt" class="box-content"><div class="output"><div class="jwt-explained jwt-header"><p class="text-line">HEADER:<span>ALGORITHM & TOKEN TYPE</span></p><div class="js-header"></div></div><div class="jwt-explained jwt-payload"><p class="text-line">PAYLOAD:<span>DATA</span></p><div class="js-payload"></div></div><div class="jwt-explained jwt-signature"><p class="text-line">VERIFY SIGNATURE</p><pre class="pre-encode HS256">HMACSHA256(
   base64UrlEncode(header) + "." +
   base64UrlEncode(payload),
   <input type="text" name="secret" value="secret">

index.html

@@ -736,8 +736,10 @@ document.getElementById('extension-button').addEventListener('click', function(e
         try {
             chrome.webstore.install('https://chrome.google.com/webstore/detail/ppmmlchacdbknfphdeafcbmklcghghmd', function() {
                 button.addClass('is-installed');
+                button.find('.button-text').text('Already installed');
             }, function() {
                 button.removeClass('is-installed');
+                button.find('.button-text').text('Add to chrome');
                 openInWindow();
             });
         } catch(e) {

js/app.js

@@ -366,6 +366,14 @@ body
     line-height: 34px;
     cursor: pointer;
 
+    &.is-installed
+      border-color: #488500;
+      background-color: #5fb000;
+      background-image: linear-gradient(to bottom,#71bf00,#4da100);
+
+      svg
+        display: none;
+
     svg
       fill: #0094c1;
       height: 14px;

stylus/app.styl

@@ -57,7 +57,7 @@ block content
           use(fill='black', fill-opacity='1', filter='url(#filter-2)', xlink:href='#path-1')
           use(fill='#FFFFFF', fill-rule='evenodd', xlink:href='#path-1')
 
-      | Add to chrome
+      span.button-text Add to chrome
 
   section#debugger-io.debugger-jwt
     .container