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 b6fdf7cb2a3..99a8526d923 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 ecbc4dac939..179d4f71bf0 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 76249abf646..aa1032d57db 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 99a8526d923..5eef7fc324a 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 d2cb0ad8c87..448ad352716 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 179d4f71bf0..efd84355fb4 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 aa1032d57db..b7a1e3aedea 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 5eef7fc324a..77afe1b64c8 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 7faf9221155..66f9f2e692c 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 efd84355fb4..b277cca13a4 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 b7a1e3aedea..a312df999fe 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 33d445639f1..250bbbd5354 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 23457106d1e..905a57366a4 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 b277cca13a4..4c04866383b 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 a312df999fe..c5d41094a6d 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 c5d41094a6d..cc6435482ac 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 448ad352716..7dd597f8022 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 66f9f2e692c..7abb0d23136 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 250bbbd5354..203a630158d 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 24b3a983eb2..ef7e1e5c62a 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 32674a8062e..6c6e4189a5a 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 77afe1b64c8..69a0e4e9096 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 7abb0d23136..a0acb36ad45 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 4c04866383b..261f4d2c58b 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 cc6435482ac..60360e084b6 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 ef7e1e5c62a..84596ce4c67 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 261f4d2c58b..da25b7c0a18 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 60360e084b6..654ae4c29eb 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 {