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.
---
 .../topology/room/RackConstructionComponent.js     | 23 ++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 44566f61..19d6b309 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,26 +1,29 @@
-import classNames from 'classnames'
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
         return (
-            <div className="btn btn-primary btn-block" onClick={onStop}>
-                <span className="fa fa-times mr-2" />
+            <Button color="primary" block onClick={onStop}>
+                <FontAwesomeIcon icon={faTimes} className="mr-2" />
                 Stop rack construction
-            </div>
+            </Button>
         )
     }
 
     return (
-        <div
-            className={classNames('btn btn-outline-primary btn-block', {
-                disabled: isEditingRoom,
-            })}
+        <Button
+            color="primary"
+            outline
+            block
+            disabled={isEditingRoom}
             onClick={() => (isEditingRoom ? undefined : onStart())}
         >
-            <span className="fa fa-plus mr-2" />
+            <FontAwesomeIcon icon={faPlus} className="mr-2" />
             Start rack construction
-        </div>
+        </Button>
     )
 }
 
-- 
cgit v1.2.3