Updated login screen for no account connected

src/app/components/applications/SSV/Welcome/Welcome.tsx

@@ -8,12 +8,39 @@ import { useAppSelector } from '~app/hooks/redux.hook';
 import { getAccountAddress } from '~app/redux/wallet.slice';
 import { SecondaryButton } from '~app/atomicComponents';
 import { ButtonSize } from '~app/enums/Button.enum';
+import styled from 'styled-components';
+import { WalletButton } from '~app/components/common/AppBar/components/ConnectWalletButton/ConnectWalletButton.tsx';
+
+const WelcomeImage = styled.div`
+  width: 420px;
+  height: 274px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url(/images/robot_rocket.svg);
+  margin: auto auto 32px;
+`;
 
 const Welcome = () => {
   const classes = useStyles();
   const navigate = useNavigate();
   const accountAddress = useAppSelector(getAccountAddress);
 
+  if (!accountAddress) {
+    return (
+      <BorderScreen
+        withoutNavigation
+        body={[
+          <Grid container>
+            <HeaderSubHeader title={'Welcome to SSV Network'} subtitle={'Connect your wallet to run distributed validators, or join as an operator.'} />
+            <WelcomeImage />
+            <WalletButton />
+          </Grid>
+        ]}
+      />
+    );
+  }
+
   return (
     <BorderScreen
       withoutNavigation

src/app/components/common/AppBar/components/ConnectWalletButton/ConnectWalletButton.tsx

@@ -27,6 +27,7 @@ export const WalletButton = () => {
 
         return (
           <div
+            className="w-full"
             {...(!mounted && {
               'aria-hidden': true,
               style: {
@@ -39,7 +40,7 @@ export const WalletButton = () => {
             {(() => {
               if (!connected) {
                 return (
-                  <Button size="lg" onClick={openConnectModal}>
+                  <Button size="lg" width="full" onClick={openConnectModal}>
                     Connect Wallet
                   </Button>
                 );

src/app/components/ui/button.tsx

@@ -28,11 +28,16 @@ const buttonVariants = cva(
         icon: 'h-10 w-10 rounded-lg',
         network: 'h-12 pl-3 pr-4 font-semibold text-md rounded-lg',
         wallet: 'h-12 px-4 font-semibold text-md rounded-lg'
+      },
+      width: {
+        full: 'w-full',
+        default: ''
       }
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default'
+      size: 'default',
+      width: 'default'
     }
   }
 );
@@ -45,12 +50,12 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, colorScheme, asChild = false, isLoading, loadingText, children, isActionBtn, type = 'button', ...props }, ref) => {
+  ({ className, variant, size, colorScheme, width, asChild = false, isLoading, loadingText, children, isActionBtn, type = 'button', ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     const _loadingText = loadingText ?? 'Waiting for Wallet Confirmation...';
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, colorScheme, className }), {
+        className={cn(buttonVariants({ variant, size, colorScheme, className, width }), {
           'opacity-50': isLoading
         })}
         type={type}