Include scholarx video guide links as a fixed hover button (#236)

src/scenes/Home/components/HelpButton/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Button, Popover, Typography } from 'antd';
+
+import styles from './styles.css';
+
+const { Paragraph, Title } = Typography;
+const content = (
+  <div>
+    <Title level={4}>Mentor</Title>
+    <Paragraph>
+      <ul>
+        <li>
+          <a
+            href="https://docs.google.com/document/d/1ZJeKxdAvHcPanXRoGP5rT-vkOTEfsYhrnqr1QVglS58/edit?usp=sharing"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Mentor Guide
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://drive.google.com/file/d/13b0xg3HdZeQohefYMY9gP8_r_G11pGFA/view?usp=sharing"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Mentor Video Guide
+          </a>
+        </li>
+      </ul>
+    </Paragraph>
+    <Title level={4}>Mentee</Title>
+    <Paragraph>
+      <ul>
+        <li>
+          <a
+            href="https://drive.google.com/file/d/1vnW1bhNzETtPtiGTsphzBT2GQ6K0LuX9/view"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Mentee Video Guide
+          </a>
+        </li>
+      </ul>
+    </Paragraph>
+  </div>
+);
+
+function HelpButton() {
+  return (
+    <div className={styles.helpPosition}>
+      <Popover placement="leftBottom" content={content} trigger="click">
+        <Button
+          type="primary"
+          shape="round"
+          size="large"
+          icon={<QuestionCircleOutlined />}
+        >
+          Watch Tutorial
+        </Button>
+      </Popover>
+    </div>
+  );
+}
+
+export default HelpButton;

src/scenes/Home/components/HelpButton/styles.css

@@ -0,0 +1,9 @@
+.helpPosition {
+    position: fixed;
+    right: 30px;
+    bottom: 100px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+}

src/scenes/Home/index.tsx

@@ -8,6 +8,7 @@ import { trackPageWithGoogleAnalytics } from '../../util/google-analytics';
 import ActivePrograms from './components/ActivePrograms';
 import CompletedPrograms from './components/CompletedPrograms';
 import Footer from './components/Footer';
+import HelpButton from './components/HelpButton';
 import MenteePrograms from './components/MenteePrograms';
 import MentorPrograms from './components/MentorPrograms';
 import NavigationBar from './components/NavigationBar';
@@ -82,6 +83,7 @@ const Home = () => {
         </Row>
         <div className={styles.push} />
       </div>
+      <HelpButton />
       <div className={styles.footer}>
         <Footer />
       </div>

src/scenes/Home/scenes/EditMentorApplication/index.tsx

@@ -19,6 +19,7 @@ import {
 } from '../../../../util/mentor-services';
 import { getProgramDetails } from '../../../../util/program-services';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import Result from '../../components/ResultScreen';
 import mainStyles from '../../styles.css';
@@ -170,6 +171,7 @@ function MentorApplication() {
         </Spin>
         <div className={styles.push} />
       </div>
+      <HelpButton />
       <div className={styles.footer}>
         <Footer />
       </div>

src/scenes/Home/scenes/ManageMentees/index.tsx

@@ -19,6 +19,7 @@ import { API_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
 import { Mentee, Profile, SavedProgram } from '../../../../types';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import styles from '../../styles.css';
 import MenteeRow from './components/MenteeRow';
@@ -147,6 +148,7 @@ function ManageMentees() {
           </Row>
         </Spin>
       </div>
+      <HelpButton />
       <Footer />
     </>
   );

src/scenes/Home/scenes/MentorApplication/index.tsx

@@ -19,6 +19,7 @@ import {
   getQuestions,
 } from '../../../../util/program-services';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import Result from '../../components/ResultScreen';
 import mainStyles from '../../styles.css';
@@ -158,6 +159,7 @@ function MentorApplication() {
         </Spin>
         <div className={styles.push} />
       </div>
+      <HelpButton />
       <div className={styles.footer}>
         <Footer />
       </div>

src/scenes/Home/scenes/MentorConfirmation/index.tsx

@@ -26,6 +26,7 @@ import { API_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
 import { Mentor, Profile } from '../../../../types';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import mainStyles from '../../styles.css';
 import styles from './styles.css';
@@ -257,6 +258,7 @@ function MentorConfirmation() {
           )}
         </Spin>
       </div>
+      <HelpButton />
       <Footer />
     </>
   );

src/scenes/Home/scenes/RequestMentors/index.tsx

@@ -10,6 +10,7 @@ import { API_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
 import { Profile, SavedProgram } from '../../../../types';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import styles from '../../styles.css';
 import AppliedMentors from './components/AppliedMentors';
@@ -102,6 +103,7 @@ function RequestMentors() {
           </div>
         </Col>
       </Row>
+      <HelpButton />
       <Footer />
     </>
   );