From 0b74cca5f5801b69ba85f417c721bbf732d695c0 Mon Sep 17 00:00:00 2001
From: cuteolaf <OliverLim818@gmail.com>
Date: Tue, 22 Oct 2024 12:57:11 -0400
Subject: [PATCH] Some UI fixes (#242)

* fix chain icon

* color change for watchlist only

* update icon colors on the index page

* keep the old color

Co-authored-by: Sergej Sakac <73715684+Szegoo@users.noreply.github.com>

* add padding

---------

Co-authored-by: Sergej Sakac <73715684+Szegoo@users.noreply.github.com>
Co-authored-by: Sergej <sakacszergej@gmail.com>
---
 src/assets/networks/relay/index.ts          |  2 +-
 src/components/Transfer/transferActions.tsx | 10 +++++++---
 src/pages/paras/index.tsx                   |  5 ++++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/assets/networks/relay/index.ts b/src/assets/networks/relay/index.ts
index f030f80f..ab6106ed 100644
--- a/src/assets/networks/relay/index.ts
+++ b/src/assets/networks/relay/index.ts
@@ -19,7 +19,7 @@ const getIcon = (network: NetworkType) => {
     case NetworkType.WESTEND:
       return Westend;
     default:
-      Polkadot;
+      return Polkadot;
   }
 };
 
diff --git a/src/components/Transfer/transferActions.tsx b/src/components/Transfer/transferActions.tsx
index c19439d1..abb8b84e 100644
--- a/src/components/Transfer/transferActions.tsx
+++ b/src/components/Transfer/transferActions.tsx
@@ -1,6 +1,7 @@
 import ArrowDownward from '@mui/icons-material/ArrowDownwardOutlined';
 import { Box, Paper, Stack, Typography } from '@mui/material';
 import { AmountInput, Button } from '@region-x/components';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 
 import { getIcon } from '@/assets/networks';
@@ -106,9 +107,12 @@ const TransferActions = () => {
                     value: symbol,
                     label: symbol,
                     icon: (
-                      <img
-                        src={getIcon(network)?.src}
-                        style={{ width: '28px', height: '28px', padding: '4px' }}
+                      <Image
+                        src={getIcon(network)}
+                        alt=''
+                        width={28}
+                        height={28}
+                        style={{ padding: '4px ' }}
                       />
                     ),
                   },
diff --git a/src/pages/paras/index.tsx b/src/pages/paras/index.tsx
index a4efd326..0e5bfe8d 100644
--- a/src/pages/paras/index.tsx
+++ b/src/pages/paras/index.tsx
@@ -98,7 +98,10 @@ const ParachainManagement = () => {
           </Typography>
         </Box>
         <Box sx={{ display: 'flex', gap: '1.5rem', height: '2.75rem' }}>
-          <Button color='yellowDark' onClick={() => watchAllParas((prev) => !prev)}>
+          <Button
+            color={watchAll ? 'yellowDark' : 'greenPrimary'}
+            onClick={() => watchAllParas((prev) => !prev)}
+          >
             Watchlist Only
           </Button>
           <Button onClick={() => openReserveModal(true)}>Reserve New Para</Button>