From 0bdd7dd29a34cbd8c53bfeb7def0cd5647722cbf Mon Sep 17 00:00:00 2001
From: Hamid <hamid@regentmarkets.com>
Date: Wed, 30 Aug 2023 15:54:58 +0330
Subject: [PATCH] fix: overwritten styles (#9899)

* fix: overwritten styles

* fix: overwritten styles
---
 packages/wallets/src/AppContent.tsx              |  2 +-
 packages/wallets/src/app-content.scss            |  2 +-
 .../src/components/WalletList/WalletList.scss    | 16 ++++++++--------
 .../src/components/WalletList/WalletList.tsx     | 12 ++++++------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx
index bde18fd550ca..e4e0f590e563 100644
--- a/packages/wallets/src/AppContent.tsx
+++ b/packages/wallets/src/AppContent.tsx
@@ -7,7 +7,7 @@ import './app-content.scss';
 const AppContent: React.FC = () => {
     return (
         <div>
-            <div className='icon' />
+            <div className='wallet-app-content-icon' />
             <IcBrandDerivGo width={25} height={25} />
             <WalletList />
             <WalletsCarousel />
diff --git a/packages/wallets/src/app-content.scss b/packages/wallets/src/app-content.scss
index 69bb50e7165e..83b1cde30bf0 100644
--- a/packages/wallets/src/app-content.scss
+++ b/packages/wallets/src/app-content.scss
@@ -1,4 +1,4 @@
-.icon {
+.wallet-app-content-icon {
     width: 100px;
     height: 100px;
     background-image: url('./public/ic-appstore-deriv-logo.svg');
diff --git a/packages/wallets/src/components/WalletList/WalletList.scss b/packages/wallets/src/components/WalletList/WalletList.scss
index dabf4a3bce39..4a912f0f1768 100644
--- a/packages/wallets/src/components/WalletList/WalletList.scss
+++ b/packages/wallets/src/components/WalletList/WalletList.scss
@@ -1,4 +1,4 @@
-.account-list {
+.wallet-list-account-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -7,14 +7,14 @@
     padding-top: 2rem;
 }
 
-h1,
-.currency,
-.balance,
-.account-category {
+.wallet-list-title,
+.wallet-list-currency,
+.wallet-list-balance,
+.wallet-list-account-category {
     font-size: 3rem;
 }
 
-.account-item {
+.wallet-list-account-item {
     border: 1px solid #ccc;
     padding: 10px;
     border-radius: 5px;
@@ -25,10 +25,10 @@ h1,
     width: 90%;
 }
 
-.currency {
+.wallet-list-currency {
     font-weight: bold;
 }
 
-.account-category {
+.wallet-list-account-category {
     font-style: italic;
 }
diff --git a/packages/wallets/src/components/WalletList/WalletList.tsx b/packages/wallets/src/components/WalletList/WalletList.tsx
index 233602a37be3..1f14a7e0bdb8 100644
--- a/packages/wallets/src/components/WalletList/WalletList.tsx
+++ b/packages/wallets/src/components/WalletList/WalletList.tsx
@@ -5,18 +5,18 @@ import './WalletList.scss';
 const WalletList: React.FC = () => {
     const { data } = useWalletAccountsList();
 
-    if (!data.length) return <h1>No wallets found</h1>;
+    if (!data.length) return <h1 className='wallet-list-title'>No wallets found</h1>;
 
     return (
-        <div className='account-list'>
+        <div className='wallet-list-account-list'>
             {data?.map(account => {
                 return (
-                    <div className='account-item' key={account.loginid}>
-                        <div className='currency'>{account.currency}</div>
+                    <div className='wallet-list-account-item' key={account.loginid}>
+                        <div className='wallet-list-currency'>{account.currency}</div>
                         <br />
-                        <div className='account-category'>{account.landing_company_name}</div>
+                        <div className='wallet-list-account-category'>{account.landing_company_name}</div>
                         <br />
-                        <div className='balance'>{account.balance}</div>
+                        <div className='wallet-list-balance'>{account.balance}</div>
                     </div>
                 );
             })}