From 046bad0828a1210be99304a68fc4c554c9f1211f Mon Sep 17 00:00:00 2001
From: brian treese <brian@socreate.it>
Date: Fri, 29 Sep 2017 09:55:38 -0700
Subject: [PATCH 1/4] remove link transitions

---
 src/app/app.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 270cfdde..a82dbba0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -153,7 +153,6 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
       display: flex;
       padding: 4px 3px;
       width: 100%;
-      transition: background 0.2s ease-out;
     }
 
     .command-bar__scenario-link:hover,

From c96047fe75a18b43dbada7a911784f9b8a20df35 Mon Sep 17 00:00:00 2001
From: brian treese <brian@socreate.it>
Date: Fri, 29 Sep 2017 09:57:04 -0700
Subject: [PATCH 2/4] prevent list item headers from inheriting font family

---
 src/app/app.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a82dbba0..b95c85ac 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -117,6 +117,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
       align-items: center;
       color: rgba(255, 255, 255, .5);
       display: flex;
+      font-family: Consolas, monospace;
       font-size: 12px;
       font-weight: normal;
       justify-content: space-between;

From f7a3cc938447b7bdc299bebb61042e267a7deec6 Mon Sep 17 00:00:00 2001
From: brian treese <brian@socreate.it>
Date: Fri, 29 Sep 2017 10:08:25 -0700
Subject: [PATCH 3/4] set command bar to show hide with css to maintain scroll
 position

---
 src/app/app.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b95c85ac..01359816 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -267,7 +267,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
   `],
   template: `
     <div class="shield" *ngIf="commandBarActive" (click)="toggleCommandBar()"></div>
-    <div class="command-bar" *ngIf="commandBarActive" [class.command-bar--open]="commandBarActive">
+    <div class="command-bar" [class.command-bar--open]="commandBarActive">
       <input
         class="command-bar__filter"
         type="text"

From 37e9433caf41737434d4b3ec21553231ec965862 Mon Sep 17 00:00:00 2001
From: brian treese <brian@socreate.it>
Date: Fri, 29 Sep 2017 10:13:01 -0700
Subject: [PATCH 4/4] change the initial none message to be centered without
 affecting sandboxed component displays

---
 src/app/app.component.ts | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 01359816..867a01f8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -245,7 +245,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
     }
 
     /* Content */
-    .content {
+    .content__none {
       align-items: center;
       border: 0;
       display: flex;
@@ -255,12 +255,13 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
       width: 100%;
     }
 
-    .content__none {
+    .content__none-message {
       font-family: Consolas, monospace;
       max-width: 50%;
+      text-align: center;
     }
 
-    .content__none em {
+    .content__none-message em {
       color: #666;
     }
 
@@ -978,15 +979,17 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
     </div>
     <section class="content">
       <div class="content__none" *ngIf="!selectedSandboxAndScenarioKeys.sandboxKey">
-        <p *ngIf="totalSandboxes > 0">
-          The playground has {{totalSandboxes}} sandboxed component{{totalSandboxes > 1 ? 's' : ''}}.
-        </p>
-        <p *ngIf="totalSandboxes === 0">
-          The playground does not have any sandboxed components.
-        </p>
-        <p>
-          Search sandboxed components: <strong>ctrl + o</strong> <em>or</em> <strong>F1</strong>
-        </p>
+        <div class="content__none-message">
+          <p *ngIf="totalSandboxes > 0">
+            The playground has {{totalSandboxes}} sandboxed component{{totalSandboxes > 1 ? 's' : ''}}.
+          </p>
+          <p *ngIf="totalSandboxes === 0">
+            The playground does not have any sandboxed components.
+          </p>
+          <p>
+            Search sandboxed components: <strong>ctrl + o</strong> <em>or</em> <strong>F1</strong>
+          </p>
+        </div>
       </div>
       <ng-container *ngIf="selectedSandboxAndScenarioKeys.sandboxKey">
         <ap-scenario [selectedSandboxAndScenarioKeys]="selectedSandboxAndScenarioKeys"></ap-scenario>