From 5325adef8d00708b24436debcd09e1e15af47124 Mon Sep 17 00:00:00 2001
From: Giuliano Conti <giuliconti1@gmail.com>
Date: Mon, 23 Sep 2024 13:06:09 -0300
Subject: [PATCH] Portal logo changed - Info icon added in tx page (#828)

---
 src/components/atoms/ProtocolIcon/index.tsx   | 46 +++++---------
 src/pages/Tx/Information/Overview/index.tsx   | 62 +++++++++++++------
 src/pages/Tx/Information/Overview/styles.scss |  6 ++
 3 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/src/components/atoms/ProtocolIcon/index.tsx b/src/components/atoms/ProtocolIcon/index.tsx
index cf89ac21..b1694fe7 100644
--- a/src/components/atoms/ProtocolIcon/index.tsx
+++ b/src/components/atoms/ProtocolIcon/index.tsx
@@ -55,41 +55,29 @@ const PortalIcon = ({ width }: { width: number }) => (
   <svg
     fill="none"
     height={width}
-    viewBox="0 0 28 28"
+    viewBox="40 40 350 350"
     width={width}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect
-      fill="transparent"
-      height={width}
-      rx={13}
-      stroke="transparent"
-      strokeWidth={2}
-      width={width}
-      x={1}
-      y={1}
+    <path
+      d="M213.373 0C95.5715 0 0 95.5715 0 213.373C0 331.175 95.5715 426.746 213.373 426.746C331.175 426.746 426.746 331.175 426.746 213.373C426.746 95.5715 331.175 0 213.373 0ZM213.373 305.269C162.612 305.269 121.477 264.135 121.477 213.373C121.477 162.612 162.612 121.477 213.373 121.477C264.135 121.477 305.269 162.612 305.269 213.373C305.269 264.135 264.135 305.269 213.373 305.269Z"
+      fill="url(#paint0_radial_371_24)"
     />
-    <g filter="url(#filter0_f_3556_27158)">
-      <circle cx={14} cy={14} r={9} stroke="#C5A0ED" strokeWidth={2} />
-      <circle cx={14} cy={14} r={7} stroke="#8D64BA" strokeWidth={2} />
-      <circle cx={14} cy={14} r={5} stroke="#613D89" strokeWidth={2} />
-      <circle cx={14} cy={14} r={3} fill="#301C46" />
-    </g>
-    <circle cx={14} cy={14} r={9} stroke="#C5A0ED" strokeWidth={2} />
     <defs>
-      <filter
-        id="filter0_f_3556_27158"
-        x={0}
-        y={0}
-        width={28}
-        height={28}
-        filterUnits="userSpaceOnUse"
-        colorInterpolationFilters="sRGB"
+      <radialGradient
+        id="paint0_radial_371_24"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(213.353 213.345) scale(178.839)"
       >
-        <feFlood floodOpacity={0} result="BackgroundImageFix" />
-        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur stdDeviation={2} result="effect1_foregroundBlur_3556_27158" />
-      </filter>
+        <stop offset="0.2254" stopColor="white" />
+        <stop offset="0.5444" stopColor="white" stopOpacity="0.44" />
+        <stop offset="0.6859" stopColor="white" stopOpacity="0.23" />
+        <stop offset="0.8568" stopColor="white" stopOpacity="0.07" />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </radialGradient>
     </defs>
   </svg>
 );
diff --git a/src/pages/Tx/Information/Overview/index.tsx b/src/pages/Tx/Information/Overview/index.tsx
index a572df0f..118fb3f5 100644
--- a/src/pages/Tx/Information/Overview/index.tsx
+++ b/src/pages/Tx/Information/Overview/index.tsx
@@ -163,7 +163,9 @@ const Overview = ({
             }
             className="tx-overview-section-info-tooltip"
           >
-            <span>Status</span>
+            <span>
+              <InfoCircleIcon /> Status
+            </span>
           </Tooltip>
         </h4>
 
@@ -180,11 +182,9 @@ const Overview = ({
               >
                 {STATUS === "IN_PROGRESS"
                   ? "1"
-                  : STATUS === "IN_GOVERNORS"
+                  : STATUS === "IN_GOVERNORS" || STATUS === "VAA_EMITTED"
                   ? "2"
-                  : STATUS === "VAA_EMITTED"
-                  ? "2"
-                  : STATUS === "PENDING_REDEEM"
+                  : STATUS === "PENDING_REDEEM" || STATUS === "EXTERNAL_TX"
                   ? "3"
                   : STATUS === "COMPLETED"
                   ? isJustGenericRelayer
@@ -346,7 +346,9 @@ const Overview = ({
             }
             className="tx-overview-section-info-tooltip"
           >
-            <span>Source Tx Hash</span>
+            <span>
+              <InfoCircleIcon /> Source Tx Hash
+            </span>
           </Tooltip>
         </h4>
 
@@ -394,7 +396,9 @@ const Overview = ({
                 </div>
               }
             >
-              <span>Gateway Tx Hash</span>
+              <span>
+                <InfoCircleIcon /> Gateway Tx Hash
+              </span>
             </Tooltip>
           </h4>
 
@@ -432,7 +436,9 @@ const Overview = ({
             }
             className="tx-overview-section-info-tooltip"
           >
-            <span>Protocols</span>
+            <span>
+              <InfoCircleIcon /> Protocols
+            </span>
           </Tooltip>
         </h4>
         <div className="tx-overview-section-info">
@@ -462,7 +468,9 @@ const Overview = ({
                 }
                 className="tx-overview-section-info-tooltip"
               >
-                <span>Source App Contract</span>
+                <span>
+                  <InfoCircleIcon /> Source App Contract
+                </span>
               </Tooltip>
             </h4>
             <div className="tx-overview-section-info">
@@ -510,7 +518,9 @@ const Overview = ({
             }
             className="tx-overview-section-info-tooltip"
           >
-            <span>Contract Address</span>
+            <span>
+              <InfoCircleIcon /> Contract Address
+            </span>
           </Tooltip>
         </h4>
         <div className="tx-overview-section-info">
@@ -577,7 +587,9 @@ const Overview = ({
                 </div>
               }
             >
-              <span>Transaction Action</span>
+              <span>
+                <InfoCircleIcon /> Transaction Action
+              </span>
             </Tooltip>
           </h4>
 
@@ -717,7 +729,9 @@ const Overview = ({
             }
             className="tx-overview-section-info-tooltip"
           >
-            <span>Chains</span>
+            <span>
+              <InfoCircleIcon /> Chains
+            </span>
           </Tooltip>
         </h4>
 
@@ -1215,7 +1229,9 @@ const Overview = ({
                   </div>
                 }
               >
-                <span>Transaction Fee</span>
+                <span>
+                  <InfoCircleIcon /> Transaction Fee
+                </span>
               </Tooltip>
             </h4>
             <div className="tx-overview-section-info">
@@ -1364,7 +1380,9 @@ const Overview = ({
               </div>
             }
           >
-            <span>Initial Time</span>
+            <span>
+              <InfoCircleIcon /> Initial Time
+            </span>
           </Tooltip>
         </h4>
         <div className="tx-overview-section-info">
@@ -1383,7 +1401,9 @@ const Overview = ({
               </div>
             }
           >
-            <span>Signatures</span>
+            <span>
+              <InfoCircleIcon /> Signatures
+            </span>
           </Tooltip>
         </h4>
         <div className="tx-overview-section-info">
@@ -1422,7 +1442,9 @@ const Overview = ({
               </div>
             }
           >
-            <span>VAA ID</span>
+            <span>
+              <InfoCircleIcon /> VAA ID
+            </span>
           </Tooltip>
         </h4>
         <div className="tx-overview-section-info">
@@ -1463,7 +1485,9 @@ const Overview = ({
                   </div>
                 }
               >
-                <span>Redeem Tx</span>
+                <span>
+                  <InfoCircleIcon /> Redeem Tx
+                </span>
               </Tooltip>
             </h4>
             <div className="tx-overview-section-info">
@@ -1506,7 +1530,9 @@ const Overview = ({
                   </div>
                 }
               >
-                <span>Complete Time</span>
+                <span>
+                  <InfoCircleIcon /> Complete Time
+                </span>
               </Tooltip>
             </h4>
             <div className="tx-overview-section-info">
diff --git a/src/pages/Tx/Information/Overview/styles.scss b/src/pages/Tx/Information/Overview/styles.scss
index 11c3caa4..e62adc43 100644
--- a/src/pages/Tx/Information/Overview/styles.scss
+++ b/src/pages/Tx/Information/Overview/styles.scss
@@ -319,7 +319,13 @@
       white-space: nowrap;
 
       & > span {
+        @include centered-row;
+        gap: 4px;
         cursor: pointer;
+
+        & > svg {
+          color: var(--color-gray-400);
+        }
       }
     }