From 7194fcb2bae6799a98388923537b06e903fb2a64 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Thu, 22 Nov 2018 14:19:33 +0000
Subject: [PATCH 1/2] Fix CLI info formatting

---
 .../cli-info/cli-info.component.html          | 13 ++++++-------
 .../code-block/code-block.component.html      |  8 ++++----
 .../code-block/code-block.component.scss      | 19 +++++++++++--------
 .../code-block.component.theme.scss           |  3 +++
 4 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/frontend/app/shared/components/cli-info/cli-info.component.html b/src/frontend/app/shared/components/cli-info/cli-info.component.html
index c0c6e6773d..98af59909e 100644
--- a/src/frontend/app/shared/components/cli-info/cli-info.component.html
+++ b/src/frontend/app/shared/components/cli-info/cli-info.component.html
@@ -12,15 +12,14 @@ <h4>Getting Started</h4>
       <app-code-block>cf api {{context.apiEndpoint || '[Cloud Foundry API endpoint]'}}</app-code-block>
 
       <p>3. Login</p>
-      <app-code-block codeBlockStyle="pre" hide-copy="true">$ cf login
-        API endpoint: {{context.apiEndpoint || '[Cloud Foundry API endpoint]'}}
+      <app-code-block codeBlockStyle="pre" hideCopy="true"><pre>$ cf login
+API endpoint: <b>{{context.apiEndpoint || '[Cloud Foundry API endpoint]'}}</b>
 
-        Email> {{context.username || '[username]'}}
+Email> {{context.username || '[username]'}}
 
-        Password> [password]
-        Authenticating...
-        OK
-      </app-code-block>
+Password> [password]
+Authenticating...
+<b>OK</b></pre></app-code-block>
 
       <p>4. Target an org and space</p>
       <app-code-block>cf target -o "{{context.orgName || '[organization name]'}}" -s "{{context.spaceName || '[space name]'}}"
diff --git a/src/frontend/app/shared/components/code-block/code-block.component.html b/src/frontend/app/shared/components/code-block/code-block.component.html
index e4148454b5..fde26a299f 100644
--- a/src/frontend/app/shared/components/code-block/code-block.component.html
+++ b/src/frontend/app/shared/components/code-block/code-block.component.html
@@ -1,8 +1,8 @@
-<div class="app-code-block" [ngClass]="{'app-code-block__success': _copySuccessWait}">
-  <div #preBlock>
+<div class="app-code-block" [ngClass]="{'app-code-block__success': _copySuccessWait, 'app-code-block__pre': codeBlockStyle === 'pre'}">
+  <div class="app-code-block__content" #preBlock>
     <ng-content></ng-content>
-  </div>
-  <div class="app-code-block__copied-div">
+</div>
+<div class="app-code-block__copied-div">
     <span class="app-code-block__copied-msg">Copied to clipboard</span>
     <mat-icon class="app-code-block__copied-icon">check_circle</mat-icon>
   </div>
diff --git a/src/frontend/app/shared/components/code-block/code-block.component.scss b/src/frontend/app/shared/components/code-block/code-block.component.scss
index 394e9d5773..c0854d4858 100644
--- a/src/frontend/app/shared/components/code-block/code-block.component.scss
+++ b/src/frontend/app/shared/components/code-block/code-block.component.scss
@@ -1,20 +1,23 @@
 .app-code-block {
-  min-height: 44px;
   padding: 10px 20px;
   position: relative;
-  &__pre {
-    white-space: pre-line;
+  &__content {
+    display: flex;
+    flex-direction: column;
+    font-family: 'Source Code Pro', monospace;
+    font-size: 14px;    
+    justify-content: center;
+    margin-right: 20px; // Prevent text overlapping copy button
   }
-  pre {
-    margin: 0;
-    white-space: pre-line;
-    word-wrap: break-word;
+ &__pre {
+   // For wrapped PRE, vertical padding is already on the PRE element, so remove it here
+    padding: 0 20px;
   }
   &__copied-div,
   &__copy-icon {
     position: absolute;
     right: 10px;
-    top: 10px;
+    top: 6px;
     transition: opacity 250ms linear;
   }
   &__copied-div {
diff --git a/src/frontend/app/shared/components/code-block/code-block.component.theme.scss b/src/frontend/app/shared/components/code-block/code-block.component.theme.scss
index a927b39d54..cf2b72ce18 100644
--- a/src/frontend/app/shared/components/code-block/code-block.component.theme.scss
+++ b/src/frontend/app/shared/components/code-block/code-block.component.theme.scss
@@ -9,5 +9,8 @@
     &___copied-icon {
       color: mat-color($primary);
     }
+    &__copied-div {
+      background-color: mat-color($foreground-colors, text);
+    }
   }
 }

From 580bdcb074119abd885b50465d3ab3c29c09b2f0 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nwmac@users.noreply.github.com>
Date: Thu, 22 Nov 2018 14:30:22 +0000
Subject: [PATCH 2/2] Fix code climate lint issues

---
 .../shared/components/code-block/code-block.component.scss    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/app/shared/components/code-block/code-block.component.scss b/src/frontend/app/shared/components/code-block/code-block.component.scss
index c0854d4858..1cca0184e7 100644
--- a/src/frontend/app/shared/components/code-block/code-block.component.scss
+++ b/src/frontend/app/shared/components/code-block/code-block.component.scss
@@ -5,11 +5,11 @@
     display: flex;
     flex-direction: column;
     font-family: 'Source Code Pro', monospace;
-    font-size: 14px;    
+    font-size: 14px;
     justify-content: center;
     margin-right: 20px; // Prevent text overlapping copy button
   }
- &__pre {
+  &__pre {
    // For wrapped PRE, vertical padding is already on the PRE element, so remove it here
     padding: 0 20px;
   }