fix: overwritten styles (binary-com#9899)

* fix: overwritten styles * fix: overwritten styles
sandeep-deriv · Aug 30, 2023 · 0bdd7dd · 0bdd7dd
1 parent 24f0323
commit 0bdd7dd
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
                 );
             })}