From 5361e0d2a58a724ba63ce32bc0ca969f24ff664f Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 31 May 2016 11:29:00 -0400
Subject: [PATCH] update subtitle editor

---
 .../emby-webcomponents/.bower.json            |   8 +-
 .../emby-webcomponents/formdialog.css         |   3 +-
 .../emby-webcomponents/icons/nav.html         |   2 +
 .../emby-webcomponents/itemcontextmenu.js     |  18 ++
 .../emby-webcomponents/listview/listview.css  |  43 ++-
 .../emby-webcomponents/listview/listview.js   |   4 +-
 .../recordingeditor.template.html             |   2 +-
 .../emby-webcomponents/strings/en-US.json     |  13 +-
 .../subtitleeditor/subtitleeditor.css         |   3 +
 .../subtitleeditor/subtitleeditor.js          | 240 +++++++++-----
 .../subtitleeditor.template.html              |  18 +-
 dashboard-ui/css/dashboard.css                | 174 +++++++++++
 dashboard-ui/css/librarybrowser.css           |   7 -
 dashboard-ui/css/metadataeditor.css           |   5 -
 dashboard-ui/css/site.css                     | 295 +-----------------
 dashboard-ui/reports.html                     |   8 +
 dashboard-ui/scripts/site.js                  |   2 +-
 .../thirdparty/paper-button-style.css         |   7 +-
 18 files changed, 446 insertions(+), 406 deletions(-)
 create mode 100644 dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.css
 create mode 100644 dashboard-ui/css/dashboard.css

diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
index 13d622dca..03ae29d76 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.5",
-  "_release": "1.4.5",
+  "version": "1.4.12",
+  "_release": "1.4.12",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.5",
-    "commit": "da29c275857fd674c0946c5f3138d3eaef03cbc8"
+    "tag": "1.4.12",
+    "commit": "56918a494d703b9b3d47e47d28c0ff580eb5a002"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",
diff --git a/dashboard-ui/bower_components/emby-webcomponents/formdialog.css b/dashboard-ui/bower_components/emby-webcomponents/formdialog.css
index ca3ea8d92..893493234 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/formdialog.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/formdialog.css
@@ -25,6 +25,7 @@
 
     .formDialog .dialogContentInner {
         padding-bottom: 10vh;
+        padding-top: .5em;
     }
 
 .layout-tv .formDialog .dialogContentInner {
@@ -32,7 +33,7 @@
 }
 
 .formDialog .centeredContent {
-    max-width: 700px;
+    max-width: 740px;
 }
 
 .formDialog .dialogContentTitle {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/icons/nav.html b/dashboard-ui/bower_components/emby-webcomponents/icons/nav.html
index 278786520..2c69896cc 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/icons/nav.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/icons/nav.html
@@ -37,6 +37,8 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
             <g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
             <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></g>
             <g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></g>
+            <g id="delete"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /></g>
+            <g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
         </defs>
     </svg>
 </iron-iconset-svg>
diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js b/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
index 911078e39..c79b83ceb 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
@@ -32,6 +32,15 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper'], function (ap
                 });
             }
 
+            if (user.Policy.IsAdministrator) {
+                if (item.MediaType == 'Video' && item.Type != 'TvChannel' && item.Type != 'Program' && item.LocationType != 'Virtual') {
+                    commands.push({
+                        name: globalize.translate('sharedcomponents#EditSubtitles'),
+                        id: 'editsubtitles'
+                    });
+                }
+            }
+
             if (item.CanDownload && appHost.supports('filedownload')) {
                 commands.push({
                     name: globalize.translate('sharedcomponents#Download'),
@@ -109,6 +118,15 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper'], function (ap
                             reject();
                         });
 
+                        break;
+                    }
+                case 'editsubtitles':
+                    {
+                        require(['subtitleEditor'], function (subtitleEditor) {
+
+                            var serverId = apiClient.serverInfo().Id;
+                            subtitleEditor.show(itemId, serverId).then(resolve, reject);
+                        });
                         break;
                     }
                 case 'refresh':
diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
index 5870add03..6915d34fb 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
@@ -1,27 +1,52 @@
+button.listItem {
+    background: transparent;
+    border: 0 !important;
+    cursor: pointer;
+    outline: none !important;
+    color: inherit;
+    width: 100%;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
+}
+
 .listItem {
     display: flex;
     align-items: center;
     text-align: left;
-    padding: .1em 1.25em !important;
-    outline: none !important;
+    padding: .25em 1.25em !important;
 }
 
     .listItem.largeImage {
         padding: 1em 0 1em 1em;
     }
 
