ui: Adapt home components to Reactstrap

6 files changed, 66 insertions, 64 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index d5c6e55f..d25a1bc4 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -1,42 +1,44 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import './ContactSection.sass'
+import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
+import './ContactSection.sass'
+
 const ContactSection = () => (
-    <ContentSection name="contact" title="Contact">
-        <div className="row justify-content-center">
-            <div className="col-4">
+    <ContentSection name="contact" title="Contact" className="contact-section">
+        <Row className="justify-content-center">
+            <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
                     <FontAwesome name="github" size="3x" className="mb-2" />
                     <div className="w-100" />
                     atlarge-research/opendc
                 </a>
-            </div>
-            <div className="col-4">
+            </Col>
+            <Col md="4">
                 <a href="mailto:opendc@atlarge-research.com">
                     <FontAwesome name="envelope" size="3x" className="mb-2" />
                     <div className="w-100" />
                     opendc@atlarge-research.com
                 </a>
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
-                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft" />
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center">
+                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" height="100" alt="TU Delft" />
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center">
                 A project by the &nbsp;
                 <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
                     <strong>@Large Research Group</strong>
                 </a>
                 .
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center disclaimer mt-5 small">
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center disclaimer mt-5 small">
                 <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
                 <br />
                 <strong>Disclaimer: </strong>
@@ -47,8 +49,8 @@ const ContactSection = () => (
                     <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt">license</a>
                 </strong>
                 ). Sorry for the inconvenience.
-            </div>
-        </div>
+            </Col>
+        </Row>
     </ContentSection>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 9d4832d9..3a8960d9 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -1,15 +1,16 @@
+import React from 'react'
 import classNames from 'classnames'
+import { Container } from 'reactstrap'
 import PropTypes from 'prop-types'
-import React from 'react'
 import './ContentSection.sass'
 
-const ContentSection = ({ name, title, children }) => (
-    <div id={name} className={classNames(name + '-section', 'content-section')}>
-        <div className="container">
+const ContentSection = ({ name, title, children, className }) => (
+    <section id={name} className={classNames(className, name + '-section', 'content-section')}>
+        <Container>
             <h1>{title}</h1>
             {children}
-        </div>
-    </div>
+        </Container>
+    </section>
 )
 
 ContentSection.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index a799272a..bc6ee83b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,18 +1,19 @@
 import React from 'react'
+import { Container, Row, Col } from 'reactstrap'
 
 const IntroSection = () => (
     <section id="intro" className="intro-section">
-        <div className="container pt-5 pb-3">
-            <div className="row justify-content-center">
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+        <Container className="pt-5 pb-3">
+            <Row className="justify-content-center">
+                <Col xl="4" lg="4" md="4" sm="8">
                     <h4>The datacenter (DC) industry...</h4>
                     <ul>
                         <li>Is worth over $15 bn, and growing</li>
                         <li>Has many hard-to-grasp concepts</li>
                         <li>Needs to become accessible to many</li>
                     </ul>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                </Col>
+                <Col xl="4" lg="4" md="4" sm="8">
                     <img
                         src="img/datacenter-drawing.png"
                         className="col-12 img-fluid"
@@ -23,17 +24,17 @@ const IntroSection = () => (
                             Image source
                         </a>
                     </p>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                </Col>
+                <Col xl="4" lg="4" md="4" sm="8">
                     <h4>OpenDC provides...</h4>
                     <ul>
                         <li>Collaborative online DC modeling</li>
                         <li>Diverse and effective DC simulation</li>
                         <li>Exploratory DC performance feedback</li>
                     </ul>
-                </div>
-            </div>
-        </div>
+                </Col>
+            </Row>
+        </Container>
     </section>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 263590d5..33aab17f 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
@@ -7,20 +6,12 @@ import './ScreenshotSection.sass'
 const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title}>
         <Row>
-            <Col
-                xl="5"
-                lg="5"
-                md="5"
-                sm="!2"
-                className={classNames('text-left my-auto', {
-                    'order-1': !imageIsRight,
-                })}
-            >
+            <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
                 <img src={imageUrl} className="col-12 screenshot" alt={caption} />
-                <Row className="text-muted justify-content-center">{caption}</Row>
+                <div className="row text-muted justify-content-center">{caption}</div>
             </Col>
         </Row>
     </ContentSection>
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index e5ed9683..1624b4d2 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -1,29 +1,35 @@
 import React from 'react'
+import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const Stakeholder = ({ name, title, subtitle }) => (
-    <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
-        <img
+    <Col xl="4" lg="4" md="4" sm="6">
+        <Col
+            tag="img"
+            xl="3"
+            lg="3"
+            md="4"
+            sm="4"
             src={'img/stakeholders/' + name + '.png'}
-            className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid"
+            className="img-fluid"
             alt={title}
         />
         <div className="text-center mt-2">
             <h4>{title}</h4>
             <p>{subtitle}</p>
         </div>
-    </div>
+    </Col>
 )
 
 const StakeholderSection = () => (
     <ContentSection name="stakeholders" title="Stakeholders">
-        <div className="row justify-content-center">
+        <Row className="justify-content-center">
             <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
             <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
             <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" />
             <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design" />
             <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts" />
-        </div>
+        </Row>
     </ContentSection>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index c6013c71..efd77edf 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,39 +1,40 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
+import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const TechnologiesSection = () => (
     <ContentSection name="technologies" title="Technologies">
-        <ul className="list-group text-left">
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary">
+        <ListGroup className="list-group text-left">
+            <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="window-maximize" className="mr-2" />
                     <strong className="">Browser</strong>
                 </span>
                 <span className="text-right">JavaScript, React, Redux, Konva</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning">
+            </ListGroupItem>
+            <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="television" className="mr-2" />
                     <strong>Server</strong>
                 </span>
                 <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success">
+            </ListGroupItem>
+            <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="database" className="mr-2" />
                     <strong>Database</strong>
                 </span>
                 <span className="text-right">MongoDB</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
+            </ListGroupItem>
+            <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="cogs" className="mr-2" />
                     <strong>Simulator</strong>
                 </span>
                 <span className="text-right">Kotlin</span>
-            </li>
-        </ul>
+            </ListGroupItem>
+        </ListGroup>
     </ContentSection>
 )