Polishing commands manager; Tweaking icons and actions for feedback

src/js/components/Fields/Commands.js

@@ -45,13 +45,20 @@ export default class Commands extends React.Component{
         }
 
 		return (
-			<Sortable className="list commands-setup" onChange={(order, sortable, e) => {this.onChange(order)}}>
+            <Sortable 
+                options={{
+                    handle: ".commands-setup__item__drag-handle",
+                    animation: 150
+                }}
+                className="list commands-setup" 
+                onChange={(order, sortable, e) => {this.onChange(order)}}>
                 {
                     commands.map(command => {
                         return (
                             <div className="list__item commands-setup__item list__item--no-interaction" key={command.id} data-id={command.id}>
                                 <div className="col col--w90">
-                                    <div className="commands__item commands__item--interactive" onClick={e => this.props.runCommand(command.id, true)}>
+                                    <Icon className="commands-setup__item__drag-handle" name="drag_indicator" />
+                                    <div className="commands__item commands__item--small">
                                         <Icon className="commands__item__icon" name={command.icon} />
                                         <span className={command.colour+'-background commands__item__background'}></span>
                                     </div>
@@ -60,6 +67,9 @@ export default class Commands extends React.Component{
                                     </div>
                                 </div>
                                 <div className="commands-setup__item__actions">
+                                    <a className="commands-setup__item__run-button action" onClick={e => this.props.runCommand(command.id, true)}>
+                                        <Icon name="play_arrow" />
+                                    </a>
                                     <Link className="commands-setup__item__edit-button action" to={'/edit-command/'+command.id}>
                                         <Icon name="edit" />
                                     </Link>

src/js/components/Fields/SourcesPriority.js

@@ -35,6 +35,9 @@ export default class SourcesPriority extends React.Component{
 
 		return (
 			<Sortable
+				options={{
+					animation: 150
+				}}
 				className={className}
 				onChange={(order, sortable, e) => {
 					this.handleSort(order)

src/scss/components/_commands.scss

@@ -30,6 +30,16 @@
 			opacity: 1;
 		}
 
+		&--small {
+			width: 20px;
+			height: 20px;
+
+			.commands__item__icon {
+				padding-top: 5px;
+				font-size: 10px;
+			}
+		}
+
 		&--large {
 			width: 32px;
 			height: 32px;

src/scss/components/_icon.scss

@@ -27,7 +27,6 @@
 	    direction: ltr;
 	    vertical-align: bottom;
 	    font-size: 1.3em;
-	    margin-bottom: 0.1em;
 	    -webkit-font-smoothing: antialiased;
 	    text-rendering: optimizeLegibility;
 	    -moz-osx-font-smoothing: grayscale;

src/scss/global/_forms.scss

@@ -188,6 +188,11 @@ select {
 	}
 }
 
+.action {
+	@include click_feedback();
+	cursor: pointer;
+}
+
 .button {
 	@include animate();
 	@include feature_font();
@@ -397,10 +402,6 @@ select {
 	display: block;
 	padding-bottom: 12px;
 
-	.icon {
-		padding-right: 0.32em;
-	}
-
 	& > .name {
 		display: block;
 		padding-top: 10px;

src/scss/views/_settings.scss

@@ -39,17 +39,24 @@
 			position: relative;
 			padding-top: 10px;
 			padding-bottom: 10px;
+			vertical-align: top;
 
 			.commands__item {
-				float: left;
-				margin-bottom: -5px;
+				display: inline-block;
+				margin: 0;
+			}
+
+			&__drag-handle {
+				cursor: move;
+				padding-right: 0.5em;
 			}
 
 			&__url {
 				@include one_line_text();
 				max-width: 100%;
-				padding-top: 5px;
 				padding-left: 10px;
+				display: inline-block;
+				margin-bottom: -5px;
 			}
 
 			&__actions {