From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: 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.
---
 .../src/containers/app/sidebars/topology/room/EditRoomContainer.js  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
index 2ecdfbcf..ec4f586b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
 import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faPencilAlt } from '@fortawesome/free-solid-svg-icons'
 
 const EditRoomContainer = () => {
     const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
@@ -13,7 +15,7 @@ const EditRoomContainer = () => {
 
     return isEditing ? (
         <Button color="info" outline block onClick={onFinish}>
-            <span className="fa fa-check mr-2" />
+            <FontAwesomeIcon icon={faCheck} className="mr-2" />
             Finish editing room
         </Button>
     ) : (
@@ -24,7 +26,7 @@ const EditRoomContainer = () => {
             disabled={isInRackConstructionMode}
             onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
         >
-            <span className="fa fa-pencil mr-2" />
+            <FontAwesomeIcon icon={faPencilAlt} className="mr-2" />
             Edit the tiles of this room
         </Button>
     )
-- 
cgit v1.2.3