Drag handles on environment sidebar (Closes #982)

packages/insomnia-app/app/ui/components/modals/workspace-environments-edit-modal.js

@@ -51,6 +51,7 @@ const SidebarListItem = SortableElement(({environment, activeEnvironment, showEn
   return (
     <li key={environment._id} className={classes}>
       <Button onClick={showEnvironment} value={environment}>
+        <i className="fa fa-drag-handle drag-handle"/>
         {environment.color
           ? <i className="space-right fa fa-circle" style={{color: environment.color}}/>
           : <i className="space-right fa fa-empty"/>

packages/insomnia-app/app/ui/css/components/environment-modal.less

@@ -91,6 +91,14 @@
       padding-right: 0;
     }
 
+    position: relative;
+    .drag-handle {
+      position: absolute;
+      left: 0;
+      opacity: 0;
+      color: var(--hl-lg)
+    }
+
     .editable {
       white-space: nowrap;
       overflow: hidden;
@@ -112,6 +120,11 @@
   &:hover > button {
     background-color: @hl-xs;
   }
+
+  &.env-modal__sidebar-item--dragging .drag-handle,
+  &:hover .drag-handle {
+    opacity: 1;
+  }
 }
 
 .env-modal__sidebar-item {

packages/insomnia-app/app/ui/css/layout/base.less

@@ -645,6 +645,11 @@ i.fa:not(.fa--skinny) {
   }
 }
 
+.fa-drag-handle:before {
+  content: "\f142\f142";
+  letter-spacing: 0.1em;
+}
+
 .bold,
 strong {
   font-weight: 600;