new user tooltips

src/ExtStates/NotAuthenticated.tsx

@@ -12,8 +12,8 @@ import {
   DialogTitle,
   FormControlLabel,
   Input,
+  styled,
   Switch,
-  Tooltip,
   Typography,
 } from "@mui/material";
 import Logo1 from "../assets/svgs/Logo1.svg";
@@ -24,12 +24,24 @@ import { CustomizedSnackbars } from "../components/Snackbar/Snackbar";
 import { set } from "lodash";
 import { cleanUrl, gateways, isUsingLocal } from "../background";
 import { GlobalContext } from "../App";
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
 
 const manifestData = {
   version: "0.5.1",
 };
 
 
+export const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: '#232428',
+    color: 'white',
+    maxWidth: 320,
+    padding: '20px',
+    fontSize: theme.typography.pxToRem(12),
+  },
+}));
 function removeTrailingSlash(url) {
   return url.replace(/\/+$/, '');
 }
@@ -66,7 +78,7 @@ export const NotAuthenticated = ({
   const [customApikey, setCustomApiKey] = React.useState("");
   const [customNodeToSaveIndex, setCustomNodeToSaveIndex] =
     React.useState(null);
-    const { showTutorial  } = useContext(GlobalContext);
+    const { showTutorial, hasSeenGettingStarted  } = useContext(GlobalContext);
 
   const importedApiKeyRef = useRef(null);
   const currentNodeRef = useRef(null);
@@ -354,18 +366,22 @@ export const NotAuthenticated = ({
           height: "154px",
         }}
       >
-        <img src={Logo1} className="base-image" />
-        <img src={Logo1Dark} className="hover-image" />
+        <img src={Logo1Dark} className="base-image" />
       </div>
       <Spacer height="30px" />
       <TextP
         sx={{
           textAlign: "center",
-          lineHeight: "15px",
+          lineHeight: 1.2,
+          fontSize: '18px'
         }}
       >
-        WELCOME TO <TextItalic>YOUR</TextItalic> <br></br>
-        <TextSpan> QORTAL WALLET</TextSpan>
+        WELCOME TO <TextItalic sx={{
+          fontSize: '18px'
+        }}>YOUR</TextItalic> <br></br>
+        <TextSpan sx={{
+          fontSize: '18px'
+        }}> QORTAL WALLET</TextSpan>
       </TextP>
       
       <Spacer height="30px" />
@@ -375,11 +391,23 @@ export const NotAuthenticated = ({
           gap: "10px",
           alignItems: "center",
         }}
+      >
+         <HtmlTooltip
+        disableHoverListener={hasSeenGettingStarted === true}
+       placement="left"
+        title={
+          <React.Fragment>
+            <Typography color="inherit" sx={{
+              fontSize: '16px'
+             }}>Your wallet is like your digital ID on Qortal, and is how you will login to the Qortal User Interface. It holds your public address and the Qortal name you will eventually choose. Every transaction you make is linked to your ID, and this is where you manage all your QORT and other tradeable cryptocurrencies on Qortal.</Typography>
+          </React.Fragment>
+        }
       >
         <CustomButton onClick={()=> setExtstate('wallets')}>
           {/* <input {...getInputProps()} /> */}
           Wallets
         </CustomButton>
+        </HtmlTooltip>
         {/* <Tooltip title="Authenticate by importing your Qortal JSON file" arrow>
           <img src={Info} />
         </Tooltip> */}
@@ -391,16 +419,41 @@ export const NotAuthenticated = ({
           display: "flex",
           gap: "10px",
           alignItems: "center",
+         
         }}
+      >
+        <HtmlTooltip
+        disableHoverListener={hasSeenGettingStarted === true}
+        placement="right"
+        title={
+          <React.Fragment>
+             <Typography color="inherit" sx={{
+              fontWeight: 'bold',
+              fontSize: '18px'
+             }}>New users start here!</Typography>
+             <Spacer height='10px'/>
+            <Typography color="inherit" sx={{
+              fontSize: '16px'
+             }}>Creating an account means creating a new wallet and digital ID to start using Qortal. Once you have made your account, you can start doing things like obtaining some QORT, buying a name and avatar, publishing videos and blogs, and much more.</Typography>
+          </React.Fragment>
+        }
       >
         <CustomButton
           onClick={() => {
             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>
-
+        </HtmlTooltip>
       
       </Box>
       <Spacer height="15px" />
@@ -421,9 +474,15 @@ export const NotAuthenticated = ({
             gap: "10px",
             alignItems: "center",
             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
               sx={{
                 display: "flex",
@@ -434,6 +493,12 @@ export const NotAuthenticated = ({
               }}
             >
               <FormControlLabel
+              sx={{
+                "& .MuiFormControlLabel-label": {
+                  fontSize: '14px'
+                }
+                
+              }}
                 control={
                   <Switch
                     sx={{