From b1676387f49dddc8b1b3c10f66fdc09ac907929f Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Wed, 24 Jun 2015 00:38:46 -0400
Subject: [PATCH] update icons

---
 dashboard-ui/connectlogin.html                |  1 -
 dashboard-ui/css/chromecast.css               | 28 ++---------
 dashboard-ui/css/librarymenu.css              | 18 ++-----
 dashboard-ui/css/mediaplayer.css              | 31 +++++++++---
 dashboard-ui/css/search.css                   |  4 +-
 dashboard-ui/css/site.css                     | 19 -------
 dashboard-ui/scripts/actionsheet.js           |  9 +++-
 dashboard-ui/scripts/librarybrowser.js        | 21 ++++----
 dashboard-ui/scripts/librarylist.js           | 10 ++--
 dashboard-ui/scripts/librarymenu.js           | 49 +++++++++++++------
 dashboard-ui/scripts/nowplayingbar.js         | 20 ++++----
 dashboard-ui/scripts/pluginspage.js           |  6 +--
 dashboard-ui/scripts/selectserver.js          |  8 +--
 dashboard-ui/scripts/syncactivity.js          |  6 +--
 dashboard-ui/scripts/userprofilespage.js      |  6 +--
 dashboard-ui/selectserver.html                |  2 +-
 dashboard-ui/thirdparty/emby-icons.html       | 15 +++++-
 .../thirdparty/paper-button-style.css         | 12 +++++
 dashboard-ui/vulcanize-out.html               | 15 +++++-
 19 files changed, 154 insertions(+), 126 deletions(-)

diff --git a/dashboard-ui/connectlogin.html b/dashboard-ui/connectlogin.html
index a40912342a..a17f54b507 100644
--- a/dashboard-ui/connectlogin.html
+++ b/dashboard-ui/connectlogin.html
@@ -32,7 +32,6 @@
                     </a>
                 </p>
                 <div class="skip">
-                    <br />
                     <paper-button raised class="cancel block btnSkipConnect"><iron-icon icon="close"></iron-icon><span>${ButtonSkip}</span></paper-button>
                     <div class="fieldDescription">${TextConnectToServerManually}</div>
                 </div>
