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] 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>';