signer-test-sdk-react 0.0.18 → 0.0.20

package/dist/src/WalletModal.css

@@ -1,4 +1,46 @@
 /* Wallet Modal Styles */
+
+/* GeistSans Font */
+@font-face {
+  font-family: 'GeistSans';
+  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GeistSans';
+  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GeistSans';
+  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GeistSans';
+  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GeistMono';
+  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 .wallet-modal-overlay {
   position: fixed;
   top: 0;
@@ -10,11 +52,23 @@
   justify-content: center;
   z-index: 10000;
   animation: fadeIn 0.2s ease-out;
+  font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  will-change: opacity;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  /* Theme variables (overridable via inline style from uiConfig.colors) */
+  --abstraxn-primary: #111827;
+  --abstraxn-primary-hover: #1f2937;
+  --abstraxn-primary-text: #ffffff;
 }
 
 /* Dark Theme (Default) */
 .wallet-modal-overlay.wallet-modal-theme-dark {
   background: rgba(0, 0, 0, 0.5);
+  --abstraxn-primary: #4b5563;
+  --abstraxn-primary-hover: #6b7280;
 }
 
 /* Light Theme */
@@ -22,7 +76,32 @@
   background: rgba(0, 0, 0, 0.3);
 }
 
+/* Shared primary button (uses theme variables above) */
+.wallet-modal-primary-btn {
+  width: 100%;
+  padding: 14px 24px;
+  border-radius: 12px;
+  border: none;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
+}
+
+.wallet-modal-primary-btn:hover:not(:disabled) {
+  background: var(--abstraxn-primary-hover);
+  transform: translateY(-1px);
+}
+
+.wallet-modal-primary-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .wallet-modal-content {
+  position: relative;
   border-radius: 16px;
   width: 90%;
   max-width: 400px;
@@ -35,6 +114,17 @@
   flex-direction: column;
   gap: 20px;
   box-sizing: border-box;
+  font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  font-size: 14px;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+}
+
+.wallet-modal-content.selector-open {
+  overflow: hidden;
 }
 
 /* Dark Theme Content */
@@ -61,11 +151,11 @@
 
 @keyframes slideUp {
   from {
-    transform: translateY(20px);
+    transform: translate3d(0, 20px, 0);
     opacity: 0;
   }
   to {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 }
@@ -146,7 +236,7 @@
   gap: 8px;
   cursor: pointer;
   transition: opacity 0.2s;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
+  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
 }
 
 .wallet-modal-theme-dark .wallet-modal-address {
@@ -285,16 +375,16 @@
 
 .wallet-modal-action-btn {
   border-radius: 12px;
-  padding: 16px;
+  padding: 12px 8px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 12px;
   cursor: pointer;
   transition: all 0.2s;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: 600;
   border: 1px solid;
   text-align: center;
 }
@@ -306,7 +396,7 @@
 }
 
 .wallet-modal-theme-light .wallet-modal-action-btn {
-  background: #f9fafb;
+  background: #ffffff;
   border-color: #e5e7eb;
   color: #111827;
 }
@@ -328,11 +418,11 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-action-btn svg {
-  color: #a855f7;
+  color: #9ca3af;
 }
 
 .wallet-modal-theme-light .wallet-modal-action-btn svg {
-  color: #9333ea;
+  color: #6b7280;
 }
 
 /* Asset Display */
@@ -348,6 +438,11 @@
   border: 1px solid;
 }
 
+.wallet-modal-asset:hover {
+  border-color: #9333ea;
+  background: rgba(147, 51, 234, 0.02);
+}
+
 .wallet-modal-theme-dark .wallet-modal-asset {
   background: #2a2a2a;
   border-color: #3a3a3a;
@@ -375,22 +470,35 @@
   flex: 1;
 }
 