diff --git a/dashboard-ui/css/chromecast.css b/dashboard-ui/css/chromecast.css
index 2997857f25..b9c1fbc12b 100644
--- a/dashboard-ui/css/chromecast.css
+++ b/dashboard-ui/css/chromecast.css
@@ -1,41 +1,21 @@
-.btnDefaultCast .btnCastImageActive {
-    display: none;
-}
-
-.btnActiveCast .btnCastImageDefault {
-    display: none;
-}
-
-.btnActiveCast i {
+.btnActiveCast {
     color: #2ad !important;
 }
 
-.btnDisabledCast .btnCastImageActive {
-    display: none;
-}
-
-.btnDisabledCast i {
-    color: #555;
-}
-
 .headerSelectedPlayer {
     display: inline-block;
     vertical-align: middle;
     color: #ddd;
-    font-size: 11px;
-    margin-right: .5em;
+    /*font-size: 11px;*/
+    font-weight: 400;
     position: relative;
-    top: 1px;
+    top: 2px;
     max-width: 100px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
 
-.btnCastIcon .headerSelectedPlayer {
-    top: 0;
-}
-
 @media all and (max-width: 600px) {
     .headerSelectedPlayer {
         display: none;
diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index e0db1eac52..6025a20d8a 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -12,10 +12,6 @@
     margin: .5em 0;
 }
 
-.headerBackButton {
-    padding-right: 5px !important;
-}
-
 .headerButton {
     height: 50px;
     line-height: 50px;
@@ -32,8 +28,7 @@
 }
 
 .viewMenuBar .material-icons, .viewMenuBar .fa, .viewMenuBar paper-icon-button {
-    color: #e8e8e8;
-    font-size: 24px;
+    color: #f0f0f0;
     vertical-align: middle;
 }
 
@@ -125,18 +120,10 @@
         border-width: 0 !important;
     }
 
-.mainDrawerButton {
-    padding-left: 10px !important;
-}
-
 .hideMainDrawer .mainDrawerButton {
     display: none;
 }
 
-.barMenuInner {
-    padding: 6px 10px;
-}
-
 .barsMenuButton:hover {
     opacity: .5 !important;
 }
@@ -149,8 +136,9 @@
     display: inline-block;
     vertical-align: middle;
     padding-left: 0 !important;
-    margin-left: -8px;
     cursor: default;
+    position: relative;
+    top: 1px;
 }
 
 .logoLibraryMenuButtonText {
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index 0d1357c271..6bc4ee80f9 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -1,6 +1,6 @@
 /* Now playing bar */
 .nowPlayingBar {
-    padding: 0;
+    padding: 8px 0;
     border-top: 1px solid #444;
     text-align: center;
 }
@@ -11,16 +11,30 @@
 
 .mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
     vertical-align: middle;
-    font-size: 30px;
     color: #e8e8e8;
     margin: 0;
-    padding: 16px 12px;
-    min-width: 30px;
     text-align: center;
 }
 
+    .mediaButton:not(paper-icon-button) {
+        padding: 16px 12px;
+    }
+
+paper-icon-button.mediaButton {
+    padding: 4px;
+}
+
+.mediaButton iron-icon {
+    height: 48px;
+    width: 48px;
+}
+
+.mediaButton.remoteControlButton iron-icon {
+    height: 30px;
+}
+
 .videoTopControls .mediaButton {
-    font-size: 26px;
+    font-size: 27px;
 }
 
 .videoControls .mediaButton {
@@ -75,7 +89,7 @@
 }
 
     .nowPlayingImage img {
-        height: 50px;
+        height: 60px;
         margin-right: .5em;
         vertical-align: bottom;
     }
@@ -171,6 +185,11 @@ input[type="range"]::-ms-fill-upper {
         padding-top: 0;
     }
 
+    .remoteControlButton {
+        position: relative;
+        top: 4px;
+    }
+
     .nowPlayingBar .currentTime, .nowPlayingBar .positionSliderContainer, .nowPlayingBar .volumeSliderContainer, #nowPlayingBar .muteButton, #nowPlayingBar .unmuteButton {
         display: none !important;
     }
