From a16233ee10a1ce7c1b8becb8d39474bf20814973 Mon Sep 17 00:00:00 2001
From: KodeStar <kodestar@gmail.com>
Date: Thu, 17 Mar 2022 10:21:24 +0000
Subject: [PATCH] Fix for displaying svg icons correctly

---
 public/css/app.css              | 14 +++++++++++++-
 public/js/app.js                |  4 ++--
 public/mix-manifest.json        |  4 ++--
 resources/assets/sass/_app.scss | 13 +++++++++++--
 resources/views/item.blade.php  | 12 +++++++-----
 5 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 28a115ae..14d279b1 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 html {
   font-family: sans-serif;
@@ -848,9 +849,20 @@ div.create .input input, div.create .input select {
   border-radius: 6px;
 }
 
+.app-icon-container {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 15px;
+  flex: 0 0 60px;
+}
+
 .app-icon {
   max-width: 60px;
-  margin-right: 15px;
+  display: block;
+  max-height: 60px;
 }
 
 .sidenav {
diff --git a/public/js/app.js b/public/js/app.js
index ef37a959..02d7a25e 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -620,14 +620,14 @@ $.when($.ready).then(function () {
       drop: function( event, ui ) {
           var tag = $( this ).data('id');
           var item = $( ui.draggable ).data('id');
-           $.get('tag/add/'+tag+'/'+item, function(data) {
+            $.get('tag/add/'+tag+'/'+item, function(data) {
               if(data == 1) {
                   $( ui.draggable ).remove();
               } else {
                   alert('not added');
               }
           });
-       }
+        }
     });*/
 
   $('#sortable').sortable({
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index b00da8d3..73a541e4 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=953b8b27868431843dae",
-    "/js/app.js": "/js/app.js?id=ff749484877e4ce6c2f6"
+    "/css/app.css": "/css/app.css?id=c5354f371a3887feab28",
+    "/js/app.js": "/js/app.js?id=c95edea425171c6ce8f6"
 }
diff --git a/resources/assets/sass/_app.scss b/resources/assets/sass/_app.scss
index c59e716b..e32cb59e 100644
--- a/resources/assets/sass/_app.scss
+++ b/resources/assets/sass/_app.scss
@@ -647,10 +647,19 @@ div.create {
 		}
 	}
 }
-
+.app-icon-container {
+	width: 60px;
+	height: 60px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 15px;
+	flex: 0 0 60px;
+}
 .app-icon {
 	max-width: 60px;
-	margin-right: 15px;
+	display: block;
+	max-height: 60px;
 }
 
 .sidenav {
diff --git a/resources/views/item.blade.php b/resources/views/item.blade.php
index 4435d2bd..db51ba40 100644
--- a/resources/views/item.blade.php
+++ b/resources/views/item.blade.php
@@ -1,10 +1,12 @@
                     <section class="item-container{{ $app->droppable }}" data-name="{{ $app->title }}" data-id="{{ $app->id }}">
                         <div class="item" style="background-color: {{ $app->colour }}">
-                            @if($app->icon)
-                            <img class="app-icon" src="{{ asset('/storage/'.str_replace('supportedapps', 'icons', $app->icon)) }}" />
-                            @else
-                            <img class="app-icon" src="{{ asset('/img/heimdall-icon-small.png') }}" />
-                            @endif
+                            <div class="app-icon-container">
+                                @if($app->icon)
+                                <img class="app-icon" src="{{ asset('/storage/'.str_replace('supportedapps', 'icons', $app->icon)) }}" />
+                                @else
+                                <img class="app-icon" src="{{ asset('/img/heimdall-icon-small.png') }}" />
+                                @endif
+                            </div>
                             <div class="details">
                                 <div class="title{{ title_color($app->colour) }}">{{ $app->title }}</div>
                                 @if($app->enabled())