add: ambire v1 badge in top bar

AmbireTech · Aug 7, 2024 · 86a0b43 · 86a0b43
1 parent faac325
commit 86a0b43
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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;
+          }
+        }
+      }
     }
   }
 }