diff --git a/dashboard-ui/css/search.css b/dashboard-ui/css/search.css
index 3d4d1fbb87..a92da8ca01 100644
--- a/dashboard-ui/css/search.css
+++ b/dashboard-ui/css/search.css
@@ -196,6 +196,6 @@
 }
 
 .btnCloseSearch {
-    padding: 0 5px;
-    outline: 0;
+    padding-top: 0;
+    padding-bottom: 0;
 }
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index bc56565afb..d0d9e07b16 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -994,34 +994,15 @@ progress {
 /* Detail Page*/
 
 .btnUserItemRating {
-    margin-right: .85em;
-    cursor: pointer;
     vertical-align: middle;
     color: #aaa;
-    font-size: 17px;
-    width: auto !important;
     display: inline-block !important;
-    background: none !important;
-    border: 0 !important;
-    outline: 0 !important;
 }
 
-    .btnUserItemRating div {
-        border: 0;
-    }
-
 .btnUserItemRatingOn {
     color: #cc3333 !important;
 }
 
-.btnUserItemRating:last-child {
-    margin-right: 0;
-}
-
-.btnUserItemRating:hover {
-    opacity: .5;
-}
-
 .imgUserItemRating {
     height: 16px;
     width: 16px;
diff --git a/dashboard-ui/scripts/actionsheet.js b/dashboard-ui/scripts/actionsheet.js
index cc2d0082ab..4d6f795d1c 100644
--- a/dashboard-ui/scripts/actionsheet.js
+++ b/dashboard-ui/scripts/actionsheet.js
@@ -19,7 +19,7 @@
 
             // If the window height is under a certain amount, don't bother trying to position
             // based on an element.
-            if (options.positionTo && windowHeight > 600) {
+            if (options.positionTo && windowHeight >= 540) {
 
                 var pos = $(options.positionTo).offset();
 
@@ -93,6 +93,13 @@
 
             setTimeout(function () {
                 var dlg = document.getElementById(id);
+
+                if (options.visibleBackground) {
+                    $(dlg).on('iron-overlay-opened', function(e) {
+                        $('iron-overlay-backdrop').addClass('visibleBackground');
+                    });
+                }
+
                 dlg.open();
 
                 // Has to be assigned a z-index after the call to .open() 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 0bc2e8c935..e0437e55ba 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2291,6 +2291,7 @@
 
         getUserDataButtonHtml: function (method, itemId, btnCssClass, icon, tooltip) {
 
+            return '<paper-icon-button data-itemid="' + itemId + '" icon="' + icon + '" class="' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"></paper-icon-button>';
             btnCssClass += " imageButton";
 
             return '<button data-itemid="' + itemId + '" class="' + btnCssClass + '" type="button" onclick="LibraryBrowser.' + method + '(this);return false;" title="' + tooltip + '" data-role="none"><i class="fa ' + icon + '"></i></button>';
@@ -2311,9 +2312,9 @@
 
                 if ((item.MediaType || item.IsFolder) && type != "TvChannel" && type != "MusicArtist" && item.MediaType != "Audio") {
                     if (userData.Played) {
-                        html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-check', tooltipPlayed);
+                        html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOn', 'check', tooltipPlayed);
                     } else {
-                        html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating', 'fa-check', tooltipPlayed);
+                        html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating', 'check', tooltipPlayed);
                     }
                 }
             }
@@ -2322,24 +2323,24 @@
             var tooltipDislike = Globalize.translate('TooltipDislike');
 
             if (typeof userData.Likes == "undefined") {
-                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike);
-                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike);
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'thumb-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'thumb-up', tooltipLike);
             }
             else if (userData.Likes) {
-                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'fa-thumbs-down', tooltipDislike);
-                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-thumbs-up', tooltipLike);
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'thumb-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'thumb-up', tooltipLike);
             }
             else {
-                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-thumbs-down', tooltipDislike);
-                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'fa-thumbs-up', tooltipLike);
+                html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'thumb-down', tooltipDislike);
+                html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'thumb-up', tooltipLike);
             }
 
             var tooltipFavorite = Globalize.translate('TooltipFavorite');
             if (userData.IsFavorite) {
 
-                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOn', 'fa-heart', tooltipFavorite);
+                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOn', 'favorite', tooltipFavorite);
             } else {
-                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'fa-heart', tooltipFavorite);
+                html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'favorite', tooltipFavorite);
             }
 
             return html;
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index 7c7aba19f7..51e407e1fe 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -863,11 +863,11 @@
             .off('.latestgroupings')
             .on('click.latestgroupings', '.groupedCard', onGroupedCardClick)
             .off('.dotmenu')
-            .on('click.dotmenu', '.listviewMenuButton', onListViewMenuButtonClick)
-            .off('.cardHoverMenu')
-            .on('mouseenter.cardHoverMenu', '.card:not(.bannerCard)', onHoverIn)
-            .on('mouseleave.cardHoverMenu', '.card:not(.bannerCard)', onHoverOut)
-            .on("touchstart.cardHoverMenu", '.card:not(.bannerCard)', preventTouchHover);
+            .on('click.dotmenu', '.listviewMenuButton', onListViewMenuButtonClick);
+
+        if (!AppInfo.isTouchPreferred) {
+            this.off('.cardHoverMenu').on('mouseenter.cardHoverMenu', '.card:not(.bannerCard)', onHoverIn).on('mouseleave.cardHoverMenu', '.card:not(.bannerCard)', onHoverOut).on("touchstart.cardHoverMenu", '.card:not(.bannerCard)', preventTouchHover);
+        }
 
         this.off('.mediaDetails').on('click.mediaDetails', '.mediaItem', onCardClick);
 
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 4ed22aad22..90e9ba8d77 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -8,30 +8,28 @@
         var html = '<div class="viewMenuBar ui-bar-b">';
 
         if (AppInfo.enableBackButton) {
-            html += '<button type="button" data-role="none" class="headerButton headerButtonLeft headerBackButton"><div class="fa fa-chevron-left"></div></button>';
+            html += '<paper-icon-button icon="chevron-left" class="headerButton headerButtonLeft headerBackButton"></paper-icon-button>';
         }
 
