From fdff07a81e1d7a23b971cb6d258fadd205d133e8 Mon Sep 17 00:00:00 2001
From: Opender Singh <opender.singh@konghq.com>
Date: Tue, 16 Feb 2021 17:07:26 +1300
Subject: [PATCH] Update pull and create dropdown styling (#3080)

---
 .../dropdowns/remote-workspaces-dropdown.js   | 26 ++++++++++++-------
 .../app/ui/components/wrapper-home.js         | 10 +++----
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/dropdowns/remote-workspaces-dropdown.js b/packages/insomnia-app/app/ui/components/dropdowns/remote-workspaces-dropdown.js
index c8403f809c..5011d0404b 100644
--- a/packages/insomnia-app/app/ui/components/dropdowns/remote-workspaces-dropdown.js
+++ b/packages/insomnia-app/app/ui/components/dropdowns/remote-workspaces-dropdown.js
@@ -6,7 +6,7 @@ import { AUTOBIND_CFG } from '../../../common/constants';
 import * as session from '../../../account/session';
 import VCS from '../../../sync/vcs';
 import type { Project } from '../../../sync/types';
-import { Dropdown, DropdownDivider, DropdownItem, Button } from 'insomnia-components';
+import { Dropdown, DropdownDivider, DropdownItem, Button, Tooltip } from 'insomnia-components';
 import type { Workspace } from '../../../models/workspace';
 import HelpTooltip from '../help-tooltip';
 import * as models from '../../../models';
@@ -125,13 +125,26 @@ class RemoteWorkspacesDropdown extends React.Component<Props, State> {
     this._refreshRemoteWorkspaces();
   }
 
+  renderButton(disabled = false) {
+    return (
+      <Button className={this.props.className} disabled={disabled}>
+        Pull
+        <i className="fa fa-caret-down pad-left-sm" />
+      </Button>
+    );
+  }
+
   render() {
-    const { className, workspaces } = this.props;
+    const { workspaces } = this.props;
 
     const { loading, remoteProjects, localProjects, pullingProjects } = this.state;
 
     if (!session.isLoggedIn()) {
-      return null;
+      return (
+        <Tooltip message="Please log in to access your remote collections" position="bottom">
+          {this.renderButton(true)}
+        </Tooltip>
+      );
     }
 
     const missingRemoteProjects = remoteProjects.filter(({ id, rootDocumentId }) => {
@@ -144,12 +157,7 @@ class RemoteWorkspacesDropdown extends React.Component<Props, State> {
       return !(workspaceExists && localProjectExists);
     });
 
-    const button = (
-      <Button variant="contained" bg="surprise" className={className}>
-        Pull
-        <i className="fa fa-caret-down pad-left-sm" />
-      </Button>
-    );
+    const button = this.renderButton();
 
     return (
       <Dropdown onOpen={this._refreshRemoteWorkspaces} renderButton={button}>
diff --git a/packages/insomnia-app/app/ui/components/wrapper-home.js b/packages/insomnia-app/app/ui/components/wrapper-home.js
index d4f7fb2263..aad27bf135 100644
--- a/packages/insomnia-app/app/ui/components/wrapper-home.js
+++ b/packages/insomnia-app/app/ui/components/wrapper-home.js
@@ -442,14 +442,14 @@ class WrapperHome extends React.PureComponent<Props, State> {
     return (
       <Dropdown renderButton={button}>
         <DropdownDivider>New</DropdownDivider>
-        <DropdownItem icon={<i className="fa fa-pencil" />} onClick={this._handleDocumentCreate}>
+        <DropdownItem icon={<i className="fa fa-file-o" />} onClick={this._handleDocumentCreate}>
           Blank Document
         </DropdownItem>
-        <DropdownItem icon={<i className="fa fa-pencil" />} onClick={this._handleCollectionCreate}>
-          Blank Collection
+        <DropdownItem icon={<i className="fa fa-bars" />} onClick={this._handleCollectionCreate}>
+          Request Collection
         </DropdownItem>
         <DropdownDivider>Import From</DropdownDivider>
-        <DropdownItem icon={<i className="fa fa-file" />} onClick={this._handleImportFile}>
+        <DropdownItem icon={<i className="fa fa-plus" />} onClick={this._handleImportFile}>
           File
         </DropdownItem>
         <DropdownItem icon={<i className="fa fa-link" />} onClick={this._handleImportUri}>
@@ -485,8 +485,8 @@ class WrapperHome extends React.PureComponent<Props, State> {
             <span className="fa fa-search filter-icon" />
           </KeydownBinder>
         </div>
-        {this.renderCreateMenu()}
         <RemoteWorkspacesDropdown vcs={vcs} workspaces={workspaces} className="margin-left" />
+        {this.renderCreateMenu()}
       </div>
     );
   }