Web/guide review

web/package.json

@@ -38,6 +38,7 @@
     "react-dom": "^17.0.1",
     "react-hook-form": "^6.11.0",
     "react-hooks-global-state": "^1.0.1",
+    "react-responsive": "^8.1.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.0",

web/src/components/alternating_text_image/alternating_text_image.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Row, Col } from 'reactstrap';
+import { useMediaQuery } from 'react-responsive';
+
+import './style.css';
+
+const AlternatingTextImage = ({ elements }) => {
+  const isTabletOrMobile = useMediaQuery({
+    query: '(max-width: 1140px)',
+  });
+
+  return elements.map(({ title, text, image }, i) => {
+    const titleElement = <h4 className="display-4">{title}</h4>;
+    const imageElement = image && (
+      <img className="alternating_text_image__img" src={`${process.env.PUBLIC_URL}/${image}`} alt={title} />
+    );
+    const textElement = <p className="lead">{text}</p>;
+
+    if (isTabletOrMobile || !image) {
+      return (
+        <div className="pt-lg-5" key={i}>
+          <Col>
+            <div>{titleElement}</div>
+            <Row>{imageElement}</Row>
+            <div className="mb-5">{textElement}</div>
+          </Col>
+        </div>
+      );
+    }
+
+    return (
+      <div className="pt-lg-5" key={i}>
+        {i % 2 === 0 ? (
+          <Row>
+            <Col lg="9">
+              {titleElement}
+              {textElement}
+            </Col>
+            <Col lg="3">
+              <span className="alternating_text_image__right_img_container">{imageElement}</span>
+            </Col>
+          </Row>
+        ) : (
+          <Row>
+            <Col lg="3">
+              <span className="alternating_text_image__left_img_container">{imageElement}</span>
+            </Col>
+            <Col lg="9">
+              {titleElement}
+              {textElement}
+            </Col>
+          </Row>
+        )}
+      </div>
+    );
+  });
+};
+
+export default AlternatingTextImage;

web/src/components/alternating_text_image/style.css

@@ -0,0 +1,20 @@
+.alternating_text_image__img {
+  max-width: 100%;
+  min-height: auto;
+  margin: 0 auto;
+  padding: 2rem 0;
+}
+
+@media (max-width: 1140px) {
+  .alternating_text_image__img {
+    margin: 0 auto;
+  }
+}
+
+.alternating_text_image__left_img_container {
+  float: left;
+}
+
+.alternating_text_image__right_img_container {
+  float: right;
+}

web/src/components/badge_bullet_point.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Badge } from 'reactstrap';
+
+const BadgeBulletPoint = ({ className, badgeColor, iconClass, children }) => (
+  <div className={`d-flex ${className}`}>
+    <Badge className="badge-circle flex-shrink-0 mr-3" color={badgeColor}>
+      <i className={`${iconClass}`} />
+    </Badge>
+    <div>{children}</div>
+  </div>
+);
+
+BadgeBulletPoint.propTypes = {
+  className: PropTypes.string,
+  badgeColor: PropTypes.string,
+  iconClass: PropTypes.string,
+  children: PropTypes.any.isRequired,
+};
+
+export default BadgeBulletPoint;

web/src/components/buttons.js

@@ -18,7 +18,7 @@ export const PreviewButton = ({ block, className, color }) => (
     color={color}
     to={{ pathname: '/sleep-analysis-results', state: { isPreviewMode: true } }}
     tag={Link}
-    size="lg"
+    size="md"
   >
     <span className="btn-inner--icon mr-1">
       <i className="fas fa-play" />

web/src/components/emoji.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Emoji = ({ symbol, label }) => (
-  <span role="img" aria-label={label} aria-hidden={label ? 'false' : 'true'}>
+const Emoji = ({ symbol, label, className }) => (
+  <span className={className} role="img" aria-label={label} aria-hidden={label ? 'false' : 'true'}>
     {symbol}
   </span>
 );
 
 Emoji.propTypes = {
   symbol: PropTypes.string.isRequired,
+  className: PropTypes.string,
   label: PropTypes.string,
 };
 
 Emoji.defaultProps = {
+  className: '',
   label: '',
 };
 

web/src/components/floating_card.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card, Col, Row } from 'reactstrap';
+
+const FloatingCard = ({ cardClassName, headerText, bodyText, button }) => (
+  <Card className={`${cardClassName} shadow-lg border-0 h-100 card-lift--hover`}>
+    <div className="p-5 h-100">
+      <Row className="align-items-center h-100">
+        <Col className="h-100 d-flex flex-column">
+          <h3 className="text-white">{headerText}</h3>
+          <p className="lead text-white text-justify mt-3">{bodyText}</p>
+          <Row className="justify-content-center mt-auto">{button}</Row>
+        </Col>
+      </Row>
+    </div>
+  </Card>
+);
+
+FloatingCard.propTypes = {
+  cardClassName: PropTypes.string,
+  headerText: PropTypes.string,
+  bodyText: PropTypes.any.isRequired,
+  button: PropTypes.object,
+};
+
+export default FloatingCard;

web/src/components/table.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Table } from 'reactstrap';
 
