Fixing issues with Connect

packages/kit/package.json

@@ -41,16 +41,17 @@
     "@0xsequence/api": ">= 2.2.4",
     "@0xsequence/auth": ">= 2.2.4",
     "@0xsequence/core": ">= 2.2.4",
+    "@0xsequence/design-system": "^2.0.1",
+    "@0xsequence/ethauth": "^1.0.0",
     "@0xsequence/indexer": ">= 2.2.4",
     "@0xsequence/metadata": ">= 2.2.4",
     "@0xsequence/network": ">= 2.2.4",
     "@0xsequence/provider": ">= 2.2.4",
     "@0xsequence/utils": ">= 2.2.4",
     "@0xsequence/waas": ">= 2.2.4",
-    "@0xsequence/ethauth": "^1.0.0",
-    "@0xsequence/design-system": "^2.0.1",
-    "motion": "^12.3.1",
+    "clsx": "^2.1.1",
     "fuse.js": "^6.6.2",
+    "motion": "^12.3.1",
     "uuid": "^10.0.0"
   },
   "peerDependencies": {

packages/kit/src/components/Connect/Connect.tsx

@@ -24,6 +24,8 @@ import { ConnectedWallets } from './ConnectedWallets'
 import { EmailWaasVerify } from './EmailWaasVerify'
 import { ExtendedWalletList } from './ExtendedWalletList'
 
+import { clsx } from 'clsx'
+
 const MAX_ITEM_PER_ROW = 4
 export const SEQUENCE_UNIVERSAL_CONNECTOR_NAME = 'Sequence'
 
@@ -472,7 +474,12 @@ export const Connect = (props: ConnectWalletContentProps) => {
               )}
               {walletConnectors.length > 0 && (
                 <>
-                  <div className="flex gap-2 flex-row justify-center items-center">
+                  <div
+                    className={clsx(
+                      'flex gap-2 flex-row justify-center items-center',
+                      hasConnectedSequenceUniversal ? 'mt-4' : 'mt-6'
+                    )}
+                  >
                     {walletConnectors.slice(0, walletConnectorsPerRow).map(connector => {
                       return <ConnectButton key={connector.uid} connector={connector} onConnect={onConnect} />
                     })}

packages/kit/src/components/Connect/ConnectedWallets.tsx

@@ -151,7 +151,7 @@ export const ConnectedWallets = ({
           className="scroll-fade-top absolute top-0 left-0 right-0"
           style={{
             height: '30px',
-            background: 'linear-gradient(to top, rgba(0, 0, 0, 0), var(--seq-colors-background-primary))',
+            background: 'linear-gradient(to top, rgba(0, 0, 0, 0), var(--seq-color-background-primary))',
             pointerEvents: 'none',
             opacity: 0,
             transition: 'opacity 0.2s'
@@ -161,7 +161,7 @@ export const ConnectedWallets = ({
           className="scroll-fade absolute bottom-0 left-0 right-0"
           style={{
             height: '40px',
-            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--seq-colors-background-primary))',
+            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--seq-color-background-primary))',
             pointerEvents: 'none',
             opacity: 0,
             transition: 'opacity 0.2s'

packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx

@@ -5,20 +5,17 @@ import { SequenceLogo } from './SequenceLogo'
 export const PoweredBySequence = () => {
   return (
     <div
-      className="powered-by-sequence-footer flex relative gap-2 flex-row items-center justify-center select-none cursor-pointer"
+      className="powered-by-sequence-footer flex relative gap-2 flex-row items-center justify-center select-none cursor-pointer left-[-28px]"
       onClick={() => {
         if (typeof window !== 'undefined') {
           window.open('https://sequence.xyz')
         }
       }}
-      style={{
-        left: '-28px'
-      }}
     >
       <Text variant="xsmall" color="muted" fontWeight="bold">
         Powered by
       </Text>
-      <div className="h-5 w-5 relative" style={{ top: '1px' }}>
+      <div className="h-5 w-5 relative top-[1px]">
         <SequenceLogo />
       </div>
     </div>