feat(Onboarding): add floating welcome

adds floating welcome listing features and linking to setup walkthrough

apps/frontend/src/index.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@tailwind variants;
 
 @font-face {
   font-family: 'Montserrat';
@@ -67,6 +68,13 @@ body {
   border: 0 solid #e5e7eb;
 }
 
+.inset-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 /* *:focus:not(.focus-visible) {
   outline: 0 !important;
   box-shadow: none !important;

apps/frontend/src/pages/Login/SignupForm.tsx

@@ -1,6 +1,7 @@
 import { useContext, useState } from 'react';
 import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
+import { ArrowRightIcon } from '@heroicons/react/outline';
 
 import { Input } from 'src/components';
 
@@ -102,6 +103,7 @@ const SignupForm = ({ encryptedConfigFile, cancel }: Props) => {
                 error={passwordError}
                 autoComplete='new-password'
                 required
+                autoFocus
               />
             </div>
             <div className='space-y-1'>
@@ -129,10 +131,13 @@ const SignupForm = ({ encryptedConfigFile, cancel }: Props) => {
 
               <button
                 type='submit'
-                className='ml-3 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2  focus:ring-green-500'
+                className='group ml-3 flex justify-center items-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2  focus:ring-green-500'
               >
                 {isLoading && <LoadingImage alt='loading placeholder' src={FlowerLoading} />}
-                {isLoading ? 'Creating wallet...' : 'Create wallet'}
+                {isLoading ? 'Loading wallet...' : 'Continue'}
+                {isLoading ? null : (
+                  <ArrowRightIcon className='w-4 h-4 ml-2 group-hover:translate-x-1 transition ease-in-out duration-100' />
+                )}
               </button>
             </div>
           </form>

apps/frontend/src/pages/Login/UnlockForm.tsx

@@ -116,6 +116,7 @@ const UnlockForm = ({
                 type='password'
                 autoComplete='current-password'
                 required
+                autoFocus
               />
               <div
                 className={'flex items-center justify-end'}

apps/frontend/src/pages/Login/index.tsx

@@ -1,5 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
+import { Transition } from '@headlessui/react';
+import { ArrowNarrowRightIcon } from '@heroicons/react/outline';
+
 import FlowerHeroImage from 'src/assets/lily-image.jpg';
+import LilyDecorativeTrim from 'src/assets/lily-trim.svg';
 
 import { Loading } from 'src/components';
 
@@ -8,6 +12,24 @@ import { File } from '@lily/types';
 import UnlockForm from './UnlockForm';
 import SignupForm from './SignupForm';
 
+const OnboardingItems = [
+  {
+    header: 'Self-custody made simple',
+    subtext:
+      'Take full control of your bitcoin by taking it off of exchanges and into a wallet you control.'
+  },
+  {
+    header: 'All accounts in one place',
+    subtext:
+      'Manage hardware wallets, lightning network accounts, and multisignature vaults all in one place.'
+  },
+  {
+    header: 'World class support',
+    subtext:
+      'Get access to bitcoin experts who are available to help when you have questions or need help.'
+  }
+];
+
 interface Props {
   encryptedConfigFile: File | null;
   setEncryptedConfigFile: React.Dispatch<React.SetStateAction<File | null>>;
@@ -56,6 +78,63 @@ const Login = ({
           src={FlowerHeroImage}
           alt='Lily hero image'
         />
+        <Transition
+          as={Fragment}
+          show={!fetchingEncryptedConfig && mode === 'create'}
+          enter='transition transform ease-in-out duration-500'
+          enterFrom='transform opacity-0 scale-50'
+          enterTo='transform opacity-100 scale-100'
+          leave='transition transform ease-in-out duration-500'
+          leaveFrom='transform opacity-100 scale-100'
+          leaveTo='transform opacity-0 scale-50'
+        >
+          <div className='inset-center w-[30rem] xl:w-[34rem]'>
+            <div className='opacity-[95] overflow-hidden relative animate-float bg-gradient-to-br from-white to-pink-50 flex flex-col justify-center rounded-2xl max-w-prose'>
+              <div className='py-12 xl:px-10 px-10'>
+                <h2 className='text-2xl font-semibold text-slate-900'>Welcome to Lily Wallet</h2>
+                <p className='text-md font-medium leading- mt-2 text-slate-700 max-w-md'>
+                  Lily Wallet is a secure bitcoin wallet designed for everyone on their journey
+                  towards financial freedom.
+                </p>
+                <div className='space-y-6 py-6 max-w-md'>
+                  {OnboardingItems.map((item) => (
+                    <div className='flex'>
+                      <svg
+                        aria-hidden='true'
+                        viewBox='0 0 32 32'
+                        className='h-8 w-8 flex-none text-green-500 fill-current'
+                      >
+                        <path d='M11.83 15.795a1 1 0 0 0-1.66 1.114l1.66-1.114Zm9.861-4.072a1 1 0 1 0-1.382-1.446l1.382 1.446ZM14.115 21l-.83.557a1 1 0 0 0 1.784-.258L14.115 21Zm.954.3c1.29-4.11 3.539-6.63 6.622-9.577l-1.382-1.446c-3.152 3.013-5.704 5.82-7.148 10.424l1.908.598Zm-4.9-4.391 3.115 4.648 1.661-1.114-3.114-4.648-1.662 1.114Z'></path>
+                      </svg>
+                      <div className='ml-2'>
+                        <h2 className='text-lg font-semibold'>{item.header}</h2>
+                        <p className='text-sm font-medium text-slate-700'>{item.subtext}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div className='group mt-4'>
+                  <span>
+                    <a href='https://lily-wallet.com/setup-walkthrough' target='_blank'>
+                      <a
+                        target='_blank'
+                        className='w-max text-base font-medium text-yellow-600 group-hover:text-yellow-700 dark:text-yellow-500 dark:group-hover:text-yellow-400 flex items-center rounded-md focus:ring-1 focus:ring-yellow-600 dark:focus:ring-yellow-500 outline-none'
+                      >
+                        Schedule a setup walkthrough with an expert
+                        <ArrowNarrowRightIcon className='h-5 w-5 fill-current ml-4' />
+                      </a>
+                    </a>
+                  </span>
+                </div>
+              </div>
+
+              <img
+                className='transform rotate-[-150deg] absolute -top-5 -right-14 w-64 mx-auto py-4 opacity-50'
+                src={LilyDecorativeTrim}
+              />
+            </div>
+          </div>
+        </Transition>
       </div>
     </div>
   );

apps/frontend/src/pages/Setup/index.tsx

@@ -111,7 +111,7 @@ const Setup = ({ currentBlockHeight }: Props) => {
   };
 
   return (
-    <div className='md:pl-64 flex flex-col flex-1 h-full'>
+    <div className='flex flex-col flex-1 h-full'>
       <main className='flex flex-1 z-10 bg-gray-100 dark:bg-gray-900 relative overflow-x-hidden'>
         <div className='max-w-4xl w-full flex flex-col items-center mx-auto px-4 sm:px-6 lg:px-8 pb-36'>
           <Transition

apps/frontend/tailwind.config.js

@@ -1,8 +1,15 @@
+const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');
+
 module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
   darkMode: 'media',
+  mode: 'jit',
   theme: {
     extend: {
+      animation: {
+        xBounce: 'xBounce 1s ease-in-out infinite',
+        float: 'float 4s ease-in-out infinite'
+      },
       colors: {
         slate: {
           50: '#f8fafc',
@@ -16,6 +23,19 @@ module.exports = {
           800: '#1e293b',
           900: '#0f172a'
         }
+      },
+      keyframes: {
+        xBounce: {
+          '0%, 100%': { transform: 'translateX(0.1rem)' },
+          '50%': { transform: 'translateX(0rem)' }
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0.4rem)' },
+          '50%': { transform: 'translateY(0rem)' }
+        }
+      },
+      transitionProperty: {
+        height: 'height'
       }
     }
   },
@@ -31,5 +51,14 @@ module.exports = {
       transformOrigin: ['group-hover']
     }
   },
-  plugins: []
+  plugins: [
+    function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          highlight: (value) => ({ boxShadow: `inset 0 1px 0 0 ${value}` })
+        },
+        { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
+      );
+    }
+  ]
 };