From 49bcbcbb6a75ebfec6a55ba588fcf230786185f0 Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:35:39 +0530
Subject: [PATCH] Update logo to svg

---
 renderer/components/icons/Logo.tsx            | 171 ++++++++++++++++++
 .../upscayl-tab/view/ProgressBar.tsx          |   6 +-
 renderer/public/logo.svg                      |  48 +++++
 3 files changed, 223 insertions(+), 2 deletions(-)
 create mode 100644 renderer/components/icons/Logo.tsx
 create mode 100644 renderer/public/logo.svg

diff --git a/renderer/components/icons/Logo.tsx b/renderer/components/icons/Logo.tsx
new file mode 100644
index 0000000..f311a48
--- /dev/null
+++ b/renderer/components/icons/Logo.tsx
@@ -0,0 +1,171 @@
+import React from "react";
+
+const Logo = ({ ...rest }) => {
+  return (
+    <svg
+      width="256"
+      height="256"
+      viewBox="0 0 256 256"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <g clipPath="url(#clip0_1263_67)">
+        <path
+          d="M198.54 256H57.46C42.2425 256 27.6185 249.948 16.8475 239.177C6.077 228.407 0 213.782 0 198.54V57.46C0 42.2425 6.077 27.618 16.8475 16.8475C27.6185 6.077 42.2425 0.0245 57.46 0L198.54 0.024498C213.782 0.024498 228.407 6.077 239.177 16.8475C249.948 27.618 256 42.2425 256 57.46V198.54C256 213.782 249.948 228.407 239.177 239.177C228.407 249.948 213.782 256 198.54 256Z"
+          fill="#304059"
+        />
+        <mask
+          id="mask0_1263_67"
+          style={{
+            maskType: "luminance",
+          }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="256"
+          height="256"
+        >
+          <path
+            d="M198.54 256H57.46C42.2425 256 27.6185 249.948 16.8475 239.177C6.077 228.407 0 213.782 0 198.54V57.46C0 42.2425 6.077 27.618 16.8475 16.8475C27.6185 6.077 42.2425 0.0245 57.46 0L198.54 0.024498C213.782 0.024498 228.407 6.077 239.177 16.8475C249.948 27.618 256 42.2425 256 57.46V198.54C256 213.782 249.948 228.407 239.177 239.177C228.407 249.948 213.782 256 198.54 256Z"
+            fill="white"
+          />
+        </mask>
+        <g mask="url(#mask0_1263_67)">
+          <path
+            d="M198.542 243.642H57.4579C32.5664 243.642 12.3579 223.434 12.3579 198.542V57.4582C12.3579 32.5667 32.5664 12.3582 57.4579 12.3582H198.542C223.433 12.3582 243.642 32.5667 243.642 57.4582V198.542C243.642 223.434 223.433 243.642 198.542 243.642Z"
+            fill="#304059"
+          />
+          <mask
+            id="mask1_1263_67"
+            style={{
+              maskType: "luminance",
+            }}
+            maskUnits="userSpaceOnUse"
+            x="12"
+            y="12"
+            width="232"
+            height="232"
+          >
+            <path
+              d="M198.542 243.642H57.4579C32.5664 243.642 12.3579 223.434 12.3579 198.542V57.4582C12.3579 32.5667 32.5664 12.3582 57.4579 12.3582H198.542C223.433 12.3582 243.642 32.5667 243.642 57.4582V198.542C243.642 223.434 223.433 243.642 198.542 243.642Z"
+              fill="white"
+            />
+          </mask>
+          <g mask="url(#mask1_1263_67)">
+            <path
+              d="M127.992 50.9193H89.447V12.3743H127.992V50.9193Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M127.992 89.4637H89.447V50.9192H127.992V89.4637Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M127.992 128.008H89.447V89.4636H127.992V128.008Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M127.992 166.553H89.447V128.008H127.992V166.553Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M127.992 205.098H89.447V166.553H127.992V205.098Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M127.992 243.642H89.447V205.098H127.992V243.642Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M89.4469 50.9193H50.9023V12.3743H89.4469V50.9193Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M89.4469 89.4637H50.9023V50.9192H89.4469V89.4637Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M89.4469 128.008H50.9023V89.4636H89.4469V128.008Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M89.4469 166.553H50.9023V128.008H89.4469V166.553Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M89.4469 205.098H50.9023V166.553H89.4469V205.098Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M89.4469 243.642H50.9023V205.098H89.4469V243.642Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M50.9024 50.92H12.3579V12.375H50.9024V50.92Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M50.9024 89.4637H12.3579V50.9192H50.9024V89.4637Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M50.9024 128.008H12.3579V89.4636H50.9024V128.008Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M50.9024 166.553H12.3579V128.008H50.9024V166.553Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M50.9024 205.098H12.3579V166.553H50.9024V205.098Z"
+              fill="#4791CE"
+            />
+            <path
+              d="M50.9024 243.642H12.3579V205.098H50.9024V243.642Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M243.642 243.659H128V12.3743H243.642V243.659Z"
+              fill="url(#paint0_linear_1263_67)"
+            />
+            <path
+              d="M156.701 128C156.701 143.845 143.837 156.71 127.992 156.71C112.146 156.71 99.2825 143.845 99.2825 128C99.2825 112.155 112.146 99.2908 127.992 99.2908C143.837 99.2908 156.701 112.155 156.701 128Z"
+              fill="#304059"
+            />
+            <path
+              d="M148.396 128L142.135 123.754L135.874 119.509V128V136.492L142.135 132.246L148.396 128Z"
+              fill="#87BDFF"
+            />
+            <path
+              d="M107.588 128L113.857 123.754L120.126 119.509V128V136.492L113.857 132.246L107.588 128Z"
+              fill="#87BDFF"
+            />
+          </g>
+          <path
+            d="M134.182 247.202H121.818V8.79858H134.182V247.202Z"
+            fill="#304059"
+          />
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_1263_67"
+          x1="184.354"
+          y1="20.4191"
+          x2="176.727"
+          y2="245.417"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#87BDFF" />
+          <stop offset="0.970833" stop-color="#4791CE" />
+        </linearGradient>
+        <clipPath id="clip0_1263_67">
+          <rect width="256" height="256" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Logo;
diff --git a/renderer/components/upscayl-tab/view/ProgressBar.tsx b/renderer/components/upscayl-tab/view/ProgressBar.tsx
index c27aa99..340ae1e 100644
--- a/renderer/components/upscayl-tab/view/ProgressBar.tsx
+++ b/renderer/components/upscayl-tab/view/ProgressBar.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import Spinner from "../../icons/Spinner";
+import Logo from "@/components/icons/Logo";
 
 function ProgressBar({
   progress,
@@ -25,11 +26,12 @@ function ProgressBar({
   return (
     <div className="absolute z-50 flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
       <div className="flex flex-col items-center rounded-btn bg-base-100/50 p-4 backdrop-blur-lg">
-        <img
+        {/* <img
           src="icon.png"
           alt="Upscayl Icon"
           className="spinner mb-4 h-12 w-12"
-        />
+        /> */}
+        <Logo className="spinner mb-4 h-12 w-12" />
         <p className="rounded-full px-2 pb-2 font-bold">
           {batchMode && "Batch Upscale In Progress: " + batchProgress}
 
diff --git a/renderer/public/logo.svg b/renderer/public/logo.svg
new file mode 100644
index 0000000..31675bb
--- /dev/null
+++ b/renderer/public/logo.svg
@@ -0,0 +1,48 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1263_67)">
+<path d="M198.54 256H57.46C42.2425 256 27.6185 249.948 16.8475 239.177C6.077 228.407 0 213.782 0 198.54V57.46C0 42.2425 6.077 27.618 16.8475 16.8475C27.6185 6.077 42.2425 0.0245 57.46 0L198.54 0.024498C213.782 0.024498 228.407 6.077 239.177 16.8475C249.948 27.618 256 42.2425 256 57.46V198.54C256 213.782 249.948 228.407 239.177 239.177C228.407 249.948 213.782 256 198.54 256Z" fill="#304059"/>
+<mask id="mask0_1263_67" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
+<path d="M198.54 256H57.46C42.2425 256 27.6185 249.948 16.8475 239.177C6.077 228.407 0 213.782 0 198.54V57.46C0 42.2425 6.077 27.618 16.8475 16.8475C27.6185 6.077 42.2425 0.0245 57.46 0L198.54 0.024498C213.782 0.024498 228.407 6.077 239.177 16.8475C249.948 27.618 256 42.2425 256 57.46V198.54C256 213.782 249.948 228.407 239.177 239.177C228.407 249.948 213.782 256 198.54 256Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1263_67)">
+<path d="M198.542 243.642H57.4579C32.5664 243.642 12.3579 223.434 12.3579 198.542V57.4582C12.3579 32.5667 32.5664 12.3582 57.4579 12.3582H198.542C223.433 12.3582 243.642 32.5667 243.642 57.4582V198.542C243.642 223.434 223.433 243.642 198.542 243.642Z" fill="#304059"/>
+<mask id="mask1_1263_67" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="12" y="12" width="232" height="232">
+<path d="M198.542 243.642H57.4579C32.5664 243.642 12.3579 223.434 12.3579 198.542V57.4582C12.3579 32.5667 32.5664 12.3582 57.4579 12.3582H198.542C223.433 12.3582 243.642 32.5667 243.642 57.4582V198.542C243.642 223.434 223.433 243.642 198.542 243.642Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1263_67)">
+<path d="M127.992 50.9193H89.447V12.3743H127.992V50.9193Z" fill="#4791CE"/>
+<path d="M127.992 89.4637H89.447V50.9192H127.992V89.4637Z" fill="#87BDFF"/>
+<path d="M127.992 128.008H89.447V89.4636H127.992V128.008Z" fill="#4791CE"/>
+<path d="M127.992 166.553H89.447V128.008H127.992V166.553Z" fill="#87BDFF"/>
+<path d="M127.992 205.098H89.447V166.553H127.992V205.098Z" fill="#4791CE"/>
+<path d="M127.992 243.642H89.447V205.098H127.992V243.642Z" fill="#87BDFF"/>
+<path d="M89.4469 50.9193H50.9023V12.3743H89.4469V50.9193Z" fill="#87BDFF"/>
+<path d="M89.4469 89.4637H50.9023V50.9192H89.4469V89.4637Z" fill="#4791CE"/>
+<path d="M89.4469 128.008H50.9023V89.4636H89.4469V128.008Z" fill="#87BDFF"/>
+<path d="M89.4469 166.553H50.9023V128.008H89.4469V166.553Z" fill="#4791CE"/>
+<path d="M89.4469 205.098H50.9023V166.553H89.4469V205.098Z" fill="#87BDFF"/>
+<path d="M89.4469 243.642H50.9023V205.098H89.4469V243.642Z" fill="#4791CE"/>
+<path d="M50.9024 50.92H12.3579V12.375H50.9024V50.92Z" fill="#4791CE"/>
+<path d="M50.9024 89.4637H12.3579V50.9192H50.9024V89.4637Z" fill="#87BDFF"/>
+<path d="M50.9024 128.008H12.3579V89.4636H50.9024V128.008Z" fill="#4791CE"/>
+<path d="M50.9024 166.553H12.3579V128.008H50.9024V166.553Z" fill="#87BDFF"/>
+<path d="M50.9024 205.098H12.3579V166.553H50.9024V205.098Z" fill="#4791CE"/>
+<path d="M50.9024 243.642H12.3579V205.098H50.9024V243.642Z" fill="#87BDFF"/>
+<path d="M243.642 243.659H128V12.3743H243.642V243.659Z" fill="url(#paint0_linear_1263_67)"/>
+<path d="M156.701 128C156.701 143.845 143.837 156.71 127.992 156.71C112.146 156.71 99.2825 143.845 99.2825 128C99.2825 112.155 112.146 99.2908 127.992 99.2908C143.837 99.2908 156.701 112.155 156.701 128Z" fill="#304059"/>
+<path d="M148.396 128L142.135 123.754L135.874 119.509V128V136.492L142.135 132.246L148.396 128Z" fill="#87BDFF"/>
+<path d="M107.588 128L113.857 123.754L120.126 119.509V128V136.492L113.857 132.246L107.588 128Z" fill="#87BDFF"/>
+</g>
+<path d="M134.182 247.202H121.818V8.79858H134.182V247.202Z" fill="#304059"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1263_67" x1="184.354" y1="20.4191" x2="176.727" y2="245.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#87BDFF"/>
+<stop offset="0.970833" stop-color="#4791CE"/>
+</linearGradient>
+<clipPath id="clip0_1263_67">
+<rect width="256" height="256" fill="white"/>
+</clipPath>
+</defs>
+</svg>