From 6387e0067f6a972b7985d78c7c8f435f258d48f9 Mon Sep 17 00:00:00 2001
From: Michael Lu <38804680+Yamazaki93@users.noreply.github.com>
Date: Sun, 20 Oct 2019 14:45:57 -0700
Subject: [PATCH] Tidy up UI a bit

---
 .../request-list-node.component.html                |  8 ++++----
 .../server-list-item.component.html                 |  8 ++++----
 .../connection/connection.component.html            | 13 +++++--------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/frontend/src/app/requests/request-list-node/request-list-node.component.html b/app/frontend/src/app/requests/request-list-node/request-list-node.component.html
index 0d812e0..dee68bc 100644
--- a/app/frontend/src/app/requests/request-list-node/request-list-node.component.html
+++ b/app/frontend/src/app/requests/request-list-node/request-list-node.component.html
@@ -2,10 +2,10 @@
   <div class="w-full flex cursor-pointer flex-shrink-0 pl-2 hover:text-primary" (click)="expandOrLoad($event)"
   (dblclick)="send($event)"
     [class.text-gray-700]="!canSendRequest() && hasRequest()">
-    <h1 class="text-xl mr-2 flex-shrink-0" *ngIf="data.children.length">
+    <h1 class="text-xl mr-3 flex-shrink-0" *ngIf="data.children.length">
       <i [class.ion-md-folder]="!data.expanded" [class.ion-md-folder-open]="data.expanded"></i>
     </h1>
-    <h1 class="text-xl mr-2 flex-shrink-0" *ngIf="hasRequest()">
+    <h1 class="text-xl mr-1 flex-shrink-0" *ngIf="hasRequest()">
       <i class="ion-md-cube"></i>
     </h1>
     <h1 class="text-lg flex-shrink min-w-0 w-full">
@@ -20,11 +20,11 @@ <h1 class="text-lg flex-shrink-0 hover:text-success mr-2" title="Load request" *
     <h1 class="text-lg flex-shrink-0 hover:text-success mr-2" title="Send request" *ngIf="canSendRequest()" (click)="send($event)">
       <i class="ion-md-send"></i>
     </h1>
-    <h1 class="text-lg cursor-no flex-shrink-0 text-danger mr-2" *ngIf="!canSendRequest() && hasRequest()">
+    <h1 class="text-lg cursor-no flex-shrink-0 text-danger mr-2" *ngIf="!canSendRequest() && hasRequest()" title="Not compatible with the current active connection">
       <i class="ion-md-remove-circle-outline"></i>
     </h1>
   </div>
-  <div class="flex-shirink min-h-0 pl-2" *ngIf="data.expanded">
+  <div class="flex-shirink min-h-0 pl-4" *ngIf="data.expanded">
     <app-request-list-node *ngFor="let c of data.children | nodeFilter:currentType:hideIncompatible" [data]="c"></app-request-list-node>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/frontend/src/app/servers/server-list-item/server-list-item.component.html b/app/frontend/src/app/servers/server-list-item/server-list-item.component.html
index f1d54ac..ee0954a 100644
--- a/app/frontend/src/app/servers/server-list-item/server-list-item.component.html
+++ b/app/frontend/src/app/servers/server-list-item/server-list-item.component.html
@@ -1,10 +1,10 @@
-<div class="p-2 relative flex items-center raised-1 hover:bg-gray-900 cursor-pointer" (click)="connect()">
-  <div class="flex-shrink-0 mr-2">
+<div class="py-2 relative flex items-center raised-1 hover:bg-gray-900 cursor-pointer" (click)="connect()">
+  <div class="flex-shrink-0 mx-4">
     <h1 class="text-xl" [class.text-warning]="!cfg.Secured" [class.text-success]="cfg.Secured">
       <i [class.ion-md-unlock]="!cfg.Secured" [class.ion-md-lock]="cfg.Secured"></i>
     </h1>
   </div>
-  <div class="flex flex-col flex-shrink mr-1 min-w-0 w-full">
+  <div class="flex flex-col flex-shrink min-w-0 w-full">
     <h1 class="text-base truncate mr-3">{{cfg.Server}}</h1>
     <h3 class="text-xs text-gray-500 truncate">
       {{cfg.FullURL}}
@@ -13,7 +13,7 @@ <h3 class="text-xs text-gray-500 truncate">
   <div class="cursor-pointer hover:text-danger p-2 flex-shrink-0" title="Delete server" (click)="delete($event)">
     <h1 class="text-2xl"><i class="ion-md-trash"></i></h1>
   </div>
-  <div class="cursor-pointer hover:text-primary p-2 flex-shrink-0" title="Open new connection" (click)="createNewConnection($event)">
+  <div class="cursor-pointer hover:text-primary p-2 flex-shrink-0 mr-2" title="Open new connection" (click)="createNewConnection($event)">
     <h1 class="text-2xl"><i class="ion-md-open"></i></h1>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/frontend/src/app/websocket-servers/connection/connection.component.html b/app/frontend/src/app/websocket-servers/connection/connection.component.html
index b369411..dba3637 100644
--- a/app/frontend/src/app/websocket-servers/connection/connection.component.html
+++ b/app/frontend/src/app/websocket-servers/connection/connection.component.html
@@ -1,17 +1,14 @@
 <div class="flex flex-col w-full h-full min-h-0 relative text-white">
-  <h3 class="text-lg p-2">Request:</h3>
-  <label class="block uppercase tracking-wide text-gray-400 text-xs mb-1 ml-2" for="grid-zip">
-    Save Request To Requests List
-  </label>
+  <h3 class="text-lg p-2">Request</h3>
   <div class="w-full px-2 flex flex-shrink-0 items-center">
     <div class="min-w-0 w-full">
       <input [(ngModel)]="requestName" name="requestName"
         class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-1 px-2 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-        id="grid-zip" type="text" placeholder="Request Name. You can use '/' to group requests">
+        id="grid-zip" type="text" placeholder="Request Name. Use '/' to group requests">
     </div>
     <div class="flex-shrink-0 ml-2">
       <button class="btn btn-primary mr-2" (click)="saveRequest()">
-        Save
+        Save To Requests
       </button>
     </div>
   </div>
@@ -22,10 +19,10 @@ <h3 class="text-lg p-2">Request:</h3>
     <button class="btn btn-primary mr-2" (click)="sendRequest()">
       Send
     </button>
-    <p class="text-gray-400">Ctrl + Enter</p>
+    <p class="text-sm text-gray-400">Ctrl + Enter</p>
   </div>
   <div class="w-full p-2 flex flex-row flex-shrink-0">
-    <h3 class="text-lg mr-2">Response:</h3>
+    <h3 class="text-lg mr-2">Response</h3>
     <h3 class="text-lg text-danger" *ngIf="err">{{err}}</h3>
   </div>
   <div class="h-full min-h-0 flex-shrink relative">