-        html += '<button type="button" data-role="none" title="Menu" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft">';
-        html += '<div class="barMenuInner fa fa-bars">';
-        html += '</div>';
-        html += '</button>';
+        html += '<paper-icon-button icon="menu" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft"></paper-icon-button>';
 
         html += '<div class="libraryMenuButtonText headerButton">' + Globalize.translate('ButtonHome') + '</div>';
 
         html += '<div class="viewMenuSecondary">';
 
-        html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight hide" type="button" data-role="none"><div class="headerSelectedPlayer"></div><i class="material-icons btnCastImageDefault">cast</i><i class="material-icons btnCastImageActive">cast_connected</i></button>';
+        html += '<span class="headerSelectedPlayer"></span>';
+        html += '<paper-icon-button icon="cast" class="btnCast headerButton headerButtonRight hide"></paper-icon-button>';
 
-        html += '<button onclick="Search.showSearchPanel();" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton hide"><i class="material-icons">search</i></button>';
+        html += '<paper-icon-button icon="search" class="headerButton headerButtonRight headerSearchButton hide" onclick="Search.showSearchPanel();"></paper-icon-button>';
         html += '<div class="viewMenuSearch hide">';
         html += '<form class="viewMenuSearchForm">';
         html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />';
         html += '<div class="searchInputIcon fa fa-search"></div>';
-        html += '<button data-role="none" type="button" data-iconpos="notext" class="imageButton btnCloseSearch"><i class="fa fa-close"></i></button>';
+        html += '<paper-icon-button icon="close" class="btnCloseSearch"></paper-icon-button>';
         html += '</form>';
         html += '</div>';
 
-        html += '<button onclick="VoiceInputManager.startListening();" type="button" data-role="none" class="headerButton headerButtonRight headerVoiceButton hide"><i class="material-icons">mic</i></button>';
+        html += '<paper-icon-button icon="mic" class="headerButton headerButtonRight headerVoiceButton hide" onclick="VoiceInputManager.startListening();"></paper-icon-button>';
 
         if (!showUserAtTop()) {
             html += '<button class="headerButton headerButtonRight headerUserButton" type="button" data-role="none" onclick="Dashboard.showUserFlyout(this);">';
@@ -40,8 +38,7 @@
         }
 
         if (!$.browser.mobile && !AppInfo.isNativeApp) {
-            html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton hide" onclick="return LibraryMenu.onLinkClicked(this);"><i class="material-icons">settings</i></a>';
-            //html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton clearLink" style="display:none;"><paper-icon-button icon="settings"></paper-icon-button></a>';
+            html += '<paper-icon-button icon="settings" class="headerButton headerButtonRight dashboardEntryHeaderButton hide" onclick="Dashboard.navigate(\'dashboard.html\');"></paper-icon-button>';
         }
 
         html += '</div>';
@@ -311,9 +308,15 @@
 
         html += Dashboard.getToolsMenuHtml(page);
 
+        html = html.split('href=').join('onclick="return LibraryMenu.onLinkClicked(this);" href=');
+
         $('.dashboardDrawerContent', drawer).html(html);
     }
 
+    function replaceAll(string, find, replace) {
+        return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
+    }
+
     function refreshBottomUserInfoInDrawer(user, drawer) {
 
         var html = '';
@@ -352,7 +355,7 @@
         }
 
         if (showUserAtTop()) {
-            html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLinkClicked(this);" href="#" onclick="Dashboard.logout();"><iron-icon icon="lock" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
+            html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><iron-icon icon="lock" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
         }
 
         html += '</div>';
