From 86a0b43c1655c4861f9f0f2ea4c96cf0c3bc7cee Mon Sep 17 00:00:00 2001
From: Petromir Petrov <petromirdev@gmail.com>
Date: Wed, 7 Aug 2024 16:17:09 +0300
Subject: [PATCH] add: ambire v1 badge in top bar

---
 .../Wallet/TopBar/Accounts/Accounts.js        |  5 +++-
 .../TopBar/Accounts/Accounts.module.scss      | 30 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/Wallet/TopBar/Accounts/Accounts.js b/src/components/Wallet/TopBar/Accounts/Accounts.js
index e9b5ee1efa..3468db7395 100644
--- a/src/components/Wallet/TopBar/Accounts/Accounts.js
+++ b/src/components/Wallet/TopBar/Accounts/Accounts.js
@@ -173,7 +173,10 @@ const Accounts = ({
                 )}
                 <div className={styles.icon} style={toIconBackgroundImage(id)} />
                 <div className={styles.details}>
-                  <div className={styles.address}>{id}</div>
+                  <div className={styles.addressAndBadge}>
+                    <div className={styles.address}>{id}</div>
+                    <div className={styles.badge}>Ambire v1</div>
+                  </div>
                   <label>
                     {email
                       ? `Email/Password account (${email})`
diff --git a/src/components/Wallet/TopBar/Accounts/Accounts.module.scss b/src/components/Wallet/TopBar/Accounts/Accounts.module.scss
index f101c7d2c1..665986e10a 100644
--- a/src/components/Wallet/TopBar/Accounts/Accounts.module.scss
+++ b/src/components/Wallet/TopBar/Accounts/Accounts.module.scss
@@ -97,6 +97,22 @@ $account-height: 3.75rem;
             gap: 0.125rem;
             overflow: hidden;
 
+            .addressAndBadge {
+              display: flex;
+              align-items: center;
+            }
+
+            .badge {
+              font-size: 0.625rem;
+              padding: 0.125rem 0.625rem;
+              background: #c185ff14;
+              border: 1px solid #c185ff;
+              color: #c185ff;
+              font-weight: 600;
+              border-radius: 0.75rem;
+              white-space: nowrap;
+            }
+
             .address,
             label {
               overflow: hidden;
@@ -107,6 +123,7 @@ $account-height: 3.75rem;
             .address {
               font-size: 0.875rem;
               font-weight: 400;
+              margin-right: 0.5rem;
             }
 
             label {
@@ -214,6 +231,19 @@ $account-height: 3.75rem;
           word-wrap: break-word;
         }
       }
+
+      .list .account {
+        .inner {
+          margin-right: 0;
+          gap: 0.5rem;
+        }
+        .buttons {
+          .button {
+            width: 2.5rem;
+            height: 2.5rem;
+          }
+        }
+      }
     }
   }
 }