-const SimpleTable = ({ headers, elementsRows }) => (
-  <Table striped borderless responsive>
+const SimpleTable = ({ headers, elementsrows }) => (
+  <Table className="bg-secondary" striped borderless responsive>
     <thead>
       <tr>
         {headers.map((header) => (
@@ -11,7 +11,7 @@ const SimpleTable = ({ headers, elementsRows }) => (
       </tr>
     </thead>
     <tbody>
-      {elementsRows.map((row, i) => (
+      {elementsrows.map((row, i) => (
         <tr key={i}>
           {row.map((element) => (
             <td key={element}>{element}</td>

web/src/views/home/hero/hero.js

@@ -6,6 +6,7 @@ import HeaderSeparator from 'components/header_separator';
 import { RecordMyOwnSleepButton, PreviewButton } from 'components/buttons';
 
 import Logo from 'assets/img/logo.png';
+import PolyCortexFull from 'assets/img/polycortex_full.png';
 
 import './style.css';
 
@@ -42,12 +43,7 @@ class Hero extends React.Component {
                     <div className="mt-4">
                       <small className="text-muted font-weight-bold mb-0 mr-2">* a project made by</small>
                       <a href="http://polycortex.polymtl.ca/" target="_blank" rel="noopener noreferrer">
-                        <img
-                          alt="..."
-                          className="ml-1"
-                          style={{ height: '100px' }}
-                          src={require('assets/img/polycortex_full.png')}
-                        />
+                        <img alt="..." className="ml-1" style={{ height: '100px' }} src={PolyCortexFull} />
                       </a>
                     </div>
                   </Col>

web/src/views/home/sections/call_to_action_section.js

@@ -1,42 +1,27 @@
 import React from 'react';
-import { Card, Col, Container, Row } from 'reactstrap';
+import { Col, Container, Row } from 'reactstrap';
 
 import { RecordMyOwnSleepButton, PreviewButton } from 'components/buttons';
-
-import './style.css';
-
-const CallToActionCard = ({ cardClassName, headerText, bodyText, button }) => (
-  <Card className={`${cardClassName} shadow-lg border-0 h-100 card-lift--hover`}>
-    <div className="p-5 h-100">
-      <Row className="align-items-center h-100">
-        <Col className="h-100 d-flex flex-column">
-          <h3 className="text-white">{headerText}</h3>
-          <p className="lead text-white text-justify mt-3">{bodyText}</p>
-          <Row className="justify-content-center mt-auto">{button}</Row>
-        </Col>
-      </Row>
-    </div>
-  </Card>
-);
+import FloatingCard from 'components/floating_card';
 
 const CallToActionSection = () => (
   <section className="section section-lg pt-0">
     <Container>
       <Row>
         <Col lg="6" className="mb-6">
-          <CallToActionCard
+          <FloatingCard
             cardClassName="bg-gradient-warning"
             headerText="Record my sleep"
             bodyText="Use our comprehensive guide to get your own results. It shows a list of the necessary equipment, the EEG montage, the hardware setup, and also gives some tips and tricks!"
             button={<RecordMyOwnSleepButton className="btn-white mt-4" />}
           />
         </Col>
         <Col lg="6" className="mb-6">
-          <CallToActionCard
+          <FloatingCard
             cardClassName="bg-gradient-primary"
             headerText="Nothing is better than an example"
             bodyText="You can use the preview mode. This gives an example of what you might see if you upload a sleep sequence that you have acquired."
-            button={<PreviewButton className="btn-white mt-4 w-50 " />}
+            button={<PreviewButton className="btn-white btn-lg mt-4 w-50" />}
           />
         </Col>
       </Row>

web/src/views/home/sections/hardware_section.js

@@ -1,22 +1,8 @@
 import React from 'react';
-import { Badge, Col, Container, Row } from 'reactstrap';
+import { Col, Container, Row } from 'reactstrap';
 
 import OpenBCIBoards from 'assets/img/items/boards.png';
-
-const PerkItem = ({ iconClass, children }) => (
-  <li className="py-2">
-    <div className="d-flex align-items-center">
-      <div>
-        <Badge className="badge-circle mr-3" color="success">
-          <i className={`${iconClass}`} />
-        </Badge>
-      </div>
-      <div>
-        <h6 className="mb-0">{children}</h6>
-      </div>
-    </div>
-  </li>
-);
+import BadgeBulletPoint from 'components/badge_bullet_point';
 
 const HardwareSection = () => (
   <section className="section section-lg">
@@ -38,9 +24,22 @@ const HardwareSection = () => (
               Buy an OpenBCI board
             </a>
             <ul className="list-unstyled mt-4">
-              <PerkItem iconClass="fas fa-check">Reliable</PerkItem>
-              <PerkItem iconClass="fas fa-dollar-sign">Cheap and accessible</PerkItem>
-              <PerkItem iconClass="fas fa-unlock">Open source hardware</PerkItem>
+              <li className="py-2">
+                <BadgeBulletPoint badgeColor="success" iconClass="fas fa-check">
+                  <h6 className="mb-0">Reliable</h6>
+                </BadgeBulletPoint>
+              </li>
+              <li className="py-2">
+                <BadgeBulletPoint badgeColor="success" iconClass="fas fa-dollar-sign">
+                  <h6 className="mb-0">Cheap and accessible</h6>
+                </BadgeBulletPoint>
+              </li>
+
+              <li className="py-2">
+                <BadgeBulletPoint badgeColor="success" iconClass="fas fa-unlock">
+                  <h6 className="mb-0">Open source hardware</h6>
+                </BadgeBulletPoint>
+              </li>
             </ul>
           </div>
         </Col>

web/src/views/home/sections/process_section.js

@@ -38,8 +38,8 @@ const ProcessSection = () => (
     <Container>
       <h2 className="pb-3">How It Works?</h2>
       <p className="lead">
-        We accompany you through every step of the process from gathering the things you need to exporting your
-        sleep results.
+        We accompany you through every step of the process from gathering the things you need to exporting your sleep
+        results.
       </p>
       <Row>
         <Feature