From 024b526ef0366658a1adcd237e3046e600106177 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 1 Sep 2016 17:43:19 +0200
Subject: [PATCH] Try out a label rather than icon for open-term-in-new-browser

We call it, POP OUT. And we think you're going to love it.
---
 client/app/scripts/components/terminal.js |  8 +++++---
 client/app/styles/main.less               | 12 +++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index 7a75650a5..a514a7b3b 100644
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -255,9 +255,11 @@ class Terminal extends React.Component {
         <div className="terminal-header-tools">
           <span
             title="Open in new browser window"
-            className="terminal-header-tools-icon fa fa-external-link"
-            onClick={this.handlePopoutTerminal} />
-          <span title="Close" className="terminal-header-tools-icon fa fa-close"
+            className="terminal-header-tools-item"
+            onClick={this.handlePopoutTerminal}>
+          Pop out
+          </span>
+          <span title="Close" className="terminal-header-tools-item-icon fa fa-close"
             onClick={this.handleCloseClick} />
         </div>
         <span className="terminal-header-title">{this.getTitle()}</span>
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index cc3e71a4a..12cab739b 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1010,7 +1010,7 @@ h2 {
       right: 8px;
       top: 6px;
 
-      &-icon {
+      &-item, &-item-icon {
         .palable;
         padding: 4px 5px;
         color: @white;
@@ -1018,11 +1018,21 @@ h2 {
         opacity: 0.7;
         border: 1px solid rgba(255, 255, 255, 0);
         border-radius: 10%;
+
+        font-size: 0.8em;
+        font-weight: bold;
+        text-transform: uppercase;
+        word-spacing: -4px;
+
         &:hover {
           opacity: 1;
           border-color: rgba(255, 255, 255, 0.6);
         }
       }
+
+      &-item-icon {
+        font-size: 1em;
+      }
     }
   }