From 6ddac7c051f40bb38ca34b4ff7340e89e7c61cd1 Mon Sep 17 00:00:00 2001
From: Sumit Arora <er.sumitarora@gmail.com>
Date: Thu, 20 Feb 2020 08:26:41 -0500
Subject: [PATCH] feat(devtools): Applying consistent styling

---
 .../devtools-tabs/devtools-tabs.component.css |  3 ++-
 .../directive-forest.component.css            |  1 +
 .../property-tab-body.component.css           | 12 ++++++++++-
 .../property-tab-body.component.html          |  2 --
 .../property-tab-header.component.css         | 20 ++++++++++++++-----
 .../property-tab-header.component.html        | 18 +++--------------
 .../src/lib/devtools.component.css            | 17 ++++++++++++----
 .../src/lib/devtools.component.html           | 13 ++++++------
 8 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css
index 6d2862d4f5e..c7e48d882a4 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css
+++ b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css
@@ -56,7 +56,8 @@ mat-tab-group {
 }
 
 /deep/ .mat-tab-body-wrapper {
-  height: calc(100% - 49px);
+  height: 100%;
+  /* height: calc(100% - 49px); */
   /* 100% - header */
 }
 
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css
index b608945192c..ce5f7674bb3 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.css
@@ -127,4 +127,5 @@
   padding-left: 5px;
   padding-right: 5px;
   line-height: 20px;
+  width: auto;
 }
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.css
index 850875582bd..0ca72dc5263 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.css
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.css
@@ -1,6 +1,7 @@
 .explorer-panel header {
   background-color: #eee;
-  padding: 0 5px;
+  padding-left: 9px;
+  border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   color: hsla(0, 0%, 32%, 1);
   white-space: nowrap;
@@ -8,7 +9,16 @@
   overflow: hidden;
   line-height: 25px;
   font-size: 12px;
+  font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
+/deep/ .mat-button,
+.mat-icon-button {
+  height: 18px;
+  width: 18px;
+  line-height: 15px;
+  margin-right: 7px;
+}
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.html
index e46a054f2da..deada11e07b 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.html
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-tab-body.component.html
@@ -8,8 +8,6 @@
           xmlns:xlink="http://www.w3.org/1999/xlink"
           aria-hidden="true"
           focusable="false"
-          width="1em"
-          height="1em"
           preserveAspectRatio="xMidYMid meet"
           viewBox="0 0 8 8"
         >
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.css b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.css
index 4fdc26a718b..abc13d8538a 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.css
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.css
@@ -2,15 +2,25 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: 40px;
+  font-size: 12px;
 }
 
 .element-header .component-name {
-  margin-left: 8px;
-  font-weight: 400;
+  margin-left: 10px;
+  font-weight: 700;
+  line-height: 25px;
 }
 
 .element-header .element-name {
-  margin-left: 8px;
-  font-weight: 300;
+  margin-left: 10px;
+  line-height: 25px;
+  font-weight: 700;
+}
+
+/deep/ .mat-button,
+.mat-icon-button {
+  height: 25px;
+  width: 25px;
+  line-height: 25px;
+  margin-right: 5px;
 }
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.html
index 16cc4db94c2..cf41b7165ef 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.html
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/property-tab-header.component.html
@@ -3,21 +3,9 @@
     <ng-container *ngIf="currentSelectedElement.component; else currentElementIsDOMElement">
       <div class="component-name">{{ currentSelectedElement.component.name }}</div>
       <button mat-icon-button (click)="viewSource.emit()">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          aria-hidden="true"
-          focusable="false"
-          width="1em"
-          height="1em"
-          preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M7.375 16.781l1.25-1.562L4.601 12l4.024-3.219l-1.25-1.562l-5 4a1 1 0 0 0 0 1.562l5 4zm9.25-9.562l-1.25 1.562L19.399 12l-4.024 3.219l1.25 1.562l5-4a1 1 0 0 0 0-1.562l-5-4z"
-            fill="#626262"
-          />
-          <path d="M14.976 3.216l-4 18l-1.953-.434l4-18z" fill="#626262" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
         </svg>
       </button>
     </ng-container>
diff --git a/projects/ng-devtools/src/lib/devtools.component.css b/projects/ng-devtools/src/lib/devtools.component.css
index 2d9d79fec3d..a908bd0352d 100644
--- a/projects/ng-devtools/src/lib/devtools.component.css
+++ b/projects/ng-devtools/src/lib/devtools.component.css
@@ -1,8 +1,10 @@
-:host, .devtools-wrapper {
+:host,
+.devtools-wrapper {
   width: 100%;
   height: 100%;
   display: block;
 }
+
 .noselect {
   user-select: none;
 }
@@ -16,7 +18,7 @@
 }
 
 .initializing .loading {
-  background: url("./images/angular.svg");
+  background: url('./images/angular.svg');
   border-radius: 50%;
   width: 125px;
   height: 125px;
@@ -25,12 +27,19 @@
   animation: pulse 1s infinite;
 }
 
-@keyframes pulse
-{
+@keyframes pulse {
   0% {
     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
   }
+
   100% {
     box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
   }
 }
+
+.text-message {
+  font-weight: 500;
+  font-size: 14px;
+  padding: 5px;
+  text-align: center;
+}
diff --git a/projects/ng-devtools/src/lib/devtools.component.html b/projects/ng-devtools/src/lib/devtools.component.html
index f71858a05e6..97b9ddf2e43 100644
--- a/projects/ng-devtools/src/lib/devtools.component.html
+++ b/projects/ng-devtools/src/lib/devtools.component.html
@@ -6,22 +6,22 @@
   </ng-container>
   <ng-template #notSupported>
     <ng-container *ngIf="prodMode; else versionTooLow">
-      <div>
+      <p class="text-message">
         Angular Devtools only supports dev mode.
-      </div>
+      </p>
     </ng-container>
     <ng-template #versionTooLow>
-      <div>
+      <p class="text-message">
         Angular Devtools only supports Angular versions 9 and above.
-      </div>
+      </p>
     </ng-template>
   </ng-template>
 </ng-container>
 <ng-template #errorOrLoad>
   <ng-container *ngIf="angularExists === false; else load">
-    <div>
+    <p class="text-message">
       Not an Angular app
-    </div>
+    </p>
   </ng-container>
   <ng-template #load>
     <div class="initializing" *ngIf="angularExists === null">
@@ -29,4 +29,3 @@
     </div>
   </ng-template>
 </ng-template>
-