* client: fix DHCP error message

client/src/components/ui/Accordion.css

@@ -0,0 +1,29 @@
+.accordion__label {
+    position: relative;
+    display: inline-block;
+    padding-left: 25px;
+    color: #495057;
+    cursor: pointer;
+}
+
+.accordion__label:after {
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: 0;
+    width: 17px;
+    height: 10px;
+    background-image: url("./svg/chevron-down.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+}
+
+.accordion__label--open:after {
+    transform: rotate(180deg);
+}
+
+.accordion__content {
+    padding-top: 5px;
+    color: #495057;
+}

client/src/components/ui/Accordion.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Accordion.css';
+
+class Accordion extends Component {
+    state = {
+        isOpen: false,
+    }
+
+    handleClick = () => {
+        this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+    };
+
+    render() {
+        const accordionClass = this.state.isOpen ? 'accordion__label--open' : '';
+
+        return (
+            <div className="accordion">
+                <div
+                    className={`accordion__label ${accordionClass}`}
+                    onClick={this.handleClick}
+                >
+                    {this.props.label}
+                </div>
+                {this.state.isOpen && (
+                    <div className="accordion__content">
+                        {this.props.children}
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+Accordion.propTypes = {
+    children: PropTypes.node.isRequired,
+    label: PropTypes.string.isRequired,
+};
+
+export default Accordion;