feat(ui): Migrate to PatternFly 4 design framework

This change is a rewrite of the existing OpenDC frontend in order to
migrate to the PatternFly 4 design framework.

PatternFly is used by Red Hat for various computing related services such
as OpenShift, Red Hat Virtualization and Cockpit. Since their design
requirements are very similar to those of OpenDC (modeling computing
services), migrating to PatternFly 4 allows us to re-use design choices
from these services.

See https://www.patternfly.org/v4/ for more information about
PatternFly.

6 files changed, 0 insertions, 149 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
deleted file mode 100644
index 03a4894b..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { blinkingCursor } from './BlinkingCursor.module.scss'
-
-const BlinkingCursor = () => <span className={blinkingCursor}>_</span>
-
-export default BlinkingCursor
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
deleted file mode 100644
index aba0c604..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.blinkingCursor {
-    animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-    from,
-    to {
-        color: #eeeeee;
-    }
-    50% {
-        color: #333333;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
deleted file mode 100644
index 6ded4350..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { codeBlock } from './CodeBlock.module.scss'
-
-const CodeBlock = () => {
-    const textBlock =
-        '    oo      oooo       oo   <br/>' +
-        '   oo      oo  oo     oo    <br/>' +
-        '  oo       oo  oo    oo     <br/>' +
-        ' oooooo    oo  oo   oooooo  <br/>' +
-        '     oo    oo  oo       oo  <br/>' +
-        '     oo     oooo        oo  <br/>'
-    const charList = textBlock.split('')
-
-    // Binary representation of the string "OpenDC!" ;)
-    const binaryString = '01001111011100000110010101101110010001000100001100100001'
-
-    let binaryIndex = 0
-    for (let i = 0; i < charList.length; i++) {
-        if (charList[i] === 'o') {
-            charList[i] = binaryString[binaryIndex]
-            binaryIndex++
-        }
-    }
-
-    return <div className={codeBlock} dangerouslySetInnerHTML={{ __html: textBlock }} />
-}
-
-export default CodeBlock
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
deleted file mode 100644
index 8af3ee6d..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.codeBlock {
-    white-space: pre-wrap;
-    margin-top: 60px;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
deleted file mode 100644
index e6200b10..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import BlinkingCursor from './BlinkingCursor'
-import CodeBlock from './CodeBlock'
-import { terminalWindow, terminalHeader, terminalBody, segfault, subTitle, homeBtn } from './TerminalWindow.module.scss'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHome } from '@fortawesome/free-solid-svg-icons'
-
-const TerminalWindow = () => (
-    <div className={terminalWindow}>
-        <div className={terminalHeader}>Terminal -- bash</div>
-        <div className={terminalBody}>
-            <div className={segfault}>
-                $ status
-                <br />
-                opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4
-                <br />
-                opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4
-                <br />
-                opendc[4270]: STDERR Page does not exist
-                <br />
-            </div>
-            <CodeBlock />
-            <div className={subTitle}>
-                Got lost?
-                <BlinkingCursor />
-            </div>
-            <Link href="/">
-                <a className={homeBtn}>
-                    <FontAwesomeIcon icon={faHome} /> GET ME BACK TO OPENDC
-                </a>
-            </Link>
-        </div>
-    </div>
-)
-
-export default TerminalWindow
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
deleted file mode 100644
index 614852d3..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.terminalWindow {
-    display: block;
-    align-self: center;
-
-    margin: auto;
-
-    user-select: none;
-    cursor: default;
-
-    overflow: hidden;
-
-    box-shadow: 5px 5px 20px #444444;
-}
-
-.terminalHeader {
-    font-family: monospace;
-    background: #cccccc;
-    color: #444444;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 10px;
-
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
-}
-
-.terminalBody {
-    font-family: monospace;
-    text-align: center;
-    background-color: #333333;
-    color: #eeeeee;
-    padding: 10px;
-
-    height: 100%;
-}
-
-.segfault {
-    text-align: left;
-}
-
-.subTitle {
-    margin-top: 20px;
-}
-
-.homeBtn {
-    margin-top: 10px;
-    padding: 5px;
-    display: inline-block;
-    border: 1px solid #eeeeee;
-    color: #eeeeee;
-    text-decoration: none;
-    cursor: pointer;
-
-    transition: all 200ms;
-
-    &:hover,
-    &:active {
-        background: #eeeeee;
-        color: #333333;
-    }
-}