+    .listItem > *:not(.listItemBody) {
+        flex-shrink: 0;
+    }
+
 .listItemBody {
     flex-grow: 1;
     padding: .35em 1.25em;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
     .listItemBody h3 {
         margin: 0;
         font-weight: normal;
+        padding: .25em 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
+.layout-tv .listItemBody h3 {
+    padding: 0;
+}
+
 .listItemBodyText {
-    padding: .25em 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .listItemImage {
@@ -32,6 +57,11 @@
     flex-shrink: 0;
 }
 
+.listItemIcon {
+    width: 3vh;
+    height: 3vh;
+}
+
 .listItem.largeImage .listItemImage {
     width: 45vh;
     height: 30vh;
@@ -62,6 +92,11 @@
 
 .paperList {
     padding: .5em 0;
-    margin: 12px auto;
+    margin: 1em auto;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 }
+
+    .paperList.clear {
+        box-shadow: none !important;
+        background-color: transparent !important;
+    }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
index 9b65cbb78..f987dc598 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
@@ -1,4 +1,4 @@
-define(['itemHelper', 'mediaInfo', 'indicators', 'clearButtonStyle', 'css!./listview'], function (itemHelper, mediaInfo, indicators) {
+define(['itemHelper', 'mediaInfo', 'indicators', 'css!./listview'], function (itemHelper, mediaInfo, indicators) {
 
     function getListViewHtml(items, options) {
 
@@ -15,7 +15,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'clearButtonStyle', 'css!./list
 
             var html = '';
 
-            var cssClass = "itemAction clearButton listItem";
+            var cssClass = "itemAction listItem";
 
             var downloadWidth = 80;
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
index e3209a586..045524aad 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
@@ -1,4 +1,4 @@
-<div class="dialogHeader" style="margin:0 0 2em;">
+<div class="dialogHeader">
     <button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
     <div class="dialogHeaderTitle">
         ${Edit}
diff --git a/dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json b/dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json
index 58bdb1243..986679067 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json
@@ -68,5 +68,16 @@
   "MessageItemsAdded": "Items added.",
   "OptionNew": "New...",
   "LabelPlaylist": "Playlist:",
-  "AddToPlaylist": "Add to Playlist"
+  "AddToPlaylist": "Add to Playlist",
+  "Subtitles": "Subtitles",
+  "DownloadSubtitles": "Download Subtitles",
+  "LabelLanguage": "Language:",
+  "Search": "Search",
+  "NoSubtitleSearchResultsFound": "No results found.",
+  "File": "File",
+  "MessageAreYouSureDeleteSubtitles": "Are you sure you wish to delete this subtitle file?",
+  "ConfirmDeletion": "Confirm Deletion",
+  "MySubtitles": "My Subtitles",
+  "MessageDownloadQueued": "Download queued.",
+  "EditSubtitles": "Edit Subtitles"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.css b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.css
new file mode 100644
index 000000000..72eed4374
--- /dev/null
+++ b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.css
@@ -0,0 +1,3 @@
+.subtitleEditorDialog .originalFileLabel {
+    margin-right: 1em;
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
index 326017512..979aba1af 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
@@ -1,6 +1,7 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'appStorage', 'connectionManager', 'loading', 'paper-fab', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog'], function (dialogHelper, require, layoutManager, globalize, appStorage, connectionManager, loading) {
+define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'css!./subtitleeditor'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
 
     var currentItem;
+    var hasChanges;
 
     function showLocalSubtitles(context, index) {
 
@@ -51,19 +52,23 @@
 
         }).then(function () {
 
+            hasChanges = true;
+
             require(['toast'], function (toast) {
-                toast(globalize.translate('MessageDownloadQueued'));
+                toast(globalize.translate('sharedcomponents#MessageDownloadQueued'));
             });
+
+            focusManager.autoFocus(context);
         });
     }
 
     function deleteLocalSubtitle(context, index) {
 
-        var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+        var msg = globalize.translate('sharedcomponents#MessageAreYouSureDeleteSubtitles');
 
         require(['confirm'], function (confirm) {
 
-            confirm(msg, globalize.translate('HeaderConfirmDeletion')).then(function () {
+            confirm(msg, globalize.translate('sharedcomponents#ConfirmDeletion')).then(function () {
 
                 loading.show();
 
@@ -79,6 +84,7 @@
 
                 }).then(function () {
 
+                    hasChanges = true;
                     reload(context, apiClient, itemId);
                 });
             });
@@ -98,10 +104,10 @@
 
         if (subs.length) {
 
-            html += '<h1 style="margin-top:1.5em;">' + globalize.translate('HeaderCurrentSubtitles') + '</h1>';
+            html += '<h1>' + globalize.translate('sharedcomponents#MySubtitles') + '</h1>';
 
             if (layoutManager.tv) {
-                html += '<div>';
+                html += '<div class="paperList clear">';
             } else {
                 html += '<div class="paperList">';
             }
@@ -110,30 +116,19 @@
 
                 var itemHtml = '';
 
-                itemHtml += '<div class="listItem">';
+                var tagName = layoutManager.tv ? 'button' : 'div';
+                var className = layoutManager.tv && s.Path ? 'listItem btnDelete' : 'listItem';
 
-                itemHtml += '<paper-fab mini class="blue" icon="closed-caption" item-icon></paper-fab>';
+                itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
 
-                var atts = [];
-
-                atts.push(s.Codec);
-                if (s.IsDefault) {
-
-                    atts.push('Default');
-                }
-                if (s.IsForced) {
-
-                    atts.push('Forced');
-                }
+                itemHtml += '<iron-icon class="listItemIcon" icon="mediainfo:closed-caption"></iron-icon>';
 
                 itemHtml += '<div class="listItemBody">';
 
                 itemHtml += '<h3 class="listItemBodyText">';
-                itemHtml += (s.Language || globalize.translate('LabelUnknownLanaguage'));
+                itemHtml += s.DisplayTitle || '';
                 itemHtml += '</h3>';
 
-                itemHtml += '<div class="secondary listItemBodyText">' + atts.join(' - ') + '</div>';
-
                 if (s.Path) {
                     itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
                 }
@@ -141,11 +136,13 @@
                 itemHtml += '</a>';
                 itemHtml += '</div>';
 
-                if (s.Path) {
-                    itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete"><iron-icon icon="delete"></iron-icon></button>';
+                if (!layoutManager.tv) {
+                    if (s.Path) {
+                        itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('sharedcomponents#Delete') + '" class="btnDelete"><iron-icon icon="nav:delete"></iron-icon></button>';
+                    }
                 }
 
-                itemHtml += '</div>';
+                itemHtml += '</' + tagName + '>';
 
                 return itemHtml;
 
@@ -226,16 +223,19 @@
                 }
                 html += '<h1>' + provider + '</h1>';
                 if (layoutManager.tv) {
-                    html += '<div>';
+                    html += '<div class="paperList clear">';
                 } else {
                     html += '<div class="paperList">';
                 }
                 lastProvider = provider;
             }
 
-            html += '<div class="listItem">';
+            var tagName = layoutManager.tv ? 'button' : 'div';
+            var className = layoutManager.tv ? 'listItem btnOptions' : 'listItem';
 
-            html += '<paper-fab mini class="blue" icon="closed-caption" item-icon></paper-fab>';
+            html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
+
+            html += '<iron-icon class="listItemIcon" icon="mediainfo:closed-caption"></iron-icon>';
 
             html += '<div class="listItemBody">';
 
@@ -254,9 +254,11 @@
 
             html += '<div class="secondary">' + /*(result.CommunityRating || 0) + ' / ' +*/ (result.DownloadCount || 0) + '</div>';
 
-            html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" title="' + globalize.translate('ButtonDownload') + '" class="btnDownload"><iron-icon icon="cloud-download"></iron-icon></button>';
+            if (!layoutManager.tv) {
+                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnOptions"><iron-icon icon="nav:more-vert"></iron-icon></button>';
+            }
 
-            html += '</div>';
+            html += '</' + tagName + '>';
         }
 
         if (results.length) {
@@ -295,6 +297,7 @@
         context.querySelector('.noSearchResults').classList.add('hide');
 
         function onGetItem(item) {
+
             currentItem = item;
 
             fillSubtitleList(context, item);
@@ -359,66 +362,145 @@
 
     function onSubtitleResultsClick(e) {
 
-        var btnDownload = parentWithClass(e.target, 'btnDownload');
-        if (btnDownload) {
-            var id = btnDownload.getAttribute('data-subid');
-            var context = parentWithClass(btnDownload, 'subtitleEditorDialog');
-            downloadRemoteSubtitles(context, id);
+        var btnOptions = parentWithClass(e.target, 'btnOptions');
+        if (btnOptions) {
+            var subtitleId = btnOptions.getAttribute('data-subid');
+            var context = parentWithClass(btnOptions, 'subtitleEditorDialog');
+            showDownloadOptions(btnOptions, context, subtitleId);
         }
     }
 
+    function showDownloadOptions(button, context, subtitleId) {
+
+        var items = [];
+
+        items.push({
+            name: Globalize.translate('sharedcomponents#Download'),
+            id: 'download'
+        });
+
+        require(['actionsheet'], function (actionsheet) {
+
+            actionsheet.show({
+                items: items,
+                positionTo: button
+
+            }).then(function (id) {
+
+                switch (id) {
+
+                    case 'download':
+                        downloadRemoteSubtitles(context, subtitleId);
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+        });
+    }
+
+    function onSubmitButtonClick(e) {
+
+        // Do a fake form submit this the button isn't a real submit button
+        var fakeSubmit = document.createElement('input');
+        fakeSubmit.setAttribute('type', 'submit');
+        fakeSubmit.style.display = 'none';
+        var form = parentWithClass(this, 'subtitleSearchForm');
+        form.appendChild(fakeSubmit);
+        fakeSubmit.click();
+
+        // Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
+        setTimeout(function () {
+            form.removeChild(fakeSubmit);
+        }, 500);
+    }
+
+    function showEditorInternal(itemId, serverId, template) {
+
+        hasChanges = false;
+
+        var apiClient = connectionManager.getApiClient(serverId);
+        return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+
+            var dialogOptions = {
+                removeOnClose: true
+            };
+
+            if (layoutManager.tv) {
+                dialogOptions.size = 'fullscreen';
+            } else {
+                dialogOptions.size = 'small';
+            }
+
+            var dlg = dialogHelper.createDialog(dialogOptions);
+
+            dlg.classList.add('formDialog');
+            dlg.classList.add('subtitleEditorDialog');
+
+            dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
+            document.body.appendChild(dlg);
+
+            dlg.querySelector('.originalFileLabel').innerHTML = globalize.translate('sharedcomponents#File');
+
+            dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
+
+            var btnSubmit = dlg.querySelector('.btnSubmit');
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
+                dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
+            } else {
+                btnSubmit.classList.add('hide');
+            }
+
+            var editorContent = dlg.querySelector('.dialogContent');
+
+            dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
+            dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
+
+            apiClient.getCultures().then(function (languages) {
+
+                fillLanguages(editorContent, apiClient, languages);
+            });
+
+            dlg.querySelector('.btnCancel').addEventListener('click', function () {
+
+                dialogHelper.close(dlg);
+            });
+
+            btnSubmit.addEventListener('click', onSubmitButtonClick);
+
+            return new Promise(function (resolve, reject) {
+
+                dlg.addEventListener('close', function () {
+
+                    if (hasChanges) {
+                        resolve();
+                    } else {
+                        reject();
+                    }
+                });
+
+                dialogHelper.open(dlg);
+
+                reload(editorContent, apiClient, item);
+            });
+        });
+    }
+
     function showEditor(itemId, serverId) {
 
         loading.show();
 
-        require(['text!./subtitleeditor.template.html'], function (template) {
+        return new Promise(function (resolve, reject) {
 
-            var apiClient = connectionManager.getApiClient(serverId);
+            require(['text!./subtitleeditor.template.html'], function (template) {
 
-            apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-
-                var dialogOptions = {
-                    removeOnClose: true
-                };
-
-                if (layoutManager.tv) {
-                    dialogOptions.size = 'fullscreen';
-                } else {
-                    dialogOptions.size = 'small';
-                }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-                dlg.classList.add('subtitleEditorDialog');
-
-                dlg.innerHTML = globalize.translateDocument(template);
-                document.body.appendChild(dlg);
-
-                dlg.querySelector('.pathLabel').innerHTML = globalize.translate('MediaInfoFile');
-
-                dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
-
-                dialogHelper.open(dlg);
-
-                var editorContent = dlg.querySelector('.dialogContent');
-
-                dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
-                dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
-
-                reload(editorContent, apiClient, item);
-
-                apiClient.getCultures().then(function (languages) {
-
-                    fillLanguages(editorContent, apiClient, languages);
-                });
-
-                dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
-                    dialogHelper.close(dlg);
-                });
+                showEditorInternal(itemId, serverId, template).then(resolve, reject);
             });
         });
+
     }
 
     return {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html
index b94d8c7b2..05d776f92 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html
@@ -6,21 +6,23 @@
     <div class="dialogContentInner centeredContent">
 
         <div class="subtitleList" style="margin-bottom:2em;"></div>
-        <h1>${HeaderSearchForSubtitles}</h1>
+        <h1>${DownloadSubtitles}</h1>
 
-        <p style="margin: 1.5em 0;" class="originalFile"><span class="mediaInfoLabel pathLabel"></span><span class="pathValue"></span></p>
+        <p style="margin: 1.5em 0;" class="originalFile"><span class="originalFileLabel dimText"></span><span class="pathValue"></span></p>
 
-        <form class="subtitleSearchForm" style="max-width:none;">
-            <div style="display: inline-block; width: 85%;">
-                <label for="selectLanguage" class="selectLabel">${LabelLanguage}</label>
-                <select autofocus id="selectLanguage" required="required" data-mini="true"></select>
+        <form class="subtitleSearchForm" style="max-width: none;">
+            <div style="display: flex; align-items: center;">
+                <div class="selectContainer" style="flex-grow: 1; margin-bottom: 0;">
+                    <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
+                </div>
+                <button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles" style="flex-shrink: 0;"><iron-icon icon="search"></iron-icon></button>
             </div>
-            <button type="submit" is="paper-icon-button-light" title="${ButtonSearch}" class="btnSearchSubtitles"><iron-icon icon="search"></iron-icon></button>
+            <paper-button raised style="display:block;" class="btnSubmit">${Search}</paper-button>
         </form>
         <br />
         <div class="subtitleResults"></div>
         <div class="noSearchResults hide">
-            ${MessageNoSubtitleSearchResultsFound}
+            ${NoSubtitleSearchResultsFound}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/css/dashboard.css b/dashboard-ui/css/dashboard.css
new file mode 100644
index 000000000..2be33ab5d
--- /dev/null
+++ b/dashboard-ui/css/dashboard.css
@@ -0,0 +1,174 @@
+/* Swatches */
+
+/* A
+-----------------------------------------------------------------------------------------------------------*/
+
+/* Bar: Toolbars, dividers, slider track */
+.ui-bar-a,
+.ui-page-theme-a .ui-bar-inherit,
+html .ui-bar-a .ui-bar-inherit,
+html .ui-body-a .ui-bar-inherit,
+html body .ui-group-theme-a .ui-bar-inherit {
+    background-color: #e9e9e9 /*{a-bar-background-color}*/;
+    border-color: #ddd /*{a-bar-border}*/;
+    color: #333 /*{a-bar-color}*/;
+    font-weight: bold;
+}
+
+.ui-bar-a {
+    border-width: 1px;
+    border-style: solid;
+}
+
+/* Page and overlay */
+.ui-page-theme-a .ui-panel-wrapper {
+    background-color: #f9f9f9 /*{a-page-background-color}*/;
+    border-color: #bbb /*{a-page-border}*/;
+    color: #333 /*{a-page-color}*/;
+}
+
+/* Body: Read-only lists, text inputs, collapsible content */
+.ui-page-theme-a .ui-body-inherit,
+html .ui-bar-a .ui-body-inherit,
+html .ui-body-a .ui-body-inherit,
+html body .ui-group-theme-a .ui-body-inherit,
+html .ui-panel-page-container-a {
+    background-color: #fff /*{a-body-background-color}*/;
+    border-color: #ddd /*{a-body-border}*/;
+    color: #333 /*{a-body-color}*/;
+}
+
+/* Links */
+.ui-page-theme-a a,
+html .ui-bar-a a,
+html .ui-body-a a,
+html body .ui-group-theme-a a {
+    color: #388E3C /*{a-link-color}*/;
+    font-weight: bold;
+}
+
+    .ui-page-theme-a a:visited,
+    html .ui-bar-a a:visited,
+    html .ui-body-a a:visited,
+    html body .ui-group-theme-a a:visited {
+        color: #388E3C /*{a-link-visited}*/;
+    }
+
+    .ui-page-theme-a a:hover,
+    html .ui-bar-a a:hover,
+    html .ui-body-a a:hover,
+    html body .ui-group-theme-a a:hover {
+        color: #1B5E20 /*{a-link-hover}*/;
+    }
+
+    .ui-page-theme-a a:active,
+    html .ui-bar-a a:active,
+    html .ui-body-a a:active,
+    html body .ui-group-theme-a a:active {
+        color: #1B5E20 /*{a-link-active}*/;
+    }
+
+/* Button up */
+.ui-page-theme-a .ui-btn,
+html .ui-bar-a .ui-btn,
+html .ui-body-a .ui-btn,
+html body .ui-group-theme-a .ui-btn,
+html head + body .ui-btn.ui-btn-a,
+/* Button visited */
+.ui-page-theme-a .ui-btn:visited,
+html .ui-bar-a .ui-btn:visited,
+html .ui-body-a .ui-btn:visited,
+html body .ui-group-theme-a .ui-btn:visited,
+html head + body .ui-btn.ui-btn-a:visited,
+ul[data-role="listview"] a + a {
+    background-color: #f6f6f6 /*{a-bup-background-color}*/;
+    border-color: #ddd /*{a-bup-border}*/;
+    color: #333 /*{a-bup-color}*/;
+}
+    /* Button hover */
+    .ui-page-theme-a .ui-btn:hover,
+    html .ui-bar-a .ui-btn:hover,
+    html .ui-body-a .ui-btn:hover,
+    html body .ui-group-theme-a .ui-btn:hover,
+    html head + body .ui-btn.ui-btn-a:hover {
+        background-color: #ededed /*{a-bhover-background-color}*/;
+        border-color: #ddd /*{a-bhover-border}*/;
+        color: #333 /*{a-bhover-color}*/;
+    }
+    /* Button down */
+    .ui-page-theme-a .ui-btn:active,
+    html .ui-bar-a .ui-btn:active,
+    html .ui-body-a .ui-btn:active,
+    html body .ui-group-theme-a .ui-btn:active,
+    html head + body .ui-btn.ui-btn-a:active {
+        background-color: #e8e8e8 /*{a-bdown-background-color}*/;
+        border-color: #ddd /*{a-bdown-border}*/;
+        color: #333 /*{a-bdown-color}*/;
+    }
+
+    /* Active button */
+    .ui-page-theme-a .ui-btn.ui-btn-active,
+    html .ui-bar-a .ui-btn.ui-btn-active,
+    html .ui-body-a .ui-btn.ui-btn-active,
+    html body .ui-group-theme-a .ui-btn.ui-btn-active,
+    html head + body .ui-btn.ui-btn-a.ui-btn-active,
+    /* Active checkbox icon */
+    .ui-page-theme-a .ui-checkbox-on:after,
+    html .ui-bar-a .ui-checkbox-on:after,
+    html .ui-body-a .ui-checkbox-on:after,
+    html body .ui-group-theme-a .ui-checkbox-on:after,
+    .ui-btn.ui-checkbox-on.ui-btn-a:after {
+        background-color: #3388cc /*{a-active-background-color}*/;
+        border-color: #3388cc /*{a-active-border}*/;
+        color: #fff /*{a-active-color}*/;
+    }
+/* Active radio button icon */
+.ui-page-theme-a .ui-radio-on:after,
+html .ui-bar-a .ui-radio-on:after,
+html .ui-body-a .ui-radio-on:after,
+html body .ui-group-theme-a .ui-radio-on:after,
+.ui-btn.ui-radio-on.ui-btn-a:after {
+    border-color: #3388cc /*{a-active-background-color}*/;
+}
+
+.jqmButtonNoText {
+    padding: 3px 4px !important;
+    border-radius: 4px !important;
+    vertical-align: top;
+}
+
+.ui-listview li h3 {
+    font-weight: 400;
+}
+
+.ui-listview > .ui-li-divider {
+    line-height: 1.5;
+    line-height: initial;
+}
+/* 
+    Make all panels vertically scrollable 
+    If this causes any problems then perhaps require a css class to activate
+*/
+.ui-panel.ui-panel-open {
+    position: fixed;
+}
+
+/* Show over now playing bar */
+.ui-panel-display-overlay {
+    z-index: 1098;
+}
+
+.ui-panel-inner {
+    position: absolute;
+    top: 1px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+}
+
+.ui-slider-track.ui-mini .ui-slider-handle {
+    height: 18px;
+    width: 18px;
+    margin: -10px 0 0 -10px;
+}
\ No newline at end of file
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index ff4da505c..d2006217c 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -621,7 +621,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 .libraryPanelHeader {
     margin: 5px 0 15px 0;
     font-size: 15px;
-    font-family: Montserrat;
 }
 
     .libraryPanelHeader a {
@@ -985,12 +984,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     font-weight: bold;
 }
 
-@media all and (min-width: 650px) {
-    .libraryTabs .ui-btn-inner {
-        padding: .5em 15px !important;
-    }
-}
-
 /* All HTML5 progress enabled browsers */
 .itemProgressBar {
     /* Turns off styling - not usually needed, but good to know. */
diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css
index eb7159ff2..dab47e0ff 100644
--- a/dashboard-ui/css/metadataeditor.css
+++ b/dashboard-ui/css/metadataeditor.css
@@ -126,11 +126,6 @@
     color: #ccc;
 }
 
-/* Fixes button running outside of list */
-.btnRemoveFromEditorList .ui-btn-inner {
-    padding-right: 0 !important;
-}
-
 .chkAirDay {
     padding: 0 2em 1em 0;
 }
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 7a9b30214..7bfa0d832 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -1,175 +1,4 @@
-/* Swatches */
-
-/* A
------------------------------------------------------------------------------------------------------------*/
-
-/* Bar: Toolbars, dividers, slider track */
-.ui-bar-a,
-.ui-page-theme-a .ui-bar-inherit,
-html .ui-bar-a .ui-bar-inherit,
-html .ui-body-a .ui-bar-inherit,
-html body .ui-group-theme-a .ui-bar-inherit {
-    background-color: #e9e9e9 /*{a-bar-background-color}*/;
-    border-color: #ddd /*{a-bar-border}*/;
-    color: #333 /*{a-bar-color}*/;
-    font-weight: bold;
-}
-
-.ui-bar-a {
-    border-width: 1px;
-    border-style: solid;
-}
-
-/* Page and overlay */
-.ui-page-theme-a .ui-panel-wrapper {
-    background-color: #f9f9f9 /*{a-page-background-color}*/;
-    border-color: #bbb /*{a-page-border}*/;
-    color: #333 /*{a-page-color}*/;
-}
-
-/* Body: Read-only lists, text inputs, collapsible content */
-.ui-page-theme-a .ui-body-inherit,
-html .ui-bar-a .ui-body-inherit,
-html .ui-body-a .ui-body-inherit,
-html body .ui-group-theme-a .ui-body-inherit,
-html .ui-panel-page-container-a {
-    background-color: #fff /*{a-body-background-color}*/;
-    border-color: #ddd /*{a-body-border}*/;
-    color: #333 /*{a-body-color}*/;
-}
-
-/* Links */
-.ui-page-theme-a a,
-html .ui-bar-a a,
-html .ui-body-a a,
-html body .ui-group-theme-a a {
-    color: #388E3C /*{a-link-color}*/;
-    font-weight: bold;
-}
-
-    .ui-page-theme-a a:visited,
-    html .ui-bar-a a:visited,
-    html .ui-body-a a:visited,
-    html body .ui-group-theme-a a:visited {
-        color: #388E3C /*{a-link-visited}*/;
-    }
-
-    .ui-page-theme-a a:hover,
-    html .ui-bar-a a:hover,
-    html .ui-body-a a:hover,
-    html body .ui-group-theme-a a:hover {
-        color: #1B5E20 /*{a-link-hover}*/;
-    }
-
-    .ui-page-theme-a a:active,
-    html .ui-bar-a a:active,
-    html .ui-body-a a:active,
-    html body .ui-group-theme-a a:active {
-        color: #1B5E20 /*{a-link-active}*/;
-    }
-
-/* Button up */
-.ui-page-theme-a .ui-btn,
-html .ui-bar-a .ui-btn,
-html .ui-body-a .ui-btn,
-html body .ui-group-theme-a .ui-btn,
-html head + body .ui-btn.ui-btn-a,
-/* Button visited */
-.ui-page-theme-a .ui-btn:visited,
-html .ui-bar-a .ui-btn:visited,
-html .ui-body-a .ui-btn:visited,
-html body .ui-group-theme-a .ui-btn:visited,
-html head + body .ui-btn.ui-btn-a:visited,
-ul[data-role="listview"] a + a {
-    background-color: #f6f6f6 /*{a-bup-background-color}*/;
-    border-color: #ddd /*{a-bup-border}*/;
-    color: #333 /*{a-bup-color}*/;
-}
-    /* Button hover */
-    .ui-page-theme-a .ui-btn:hover,
-    html .ui-bar-a .ui-btn:hover,
-    html .ui-body-a .ui-btn:hover,
-    html body .ui-group-theme-a .ui-btn:hover,
-    html head + body .ui-btn.ui-btn-a:hover {
-        background-color: #ededed /*{a-bhover-background-color}*/;
-        border-color: #ddd /*{a-bhover-border}*/;
-        color: #333 /*{a-bhover-color}*/;
-    }
-    /* Button down */
-    .ui-page-theme-a .ui-btn:active,
-    html .ui-bar-a .ui-btn:active,
-    html .ui-body-a .ui-btn:active,
-    html body .ui-group-theme-a .ui-btn:active,
-    html head + body .ui-btn.ui-btn-a:active {
-        background-color: #e8e8e8 /*{a-bdown-background-color}*/;
-        border-color: #ddd /*{a-bdown-border}*/;
-        color: #333 /*{a-bdown-color}*/;
-    }
-
-    /* Active button */
-    .ui-page-theme-a .ui-btn.ui-btn-active,
-    html .ui-bar-a .ui-btn.ui-btn-active,
-    html .ui-body-a .ui-btn.ui-btn-active,
-    html body .ui-group-theme-a .ui-btn.ui-btn-active,
-    html head + body .ui-btn.ui-btn-a.ui-btn-active,
-    /* Active checkbox icon */
-    .ui-page-theme-a .ui-checkbox-on:after,
-    html .ui-bar-a .ui-checkbox-on:after,
-    html .ui-body-a .ui-checkbox-on:after,
-    html body .ui-group-theme-a .ui-checkbox-on:after,
-    .ui-btn.ui-checkbox-on.ui-btn-a:after {
-        background-color: #3388cc /*{a-active-background-color}*/;
-        border-color: #3388cc /*{a-active-border}*/;
-        color: #fff /*{a-active-color}*/;
-    }
-/* Active radio button icon */
-.ui-page-theme-a .ui-radio-on:after,
-html .ui-bar-a .ui-radio-on:after,
-html .ui-body-a .ui-radio-on:after,
-html body .ui-group-theme-a .ui-radio-on:after,
-.ui-btn.ui-radio-on.ui-btn-a:after {
-    border-color: #3388cc /*{a-active-background-color}*/;
-}
-
-/* B
------------------------------------------------------------------------------------------------------------*/
-
-/* Bar: Toolbars, dividers, slider track */
-.ui-bar-b,
-.ui-page-theme-b .ui-bar-inherit,
-html .ui-bar-b .ui-bar-inherit,
-html .ui-body-b .ui-bar-inherit,
-html body .ui-group-theme-b .ui-bar-inherit {
-    background-color: #1d1d1d /*{b-bar-background-color}*/;
-    border-color: #1b1b1b /*{b-bar-border}*/;
-    color: #fff /*{b-bar-color}*/;
-    font-weight: bold;
-}
-
-.ui-bar-b {
-    border-width: 1px;
-    border-style: solid;
-}
-
-/* Page and overlay */
-.ui-page-theme-b .ui-panel-wrapper {
-    background-color: #252525 /*{b-page-background-color}*/;
-    border-color: #454545 /*{b-page-border}*/;
-    color: #fff /*{b-page-color}*/;
-}
-
-/* Body: Read-only lists, text inputs, collapsible content */
-.ui-page-theme-b .ui-body-inherit,
-html .ui-bar-b .ui-body-inherit,
-html .ui-body-b .ui-body-inherit,
-html body .ui-group-theme-b .ui-body-inherit,
-html .ui-panel-page-container-b {
-    background-color: #2a2a2a /*{b-body-background-color}*/;
-    border-color: #1d1d1d /*{b-body-border}*/;
-    color: #fff /*{b-body-color}*/;
-}
-
-/* Links */
+/* Links */
 .ui-body-b a {
     color: #52B54B /*{b-link-color}*/;
     font-weight: bold;
@@ -187,68 +16,6 @@ html .ui-panel-page-container-b {
         color: #2E7D32 /*{b-link-active}*/;
     }
 
-/* Button up */
-.ui-page-theme-b .ui-btn,
-html .ui-bar-b .ui-btn,
-html .ui-body-b .ui-btn,
-html body .ui-group-theme-b .ui-btn,
-html head + body .ui-btn.ui-btn-b,
-/* Button visited */
-.ui-page-theme-b .ui-btn:visited,
-html .ui-bar-b .ui-btn:visited,
-html .ui-body-b .ui-btn:visited,
-html body .ui-group-theme-b .ui-btn:visited,
-html head + body .ui-btn.ui-btn-b:visited {
-    background-color: #333 /*{b-bup-background-color}*/;
-    border-color: #1f1f1f /*{b-bup-border}*/;
-    color: #fff /*{b-bup-color}*/;
-}
-    /* Button hover */
-    .ui-page-theme-b .ui-btn:hover,
-    html .ui-bar-b .ui-btn:hover,
-    html .ui-body-b .ui-btn:hover,
-    html body .ui-group-theme-b .ui-btn:hover,
-    html head + body .ui-btn.ui-btn-b:hover {
-        background-color: #373737 /*{b-bhover-background-color}*/;
-        border-color: #1f1f1f /*{b-bhover-border}*/;
-        color: #fff /*{b-bhover-color}*/;
-    }
-    /* Button down */
-    .ui-page-theme-b .ui-btn:active,
-    html .ui-bar-b .ui-btn:active,
-    html .ui-body-b .ui-btn:active,
-    html body .ui-group-theme-b .ui-btn:active,
-    html head + body .ui-btn.ui-btn-b:active {
-        background-color: #404040 /*{b-bdown-background-color}*/;
-        border-color: #1f1f1f /*{b-bdown-border}*/;
-        color: #fff /*{b-bdown-color}*/;
-    }
-
-    /* Active button */
-    .ui-page-theme-b .ui-btn.ui-btn-active,
-    html .ui-bar-b .ui-btn.ui-btn-active,
-    html .ui-body-b .ui-btn.ui-btn-active,
-    html body .ui-group-theme-b .ui-btn.ui-btn-active,
-    html head + body .ui-btn.ui-btn-b.ui-btn-active,
-    /* Active checkbox icon */
-    .ui-page-theme-b .ui-checkbox-on:after,
-    html .ui-bar-b .ui-checkbox-on:after,
-    html .ui-body-b .ui-checkbox-on:after,
-    html body .ui-group-theme-b .ui-checkbox-on:after,
-    .ui-btn.ui-checkbox-on.ui-btn-b:after {
-        background-color: #22aadd /*{b-active-background-color}*/;
-        border-color: #22aadd /*{b-active-border}*/;
-        color: #fff /*{b-active-color}*/;
-    }
-/* Active radio button icon */
-.ui-page-theme-b .ui-radio-on:after,
-html .ui-bar-b .ui-radio-on:after,
-html .ui-body-b .ui-radio-on:after,
-html body .ui-group-theme-b .ui-radio-on:after,
-.ui-btn.ui-radio-on.ui-btn-b:after {
-    border-color: #22aadd /*{b-active-background-color}*/;
-}
-
 /* latin */
 @font-face {
     font-family: 'Montserrat';
@@ -263,11 +30,6 @@ html body .ui-group-theme-b .ui-radio-on:after,
     margin-left: 0;
 }
 
-/* jQuery mobile adds a text shadow that seems unnecessary. */
-* {
-    -webkit-font-smoothing: antialiased;
-}
-
 /* Remove IE mobile 300ms tap delay */
 html {
     -ms-touch-action: manipulation;
@@ -298,6 +60,7 @@ body {
     margin: 0;
     padding: 0;
     height: 100%;
+    -webkit-font-smoothing: antialiased;
 }
 
     body.autoScrollY {
@@ -325,24 +88,18 @@ iron-icon {
     overflow-y: hidden !important;
 }
 
-.jqmButtonNoText {
-    padding: 3px 4px !important;
-    border-radius: 4px !important;
-    vertical-align: top;
-}
-
 .textlink {
     text-decoration: none;
 }
 
-h1, h1 a {
-    font-weight: 300 !important;
-    font-size: 24px;
+h1, h2, h3 {
+    margin-top: 1em;
 }
 
-.ui-loader {
-    display: none !important;
-}
+    h1, h1 a {
+        font-weight: 300 !important;
+        font-size: 24px;
+    }
 
 h2 {
     font-weight: 400;
@@ -369,42 +126,6 @@ h1 a:hover {
     color: #52B54B !important;
 }
 
-.ui-listview li h3 {
-    font-weight: 400;
-}
-
-.ui-listview > .ui-li-divider {
-    line-height: 1.5;
-    line-height: initial;
-}
-/* 
-    Make all panels vertically scrollable 
-    If this causes any problems then perhaps require a css class to activate
-*/
-.ui-panel.ui-panel-open {
-    position: fixed;
-}
-
-/* Show over now playing bar */
-.ui-panel-display-overlay {
-    z-index: 1098;
-}
-
-.ui-panel-inner {
-    position: absolute;
-    top: 1px;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    overflow: hidden;
-}
-
-.ui-slider-track.ui-mini .ui-slider-handle {
-    height: 18px;
-    width: 18px;
-    margin: -10px 0 0 -10px;
-}
-
 fieldset {
     border: none;
 }
diff --git a/dashboard-ui/reports.html b/dashboard-ui/reports.html
index 9704adbf9..f730d01ef 100644
--- a/dashboard-ui/reports.html
+++ b/dashboard-ui/reports.html
@@ -1,4 +1,12 @@
 <div id="libraryReportManagerPage" data-role="page" class="page libraryPage noSecondaryNavPage reportsPage" data-contextname="${HeaderReports}" data-require="paper-icon-button,jqmcheckbox,jqmcontrolgroup,jqmpanel,jqmcollapsible,jqmtable,scripts/reports,detailtablecss">
+    <style>
+        /* Page and overlay */
+        .ui-page-theme-b .ui-panel-wrapper {
+            background-color: #252525 /*{b-page-background-color}*/;
+            border-color: #454545 /*{b-page-border}*/;
+            color: #fff /*{b-page-color}*/;
+        }
+    </style>
     <div data-role="content">
         <div style="text-align: center;">
             <div class="viewControls">
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index c3396a901..f02a000cf 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1899,7 +1899,7 @@ var AppInfo = {};
 
         define("jstree", [bowerPath + "/jstree/dist/jstree", "css!thirdparty/jstree/themes/default/style.min.css"]);
 
-        define("jqmbase", ['css!thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.theme.css']);
+        define("jqmbase", ['css!css/dashboard', 'css!thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.theme.css']);
         define("jqmicons", ['jqmbase', 'css!thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.icons.css']);
         define("jqmtable", ['jqmbase', "thirdparty/jquerymobile-1.4.5/jqm.table", 'css!thirdparty/jquerymobile-1.4.5/jqm.table.css']);
 
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index 4380aff3a..34da949bd 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -184,11 +184,6 @@ paper-button.notext {
         margin-right: 0;
     }
 
-/*paper-toast {
-    background-color: #eee;
-    color: #000;
-}*/
-
 .bottomFab {
     bottom: 90px;
 }
@@ -480,7 +475,7 @@ paper-textarea.mono textarea {
 }
 
 .ui-body-b .paperList {
-    background-color: #323232;
+    background-color: #2b2b2b;
 }
 
 paper-dropdown-menu {