From 95dcb8802a9aea9fe073169a81648fc69d78f02d Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 11 Dec 2022 10:30:04 -0800
Subject: [PATCH] Use ResolvedIcon, remove extra div

---
 src/components/resolvedicon.jsx      | 12 ++--
 src/components/widgets/logo/logo.jsx | 99 ++++++++++++++--------------
 2 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx
index 2a3701e8..3dad2b0e 100644
--- a/src/components/resolvedicon.jsx
+++ b/src/components/resolvedicon.jsx
@@ -1,9 +1,9 @@
 import Image from "next/future/image";
 
-export default function ResolvedIcon({ icon }) {
+export default function ResolvedIcon({ icon, width = 32, height = 32 }) {
   // direct or relative URLs
   if (icon.startsWith("http") || icon.startsWith("/")) {
-    return <Image src={`${icon}`} width={32} height={32} alt="logo" />;
+    return <Image src={`${icon}`} width={width} height={height} alt="logo" />;
   }
 
   // mdi- prefixed, material design icons
@@ -12,8 +12,8 @@ export default function ResolvedIcon({ icon }) {
     return (
       <div
         style={{
-          width: 32,
-          height: 32,
+          width,
+          height,
           maxWidth: '100%',
           maxHeight: '100%',
           background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
@@ -29,8 +29,8 @@ export default function ResolvedIcon({ icon }) {
   return (
     <Image
       src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
-      width={32}
-      height={32}
+      width={width}
+      height={height}
       alt="logo"
     />
   );
diff --git a/src/components/widgets/logo/logo.jsx b/src/components/widgets/logo/logo.jsx
index 29ec3e2e..96e8569f 100644
--- a/src/components/widgets/logo/logo.jsx
+++ b/src/components/widgets/logo/logo.jsx
@@ -1,64 +1,61 @@
-import Image from "next/future/image";
+import ResolvedIcon from "components/resolvedicon"
 
 export default function Logo({ options }) {
   return (
     <div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center">
-      {options.source ?
-        <Image src={`${options.source}`} width={48} height={48} alt="logo" /> :
-
-        // if source parameter is not set, use fallback homepage logo
-        <div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 1024 1024"
-            style={{
-              enableBackground: "new 0 0 1024 1024",
-            }}
-            xmlSpace="preserve"
-            className="w-full h-full"
-          >
-            <style>
-              {
-                ".st0{display:none}.st3{stroke-linecap:square}.st3,.st4{fill:none;stroke:#fff;stroke-miterlimit:10}.st6{display:inline;fill:#333}.st7{fill:#fff}"
-              }
-            </style>
-            <g id="Icon">
-              <path
-                d="M771.9 191c27.7 0 50.1 26.5 50.1 59.3v186.4l-100.2.3V250.3c0-32.8 22.4-59.3 50.1-59.3z"
+      {options.icon ?
+        <ResolvedIcon icon={options.icon} width={48} height={48} /> :
+        // fallback to homepage logo
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1024 1024"
+          style={{
+            enableBackground: "new 0 0 1024 1024",
+          }}
+          xmlSpace="preserve"
+          className="w-full h-full"
+        >
+          <style>
+            {
+              ".st0{display:none}.st3{stroke-linecap:square}.st3,.st4{fill:none;stroke:#fff;stroke-miterlimit:10}.st6{display:inline;fill:#333}.st7{fill:#fff}"
+            }
+          </style>
+          <g id="Icon">
+            <path
+              d="M771.9 191c27.7 0 50.1 26.5 50.1 59.3v186.4l-100.2.3V250.3c0-32.8 22.4-59.3 50.1-59.3z"
+              style={{
+                fill: "rgba(var(--color-logo-start))",
+              }}
+            />
+            <linearGradient
+              id="homepage_logo_gradient"
+              gradientUnits="userSpaceOnUse"
+              x1={200.746}
+              y1={225.015}
+              x2={764.986}
+              y2={789.255}
+            >
+              <stop
+                offset={0}
                 style={{
-                  fill: "rgba(var(--color-logo-start))",
+                  stopColor: "rgba(var(--color-logo-start))",
                 }}
               />
-              <linearGradient
-                id="homepage_logo_gradient"
-                gradientUnits="userSpaceOnUse"
-                x1={200.746}
-                y1={225.015}
-                x2={764.986}
-                y2={789.255}
-              >
-                <stop
-                  offset={0}
-                  style={{
-                    stopColor: "rgba(var(--color-logo-start))",
-                  }}
-                />
-                <stop
-                  offset={1}
-                  style={{
-                    stopColor: "rgba(var(--color-logo-stop))",
-                  }}
-                />
-              </linearGradient>
-              <path
-                d="M721.8 250.3c0-32.7 22.4-59.3 50.1-59.3H253.1c-27.7 0-50.1 26.5-50.1 59.3v582.2l90.2-75.7-.1-130.3H375v61.8l88-73.8 258.8 217.9V250.6"
+              <stop
+                offset={1}
                 style={{
-                  fill: "url(#homepage_logo_gradient)",
+                  stopColor: "rgba(var(--color-logo-stop))",
                 }}
               />
-            </g>
-          </svg>
-        </div>
+            </linearGradient>
+            <path
+              d="M721.8 250.3c0-32.7 22.4-59.3 50.1-59.3H253.1c-27.7 0-50.1 26.5-50.1 59.3v582.2l90.2-75.7-.1-130.3H375v61.8l88-73.8 258.8 217.9V250.6"
+              style={{
+                fill: "url(#homepage_logo_gradient)",
+              }}
+            />
+          </g>
+        </svg>
       }
     </div>
   )