Contract icon fixed in W Token page (#878)

XLabs · Oct 28, 2024 · 4ef631c · 4ef631c
1 parent 7daeb2b
commit 4ef631c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/icons/generic/ArrowUpRightIcon/index.tsx b/src/icons/generic/ArrowUpRightIcon/index.tsx
@@ -1,5 +1,6 @@
-const ArrowUpRightIcon = ({ width = 24 }: { width?: number }) => (
+const ArrowUpRightIcon = ({ className, width = 24 }: { className?: string; width?: number }) => (
   <svg
+    className={className}
     fill="none"
     height={width}
     viewBox="0 0 24 24"

diff --git a/src/pages/Analytics/WToken/Summary.tsx b/src/pages/Analytics/WToken/Summary.tsx
@@ -181,7 +181,10 @@ const ChainItem = ({
       target="_blank"
     >
       <BlockchainIcon chainId={chainId} network={network} />
-      <ArrowUpRightIcon />
+      <ArrowUpRightIcon
+        className="summary-top-content-container-item-chain-contract-arrow"
+        width={20}
+      />
     </a>
   );
 };
diff --git a/src/pages/Analytics/WToken/styles.scss b/src/pages/Analytics/WToken/styles.scss
@@ -193,19 +193,29 @@
 
             &-contract {
               @include centered-row;
-
-              cursor: pointer;
-
-              color: var(--color-white);
               background-color: var(--color-gray-900);
               border-radius: 10px;
-              padding: 12px;
-
+              color: var(--color-white);
+              cursor: pointer;
               gap: 2px;
+              justify-content: center;
+              padding: 10px 0;
+              width: 100%;
+
               @media only screen and (min-width: 420px) {
                 gap: 6px;
               }
 
+              @media only screen and (min-width: 500px) {
+                padding: 12px;
+                width: auto;
+
+                &-arrow {
+                  height: 24px;
+                  width: 24px;
+                }
+              }
+
               svg {
                 color: var(--color-gray-400);
               }