-.wallet-modal-asset-icon {
+.wallet-modal-asset-icon-wrapper {
+  position: relative;
   width: 40px;
   height: 40px;
+  flex-shrink: 0;
+}
+
+.wallet-modal-asset-icon-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.wallet-modal-asset-icon {
+  width: 100%;
+  height: 100%;
   border-radius: 50%;
   background: linear-gradient(135deg, #627eea 0%, #4c6ef5 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
-  flex-shrink: 0;
 }
 
 .wallet-modal-asset-details {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   flex: 1;
   min-width: 0;
 }
@@ -398,6 +506,7 @@
 .wallet-modal-asset-name {
   font-size: 16px;
   font-weight: 600;
+  text-align: left;
 }
 
 .wallet-modal-theme-dark .wallet-modal-asset-name {
@@ -410,9 +519,8 @@
 
 .wallet-modal-asset-balance {
   font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  font-weight: 500;
+  text-align: left;
 }
 
 .wallet-modal-theme-dark .wallet-modal-asset-balance {
@@ -424,11 +532,19 @@
 }
 
 .wallet-modal-asset-status {
-  width: 8px;
-  height: 8px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   background: #10b981;
-  flex-shrink: 0;
+  border: 2px solid white;
+  z-index: 1;
+}
+
+.wallet-modal-theme-dark .wallet-modal-asset-status {
+  border-color: #1a1a1a;
 }
 
 .wallet-modal-asset-arrow {
@@ -490,21 +606,6 @@
   flex-shrink: 0;
 }
 
-.wallet-modal-theme-dark .wallet-modal-menu-item svg {
-  color: #9ca3af;
-}
-
-.wallet-modal-theme-light .wallet-modal-menu-item svg {
-  color: #6b7280;
-}
-
-.wallet-modal-theme-dark .wallet-modal-menu-item:hover svg {
-  color: #a855f7;
-}
-
-.wallet-modal-theme-light .wallet-modal-menu-item:hover svg {
-  color: #9333ea;
-}
 
 /* Disconnect button - Red theme */
 .wallet-modal-menu-item-disconnect {
@@ -693,7 +794,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
+  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
   text-align: left;
 }
 
@@ -718,6 +819,7 @@
   border: none;
   cursor: pointer;
   padding: 8px;
+  margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -725,6 +827,7 @@
   transition: all 0.2s;
   width: 40px;
   height: 40px;
+  box-sizing: border-box;
 }
 
 .wallet-modal-back:disabled {
@@ -783,17 +886,19 @@
   color: #111827;
 }
 
-.wallet-modal-receive-title {
+.wallet-modal-content .wallet-modal-receive-title {
   font-size: 20px;
-  font-weight: 600;
+  font-weight: 500;
   margin: 0;
+  flex: 1;
+  text-align: center;
 }
 
-.wallet-modal-theme-dark .wallet-modal-receive-title {
+.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-receive-title {
   color: #ffffff;
 }
 
-.wallet-modal-theme-light .wallet-modal-receive-title {
+.wallet-modal-content.wallet-modal-theme-light .wallet-modal-receive-title {
   color: #111827;
 }
 
@@ -856,7 +961,7 @@
 
 .wallet-modal-address-full {
   flex: 1;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
+  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
   font-size: 14px;
   word-break: break-all;
   text-align: left;
@@ -930,7 +1035,7 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding: 20px 0;
+  /* padding: 20px 0; */
 }
 
 .wallet-modal-send-field {
@@ -1143,7 +1248,7 @@
   border: 1px solid;
   background: transparent;
   font-size: 14px;
-  font-family: monospace;
+  font-family: 'GeistMono', 'SF Mono', monospace;
   outline: none;
   transition: all 0.2s;
   box-sizing: border-box;
@@ -1212,25 +1317,23 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-send-preview-btn {
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
-  color: #ffffff;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
 }
 
 .wallet-modal-theme-light .wallet-modal-send-preview-btn {
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
-  color: #ffffff;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
 }
 
 .wallet-modal-theme-dark .wallet-modal-send-preview-btn:hover:not(.disabled) {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  background: var(--abstraxn-primary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
 }
 
 .wallet-modal-theme-light .wallet-modal-send-preview-btn:hover:not(.disabled) {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  background: var(--abstraxn-primary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
 }
 
 /* Preview Modal */
@@ -1316,14 +1419,13 @@
 }
 
 .wallet-modal-preview-btn-primary {
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
-  color: #ffffff;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
 }
 
 .wallet-modal-preview-btn-primary:hover:not(:disabled) {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  background: var(--abstraxn-primary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
 }
 
 .wallet-modal-preview-btn-secondary {
@@ -1367,17 +1469,17 @@
   justify-content: center;
 }
 
-.wallet-modal-success-title {
+.wallet-modal-content .wallet-modal-success-title {
   font-size: 24px;
-  font-weight: 600;
+  font-weight: 500;
   margin: 0;
 }
 
-.wallet-modal-theme-dark .wallet-modal-success-title {
+.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-success-title {
   color: #ffffff;
 }
 
-.wallet-modal-theme-light .wallet-modal-success-title {
+.wallet-modal-content.wallet-modal-theme-light .wallet-modal-success-title {
   color: #111827;
 }
 
@@ -1426,14 +1528,13 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
-  color: #ffffff;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
 }
 
 .wallet-modal-success-btn:hover {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  background: var(--abstraxn-primary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
 }
 
 .wallet-modal-action-btn-primary {
@@ -1444,13 +1545,14 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
-  color: #ffffff;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
 }
 
 .wallet-modal-action-btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
+  background: var(--abstraxn-primary-hover);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
 }
 
 /* Manage Modal */
@@ -1466,19 +1568,19 @@
   gap: 20px;
 }
 
-.wallet-modal-manage-section-title {
+.wallet-modal-content .wallet-modal-manage-section-title {
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   margin: 0;
   text-align: left;
   letter-spacing: -0.01em;
 }
 
-.wallet-modal-theme-dark .wallet-modal-manage-section-title {
+.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-manage-section-title {
   color: #ffffff;
 }
 
-.wallet-modal-theme-light .wallet-modal-manage-section-title {
+.wallet-modal-content.wallet-modal-theme-light .wallet-modal-manage-section-title {
   color: #111827;
 }
 
@@ -1544,7 +1646,7 @@
 
 .wallet-modal-manage-address-text {
   flex: 1;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
+  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
   font-size: 14px;
   word-break: break-all;
   min-width: 0;
@@ -1745,295 +1847,9 @@
   margin-bottom: 16px;
 }
 
-.wallet-modal-chain-selector {
-  position: relative;
-  width: 100%;
-}
-
-.wallet-modal-chain-selector-btn {
-  width: 100%;
-  padding: 12px 16px;
-  border-radius: 12px;
-  border: 1px solid;
-  background: transparent;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-selector-btn {
-  border-color: #3a3a3a;
-  background: #2a2a2a;
-  color: #ffffff;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-selector-btn {
-  border-color: #e5e7eb;
-  background: #f9fafb;
-  color: #111827;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-selector-btn:hover {
-  background: #3a3a3a;
-  border-color: #4a4a4a;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-selector-btn:hover {
-  background: #f3f4f6;
-  border-color: #d1d5db;
-}
-
-.wallet-modal-chain-selector-current {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-  min-width: 0;
-}
-
-.wallet-modal-chain-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background: rgba(147, 51, 234, 0.1);
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-icon {
-  color: #a855f7;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-icon {
-  color: #9333ea;
-}
-
-.wallet-modal-chain-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  flex: 1;
-  min-width: 0;
-  text-align: left;
-}
-
-.wallet-modal-chain-name {
-  font-size: 15px;
-  font-weight: 500;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-name {
-  color: #ffffff;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-name {
-  color: #111827;
-}
-
-.wallet-modal-chain-type {
-  font-size: 12px;
-  font-weight: 400;
-  opacity: 0.7;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-type {
-  color: #9ca3af;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-type {
-  color: #6b7280;
-}
-
-.wallet-modal-chain-arrow {
-  flex-shrink: 0;
-  transition: transform 0.2s;
-}
-
-.wallet-modal-chain-arrow.open {
-  transform: rotate(180deg);
-}
-
-.wallet-modal-chain-selector-placeholder {
-  padding: 12px 16px;
-  border-radius: 12px;
-  border: 1px solid;
-  text-align: left;
-  font-size: 15px;
-  width: 100%;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-selector-placeholder {
-  border-color: #3a3a3a;
-  background: #2a2a2a;
-  color: #9ca3af;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-selector-placeholder {
-  border-color: #e5e7eb;
-  background: #f9fafb;
-  color: #6b7280;
-}
-
-.wallet-modal-chain-dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 10001;
-  border-radius: 12px;
-  border: 1px solid;
-  overflow: hidden;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-dropdown {
-  background: #1a1a1a;
-  border-color: #3a3a3a;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-dropdown {
-  background: #ffffff;
-  border-color: #e5e7eb;
-}
-
-.wallet-modal-chain-tabs {
-  display: flex;
-  border-bottom: 1px solid;
-  padding: 8px;
-  gap: 4px;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-tabs {
-  border-color: #3a3a3a;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-tabs {
-  border-color: #e5e7eb;
-}
-
-.wallet-modal-chain-tab {
-  flex: 1;
-  padding: 8px 12px;
-  border-radius: 8px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-tab {
-  color: #9ca3af;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-tab {
-  color: #6b7280;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-tab.active {
-  background: #2a2a2a;
-  color: #ffffff;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-tab.active {
-  background: #f3f4f6;
-  color: #111827;
-}
-
-.wallet-modal-chain-list {
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 4px;
-}
-
-.wallet-modal-chain-item {
-  width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  transition: all 0.2s;
-  text-align: left;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-item {
-  color: #ffffff;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-item {
-  color: #111827;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-item:hover {
-  background: #2a2a2a;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-item:hover {
-  background: #f3f4f6;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-item.active {
-  background: rgba(147, 51, 234, 0.15);
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-item.active {
-  background: rgba(147, 51, 234, 0.1);
-}
-
-.wallet-modal-chain-item .wallet-modal-chain-icon {
-  width: 28px;
-  height: 28px;
-}
-
-.wallet-modal-chain-item .wallet-modal-chain-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.wallet-modal-chain-item .wallet-modal-chain-name {
-  font-size: 14px;
-}
-
-.wallet-modal-chain-badge {
-  font-size: 10px;
-  font-weight: 500;
-  padding: 2px 6px;
-  border-radius: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.wallet-modal-theme-dark .wallet-modal-chain-badge {
-  background: rgba(251, 191, 36, 0.2);
-  color: #fbbf24;
-}
-
-.wallet-modal-theme-light .wallet-modal-chain-badge {
-  background: rgba(251, 191, 36, 0.15);
-  color: #d97706;
-}
-
-.wallet-modal-chain-item svg:last-child {
-  flex-shrink: 0;
-  color: #10b981;
-}
+/* Balance Display */
 
 /* Export Warning Modal */
-.wallet-modal-export-warning {
-  /* Same size as other modals - no max-width override */
-}
-
 .wallet-modal-export-warning-content {
   display: flex;
   flex-direction: column;
@@ -2276,8 +2092,8 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
-  color: #ffffff;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -2286,7 +2102,7 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-warning-reveal:not(.disabled) {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  background: var(--abstraxn-primary);
 }
 
 .wallet-modal-export-warning-reveal:hover:not(.disabled) {
@@ -2294,11 +2110,11 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-warning-reveal:hover:not(.disabled) {
-  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
+  background: var(--abstraxn-primary-hover);
 }
 
 .wallet-modal-theme-light .wallet-modal-export-warning-reveal:hover:not(.disabled) {
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
+  background: var(--abstraxn-primary-hover);
 }
 
 .wallet-modal-loading-spinner {
@@ -2344,17 +2160,19 @@
   margin-bottom: 24px;
 }
 
-.wallet-modal-export-title {
+.wallet-modal-content .wallet-modal-export-title {
   font-size: 20px;
-  font-weight: 600;
+  font-weight: 500;
   margin: 0;
+  flex: 1;
+  text-align: center;
 }
 
-.wallet-modal-theme-dark .wallet-modal-export-title {
+.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-export-title {
   color: #ffffff;
 }
 
-.wallet-modal-theme-light .wallet-modal-export-title {
+.wallet-modal-content.wallet-modal-theme-light .wallet-modal-export-title {
   color: #111827;
 }
 
@@ -2367,7 +2185,7 @@
 .wallet-modal-export-key-display {
   padding: 16px;
   border-radius: 12px;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
+  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
   font-size: 13px;
   line-height: 1.6;
   word-break: break-all;
@@ -2474,15 +2292,15 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  color: #ffffff;
+  color: var(--abstraxn-primary-text);
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-done-btn {
-  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  background: var(--abstraxn-primary);
 }
 
 .wallet-modal-theme-light .wallet-modal-export-done-btn {
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  background: var(--abstraxn-primary);
 }
 
 .wallet-modal-export-done-btn:hover {
@@ -2490,10 +2308,12 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-done-btn:hover {
-  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
+  background: var(--abstraxn-primary-hover);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
 }
 
 .wallet-modal-theme-light .wallet-modal-export-done-btn:hover {
-  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
+  background: var(--abstraxn-primary-hover);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }