Some tweaks to request pinning

packages/insomnia-app/app/ui/components/dropdowns/request-actions-dropdown.js

@@ -62,23 +62,28 @@ class RequestActionsDropdown extends PureComponent {
         <DropdownButton>
           <i className="fa fa-caret-down" />
         </DropdownButton>
-        <DropdownItem onClick={this._handleSetRequestPinned}>
+
-          <i className="fa fa-thumb-tack" /> {this.props.isPinned ? 'Unpin' : 'Pin'}
-          <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_TOGGLE_PIN.id]} />
-        </DropdownItem>
         <DropdownItem onClick={this._handleDuplicate}>
           <i className="fa fa-copy" /> Duplicate
           <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_SHOW_DUPLICATE.id]} />
         </DropdownItem>
+
         <DropdownItem onClick={this._handleGenerateCode}>
           <i className="fa fa-code" /> Generate Code
           <DropdownHint
             keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_SHOW_GENERATE_CODE_EDITOR.id]}
           />
         </DropdownItem>
+
+        <DropdownItem onClick={this._handleSetRequestPinned}>
+          <i className="fa fa-thumb-tack" /> {this.props.isPinned ? 'Unpin' : 'Pin'}
+          <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_TOGGLE_PIN.id]} />
+        </DropdownItem>
+
         <DropdownItem onClick={this._handleCopyAsCurl}>
           <i className="fa fa-copy" /> Copy as Curl
         </DropdownItem>
+
         <DropdownItem buttonClass={PromptButton} onClick={this._handleRemove} addIcon>
           <i className="fa fa-trash-o" /> Delete
           <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_SHOW_DELETE.id]} />

packages/insomnia-app/app/ui/components/export-requests/request-group-row.js

@@ -64,7 +64,7 @@ class RequestGroupRow extends React.PureComponent<Props> {
             />
           </div>
           <button onClick={this.handleCollapse}>
-            <i className={'tree__item__icon fa ' + folderIconClass} />
+            <i className={classnames('tree__item__icon', 'fa', folderIconClass)} />
             {requestGroup.name}
             <span className="total-requests">{totalRequests} requests</span>
           </button>

packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.js

@@ -85,7 +85,14 @@ class SidebarRequestGroupRow extends PureComponent {
       connectDropTarget(
         <button onClick={this._handleCollapse} onContextMenu={this._handleShowActions}>
           <div className="sidebar__clickable">
-            <i className={'sidebar__item__icon-right fa ' + folderIconClass} />
+            <i
+              className={classnames(
+                'sidebar__item__icon-right',
+                'fa',
+                'space-right',
+                folderIconClass,
+              )}
+            />
             <Highlight search={filter} text={requestGroup.name} />
             <div
               ref={this._setExpandTagRef}

packages/insomnia-app/app/ui/components/sidebar/sidebar-request-row.js

@@ -126,7 +126,6 @@ class SidebarRequestRow extends PureComponent {
                     <Highlight search={filter} text={value} {...props} />
                   )}
                 />
-                {isPinned && <i className="sidebar__item__icon-pin fa fa-thumb-tack" />}
               </div>
             </button>
             <div className="sidebar__actions">
@@ -144,6 +143,11 @@ class SidebarRequestRow extends PureComponent {
                 hotKeyRegistry={hotKeyRegistry}
               />
             </div>
+            {isPinned && (
+              <div className="sidebar__item__icon-pin">
+                <i className="fa fa-thumb-tack" />
+              </div>
+            )}
           </div>
         </li>
       );

packages/insomnia-app/app/ui/css/components/sidebar.less

@@ -48,6 +48,7 @@
     h1 {
       margin: 0;
     }
+
     h1,
     h1 * {
       font-size: @font-size-xl;
@@ -97,6 +98,7 @@
 
     // Make it scroll when too skinny
     overflow: auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -235,7 +237,7 @@
 
   .sidebar__item {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: minmax(0, 1fr) auto auto;
     grid-template-rows: @line-height-xs;
 
     & > button {
@@ -280,17 +282,6 @@
     }
   }
 
-  .sidebar__item__icon {
-    &-right {
-      padding-right: @padding-sm;
-    }
-
-    &-pin {
-      padding: 0 @padding-sm;
-      display: initial;
-    }
-  }
-
   // ~~~~~~~~~~~~~~~~~ //
   // Sidebar Clickable //
   // ~~~~~~~~~~~~~~~~~ //
@@ -394,6 +385,14 @@
     display: initial;
   }
 
+  .sidebar__item__icon-pin {
+    display: flex;
+    align-items: center;
+    color: @hl-xl;
+    height: 100%;
+    padding: 0 @padding-sm;
+  }
+
   .sidebar__item:hover .sidebar__item__icon-pin {
     display: none;
   }