From 12c6cf54988e01e46af67b01ff94a90897a01403 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Mon, 25 Jan 2021 02:50:15 +0900
Subject: [PATCH 1/8] fix image alignment on plugin cards

---
 src/components/cardbuilder/card.css            |  1 +
 .../dashboard/plugins/available/index.js       |  7 +++++--
 .../dashboard/plugins/installed/index.js       | 18 ++++++++++++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index b6fdf7cb2..99a8526d9 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -174,6 +174,7 @@ button::-moz-focus-inner {
 
 .cardScalable .cardImageContainer {
     height: 100%;
+    width: 100%;
     contain: strict;
 }
 
diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index ecbc4dac9..179d4f71b 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -1,6 +1,7 @@
 import loading from '../../../../components/loading/loading';
 import libraryMenu from '../../../../scripts/libraryMenu';
 import globalize from '../../../../scripts/globalize';
+import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
 import '../../../../components/cardbuilder/card.css';
 import '../../../../elements/emby-button/emby-button';
 import '../../../../elements/emby-checkbox/emby-checkbox';
@@ -102,10 +103,12 @@ function getPluginHtml(plugin, options, installedPlugins) {
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable visualCardBox-cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
-    html += '<span class="cardImageIcon material-icons folder"></span>';
+    html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
+    html += `<a class="cardImageContainer" is="emby-linkbutton" href="${href}" ${target}>`;
+    html += '<span class="cardImageIcon material-icons extension"></span>';
     html += '</a>';
     html += '</div>';
+    html += '</div>';
     html += '<div class="cardFooter">';
     html += "<div class='cardText'>";
     html += plugin.name;
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index 76249abf6..aa1032d57 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -2,6 +2,7 @@ import loading from '../../../../components/loading/loading';
 import libraryMenu from '../../../../scripts/libraryMenu';
 import dom from '../../../../scripts/dom';
 import globalize from '../../../../scripts/globalize';
+import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
 import '../../../../components/cardbuilder/card.css';
 import '../../../../elements/emby-button/emby-button';
 import Dashboard, { pageIdOn } from '../../../../scripts/clientUtils';
@@ -59,16 +60,21 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += configPageUrl ? `<a class="cardContent cardImageContainer" is="emby-linkbutton" href="${configPageUrl}">` : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
-    html += '<span class="cardImageIcon';
-    if (plugin.HasImage) {
-        html += `"><img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%;height:auto"/>`;
+    html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
+    if (configPageUrl) {
+        html += `<a class="cardImageContainer" is="emby-linkbutton" href="${configPageUrl}">`;
     } else {
-        html += ' material-icons folder">';
+        html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
     }
-    html += '</span> ';
+
+    html += `<span class="cardImageIcon ${plugin.HasImage ? 'material-icons extension' : ''}">`;
+    if (plugin.HasImage) {
+        html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%;height:auto" />`;
+    }
+    html += '</span>';
     html += configPageUrl ? '</a>' : '</div>';
     html += '</div>';
+    html += '</div>';
     html += '<div class="cardFooter">';
 
     if (configPage || plugin.CanUninstall) {

From 22c66ae353e2654f129b64f3a72ecea0bf3a2b39 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sat, 6 Feb 2021 15:45:48 +0900
Subject: [PATCH 2/8] add images to available plugins as well

---
 src/components/cardbuilder/card.css                  | 2 +-
 src/controllers/dashboard/devices/devices.js         | 3 ++-
 src/controllers/dashboard/plugins/available/index.js | 7 ++++++-
 src/controllers/dashboard/plugins/installed/index.js | 3 ++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 99a8526d9..5eef7fc32 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -365,7 +365,7 @@ button::-moz-focus-inner {
 }
 
 .cardImageIcon {
-    font-size: 5em;
+    font-size: 5em !important;
     color: inherit;
 }
 
diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js
index d2cb0ad8c..448ad3527 100644
--- a/src/controllers/dashboard/devices/devices.js
+++ b/src/controllers/dashboard/devices/devices.js
@@ -4,6 +4,7 @@ import globalize from '../../../scripts/globalize';
 import imageHelper from '../../../scripts/imagehelper';
 import { formatDistanceToNow } from 'date-fns';
 import { localeWithSuffix } from '../../../scripts/dfnshelper';
+import * as cardBuilder from '../../../components/cardbuilder/cardBuilder.js';
 import '../../../elements/emby-button/emby-button';
 import '../../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../../components/cardbuilder/card.css';
@@ -96,7 +97,7 @@ import confirm from '../../../components/confirm/confirm';
             deviceHtml += '<div class="cardBox visualCardBox">';
             deviceHtml += '<div class="cardScalable">';
             deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
-            deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? '#!/device.html?id=' + device.Id : '#') + '" class="cardContent cardImageContainer">';
+            deviceHtml += `<a is="emby-linkbutton" href="${canEdit ? '#!/device.html?id=' + device.Id : '#'}" class="cardContent cardImageContainer ${cardBuilder.getDefaultBackgroundClass()}">`;
             const iconUrl = imageHelper.getDeviceIcon(device);
 
             if (iconUrl) {
diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index 179d4f71b..efd84355f 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -105,7 +105,12 @@ function getPluginHtml(plugin, options, installedPlugins) {
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
     html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
     html += `<a class="cardImageContainer" is="emby-linkbutton" href="${href}" ${target}>`;
-    html += '<span class="cardImageIcon material-icons extension"></span>';
+    html += `<span class="cardImageIcon ${plugin.ImageUrl ? '' : 'material-icons extension'}">`;
+    if (plugin.ImageUrl) {
+        html += `<img src="${plugin.ImageUrl}" style="width:100%;height:auto" />`;
+    }
+
+    html += '</span>';
     html += '</a>';
     html += '</div>';
     html += '</div>';
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index aa1032d57..b7a1e3aed 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -67,10 +67,11 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
         html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
     }
 
-    html += `<span class="cardImageIcon ${plugin.HasImage ? 'material-icons extension' : ''}">`;
+    html += `<span class="cardImageIcon ${plugin.HasImage ? '' : 'material-icons extension'}">`;
     if (plugin.HasImage) {
         html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%;height:auto" />`;
     }
+
     html += '</span>';
     html += configPageUrl ? '</a>' : '</div>';
     html += '</div>';

From 50b9e1adf42fe17c23a81fe40af5fe97dbcb92ec Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sun, 7 Feb 2021 00:16:45 +0900
Subject: [PATCH 3/8] add background colors to user and library cards

---
 src/components/cardbuilder/card.css                  |  4 ++--
 src/controllers/dashboard/library.js                 |  6 ++++--
 src/controllers/dashboard/plugins/available/index.js | 11 ++++++-----
 src/controllers/dashboard/plugins/installed/index.js | 10 ++++++----
 src/controllers/dashboard/users/userprofilespage.js  |  3 ++-
 src/strings/en-us.json                               |  2 ++
 6 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 5eef7fc32..77afe1b64 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -226,8 +226,8 @@ button::-moz-focus-inner {
 }
 
 .visualCardBox .cardContent {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-top-left-radius: 0.2em;
+    border-top-right-radius: 0.2em;
 }
 
 .cardContent-shadow,
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index 7faf92211..66f9f2e69 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -9,6 +9,7 @@ import '../../components/cardbuilder/card.css';
 import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
 import Dashboard, { pageClassOn, pageIdOn } from '../../scripts/clientUtils';
 import confirm from '../../components/confirm/confirm';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -276,10 +277,11 @@ import confirm from '../../components/confirm/confirm';
         let hasCardImageContainer;
 
         if (imgUrl) {
-            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">";
+            html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
+            html += `<img src="${imgUrl}" style="width:100%" />`;
             hasCardImageContainer = true;
         } else if (!virtualFolder.showNameWithIcon) {
-            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">';
+            html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer;">`;
             html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
             hasCardImageContainer = true;
         }
diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index efd84355f..b277cca13 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -104,13 +104,14 @@ function getPluginHtml(plugin, options, installedPlugins) {
     html += '<div class="cardScalable visualCardBox-cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
     html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
-    html += `<a class="cardImageContainer" is="emby-linkbutton" href="${href}" ${target}>`;
-    html += `<span class="cardImageIcon ${plugin.ImageUrl ? '' : 'material-icons extension'}">`;
-    if (plugin.ImageUrl) {
-        html += `<img src="${plugin.ImageUrl}" style="width:100%;height:auto" />`;
+    html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${href}" ${target}>`;
+
+    if (plugin.imageUrl) {
+        html += `<img src="${plugin.imageUrl}" style="width:100%" />`;
+    } else {
+        html += `<span class="cardImageIcon material-icons extension"></span>`;
     }
 
-    html += '</span>';
     html += '</a>';
     html += '</div>';
     html += '</div>';
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index b7a1e3aed..a312df999 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -54,8 +54,10 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
         return pluginConfigurationPage.PluginId == plugin.Id;
     })[0];
+
     const configPageUrl = configPage ? Dashboard.getPluginUrl(configPage.Name) : null;
     let html = '';
+
     html += `<div data-id='${plugin.Id}' data-version='${plugin.Version}' data-name='${plugin.Name}' data-removable='${plugin.CanUninstall}' data-status='${plugin.Status}' class='card backdropCard'>`;
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable">';
@@ -67,12 +69,12 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
         html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
     }
 
-    html += `<span class="cardImageIcon ${plugin.HasImage ? '' : 'material-icons extension'}">`;
     if (plugin.HasImage) {
-        html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%;height:auto" />`;
+        html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%" />`;
+    } else {
+        html += `<span class="cardImageIcon material-icons extension"></span>`;
     }
 
-    html += '</span>';
     html += configPageUrl ? '</a>' : '</div>';
     html += '</div>';
     html += '</div>';
@@ -140,7 +142,7 @@ function showPluginMenu(page, elem) {
     const id = card.getAttribute('data-id');
     const name = card.getAttribute('data-name');
     const removable = card.getAttribute('data-removable');
-    const configHref = card.querySelector('.cardContent').getAttribute('href');
+    const configHref = card.querySelector('.cardImageContainer').getAttribute('href');
     const status = card.getAttribute('data-status');
     const version = card.getAttribute('data-version');
     const menuItems = [];
diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js
index 33d445639..250bbbd53 100644
--- a/src/controllers/dashboard/users/userprofilespage.js
+++ b/src/controllers/dashboard/users/userprofilespage.js
@@ -10,6 +10,7 @@ import '../../../components/indicators/indicators.css';
 import '../../../assets/css/flexstyles.scss';
 import Dashboard, { pageIdOn } from '../../../scripts/clientUtils';
 import confirm from '../../../components/confirm/confirm';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -93,7 +94,7 @@ import confirm from '../../../components/confirm/confirm';
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-square"></div>';
-        html += '<a is="emby-linkbutton" class="cardContent" href="#!/useredit.html?userId=' + user.Id + '">';
+        html += `<a is="emby-linkbutton" class="cardContent ${cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
         let imgUrl;
 
         if (user.PrimaryImageTag) {
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 23457106d..905a57366 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -179,6 +179,8 @@
     "DirectStreamHelp1": "The video stream is compatible with the device, but has an incompatible audio format (DTS, TRUEHD, etc) or number of audio channels. The video stream will be repackaged losslessly on the fly before being sent to the device. Only the audio stream will be transcoded.",
     "DirectStreamHelp2": "Power consumed by direct streaming usually depends on the audio profile. Only the video stream is lossless.",
     "DirectStreaming": "Direct streaming",
+    "EnablePlugin": "Enable Plugin",
+    "DisablePlugin": "Disable Plugin",
     "Disc": "Disc",
     "Disconnect": "Disconnect",
     "Display": "Display",

From 336843b0ba9ce1f63bdbd7f63ed86baa82eff6f9 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sun, 7 Feb 2021 00:24:47 +0900
Subject: [PATCH 4/8] switch to single quotes when possible

---
 src/controllers/dashboard/plugins/available/index.js | 2 +-
 src/controllers/dashboard/plugins/installed/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index b277cca13..4c0486638 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -109,7 +109,7 @@ function getPluginHtml(plugin, options, installedPlugins) {
     if (plugin.imageUrl) {
         html += `<img src="${plugin.imageUrl}" style="width:100%" />`;
     } else {
-        html += `<span class="cardImageIcon material-icons extension"></span>`;
+        html += '<span class="cardImageIcon material-icons extension"></span>';
     }
 
     html += '</a>';
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index a312df999..c5d41094a 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -72,7 +72,7 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     if (plugin.HasImage) {
         html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%" />`;
     } else {
-        html += `<span class="cardImageIcon material-icons extension"></span>`;
+        html += '<span class="cardImageIcon material-icons extension"></span>';
     }
 
     html += configPageUrl ? '</a>' : '</div>';

From 4fd5818afd7193aa1259dfb278839708de92a107 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sun, 7 Feb 2021 00:47:37 +0900
Subject: [PATCH 5/8] remove newline for now

---
 src/controllers/dashboard/plugins/installed/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index c5d41094a..cc6435482 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -74,7 +74,6 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     } else {
         html += '<span class="cardImageIcon material-icons extension"></span>';
     }
-
     html += configPageUrl ? '</a>' : '</div>';
     html += '</div>';
     html += '</div>';

From 5f7b002b6e56ff146240adf7997406a2502fec00 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Tue, 16 Feb 2021 22:52:28 +0900
Subject: [PATCH 6/8] tweak the background color behavior

---
 src/controllers/dashboard/devices/devices.js  |  3 +-
 src/controllers/dashboard/library.js          |  2 +-
 .../dashboard/users/userprofilespage.js       |  4 +--
 src/controllers/session/login/index.js        | 33 ++++---------------
 src/controllers/session/selectServer/index.js |  3 +-
 5 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js
index 448ad3527..7dd597f80 100644
--- a/src/controllers/dashboard/devices/devices.js
+++ b/src/controllers/dashboard/devices/devices.js
@@ -4,7 +4,6 @@ import globalize from '../../../scripts/globalize';
 import imageHelper from '../../../scripts/imagehelper';
 import { formatDistanceToNow } from 'date-fns';
 import { localeWithSuffix } from '../../../scripts/dfnshelper';
-import * as cardBuilder from '../../../components/cardbuilder/cardBuilder.js';
 import '../../../elements/emby-button/emby-button';
 import '../../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../../components/cardbuilder/card.css';
@@ -97,7 +96,7 @@ import confirm from '../../../components/confirm/confirm';
             deviceHtml += '<div class="cardBox visualCardBox">';
             deviceHtml += '<div class="cardScalable">';
             deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
-            deviceHtml += `<a is="emby-linkbutton" href="${canEdit ? '#!/device.html?id=' + device.Id : '#'}" class="cardContent cardImageContainer ${cardBuilder.getDefaultBackgroundClass()}">`;
+            deviceHtml += `<a is="emby-linkbutton" href="${canEdit ? '#!/device.html?id=' + device.Id : '#'}" class="cardContent cardImageContainer">`;
             const iconUrl = imageHelper.getDeviceIcon(device);
 
             if (iconUrl) {
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index 66f9f2e69..7abb0d231 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -277,7 +277,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
         let hasCardImageContainer;
 
         if (imgUrl) {
-            html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
+            html += `<div class="cardImageContainer editLibrary ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
             html += `<img src="${imgUrl}" style="width:100%" />`;
             hasCardImageContainer = true;
         } else if (!virtualFolder.showNameWithIcon) {
diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js
index 250bbbd53..203a63015 100644
--- a/src/controllers/dashboard/users/userprofilespage.js
+++ b/src/controllers/dashboard/users/userprofilespage.js
@@ -94,7 +94,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-square"></div>';
-        html += `<a is="emby-linkbutton" class="cardContent ${cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
+        html += `<a is="emby-linkbutton" class="cardContent ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
         let imgUrl;
 
         if (user.PrimaryImageTag) {
@@ -114,7 +114,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
         if (imgUrl) {
             html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">";
         } else {
-            html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">';
+            html += `<div class="${imageClass} ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()} flex align-items-center justify-content-center">`;
             html += '<span class="material-icons cardImageIcon person"></span>';
         }
 
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 24b3a983e..ef7e1e5c6 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -13,6 +13,7 @@ import ServerConnections from '../../../components/ServerConnections';
 import toast from '../../../components/toast/toast';
 import dialogHelper from '../../../components/dialogHelper/dialogHelper';
 import baseAlert from '../../../components/alert';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -131,29 +132,6 @@ import baseAlert from '../../../components/alert';
         }
     }
 
-    const metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037'];
-
-    function getRandomMetroColor() {
-        const index = Math.floor(Math.random() * (metroColors.length - 1));
-        return metroColors[index];
-    }
-
-    function getMetroColor(str) {
-        if (str) {
-            const character = String(str.substr(0, 1).charCodeAt());
-            let sum = 0;
-
-            for (let i = 0; i < character.length; i++) {
-                sum += parseInt(character.charAt(i));
-            }
-
-            const index = String(sum).substr(-1);
-            return metroColors[index];
-        }
-
-        return getRandomMetroColor();
-    }
-
     function loadUserList(context, apiClient, users) {
         let html = '';
 
@@ -176,7 +154,7 @@ import baseAlert from '../../../components/alert';
             html += '<div class="' + cardBoxCssClass + '">';
             html += '<div class="cardScalable">';
             html += '<div class="cardPadder cardPadder-square"></div>';
-            html += '<div class="cardContent" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
+            html += `<div class="cardContent" style="border-radius:0.2em" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
             let imgUrl;
 
             if (user.PrimaryImageTag) {
@@ -185,11 +163,12 @@ import baseAlert from '../../../components/alert';
                     tag: user.PrimaryImageTag,
                     type: 'Primary'
                 });
+
                 html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');\"></div>";
             } else {
-                const background = getMetroColor(user.Id);
-                imgUrl = 'assets/img/avatar.png';
-                html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
+                html += `<div class="cardImage flex align-items-center justify-content-center ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}">`;
+                html += '<span class="material-icons cardImageIcon person"></span>';
+                html += `</div>`;
             }
 
             html += '</div>';
diff --git a/src/controllers/session/selectServer/index.js b/src/controllers/session/selectServer/index.js
index 32674a806..6c6e4189a 100644
--- a/src/controllers/session/selectServer/index.js
+++ b/src/controllers/session/selectServer/index.js
@@ -17,6 +17,7 @@ import '../../../elements/emby-button/emby-button';
 import Dashboard from '../../../scripts/clientUtils';
 import ServerConnections from '../../../components/ServerConnections';
 import alert from '../../../components/alert';
+import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -64,7 +65,7 @@ import alert from '../../../components/alert';
             cardContainer += '<div class="cardPadder cardPadder-square">';
             cardContainer += '</div>';
             cardContainer += '<div class="cardContent">';
-            cardContainer += '<div class="cardImageContainer coveredImage" style="background:#0288D1;border-radius:.15em;">';
+            cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}" style="border-radius:0.2em">`;
             cardContainer += cardImageContainer;
             cardContainer += '</div>';
             cardContainer += '</div>';

From c1e3b881ae1d13f273d24a4575e2f258da92d599 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Wed, 17 Feb 2021 12:07:42 +0900
Subject: [PATCH 7/8] update material icon style

---
 src/components/cardbuilder/card.css                  | 7 +------
 src/controllers/dashboard/library.js                 | 4 ++--
 src/controllers/dashboard/plugins/available/index.js | 4 +++-
 src/controllers/dashboard/plugins/installed/index.js | 6 ++++--
 src/controllers/session/login/index.js               | 4 ++--
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 77afe1b64..69a0e4e90 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -365,15 +365,10 @@ button::-moz-focus-inner {
 }
 
 .cardImageIcon {
-    font-size: 5em !important;
+    font-size: 5em;
     color: inherit;
 }
 
-.cardImageIcon-small {
-    font-size: 3em !important;
-    margin-bottom: 0.1em;
-}
-
 .cardIndicators {
     right: 0.225em;
     top: 0.225em;
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index 7abb0d231..a0acb36ad 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -282,7 +282,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
             hasCardImageContainer = true;
         } else if (!virtualFolder.showNameWithIcon) {
             html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer;">`;
-            html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
+            html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
             hasCardImageContainer = true;
         }
 
@@ -295,7 +295,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
 
         if (!imgUrl && virtualFolder.showNameWithIcon) {
             html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
-            html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
+            html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
 
             if (virtualFolder.showNameWithIcon) {
                 html += '<div style="margin:1em 0;position:width:100%;">';
diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index 4c0486638..261f4d2c5 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -103,13 +103,15 @@ function getPluginHtml(plugin, options, installedPlugins) {
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable visualCardBox-cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
+    html += `<div class="cardContent">`;
     html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${href}" ${target}>`;
 
     if (plugin.imageUrl) {
         html += `<img src="${plugin.imageUrl}" style="width:100%" />`;
     } else {
+        html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
         html += '<span class="cardImageIcon material-icons extension"></span>';
+        html += '</div>';
     }
 
     html += '</a>';
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index cc6435482..60360e084 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -62,9 +62,9 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
+    html += `<div class="cardContent">`;
     if (configPageUrl) {
-        html += `<a class="cardImageContainer" is="emby-linkbutton" href="${configPageUrl}">`;
+        html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${configPageUrl}">`;
     } else {
         html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
     }
@@ -72,7 +72,9 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     if (plugin.HasImage) {
         html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%" />`;
     } else {
+        html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
         html += '<span class="cardImageIcon material-icons extension"></span>';
+        html += '</div>';
     }
     html += configPageUrl ? '</a>' : '</div>';
     html += '</div>';
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index ef7e1e5c6..84596ce4c 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -166,9 +166,9 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 
                 html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');\"></div>";
             } else {
-                html += `<div class="cardImage flex align-items-center justify-content-center ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}">`;
+                html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
                 html += '<span class="material-icons cardImageIcon person"></span>';
-                html += `</div>`;
+                html += '</div>';
             }
 
             html += '</div>';

From 9fbefcdb8f9afb2259b43ebf6373aa34510f77fc Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Wed, 17 Feb 2021 12:11:21 +0900
Subject: [PATCH 8/8] fix linting issues

---
 src/controllers/dashboard/plugins/available/index.js | 2 +-
 src/controllers/dashboard/plugins/installed/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index 261f4d2c5..da25b7c0a 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -103,7 +103,7 @@ function getPluginHtml(plugin, options, installedPlugins) {
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable visualCardBox-cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += `<div class="cardContent">`;
+    html += '<div class="cardContent">';
     html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${href}" ${target}>`;
 
     if (plugin.imageUrl) {
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index 60360e084..654ae4c29 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -62,7 +62,7 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable">';
     html += '<div class="cardPadder cardPadder-backdrop"></div>';
-    html += `<div class="cardContent">`;
+    html += '<div class="cardContent">';
     if (configPageUrl) {
         html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${configPageUrl}">`;
     } else {