diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-05-17 12:16:10 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-05-18 15:46:43 +0200 |
| commit | 53623fad76274e39206b8e073e371775ea96946b (patch) | |
| tree | a57d23d9c1f6a924753dbb4a3a9bc9cbca5385dd /opendc-web/opendc-web-ui/src/components/home/ContactSection.js | |
| parent | 688a25e560db3355e2a3ee369c2e6f4b55aab2a6 (diff) | |
ui: Migrate to FontAwesome 5 React library
This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/home/ContactSection.js')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/home/ContactSection.js | 21 |
1 files changed, 15 insertions, 6 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 25daaccf..60a7e6a3 100644 --- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js @@ -1,8 +1,10 @@ import React from 'react' -import FontAwesome from 'react-fontawesome' +import Image from 'next/image' import { Row, Col } from 'reactstrap' import ContentSection from './ContentSection' - +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons' +import { faGithub } from '@fortawesome/free-brands-svg-icons' import { contactSection, tudelftIcon } from './ContactSection.module.scss' const ContactSection = () => ( @@ -10,14 +12,14 @@ const ContactSection = () => ( <Row className="justify-content-center"> <Col md="4"> <a href="https://github.com/atlarge-research/opendc"> - <FontAwesome name="github" size="3x" className="mb-2" /> + <FontAwesomeIcon icon={faGithub} size="3x" className="mb-2" /> <div className="w-100" /> atlarge-research/opendc </a> </Col> <Col md="4"> <a href="mailto:opendc@atlarge-research.com"> - <FontAwesome name="envelope" size="3x" className="mb-2" /> + <FontAwesomeIcon icon={faEnvelope} size="3x" className="mb-2" /> <div className="w-100" /> opendc@atlarge-research.com </a> @@ -25,7 +27,14 @@ const ContactSection = () => ( </Row> <Row> <Col className="text-center"> - <img src="img/tudelft-icon.png" className={`img-fluid ${tudelftIcon}`} height="100" alt="TU Delft" /> + <Image + src="/img/tudelft-icon.png" + className={tudelftIcon} + layout="intrinsic" + width={162} + height={100} + alt="TU Delft" + /> </Col> </Row> <Row> @@ -39,7 +48,7 @@ const ContactSection = () => ( </Row> <Row> <Col className="text-center disclaimer mt-5 small"> - <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" /> + <FontAwesomeIcon icon={faExclamationTriangle} size="2x" className="mr-2" /> <br /> <strong>Disclaimer: </strong> OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable. |