diff --git a/src/components/lume/LumeIdentity/LumeIdentity.tsx b/src/components/lume/LumeIdentity/LumeIdentity.tsx index 62841f2..2166b62 100644 --- a/src/components/lume/LumeIdentity/LumeIdentity.tsx +++ b/src/components/lume/LumeIdentity/LumeIdentity.tsx @@ -1,58 +1,110 @@ -import React from 'react'; -import { Button } from '../../../components/ui/button'; -import { SwitchableComponent, SwitchableComponentProvider, useSwitchableComponent } from '../../../components/SwitchableComponent'; +import { Button } from "../../ui/button.tsx"; +import { + SwitchableComponent, + SwitchableComponentProvider, + useSwitchableComponent, +} from "../../SwitchableComponent.tsx"; import * as ComponentList from "./components"; -import { LumeIdentityContext, Session } from './LumeIdentityContext'; -import { LazyMotion, domAnimation } from 'framer-motion'; -import * as Dialog from '@radix-ui/react-dialog'; -import LumeLogoBg from './LumeLogoBg'; +import { LumeIdentityContext, Session } from "./LumeIdentityContext"; +import { LazyMotion, domAnimation } from "framer-motion"; +import * as Dialog from "@radix-ui/react-dialog"; +import LumeLogoBg from "./LumeLogoBg"; +import type { FC } from "react"; +import { useState } from "react"; -const LumeIdentity: React.FC = () => { - const { visibleComponent, setVisibleComponent } = useSwitchableComponent(ComponentList.SubmitButton) +const LumeIdentity: FC = () => { + const { visibleComponent, setVisibleComponent } = useSwitchableComponent( + ComponentList.SubmitButton + ); - const isSubmitButtonInView = [ComponentList.SubmitButton.index].includes(visibleComponent.index) - const isLoginWithAccountKey = [ComponentList.SeedPhraseInput.index].includes(visibleComponent.index) - const isCreatingAccount = [ComponentList.SetupAccountKey.index].includes(visibleComponent.index) - const isShowingSeedPhrase = [ComponentList.SeedPhraseGeneration.index].includes(visibleComponent.index) - const isFinalStep = [ComponentList.SeedPhraseGeneration.index].includes(visibleComponent.index) - const shouldShowBackButton = isCreatingAccount + const isSubmitButtonInView = [ComponentList.SubmitButton.index].includes( + visibleComponent.index + ); + const isLoginWithAccountKey = [ComponentList.SeedPhraseInput.index].includes( + visibleComponent.index + ); + const isCreatingAccount = [ComponentList.SetupAccountKey.index].includes( + visibleComponent.index + ); + const isShowingSeedPhrase = [ + ComponentList.SeedPhraseGeneration.index, + ].includes(visibleComponent.index); + const isFinalStep = [ComponentList.SeedPhraseGeneration.index].includes( + visibleComponent.index + ); + const shouldShowBackButton = isCreatingAccount; - const coloredOrLine = isSubmitButtonInView ? 'text-primary' : 'text-border' + const coloredOrLine = isSubmitButtonInView ? "text-primary" : "text-border"; - - return
-
- -
-
-
-

- {isSubmitButtonInView || isLoginWithAccountKey ? 'Sign in with Lume' : null} - {isCreatingAccount && !isShowingSeedPhrase ? 'Set up your account key' : null} - {isShowingSeedPhrase ? "Here's your account key" : null} -

+ return ( +
+
+
-
- - - - - - {!isFinalStep ? <> -
- - - - -
- - : null} +
+
+

+ {isSubmitButtonInView || isLoginWithAccountKey + ? "Sign in with Lume" + : null} + {isCreatingAccount && !isShowingSeedPhrase + ? "Set up your account key" + : null} + {isShowingSeedPhrase ? "Here's your account key" : null} +

+
+
+ + + + + + {!isFinalStep ? ( + <> +
+ + + + +
+ + + ) : null} +
-
- + ); }; // @ditorodev: We should see how we improve this to be more like Google's SSO @@ -60,22 +112,24 @@ const LumeIdentity: React.FC = () => { // hitting my screen, it is almost impossible to see whats happening the outline // buttons have no contrast export default function Wrapped() { - const [session, setSession] = React.useState(); - return - - - - - - - - - - - - - - + const [session, setSession] = useState(); + return ( + + + + + + + + + + + + + + + + ); }