Add a styled but non-functional themes config panel

src/app/config-view.coffee

@@ -3,6 +3,7 @@ $ = require 'jquery'
 _ = require 'underscore'
 GeneralConfigPanel = require 'general-config-panel'
 EditorConfigPanel = require 'editor-config-panel'
+ThemeConfigPanel = require 'theme-config-panel'
 PackageConfigPanel = require 'package-config-panel'
 
 module.exports =
@@ -27,6 +28,7 @@ class ConfigView extends View
 
     @addPanel('General', new GeneralConfigPanel)
     @addPanel('Editor', new EditorConfigPanel)
+    @addPanel('Themes', new ThemeConfigPanel)
     @addPanel('Installed Packages', new PackageConfigPanel)
 
   addPanel: (name, panel) ->

src/app/general-config-panel.coffee

@@ -15,32 +15,4 @@ class GeneralConfigPanel extends ConfigPanel
         @label for: 'core.autosave', "Autosave on unfocus:"
         @input id: 'core.autosave', type: 'checkbox'
 
-      @div class: 'section', =>
-        @div class: 'list-wrapper pull-left', =>
-          @div class: 'list-header', "Enabled Themes (Drag from right)"
-          @ol id: 'enabled-theme-list', outlet: 'enabledThemeList'
-
-        @div class: 'list-wrapper pull-left', =>
-          @div class: 'list-header', "Available Themes"
-          @ol id: 'available-theme-list', outlet: 'availableThemeList'
-
   populateThemeLists: ->
-    for name in atom.getAvailableThemeNames()
-      @availableThemeList.append(@buildThemeLi(name, draggable: true))
-
-    for name in config.get("core.themes") ? []
-      @enabledThemeList.append(@buildThemeLi(name))
-
-    @enabledThemeList.sortable()
-
-  buildThemeLi: (name, {draggable} = {}) ->
-    li = $$ ->
-      @li name: name, =>
-        @div class: 'octicons close-icon pull-right'
-        @text name
-    if draggable
-      li.draggable
-        connectToSortable: '#enabled-theme-list'
-        appendTo: '#general-config-panel'
-        helper: 'clone'
-    li

src/app/theme-config-panel.coffee

@@ -0,0 +1,50 @@
+ConfigPanel = require 'config-panel'
+{$$} = require 'space-pen'
+$ = require 'jquery'
+_ = require 'underscore'
+
+window.jQuery = $
+require 'jqueryui-browser/ui/jquery.ui.core'
+require 'jqueryui-browser/ui/jquery.ui.widget'
+require 'jqueryui-browser/ui/jquery.ui.mouse'
+require 'jqueryui-browser/ui/jquery.ui.sortable'
+require 'jqueryui-browser/ui/jquery.ui.draggable'
+delete window.jQuery
+
+module.exports =
+class ThemeConfigPanel extends ConfigPanel
+  @content: ->
+    @div id: 'themes-config', =>
+      @legend "Themes"
+      @div id: 'theme-picker', =>
+        @div class: 'panel', =>
+          @div class: 'panel-heading', "Enabled Themes"
+          @ol id: 'enabled-themes', class: 'list-group list-group-flush', outlet: 'enabledThemes'
+        @div class: 'panel', =>
+          @div class: 'panel-heading', "Available Themes"
+          @ol id: 'available-themes', class: 'list-group list-group-flush', outlet: 'availableThemes'
+
+  constructor: ->
+    super
+    for name in atom.getAvailableThemeNames()
+      @availableThemes.append(@buildThemeLi(name, draggable: true))
+
+    for name in config.get("core.themes") ? []
+      @enabledThemes.append(@buildThemeLi(name))
+
+    @enabledThemes.sortable()
+
+  buildThemeLi: (name, {draggable} = {}) ->
+    li = $$ ->
+      @li class: 'list-group-item', name: name, =>
+        @div class: 'octicons close-icon pull-right'
+        @text name
+    if draggable
+      li.draggable
+        connectToSortable: '#enabled-themes'
+        appendTo: '#themes-config'
+        helper: (e) ->
+          target = $(e.target)
+          target.clone().width(target.width())
+    else
+      li

static/config.less

@@ -18,24 +18,61 @@
 
   #panels {
     -webkit-flex: 1;
+    -webkit-flex-flow: column;
+    display: -webkit-flex;
     padding: @line-height-base;
     position: relative;
     overflow-y: auto;
 
     > div {
-      .list-wrapper {
-        width: 300px;
-        margin-right: 10px;
+      -webkit-flex: 1;
+    }
   }
 
-      .list-header {
-        box-sizing: border-box;
-        background: #eee;
-        padding: 10px;
-        border: 1px solid #ccc;
+  #themes-config {
+    height: 100%;
+    display: -webkit-flex;
+    -webkit-flex-flow: column;
+
+    #theme-picker {
+      -webkit-flex: 1;
+      display: -webkit-flex;
+      min-height: 0;
+
+      .panel {
+        -webkit-flex: 1;
+        display: -webkit-flex;
+        -webkit-flex-flow: column;
+        min-height: 0;
+        &:first-child { margin-right: @line-height-base / 2; }
+        &:last-child { margin-left: @line-height-base / 2; }
+
+        .panel-heading {
+          margin-bottom: 0;
+        }
+
+        ol {
+          margin-top: 0;
+          -webkit-flex: 1;
+          min-height: 0;
+          overflow: auto;
+
+          li {
+            &:first-child { border-top: 0; }
+          }
+        }
+      }
     }
 
     li.ui-draggable-dragging, li.ui-sortable-helper {
+      border: 0;
+      box-sizing: content-box;
+      background: white;
+      border-radius: 0;
+      box-shadow: 0 0 5px rgba(0, 0, 0, .5);
+    }
+
+/*    li.ui-draggable-dragging, li.ui-sortable-helper {
       width: 300px;
       background: white;
       border: 1px solid #eee;
@@ -63,13 +100,8 @@
           display: none;
         }
       }
-      }
+    }*/
 
-      #enabled-theme-list li:hover .close-icon {
-        display: inline-block;
-        cursor: pointer;
-      }
-    }
   }
 
   #packages {