Design refinements

Author: lnbc1QWFyb24

packages/common/src/elements/Button.svelte

@@ -8,7 +8,7 @@
 
 <style>
   button {
-    border: none;
+    outline: none;
     background: inherit;
     font-size: 0.889em;
     font-family: inherit;
@@ -38,7 +38,7 @@
     opacity: 0.4;
   }
   .cta {
-    border: 1px solid #4a90e2;
+    outline: 1px solid #4a90e2;
     border-radius: 40px;
   }
   .cta:hover {

packages/common/src/elements/CloseButton.svelte

@@ -18,7 +18,7 @@
     align-items: center;
     padding: 0.4rem;
     border-radius: 40px;
-    color: var(--onboard-black, var(--black));
+    color: var(--onboard-gray-400, var(--gray-400));
     background: var(--onboard-white, var(--white));
   }
   .close-icon {

packages/core/src/icons/blocknative.js

@@ -1,5 +1,5 @@
 export default `
-<svg height="100%" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg height="80%" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.07004 9.85C5.84004 8.46 7.32004 7.64 8.18004 6.41C9.09004 5.12 8.58004 2.71 6.00004 2.71C4.31004 2.71 3.48004 3.99 3.13004 5.05L0.540039 3.96C1.25004 1.83 3.18004 0 5.99004 0C8.34004 0 9.95004 1.07 10.77 2.41C11.47 3.56 11.88 5.71 10.8 7.31C9.60004 9.08 8.45004 9.62 7.83004 10.76C7.58004 11.22 7.48004 11.52 7.48004 13H4.59004C4.58004 12.22 4.46004 10.95 5.07004 9.85ZM8.00004 17C8.00004 18.1 7.10004 19 6.00004 19C4.90004 19 4.00004 18.1 4.00004 17C4.00004 15.9 4.90004 15 6.00004 15C7.10004 15 8.00004 15.9 8.00004 17Z" fill="#999CA5"/>
 </svg>
 `

packages/core/src/icons/default-app-icon.js

@@ -1,5 +1,5 @@
 import type { WalletModule } from '@bn-onboard/common'
-import { SofiaProRegular, SofiaProSemiBold } from '@bn-onboard/common'
+import { SofiaProRegular } from '@bn-onboard/common'
 import connectWallet from './connect'
 import disconnectWallet from './disconnect'
 import setChain from './chain'
@@ -85,7 +85,6 @@ function mountApp() {
 
   styleEl.innerHTML = `
     ${SofiaProRegular}
-    ${SofiaProSemiBold}
   `
   document.body.appendChild(styleEl)
 
@@ -140,7 +139,6 @@ function mountApp() {
   
           /* FONTS */
           --font-family-normal: Sofia Pro;
-          --font-family-semibold: Sofia Pro Semibold;
   
           --font-size-1: 3rem;
           --font-size-2: 2.25rem;

packages/core/src/index.ts

@@ -13,7 +13,8 @@
   :global(input, textarea, select) {
     width: 100%;
     padding: 0.5rem 1rem;
-    border: 2px solid var(--onboard-gray-200, var(--gray-200));
+    outline: 2px solid var(--onboard-gray-200, var(--gray-200));
+    border: none;
     border-radius: 8px;
     font-size: 1rem;
     line-height: 1.5;
@@ -25,7 +26,8 @@
     -webkit-appearance: none;
     width: auto;
     background-color: var(--onboard-white, var(--white));
-    border: 1px solid var(--onboard-gray-300, var(--gray-300));
+    outline: 1px solid var(--onboard-gray-300, var(--gray-300));
+    border: none;
     padding: 0.5em;
     border-radius: 3px;
     display: flex;
@@ -76,15 +78,14 @@
         var(--onboard-primary-500, var(--primary-500))
       );
     box-shadow: 0 0 0 1px -moz-mac-focusring;
-    outline: none;
   }
 
   :global(input:disabled, textarea:disabled, select:disabled) {
     background-color: var(--gray-100);
   }
 
   :global(input::-moz-focus-inner) {
-    border: 0;
+    outline: 0;
     padding: 0;
     margin-top: -2px;
     margin-bottom: -2px;
@@ -130,13 +131,10 @@
     padding: var(--onboard-spacing-5, var(--spacing-5))
       var(--onboard-spacing-4, var(--spacing-4));
     color: var(--onboard-gray-500, var(--gray-500));
-    font-family: var(
-      --onboard-font-family-semibold,
-      var(--font-family-semibold)
-    );
     font-size: var(--onboard-font-size-6, var(--font-size-6));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    border: 1px solid var(--onboard-gray-500, var(--gray-500));
+    outline: 1px solid var(--onboard-gray-500, var(--gray-500));
+    font-weight: 700;
   }
 </style>
 

packages/core/src/views/Index.svelte

@@ -18,7 +18,7 @@
     position: relative;
     padding: var(--onboard-spacing-4, var(--spacing-4));
     font-family: var(--onboard-font-family-normal, var(--font-family-normal));
-    line-height: var(--onboard-font-line-height-1, var(--font-line-height-1));
+    line-height: 16px;
     font-size: var(--onboard-font-size-5, var(--font-size-5));
   }
 
@@ -31,16 +31,12 @@
 
   h4 {
     font-size: var(--onboard-font-size-3, var(--font-size-3));
-    font-family: var(
-      --onboard-font-family-semibold,
-      var(--font-family-semibold)
-    );
     margin: var(--onboard-spacing-4, var(--spacing-4)) 0;
   }
 
   p {
     margin: 0 0 var(--onboard-spacing-4, var(--spacing-4)) 0;
-    max-width: 485px;
+    max-width: 488px;
   }
 </style>
 

packages/core/src/views/chain/SwitchChain.svelte

@@ -17,7 +17,7 @@
     width: 300px;
     font-family: var(--onboard-font-family-normal, var(--font-family-normal));
     font-size: var(--onboard-font-size-5, var(--font-size-5));
-    line-height: var(--onboard-font-line-height-1, var(--font-line-height-1));
+    line-height: 24px;
   }
 
   .icon-container {
@@ -49,7 +49,7 @@
     width: 100%;
     background-color: var(--onboard-gray-500, var(--gray-500));
     font-weight: 700;
-    line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
+    line-height: 16px;
     color: var(--onboard-white, var(--white));
     justify-content: center;
   }

