Create LearnDialog (links to learn.robosats.com)

frontend/src/components/App.js

@@ -4,10 +4,12 @@ import HomePage from "./HomePage";
 import { CssBaseline, IconButton , Link} from "@mui/material";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import UnsafeAlert from "./UnsafeAlert";
+import { LearnDialog } from "./Dialogs";
 
 import { I18nextProvider } from "react-i18next";
 import i18n from "./i18n";
 
+//Icons
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import SchoolIcon from '@mui/icons-material/School';
@@ -17,6 +19,7 @@ export default class App extends Component {
     super(props);
     this.state = {
       dark: false,
+      openLearn: false,
     }
   }
 
@@ -36,7 +39,8 @@ export default class App extends Component {
       <I18nextProvider i18n={i18n}>
         <ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
           <CssBaseline/>
-          <IconButton sx={{position:'fixed',right:'28px'}} component={Link} href="https://learn.robosats.com" target="_blank"><SchoolIcon/></IconButton>
+          <LearnDialog open={this.state.openLearn} onClose={()=> this.setState({openLearn:false})}/>
+          <IconButton sx={{position:'fixed',right:'30px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
           <IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
             {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
           </IconButton>

frontend/src/components/Dialogs/Learn.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogTitle,
+  DialogActions,  
+  DialogContent,
+  DialogContentText,
+  Button,
+  Link, 
+} from "@mui/material"
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+}
+
+const LearnDialog = ({
+  open, 
+  onClose,
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      >
+      <DialogTitle>
+        {t("Tutorials and Documentation")}
+      </DialogTitle>
+
+      <DialogContent>
+        <DialogContentText>
+          {t("You are about to visit 'Learn.RoboSats' page. This is a community built site hosting tutorials and documentation to help you learn to use RoboSats and understand how it works.")}
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>{t("Back")}</Button>
+        <Button onClick={onClose} autoFocus component={Link} href="https://learn.robosats.com" target="_blank">
+          {t("Let's go!")}
+        </Button>
+      </DialogActions>
+
+    </Dialog>
+  )
+}
+
+export default LearnDialog;

frontend/src/components/Dialogs/index.ts

@@ -1,4 +1,6 @@
-export { default as CommunityDialog } from "./CommunityDialog";
-export { default as InfoDialog } from "./InfoDialog";
-export { default as StoreTokenDialog } from "./StoreTokenDialog";
-export { default as NoRobotDialog } from "./NoRobotDialog";
+export { default as CommunityDialog } from "./Community";
+export { default as InfoDialog } from "./Info";
+export { default as LearnDialog } from "./Learn";
+export { default as NoRobotDialog } from "./NoRobot";
+export { default as StoreTokenDialog } from "./StoreToken";
+

frontend/src/locales/en.json

@@ -18,6 +18,10 @@
     "Make Order":"Make Order",
     "Info":"Info",
     "View Book":"View Book",
+    "Tutorials and Documentation":"Tutorials and Documentation",
+    "You are about to visit 'Learn.RoboSats' page. This is a community built site hosting tutorials and documentation to help you learn to use RoboSats and understand how it works.":"You are about to visit 'Learn.RoboSats' page. This is a community built site hosting tutorials and documentation to help you learn to use RoboSats and understand how it works.",
+    "Let's go!":"Let's go!",
+
 
 
     "MAKER PAGE - MakerPage.js": "This is the page where users can create new orders",

frontend/src/locales/es.json

@@ -18,6 +18,9 @@
     "Make Order":"Crear orden",
     "Info": "Info",
     "View Book": "Ver libro",
+    "Tutorials and Documentation":"Tutoriales y Documentación",
+    "You are about to visit 'Learn.RoboSats' page. This is a community built site hosting tutorials and documentation to help you learn to use RoboSats and understand how it works.":"Vas a visitar la página 'Learn.RoboSats'. Ha sido construida por la comunidad y tiene tutoriales y documentación que te ayudará a aprender como se usa RoboSats y a entender como funciona.",
+    "Let's go!":"¡Vamos!",
 
     
     "MAKER PAGE - MakerPage.js": "This is the page where users can create new orders",