From eed88f21f0a49ca264e214437c3ff2a7472c71d2 Mon Sep 17 00:00:00 2001
From: Fabian Castillo <fcastill@tibco.com>
Date: Thu, 9 Mar 2017 18:41:24 -0800
Subject: [PATCH] Removed duplicated entry in help menu.

And adjusted walkthrough modal styles.
---
 .../components/instructions.component.less    | 32 ++++++++++++++++---
 .../components/instructions.tpl.html          |  4 +--
 .../app/flogo/components/flogo.component.ts   |  5 ---
 .../app/flogo/components/navbar.tpl.html      |  3 --
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/client/app/flogo.instructions/components/instructions.component.less b/src/client/app/flogo.instructions/components/instructions.component.less
index d24c42f78..c5f84516f 100644
--- a/src/client/app/flogo.instructions/components/instructions.component.less
+++ b/src/client/app/flogo.instructions/components/instructions.component.less
@@ -4,9 +4,15 @@
   padding: 0;
 }
 
+// need to use a string as less throws an error if we try to use /deep/ directly
+@deep: ~"/deep/";
+@{deep} .flogo-instructions-modal {
+  max-width: 980px;
+}
+
 .flogo-instructions {
   margin: -30px;
-  padding: 60px 60px 40px;
+  padding: 40px 40px 20px;
 }
 
 .flogo-instructions-header {
@@ -14,9 +20,27 @@
 }
 
 .flogo-instructions-panel {
-  display:flex;
+  display: flex;
   flex-direction: row;
-  margin-left: -60px;
+  margin-left: -40px;
+}
+
+@media (max-width: 768px) {
+  .flogo-instructions {
+    margin: -20px;
+    padding: 20px 20px 10px;
+  }
+
+  .flogo-instructions-panel {
+    margin: 0;
+    flex-direction: column;
+  }
+
+  @{deep} .flogo-instructions-modal {
+    margin: 0 auto;
+    width: 95%;
+  }
+
 }
 
 .flogo-instructions-footer {
@@ -50,6 +74,7 @@
 }
 
 .flogo-instructions-modal-close {
+  color: #b5b5b5;
   position: fixed;
   top: 44px;
   right: 44px;
@@ -57,7 +82,6 @@
   height: 18px;
   width: 18px;
 
-  background: #fff url('/assets/svg/flogo.close.svg') no-repeat center center;
   cursor: pointer;
 }
 
diff --git a/src/client/app/flogo.instructions/components/instructions.tpl.html b/src/client/app/flogo.instructions/components/instructions.tpl.html
index 2f61268f6..473bc672a 100644
--- a/src/client/app/flogo.instructions/components/instructions.tpl.html
+++ b/src/client/app/flogo.instructions/components/instructions.tpl.html
@@ -1,9 +1,9 @@
-<modal [size]="'lg'" #instructionsModal (onClose)="onModalCloseOrDismiss($event)"
+<modal cssClass="flogo-instructions-modal" #instructionsModal (onClose)="onModalCloseOrDismiss($event)"
        (onDismiss)="onModalCloseOrDismiss($event)">
   <div class="flogo-instructions">
     <div class="flogo-instructions-header">
       <h3 class="flogo-instructions-modal-title">Getting started with Flogo</h3>
-      <i class="flogo-instructions-modal-close" (click)="closeModal()"></i>
+      <i class="flogo-icon-close flogo-instructions-modal-close" (click)="closeModal()"></i>
     </div>
 
     <div class="flogo-instructions-panel">
diff --git a/src/client/app/flogo/components/flogo.component.ts b/src/client/app/flogo/components/flogo.component.ts
index 729e6df02..b312472ea 100644
--- a/src/client/app/flogo/components/flogo.component.ts
+++ b/src/client/app/flogo/components/flogo.component.ts
@@ -5,10 +5,6 @@ import { LoadingStatusService } from '../../../common/services/loading-status.se
 import { LanguageService } from '../../../common/services/language.service';
 import { Observable } from 'rxjs/Observable';
 
-//todo:remove
-import 'rxjs/add/operator/do';
-
-
 @Component({
   selector: 'flogo-app',
   moduleId: module.id,
@@ -40,7 +36,6 @@ export class FlogoAppComponent implements OnInit {
     });
 
     this.activatedRoute.queryParams
-      .do(params => console.log('params', params))
       .subscribe((params: Params) => this.showNav = !params['nonav']);
 
   }
diff --git a/src/client/app/flogo/components/navbar.tpl.html b/src/client/app/flogo/components/navbar.tpl.html
index 4b615accf..9f614d15f 100644
--- a/src/client/app/flogo/components/navbar.tpl.html
+++ b/src/client/app/flogo/components/navbar.tpl.html
@@ -10,9 +10,6 @@
         <li><a href="https://www.youtube.com/watch?v=OHX4kKVdI28&feature=youtu.be" target="_blank">{{ 'NAVBAR:HELP-GETTING-STARTED' | translate }}</a></li>
         <li><a (click)="activateInstructions($event)">{{ 'NAVBAR:HELP-OPEN-INSTRUCTIONS' | translate }}</a></li>
         <li><a href="https://community.tibco.com/products/project-flogo?_ga=1.213003284.1423112884.1479356766" target="_blank">{{ 'NAVBAR:HELP-COMMUNITY' | translate }}</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="https://github.com/TIBCOSoftware/flogo" target="_blank">{{ 'NAVBAR:HELP-GETTING-STARTED' | translate }}</a></li>
-        <li><a href="https://community.tibco.com/exchange?_ga=1.213003284.1423112884.1479356766" target="_blank">{{ 'NAVBAR:HELP-CONNECTORS' | translate }}</a></li>
       </ul>
     </div>
   </div>