new user tooltips

This commit is contained in:
PhilReact 2025-01-31 16:50:54 +02:00
parent 45da5d183b
commit 893b1e6f5f
5 changed files with 36 additions and 23 deletions

View File

@ -412,7 +412,7 @@ function App() {
const [hasSettingsChanged, setHasSettingsChanged] = useRecoilState( const [hasSettingsChanged, setHasSettingsChanged] = useRecoilState(
hasSettingsChangedAtom hasSettingsChangedAtom
); );
const {showTutorial, openTutorialModal, shownTutorialsInitiated, setOpenTutorialModal} = useHandleTutorials() const {showTutorial, openTutorialModal, shownTutorialsInitiated, setOpenTutorialModal, hasSeenGettingStarted} = useHandleTutorials()
const holdRefExtState = useRef<extStates>("not-authenticated"); const holdRefExtState = useRef<extStates>("not-authenticated");
const isFocusedRef = useRef<boolean>(true); const isFocusedRef = useRef<boolean>(true);
const { isShow, onCancel, onOk, show, message } = useModal(); const { isShow, onCancel, onOk, show, message } = useModal();
@ -1739,7 +1739,8 @@ function App() {
showTutorial, showTutorial,
openTutorialModal, openTutorialModal,
setOpenTutorialModal, setOpenTutorialModal,
downloadResource downloadResource,
hasSeenGettingStarted
}}> }}>
<Tutorials /> <Tutorials />
{extState === "not-authenticated" && ( {extState === "not-authenticated" && (
@ -2320,8 +2321,7 @@ function App() {
height: "154px", height: "154px",
}} }}
> >
<img src={Logo1} className="base-image" /> <img src={Logo1Dark} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
</div> </div>
<Spacer height="38px" /> <Spacer height="38px" />
<TextP <TextP
@ -2383,8 +2383,7 @@ function App() {
height: "154px", height: "154px",
}} }}
> >
<img src={Logo1} className="base-image" /> <img src={Logo1Dark} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
</div> </div>
<Spacer height="38px" /> <Spacer height="38px" />
<TextP <TextP
@ -2480,8 +2479,7 @@ function App() {
height: "154px", height: "154px",
}} }}
> >
<img src={Logo1} className="base-image" /> <img src={Logo1Dark} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
</div> </div>
<Spacer height="35px" /> <Spacer height="35px" />
<Box <Box
@ -2580,8 +2578,7 @@ function App() {
height: "154px", height: "154px",
}} }}
> >
<img src={Logo1} className="base-image" /> <img src={Logo1Dark} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
</div> </div>
<Spacer height="35px" /> <Spacer height="35px" />
<Box <Box
@ -2678,8 +2675,7 @@ await showInfo({
height: "154px", height: "154px",
}} }}
> >
<img src={Logo1} className="base-image" /> <img src={Logo1Dark} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
</div> </div>
<Spacer height="38px" /> <Spacer height="38px" />
<TextP <TextP

View File

@ -59,7 +59,7 @@ export const NotAuthenticated = ({
// const [currentNode, setCurrentNode] = React.useState({ // const [currentNode, setCurrentNode] = React.useState({
// url: "http://127.0.0.1:12391", // url: "http://127.0.0.1:12391",
// }); // });
const { showTutorial } = useContext(GlobalContext); const { showTutorial, hasSeenGettingStarted } = useContext(GlobalContext);
const [importedApiKey, setImportedApiKey] = React.useState(null); const [importedApiKey, setImportedApiKey] = React.useState(null);
//add and edit states //add and edit states
@ -341,18 +341,22 @@ export const NotAuthenticated = ({
height: "154px", height: "154px",
}} }}
> >
<img src={Logo1} className="base-image" /> <img src={Logo1Dark} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
</div> </div>
<Spacer height="30px" /> <Spacer height="30px" />
<TextP <TextP
sx={{ sx={{
textAlign: "center", textAlign: "center",
lineHeight: "15px", lineHeight: 1.2,
fontSize: '16px'
}} }}
> >
WELCOME TO <TextItalic>YOUR</TextItalic> <br></br> WELCOME TO <TextItalic sx={{
<TextSpan> QORTAL WALLET</TextSpan> fontSize: '18px'
}}>YOUR</TextItalic> <br></br>
<TextSpan sx={{
fontSize: '18px'
}}> QORTAL WALLET</TextSpan>
</TextP> </TextP>
<Spacer height="30px" /> <Spacer height="30px" />
<Box <Box
@ -379,8 +383,16 @@ export const NotAuthenticated = ({
onClick={() => { onClick={() => {
setExtstate("create-wallet"); setExtstate("create-wallet");
}} }}
sx={{
backgroundColor: hasSeenGettingStarted === false && 'var(--green)',
color: hasSeenGettingStarted === false && 'black',
"&:hover": {
backgroundColor: hasSeenGettingStarted === false && 'var(--green)',
color: hasSeenGettingStarted === false && 'black'
}
}}
> >
Create account Create wallet
</CustomButton> </CustomButton>
</Box> </Box>
<Spacer height="15px" /> <Spacer height="15px" />
@ -401,9 +413,15 @@ export const NotAuthenticated = ({
gap: "10px", gap: "10px",
alignItems: "center", alignItems: "center",
flexDirection: "column", flexDirection: "column",
outline: '0.5px solid rgba(255, 255, 255, 0.5)',
padding: '20px 30px',
borderRadius: '5px',
}} }}
> >
<> <>
<Typography sx={{
textDecoration: 'underline'
}}>For advanced users</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

View File

@ -36,8 +36,6 @@ import GroupIcon from "@mui/icons-material/Group";
import PersonIcon from "@mui/icons-material/Person"; import PersonIcon from "@mui/icons-material/Person";
import LockIcon from '@mui/icons-material/Lock'; import LockIcon from '@mui/icons-material/Lock';
import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred'; import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
import LockIcon from '@mui/icons-material/Lock';
import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
import { import {
AuthenticatedContainerInnerRight, AuthenticatedContainerInnerRight,
CustomButton, CustomButton,

View File

@ -189,6 +189,7 @@ useEffect(()=> {
showTutorial, showTutorial,
openTutorialModal, openTutorialModal,
setOpenTutorialModal, setOpenTutorialModal,
shownTutorialsInitiated: !!shownTutorials shownTutorialsInitiated: !!shownTutorials,
hasSeenGettingStarted: shownTutorials === null ? null : !!(shownTutorials || {})['getting-started'],
}; };
}; };

View File

@ -70,7 +70,7 @@ body {
} }
.image-container:hover .base-image { .image-container:hover .base-image {
opacity: 0; opacity: 0.6;
} }