From 6e6f14db8986f5de6491b51117de0e1b0438b341 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 00:53:52 +0100
Subject: ui: Adapt home components to Reactstrap

---
 .../src/components/home/ContactSection.js          | 44 +++++++++++-----------
 1 file changed, 23 insertions(+), 21 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/home/ContactSection.js')

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>
 )
 
-- 
cgit v1.2.3