Style fixes on Safari

Author: lnbc1QWFyb24

packages/common/src/elements/TableHeader.svelte

@@ -32,7 +32,6 @@
     line-height: var(--account-select-font-line-height-1, var(--line-height-1));
     background-color: var(--account-select-gray-500, var(--gray-500));
     color: var(--account-select-primary-100, var(--primary-100));
-    width: 10rem;
     display: flex;
     justify-content: center;
     align-items: center;

packages/core/src/views/Index.svelte

@@ -119,7 +119,7 @@
   :global(button) {
     display: flex;
     align-items: center;
-    padding: var(--onboard-spacing-4, var(--spacing-4));
+    padding: calc(var(--onboard-spacing-4, var(--spacing-4)) - 1px);
     border-radius: 24px;
     cursor: pointer;
     font: inherit;
@@ -128,12 +128,12 @@
 
   :global(.onboard-button-primary) {
     background: var(--onboard-white, var(--white));
-    padding: var(--onboard-spacing-5, var(--spacing-5))
-      var(--onboard-spacing-4, var(--spacing-4));
+    padding: calc(var(--onboard-spacing-5, var(--spacing-5)) - 1px)
+      calc(var(--onboard-spacing-4, var(--spacing-4)) - 1px);
     color: var(--onboard-gray-500, var(--gray-500));
     font-size: var(--onboard-font-size-6, var(--font-size-6));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    outline: 1px solid var(--onboard-gray-500, var(--gray-500));
+    border: 1px solid var(--onboard-gray-500, var(--gray-500));
     font-weight: 700;
   }
 </style>

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

@@ -69,7 +69,7 @@
     padding: var(--onboard-spacing-4, var(--spacing-4));
     border-radius: 24px;
     background: var(--onboard-success-100, var(--success-100));
-    outline: 1px solid var(--onboard-success-600, var(--success-600));
+    border: 1px solid var(--onboard-success-600, var(--success-600));
     width: 100%;
     box-sizing: border-box;
   }

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

@@ -188,6 +188,7 @@
       --onboard-connect-header-color,
       var(--onboard-black, var(--black))
     );
+    border-radius: 0 24px 0 0;
   }
 
   .header-heading {

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

@@ -17,7 +17,7 @@
       --onboard-wallet-button-background,
       var(--onboard-white, var(--white))
     );
-    outline: 1px solid
+    border: 1px solid
       var(
         --onboard-wallet-button-border-color,
         var(--onboard-primary-200, var(--primary-200))
@@ -37,7 +37,7 @@
   }
 
   button.connected {
-    outline: 1px solid var(--onboard-success-200, var(--success-200));
+    border: 1px solid var(--onboard-success-200, var(--success-200));
   }
 
   button.connected:hover {

packages/core/src/views/shared/WalletAppBadge.svelte

@@ -44,31 +44,31 @@
   }
 
   .border-yellow {
-    outline: 1px solid var(--onboard-warning-500, var(--warning-500));
+    border: 1px solid var(--onboard-warning-500, var(--warning-500));
   }
 
   .border-gray {
-    outline: 1px solid var(--onboard-gray-300, var(--gray-300));
+    border: 1px solid var(--onboard-gray-300, var(--gray-300));
   }
 
   .border-green {
-    outline: 1px solid var(--onboard-success-500, var(--success-500));
+    border: 1px solid var(--onboard-success-500, var(--success-500));
   }
 
   .border-dark-green {
-    outline: 1px solid var(--onboard-success-700, var(--success-700));
+    border: 1px solid var(--onboard-success-700, var(--success-700));
   }
 
   .border-blue {
-    outline: 1px solid
+    border: 1px solid
       var(
         --onboard-wallet-app-icon-border-color,
         var(--onboard-primary-300, var(--primary-300))
       );
   }
 
   .border-dark-blue {
-    outline: 1px solid
+    border: 1px solid
       var(
         --onboard-wallet-app-icon-border-color,
         var(--onboard-primary-600, var(--primary-600))
@@ -137,9 +137,9 @@
   class:background-white={background === 'white'}
   class:background-transparent={background === 'transparent'}
   class="icon-container"
-  style={`${
-    background === 'custom' ? customBackgroundColor : ''
-  }; padding: ${padding}px; width: ${size}px; height: ${size}px;`}
+  style={`${background === 'custom' ? customBackgroundColor : ''}; padding: ${
+    padding - 1
+  }px; width: ${size}px; height: ${size}px;`}
 >
   {#if loading}
     <div class="spinner-container">

packages/core/src/views/shared/Warning.svelte

@@ -11,7 +11,7 @@
     color: var(--onboard-warning-700, var(--warning-700));
     font-size: var(--onboard-font-size-7, var(--font-size-7));
     line-height: 16px;
-    outline: 1px solid var(--onboard-warning-400, var(--warning-400));
+    border: 1px solid var(--onboard-warning-400, var(--warning-400));
     background-color: var(--onboard-warning-100, var(--warning-100));
     margin: 0;
     border-radius: 12px;