mirror of
https://github.com/Qortal/qortal-mobile.git
synced 2025-04-27 13:27:52 +00:00
new user tooltips
This commit is contained in:
parent
45da5d183b
commit
893b1e6f5f
20
src/App.tsx
20
src/App.tsx
@ -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
|
||||||
|
@ -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",
|
||||||
|
@ -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,
|
||||||
|
@ -189,6 +189,7 @@ useEffect(()=> {
|
|||||||
showTutorial,
|
showTutorial,
|
||||||
openTutorialModal,
|
openTutorialModal,
|
||||||
setOpenTutorialModal,
|
setOpenTutorialModal,
|
||||||
shownTutorialsInitiated: !!shownTutorials
|
shownTutorialsInitiated: !!shownTutorials,
|
||||||
|
hasSeenGettingStarted: shownTutorials === null ? null : !!(shownTutorials || {})['getting-started'],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -70,7 +70,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.image-container:hover .base-image {
|
.image-container:hover .base-image {
|
||||||
opacity: 0;
|
opacity: 0.6;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user