@@ -515,6 +518,20 @@
                 }, 300);
             }
 
+            return false;
+        },
+
+        onLogoutClicked: function () {
+            // There doesn't seem to be a way to detect if the drawer is in the process of opening, so try to handle that here
+            if ((new Date().getTime() - lastOpenTime) > 200) {
+
+                closeMainDrawer();
+
+                setTimeout(function () {
+                    Dashboard.logout();
+                }, 300);
+            }
+
             return false;
         }
     };
@@ -525,12 +542,16 @@
 
         if (info.isLocalPlayer) {
 
-            $('.btnCast').addClass('btnDefaultCast').removeClass('btnActiveCast');
+            $('.btnCast').removeClass('btnActiveCast').each(function () {
+                this.icon = 'cast';
+            });
             $('.headerSelectedPlayer').html('');
 
         } else {
 
-            $('.btnCast').removeClass('btnDefaultCast').addClass('btnActiveCast');
+            $('.btnCast').addClass('btnActiveCast').each(function () {
+                this.icon = 'cast-connected';
+            });
 
             $('.headerSelectedPlayer').html((info.deviceName || info.name));
         }
diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js
index 9cca4e8585..a859130a74 100644
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@@ -29,17 +29,17 @@
         html += '<div class="nowPlayingText"></div>';
 
         // The onclicks are needed due to the return false above
-        html += '<a class="mediaButton remoteControlButton imageButton" href="nowplaying.html" onclick="Dashboard.navigate(this.href, false, this.getAttribute(\'data-transition\'));return false;" title="' + Globalize.translate('ButtonRemoteControl') + '"><i class="fa fa-tablet"></i></a>';
-        html += '<a class="mediaButton playlistButton imageButton" href="nowplaying.html?tab=Playlist" onclick="Dashboard.navigate(this.href, false, this.getAttribute(\'data-transition\'));return false;" title="' + Globalize.translate('ButtonPlaylist') + '"><i class="fa fa-list"></i></a>';
+        html += '<paper-icon-button icon="tablet-android" onclick="Dashboard.navigate(\'nowplaying.html\', false);" class="mediaButton remoteControlButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="view-list" onclick="Dashboard.navigate(\'nowplaying.html?tab=Playlist\', false);" class="mediaButton playlistButton"></paper-icon-button>';
 
-        html += '<button class="mediaButton previousTrackButton imageButton" title="' + Globalize.translate('ButtonPreviousTrack') + '" type="button" data-role="none"><i class="fa fa-step-backward"></i></button>';
+        html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton"></paper-icon-button>';
 
-        html += '<button class="mediaButton unpauseButton imageButton" title="' + Globalize.translate('ButtonPlay') + '" type="button" data-role="none"><i class="fa fa-play"></i></button>';
-        html += '<button class="mediaButton pauseButton imageButton" title="' + Globalize.translate('ButtonPause') + '" type="button" data-role="none"><i class="fa fa-pause"></i></button>';
+        html += '<paper-icon-button icon="play-arrow" class="mediaButton unpauseButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="pause" class="mediaButton pauseButton"></paper-icon-button>';
 
-        html += '<button class="mediaButton stopButton imageButton" title="' + Globalize.translate('ButtonStop') + '" type="button" data-role="none"><i class="fa fa-stop"></i></button>';
+        html += '<paper-icon-button icon="stop" class="stopButton mediaButton"></paper-icon-button>';
 
-        html += '<button class="mediaButton nextTrackButton imageButton" title="' + Globalize.translate('ButtonNextTrack') + '" type="button" data-role="none"><i class="fa fa-step-forward"></i></button>';
+        html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton"></paper-icon-button>';
 
         html += '<div id="mediaElement"></div>';
 
@@ -48,8 +48,8 @@
         html += '</div>';
 
         html += '<div class="currentTime"></div>';