packages/core/src/views/connect/ActionRequired.svelte

@@ -44,7 +44,7 @@
     align-items: center;
     padding: var(--onboard-spacing-4, var(--spacing-4));
     font-size: var(--onboard-font-size-6, var(--font-size-6));
-    line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
+    line-height: 24px;
   }
 
   label {

packages/core/src/views/connect/Agreement.svelte

@@ -51,7 +51,7 @@
       }
     }
 
-    setTimeout(() => connectWallet$.next({ inProgress: false }), 1500)
+    // setTimeout(() => connectWallet$.next({ inProgress: false }), 1500)
   }
 
   updateAccountDetails()
@@ -69,7 +69,7 @@
     padding: var(--onboard-spacing-4, var(--spacing-4));
     border-radius: 24px;
     background: var(--onboard-success-100, var(--success-100));
-    border: 1px solid var(--onboard-success-600, var(--success-600));
+    outline: 1px solid var(--onboard-success-600, var(--success-600));
     width: 100%;
     box-sizing: border-box;
   }
@@ -87,7 +87,7 @@
 
   .tick {
     display: flex;
-    color: var(--onboard-black, var(--black));
+    color: var(--onboard-success-700, var(--success-700));
   }
 
   @media all and (max-width: 520px) {
@@ -99,18 +99,20 @@
     <div class="icons">
       <WalletAppBadge
         size={40}
+        padding={8}
         background={appMetadata && appMetadata.icon ? 'lightBlue' : 'lightGray'}
         border="darkGreen"
         icon={(appMetadata && appMetadata.icon) || defaultAppIcon}
       />
 
-      <div style="position: relative; right: 0.85rem;">
+      <div style="position: relative; right: 0.85rem; top: 2px;">
         <SuccessStatusIcon size={17} right={null} />
       </div>
 
       <div style="position: relative; right: 0.5rem;">
         <WalletAppBadge
           size={40}
+          padding={8}
           border="darkGreen"
           icon={selectedWallet.icon}
         />
@@ -123,7 +125,7 @@
       })}
     </div>
 
-    <div class="tick" style="width: 17.6px; height: 13.4px;">
+    <div class="tick" style="width: 20px;">
       {@html success}
     </div>
   </div>