From 7348e1ccccabf8ad50efce3424f974bb48913d9a Mon Sep 17 00:00:00 2001
From: Marc-Aurele Besner
 <82244926+marc-aurele-besner@users.noreply.github.com>
Date: Wed, 18 Dec 2024 10:00:05 -0500
Subject: [PATCH] remove background color image

---
 explorer/public/images/backgroundColor.svg     | 14 --------------
 .../accounts/[accountId]/image/route.tsx       | 14 ++++----------
 .../consensus/blocks/[blockId]/image/route.tsx | 14 ++++----------
 .../consensus/events/[eventId]/image/route.tsx | 14 ++++----------
 .../extrinsics/[extrinsicId]/image/route.tsx   | 14 ++++----------
 .../src/app/[chain]/consensus/image/route.tsx  | 18 ++++++------------
 .../consensus/logs/[logId]/image/route.tsx     | 14 ++++----------
 explorer/src/app/[chain]/image/route.tsx       | 14 ++++----------
 explorer/src/components/layout/Layout.tsx      |  2 +-
 9 files changed, 31 insertions(+), 87 deletions(-)
 delete mode 100644 explorer/public/images/backgroundColor.svg

diff --git a/explorer/public/images/backgroundColor.svg b/explorer/public/images/backgroundColor.svg
deleted file mode 100644
index 4d929ac91..000000000
--- a/explorer/public/images/backgroundColor.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="2160" height="1872" viewBox="0 0 2160 1872" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f_1_2)">
-<rect x="888" y="210" width="510" height="510" rx="255" fill="#929EEA"/>
-<rect x="1146" y="120" width="510" height="510" rx="255" fill="#91D3A0"/>
-<rect x="504" y="120" width="510" height="510" rx="255" fill="#ABCFEF"/>
-</g>
-<defs>
-<filter id="filter0_f_1_2" x="0" y="0" width="2160" height="1052" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1_2"/>
-</filter>
-</defs>
-</svg>
diff --git a/explorer/src/app/[chain]/consensus/accounts/[accountId]/image/route.tsx b/explorer/src/app/[chain]/consensus/accounts/[accountId]/image/route.tsx
index 946305156..da50ee89a 100644
--- a/explorer/src/app/[chain]/consensus/accounts/[accountId]/image/route.tsx
+++ b/explorer/src/app/[chain]/consensus/accounts/[accountId]/image/route.tsx
@@ -84,19 +84,13 @@ function Screen({
     <div
       tw='relative w-full h-full flex flex-col items-center justify-between'
       style={{
-        background: 'linear-gradient(180deg, #0B050F 0%, #4D2F92 50%, #BC8EDA 100%)',
+        background: 'linear-gradient(180deg, #050D26 0%, #27355D 100%)',
       }}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={url + '/images/backgroundColor.svg'}
-        tw='w-[1200px] h-[630px]'
-        alt={'Background Color'}
-      />
       <div
         tw='absolute flex flex-row border-none rounded-[20px] p-4 w-240 h-40'
         style={{
-          background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+          background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
         }}
       >
         <h2
@@ -124,7 +118,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-30 mt-70 mb-4 p-6 w-100 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-100 m-6'>
@@ -158,7 +152,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-140 mt-70 mb-4 p-6 w-130 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-130 m-6'>
diff --git a/explorer/src/app/[chain]/consensus/blocks/[blockId]/image/route.tsx b/explorer/src/app/[chain]/consensus/blocks/[blockId]/image/route.tsx
index b916edcc9..d24cbb675 100644
--- a/explorer/src/app/[chain]/consensus/blocks/[blockId]/image/route.tsx
+++ b/explorer/src/app/[chain]/consensus/blocks/[blockId]/image/route.tsx
@@ -77,19 +77,13 @@ function Screen({
     <div
       tw='relative w-full h-full flex flex-col items-center justify-between'
       style={{
-        background: 'linear-gradient(180deg, #0B050F 0%, #4D2F92 50%, #BC8EDA 100%)',
+        background: 'linear-gradient(180deg, #050D26 0%, #27355D 100%)',
       }}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={url + '/images/backgroundColor.svg'}
-        tw='w-[1200px] h-[630px]'
-        alt={'Background Color'}
-      />
       <div
         tw='absolute flex flex-row border-none rounded-[20px] p-4 w-240 h-40'
         style={{
-          background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+          background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
         }}
       >
         <h2
@@ -117,7 +111,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-30 mt-70 mb-4 p-6 w-100 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-100 m-6'>
@@ -151,7 +145,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-140 mt-70 mb-4 p-6 w-130 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-130 m-6'>
diff --git a/explorer/src/app/[chain]/consensus/events/[eventId]/image/route.tsx b/explorer/src/app/[chain]/consensus/events/[eventId]/image/route.tsx
index c679409d7..81c457359 100644
--- a/explorer/src/app/[chain]/consensus/events/[eventId]/image/route.tsx
+++ b/explorer/src/app/[chain]/consensus/events/[eventId]/image/route.tsx
@@ -75,19 +75,13 @@ function Screen({
     <div
       tw='relative w-full h-full flex flex-col items-center justify-between'
       style={{
-        background: 'linear-gradient(180deg, #0B050F 0%, #4D2F92 50%, #BC8EDA 100%)',
+        background: 'linear-gradient(180deg, #050D26 0%, #27355D 100%)',
       }}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={url + '/images/backgroundColor.svg'}
-        tw='w-[1200px] h-[630px]'
-        alt={'Background Color'}
-      />
       <div
         tw='absolute flex flex-row border-none rounded-[20px] p-4 w-240 h-40'
         style={{
-          background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+          background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
         }}
       >
         <h2
@@ -115,7 +109,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-30 mt-70 mb-4 p-6 w-100 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-100 m-6'>
@@ -141,7 +135,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-140 mt-70 mb-4 p-6 w-130 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-130 m-6'>
diff --git a/explorer/src/app/[chain]/consensus/extrinsics/[extrinsicId]/image/route.tsx b/explorer/src/app/[chain]/consensus/extrinsics/[extrinsicId]/image/route.tsx
index 8a1deffdc..2b737b73e 100644
--- a/explorer/src/app/[chain]/consensus/extrinsics/[extrinsicId]/image/route.tsx
+++ b/explorer/src/app/[chain]/consensus/extrinsics/[extrinsicId]/image/route.tsx
@@ -78,19 +78,13 @@ function Screen({
     <div
       tw='relative w-full h-full flex flex-col items-center justify-between'
       style={{
-        background: 'linear-gradient(180deg, #0B050F 0%, #4D2F92 50%, #BC8EDA 100%)',
+        background: 'linear-gradient(180deg, #050D26 0%, #27355D 100%)',
       }}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={url + '/images/backgroundColor.svg'}
-        tw='w-[1200px] h-[630px]'
-        alt={'Background Color'}
-      />
       <div
         tw='absolute flex flex-row border-none rounded-[20px] p-4 w-240 h-40'
         style={{
-          background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+          background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
         }}
       >
         <h2
@@ -118,7 +112,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-30 mt-70 mb-4 p-6 w-100 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-100 m-6'>
@@ -152,7 +146,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-140 mt-70 mb-4 p-6 w-130 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-130 m-6'>
diff --git a/explorer/src/app/[chain]/consensus/image/route.tsx b/explorer/src/app/[chain]/consensus/image/route.tsx
index c4ed1611f..e986dde01 100644
--- a/explorer/src/app/[chain]/consensus/image/route.tsx
+++ b/explorer/src/app/[chain]/consensus/image/route.tsx
@@ -65,19 +65,13 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
     <div
       tw='relative w-full h-full flex flex-col items-center justify-between'
       style={{
-        background: 'linear-gradient(180deg, #0B050F 0%, #4D2F92 50%, #BC8EDA 100%)',
+        background: 'linear-gradient(180deg, #050D26 0%, #27355D 100%)',
       }}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={url + '/images/backgroundColor.svg'}
-        tw='w-[1200px] h-[630px]'
-        alt={'Background Color'}
-      />
       <div
         tw='absolute flex flex-row border-none rounded-[20px] p-4 w-240 h-30'
         style={{
-          background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+          background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
         }}
       >
         <h2
@@ -97,7 +91,7 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-30 mt-60 mb-2 p-6 w-100 h-30'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-100 m-6'>
@@ -115,7 +109,7 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-30 mt-100 mb-1 p-6 w-100 h-30'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-100 m-6'>
@@ -133,7 +127,7 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-140 mt-60 mb-4 p-6 w-130 h-30'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-130 m-6'>
@@ -151,7 +145,7 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-140 mt-100 mb-1 p-6 w-130 h-30'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-130 m-6'>
diff --git a/explorer/src/app/[chain]/consensus/logs/[logId]/image/route.tsx b/explorer/src/app/[chain]/consensus/logs/[logId]/image/route.tsx
index 73ba4a021..d33eac2d3 100644
--- a/explorer/src/app/[chain]/consensus/logs/[logId]/image/route.tsx
+++ b/explorer/src/app/[chain]/consensus/logs/[logId]/image/route.tsx
@@ -74,19 +74,13 @@ function Screen({
     <div
       tw='relative w-full h-full flex flex-col items-center justify-between'
       style={{
-        background: 'linear-gradient(180deg, #0B050F 0%, #4D2F92 50%, #BC8EDA 100%)',
+        background: 'linear-gradient(180deg, #050D26 0%, #27355D 100%)',
       }}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={url + '/images/backgroundColor.svg'}
-        tw='w-[1200px] h-[630px]'
-        alt={'Background Color'}
-      />
       <div
         tw='absolute flex flex-row border-none rounded-[20px] p-4 w-240 h-40'
         style={{
-          background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+          background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
         }}
       >
         <h2
@@ -114,7 +108,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-30 mt-70 mb-4 p-6 w-100 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-100 m-6'>
@@ -148,7 +142,7 @@ function Screen({
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-140 mt-70 mb-4 p-6 w-130 h-40'
           style={{
-            background: 'linear-gradient(180deg, #4141B3 0%, #6B5ACF 50%, #896BD2 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-col w-130 m-6'>
diff --git a/explorer/src/app/[chain]/image/route.tsx b/explorer/src/app/[chain]/image/route.tsx
index bd72fd0cf..81a285e16 100644
--- a/explorer/src/app/[chain]/image/route.tsx
+++ b/explorer/src/app/[chain]/image/route.tsx
@@ -52,15 +52,9 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
     <div
       tw='relative w-full h-full flex flex-col items-center justify-between'
       style={{
-        background: 'linear-gradient(180deg, #0B050F 0%, #4D2F92 50%, #BC8EDA 100%)',
+        background: 'linear-gradient(180deg, #050D26 0%, #27355D 100%)',
       }}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={'http://localhost:3000//images/backgroundColor.svg'}
-        tw='w-[1200px] h-[630px]'
-        alt={'Background Color'}
-      />
       <div tw='absolute flex flex-row border-none w-full h-full'>
         <div tw='flex flex-col w-full justify ml-15'>
           <LogoIcon />
@@ -107,13 +101,13 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-155 mt-65 mb-4 p-6 w-60 h-50'
           style={{
-            background: 'linear-gradient(180deg, #AC70E1 0%, #E6ADDC 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         ></div>
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-155 mt-65 mb-4 p-6 w-60 h-50'
           style={{
-            background: 'linear-gradient(180deg, #AC70E1 0%, #E6ADDC 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-row w-full m-6 justify-center'>
@@ -139,7 +133,7 @@ function Screen({ chainMatch, data }: { chainMatch: (typeof indexers)[number]; d
         <div
           tw='absolute flex flex-row border-none rounded-[20px] ml-225 mt-65 mb-4 p-6 w-60 h-50'
           style={{
-            background: 'linear-gradient(180deg, #6E6ECD 0%, #A196E1 50%, #C2B0EE 100%)',
+            background: 'linear-gradient(180deg, #032372 0%, #1949D2 100%)',
           }}
         >
           <div tw='absolute flex flex-row w-full m-6 justify-center'>
diff --git a/explorer/src/components/layout/Layout.tsx b/explorer/src/components/layout/Layout.tsx
index d62293a09..3f5945ec0 100644
--- a/explorer/src/components/layout/Layout.tsx
+++ b/explorer/src/components/layout/Layout.tsx
@@ -27,7 +27,7 @@ export const MainLayout: FC<Props> = ({ children, subHeader }) => {
 
   return (
     <div className="from-backgroundLight to-backgroundDark dark:from-backgroundDarker dark:to-backgroundDarkest dark:bg-boxDark relative flex min-h-screen w-full flex-col bg-gradient-to-b font-['Montserrat']">
-      <div className="relative flex min-h-screen w-full flex-col bg-[url('/images/backgroundColor.svg')] bg-cover font-['Montserrat']">
+      <div className="relative flex min-h-screen w-full flex-col font-['Montserrat']">
         {outOfSync}
         <SectionHeader />
         {subHeader}