-        html += '<button class="mediaButton muteButton imageButton" title="' + Globalize.translate('ButtonMute') + '" type="button" data-role="none"><i class="fa fa-volume-up"></i></button>';
-        html += '<button class="mediaButton unmuteButton imageButton" title="' + Globalize.translate('ButtonUnmute') + '" type="button" data-role="none"><i class="fa fa-volume-off"></i></button>';
+        html += '<paper-icon-button icon="volume-up" class="muteButton mediaButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="volume-off" class="unmuteButton mediaButton"></paper-icon-button>';
 
         html += '<div class="volumeSliderContainer sliderContainer">';
         html += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
@@ -334,7 +334,7 @@
         nowPlayingTextElement.html(nameHtml);
 
         var url;
-        var imgHeight = 50;
+        var imgHeight = 60;
 
         var nowPlayingItem = state.NowPlayingItem;
 
diff --git a/dashboard-ui/scripts/pluginspage.js b/dashboard-ui/scripts/pluginspage.js
index 71b4ca60d5..0624797a0d 100644
--- a/dashboard-ui/scripts/pluginspage.js
+++ b/dashboard-ui/scripts/pluginspage.js
@@ -84,10 +84,8 @@
 
         html += '<div class="cardFooter">';
 
-        html += '<div class="cardText" style="text-align:right; float:right;font-size:20px;">';
-        html += '<button type="button" data-role="none" class="btnCardMenu imageButton" style="padding-right:5px;padding-top:5px;">';
-        html += '<i class="material-icons">more_vert</i>';
-        html += '</button>';
+        html += '<div class="cardText" style="text-align:right; float:right;padding-top:5px;">';
+        html += '<paper-icon-button icon="more-vert" class="btnCardMenu"></paper-icon-button>';
         html += "</div>";
 
         html += "<div class='cardText'>";
diff --git a/dashboard-ui/scripts/selectserver.js b/dashboard-ui/scripts/selectserver.js
index 3d2016ce12..4f2a98f4f2 100644
--- a/dashboard-ui/scripts/selectserver.js
+++ b/dashboard-ui/scripts/selectserver.js
@@ -83,8 +83,8 @@
         html += '<div class="cardFooter outerCardFooter">';
 
         if (server.showOptions !== false) {
-            html += '<div class="cardText" style="text-align:right; float:right;">';
-            html += '<button class="listviewMenuButton imageButton btnCardOptions btnServerMenu" type="button" data-role="none" style="margin: 4px 0 0;"><i class="material-icons">more_vert</i></button>';
+            html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+            html += '<paper-icon-button icon="more-vert" class="btnServerMenu"></paper-icon-button>';
             html += "</div>";
         }
 
@@ -317,8 +317,8 @@
 
         html += '<div class="cardFooter outerCardFooter">';
 
-        html += '<div class="cardText" style="text-align:right; float:right;">';
-        html += '<button class="listviewMenuButton imageButton btnCardOptions btnInviteMenu" type="button" data-role="none" style="margin: 4px 0 0;"><i class="material-icons">more_vert</i></button>';
+        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+        html += '<paper-icon-button icon="more-vert" class="btnInviteMenu"></paper-icon-button>';
         html += "</div>";
 
         html += '<div class="cardText">';
diff --git a/dashboard-ui/scripts/syncactivity.js b/dashboard-ui/scripts/syncactivity.js
index 0eb00ea38d..c4e2b05aad 100644
--- a/dashboard-ui/scripts/syncactivity.js
+++ b/dashboard-ui/scripts/syncactivity.js
@@ -117,10 +117,8 @@
             textLines.push('&nbsp;');
         }
 
