new user tooltips

src/App.tsx

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

src/ExtStates/NotAuthenticated.tsx

@@ -59,7 +59,7 @@ export const NotAuthenticated = ({
   // const [currentNode, setCurrentNode] = React.useState({
   //   url: "http://127.0.0.1:12391",
   // });
-  const { showTutorial  } = useContext(GlobalContext);
+  const { showTutorial, hasSeenGettingStarted  } = useContext(GlobalContext);
 
   const [importedApiKey, setImportedApiKey] = React.useState(null);
   //add and edit states
@@ -341,18 +341,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: '16px'
         }}
       >
-        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" />
       <Box
@@ -379,8 +383,16 @@ export const NotAuthenticated = ({
           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>
       </Box>
       <Spacer height="15px" />
@@ -401,9 +413,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",

src/components/Group/Group.tsx

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

src/components/Tutorials/useHandleTutorials.tsx

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

src/index.css

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