-        html += '<div class="cardText" style="text-align:right; position:absolute; bottom:5px; right: 5px;font-size:20px;">';
-        html += '<button type="button" data-role="none" class="btnJobMenu imageButton">';
-        html += '<i class="material-icons">more_vert</i>';
-        html += '</button>';
+        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+        html += '<paper-icon-button icon="more-vert" class="btnJobMenu"></paper-icon-button>';
         html += "</div>";
 
         for (var i = 0, length = textLines.length; i < length; i++) {
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index f65d28d802..ab8548b23d 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -142,10 +142,8 @@
 
         html += '<div class="cardFooter">';
 
-        html += '<div class="cardText" style="text-align:right; float:right;font-size:20px;">';
-        html += '<button type="button" data-role="none" class="btnUserMenu imageButton">';
-        html += '<i class="material-icons">more_vert</i>';
-        html += '</button>';
+        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+        html += '<paper-icon-button icon="more-vert" class="btnUserMenu"></paper-icon-button>';
         html += "</div>";
 
         html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
diff --git a/dashboard-ui/selectserver.html b/dashboard-ui/selectserver.html
index 81b7e58828..38a9c76dc0 100644
--- a/dashboard-ui/selectserver.html
+++ b/dashboard-ui/selectserver.html
@@ -22,7 +22,7 @@
                 </div>
 
                 <div class="addServer" style="margin:1.5em 0;display:none;">
-                    <a href="connectlogin.html?mode=manualserver" class="clearLink"><paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonAddServer}</span></paper-button></a>
+                    <a href="connectlogin.html?mode=manualserver" class="clearLink"><paper-button raised class="submit block"><iron-icon icon="add"></iron-icon><span>${ButtonAddServer}</span></paper-button></a>
                 </div>
 
                 <div class="connectLogin" style="margin:1.5em 0;display:none;">
diff --git a/dashboard-ui/thirdparty/emby-icons.html b/dashboard-ui/thirdparty/emby-icons.html
index ea060e40de..055e932106 100644
--- a/dashboard-ui/thirdparty/emby-icons.html
+++ b/dashboard-ui/thirdparty/emby-icons.html
@@ -72,6 +72,7 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
             <g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z" /></g>
             <g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" /></g>
             <g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" /></g>
+            <g id="mic"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" /></g>
             <g id="insert-drive-file"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z" /></g>
             <g id="video-library"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" /></g>
             <g id="people"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" /></g>
@@ -84,6 +85,18 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
             <g id="library-music"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z" /></g>
             <g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></g>
             <g id="library-books"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z" /></g>
-    </defs>
+            <g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></g>
+            <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></g>
+            <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" /></g>
+            <g id="pause"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></g>
+            <g id="stop"><path d="M6 6h12v12H6z" /></g>
+            <g id="skip-next"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" /></g>
+            <g id="skip-previous"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" /></g>
+            <g id="volume-off"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" /></g>
+            <g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" /></g>
+            <g id="thumb-down"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z" /></g>
+            <g id="thumb-up"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z" /></g>
+            <g id="favorite"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></g>
+        </defs>
     </svg>
 </iron-iconset-svg>
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index 599c2065c8..5acfad9ebc 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -237,3 +237,15 @@ paper-dialog > *:last-child {
 paper-dialog > *:first-child {
     margin-top: 12px;
 }
+
+paper-icon-button paper-ripple {
+    color: inherit !important;
+}
+
+iron-overlay-backdrop {
+    background-color: transparent !important;
+}
+
+    iron-overlay-backdrop.visibleBackground {
+        background-color: #000 !important;
+    }
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index 9ed8ad25f5..97a51a7f1a 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -13517,6 +13517,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
             <g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"></path></g>
             <g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path></g>
             <g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></g>
+            <g id="mic"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"></path></g>
             <g id="insert-drive-file"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></g>
             <g id="video-library"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"></path></g>
             <g id="people"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path></g>
@@ -13529,7 +13530,19 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
             <g id="library-music"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"></path></g>
             <g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
             <g id="library-books"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"></path></g>
-    </defs>
+            <g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
+            <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g>
+            <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></g>
+            <g id="pause"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></g>
+            <g id="stop"><path d="M6 6h12v12H6z"></path></g>
+            <g id="skip-next"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path></g>
+            <g id="skip-previous"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path></g>
+            <g id="volume-off"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path></g>
+            <g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></g>
+            <g id="thumb-down"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path></g>
+            <g id="thumb-up"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path></g>
+            <g id="favorite"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></g>
+        </defs>
     </svg>
 </iron-iconset-svg>
 </div></body></html>