Update Bootstrap library to version 5.3.x

4 weeks ago · 42fcc02d83
parent 96785f0774
commit 42fcc02d83
22 changed files with 190 additions and 198 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -22,11 +22,11 @@
                "@babel/plugin-transform-runtime": "^7.9.0",
                "@babel/preset-env": "^7.9.0",
                "@babel/preset-react": "^7.9.4",
-                "@fortawesome/fontawesome-free": "^5.13.0",
+                "@fortawesome/fontawesome-free": "^6.5.2",
                "@testing-library/react": "^8.0.9",
                "babel-loader": "^8.1.0",
                "babel-polyfill": "^6.26.0",
-                "bootstrap": "^4.6.2",
+                "bootstrap": "^5.3.3",
                "css-loader": "^5.2.4",
                "eslint": "^6.8.0",
                "eslint-config-prettier": "^6.11.0",
@ -47,7 +47,7 @@
                "webpack": "^5.68.0"
            },
            "peerDependencies": {
-                "bootstrap": "^4.6.2",
+                "bootstrap": "^5.3.3",
                "prop-types": "15.8.1",
                "react": "16.9.0",
                "react-dom": "16.9.0",
@ -1822,9 +1822,9 @@
            }
        },
        "node_modules/@fortawesome/fontawesome-free": {
-            "version": "5.15.3",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
-            "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
+            "version": "6.5.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
            "dev": true,
            "hasInstallScript": true,
            "engines": {
@ -2814,9 +2814,9 @@
            }
        },
        "node_modules/@popperjs/core": {
-            "version": "2.11.2",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
-            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
            "dev": true,
            "funding": {
                "type": "opencollective",
@ -4330,9 +4330,9 @@
            }
        },
        "node_modules/bootstrap": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-            "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+            "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
            "dev": true,
            "funding": [
                {
@ -4345,8 +4345,7 @@
                }
            ],
            "peerDependencies": {
-                "jquery": "1.9.1 - 3",
-                "popper.js": "^1.16.1"
+                "@popperjs/core": "^2.11.8"
            }
        },
        "node_modules/brace-expansion": {
@ -11673,13 +11672,6 @@
                "node": ">=8"
            }
        },
-        "node_modules/jquery": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-            "dev": true,
-            "peer": true
-        },
        "node_modules/js-tokens": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -13791,18 +13783,6 @@
            "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
            "dev": true
        },
-        "node_modules/popper.js": {
-            "version": "1.16.1",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-            "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-            "dev": true,
-            "peer": true,
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/popperjs"
-            }
-        },
        "node_modules/portfinder": {
            "version": "1.0.28",
            "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -20398,9 +20378,9 @@
            }
        },
        "@fortawesome/fontawesome-free": {
-            "version": "5.15.3",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
-            "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
+            "version": "6.5.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
            "dev": true
        },
        "@gar/promisify": {
@ -21165,9 +21145,9 @@
            }
        },
        "@popperjs/core": {
-            "version": "2.11.2",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
-            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
            "dev": true
        },
        "@sheerun/mutationobserver-shim": {
@ -22452,9 +22432,9 @@
            }
        },
        "bootstrap": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-            "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+            "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
            "dev": true,
            "requires": {}
        },
@ -28040,13 +28020,6 @@
                }
            }
        },
-        "jquery": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-            "dev": true,
-            "peer": true
-        },
        "js-tokens": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -29672,13 +29645,6 @@
            "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
            "dev": true
        },
-        "popper.js": {
-            "version": "1.16.1",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-            "dev": true,
-            "peer": true
-        },
        "portfinder": {
            "version": "1.0.28",
            "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
--- a/package.json
+++ b/package.json
@ -22,7 +22,7 @@
        "react-uid": "^2.2.0"
    },
    "peerDependencies": {
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
        "prop-types": "15.8.1",
        "react": "16.9.0",
        "react-dom": "16.9.0",
@ -34,11 +34,11 @@
        "@babel/plugin-transform-runtime": "^7.9.0",
        "@babel/preset-env": "^7.9.0",
        "@babel/preset-react": "^7.9.4",
-        "@fortawesome/fontawesome-free": "^5.13.0",
+        "@fortawesome/fontawesome-free": "^6.5.2",
        "@testing-library/react": "^8.0.9",
        "babel-loader": "^8.1.0",
        "babel-polyfill": "^6.26.0",
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
        "css-loader": "^5.2.4",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.11.0",
--- a/src/bootstrap/Alert.js
+++ b/src/bootstrap/Alert.js
@ -38,16 +38,17 @@ Alert.defaultProps = {
 export function Alert({ type, onDismiss, children }) {
    return (
        <div
-            className={`alert ${
+            className={`alert alert-${type} ${
                onDismiss ? "alert-dismissible" : ""
-            } alert-${type}`}
+            }`.trim()}
        >
-            {onDismiss ? (
-                <button type="button" className="close" onClick={onDismiss}>
-                    &times;
-                </button>
-            ) : (
-                false
+            {onDismiss && (
+                <button
+                    type="button"
+                    className="btn-close"
+                    onClick={onDismiss}
+                    aria-label={_("Close")}
+                />
            )}
            {children}
        </div>
--- a/src/bootstrap/Button.js
+++ b/src/bootstrap/Button.js
@ -33,7 +33,7 @@ export function Button({
 }) {
    let buttonClass = className ? `btn ${className}` : "btn btn-primary";
    if (forisFormSize) {
-        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
+        buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
    }

    return (
@ -44,7 +44,7 @@ export function Button({
        >
            {loading && (
                <span
-                    className="spinner-border spinner-border-sm mr-1"
+                    className="spinner-border spinner-border-sm me-1"
                    role="status"
                    aria-hidden="true"
                />
--- a/src/bootstrap/CheckBox.js
+++ b/src/bootstrap/CheckBox.js
@ -24,25 +24,24 @@ CheckBox.defaultProps = {

 export function CheckBox({ label, helpText, disabled, ...props }) {
    const uid = useUID();
+
    return (
-        <div className="form-group">
-            <div className="custom-control custom-checkbox ">
-                <input
-                    className="custom-control-input"
-                    type="checkbox"
-                    id={uid}
-                    disabled={disabled}
-                    {...props}
-                />
-                <label className="custom-control-label" htmlFor={uid}>
-                    {label}
-                    {helpText && (
-                        <small className="form-text text-muted">
-                            {helpText}
-                        </small>
-                    )}
-                </label>
-            </div>
+        <div className="mb-3 form-check">
+            <input
+                className="form-check-input"
+                type="checkbox"
+                id={uid}
+                disabled={disabled}
+                {...props}
+            />
+            <label className="form-check-label" htmlFor={uid}>
+                {label}
+            </label>
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
        </div>
    );
 }
--- a/src/bootstrap/Input.js
+++ b/src/bootstrap/Input.js
@ -27,18 +27,21 @@ export const Input = forwardRef(
    ) => {
        const uid = useUID();

-        const inputClassName = `form-control ${className || ""} ${
+        const inputClassName = `${className || ""} ${
            error ? "is-invalid" : ""
        }`.trim();

        return (
-            <div className="form-group">
-                <label className={labelClassName} htmlFor={uid}>
+            <div className="mb-3">
+                <label
+                    className={`form-label ${labelClassName || ""}`.trim()}
+                    htmlFor={uid}
+                >
                    {label}
                </label>
                <div className={`input-group ${groupClassName || ""}`.trim()}>
                    <input
-                        className={inputClassName}
+                        className={`form-control ${inputClassName}`.trim()}
                        type={type}
                        id={uid}
                        ref={ref}
@ -46,10 +49,12 @@ export const Input = forwardRef(
                    />
                    {children}
                </div>
-                {error ? <div className="invalid-feedback">{error}</div> : null}
-                {helpText ? (
-                    <small className="form-text text-muted">{helpText}</small>
-                ) : null}
+                {error && <div className="invalid-feedback">{error}</div>}
+                {helpText && (
+                    <div className="form-text">
+                        <small>{helpText}</small>
+                    </div>
+                )}
            </div>
        );
    }
--- a/src/bootstrap/Modal.js
+++ b/src/bootstrap/Modal.js
@ -92,11 +92,10 @@ export function ModalHeader({ setShown, title }) {
            <h5 className="modal-title">{title}</h5>
            <button
                type="button"
-                className="close"
+                className="btn-close"
                onClick={() => setShown(false)}
-            >
-                <span aria-hidden="true">&times;</span>
-            </button>
+                aria-label={_("Close")}
+            />
        </div>
    );
 }
--- a/src/bootstrap/NumberInput.js
+++ b/src/bootstrap/NumberInput.js
@ -23,7 +23,7 @@ NumberInput.propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Function called when value changes. */
    onChange: PropTypes.func.isRequired,
-    /** Additional description dispaled to the right of input value. */
+    /** Additional description displayed to the right of input value. */
    inlineText: PropTypes.string,
 };

@ -49,27 +49,27 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {

    return (
        <Input type="number" onChange={onChange} value={value} {...props}>
-            <div className="input-group-append">
-                {inlineText && <p className="input-group-text">{inlineText}</p>}
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableIncrease(true)}
-                    onMouseUp={() => enableIncrease(false)}
-                    aria-label="Increase"
-                >
-                    <i className="fas fa-plus" />
-                </button>
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableDecrease(true)}
-                    onMouseUp={() => enableDecrease(false)}
-                    aria-label="Decrease"
-                >
-                    <i className="fas fa-minus" />
-                </button>
-            </div>
+            {inlineText && (
+                <span className="input-group-text">{inlineText}</span>
+            )}
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableIncrease(true)}
+                onMouseUp={() => enableIncrease(false)}
+                aria-label="Increase"
+            >
+                <i className="fas fa-plus" />
+            </button>
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableDecrease(true)}
+                onMouseUp={() => enableDecrease(false)}
+                aria-label="Decrease"
+            >
+                <i className="fas fa-minus" />
+            </button>
        </Input>
    );
 }
--- a/src/bootstrap/PasswordInput.js
+++ b/src/bootstrap/PasswordInput.js
@ -34,24 +34,20 @@ export function PasswordInput({ withEye, newPass, ...props }) {
            autoComplete={newPass ? "new-password" : "current-password"}
            {...props}
        >
-            {withEye ? (
-                <div className="input-group-append">
-                    <button
-                        type="button"
-                        className="input-group-text"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            setHidden((shouldBeHidden) => !shouldBeHidden);
-                        }}
-                    >
-                        <i
-                            className={`fa ${
-                                isHidden ? "fa-eye" : "fa-eye-slash"
-                            }`}
-                        />
-                    </button>
-                </div>
-            ) : null}
+            {withEye && (
+                <button
+                    type="button"
+                    className="input-group-text"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setHidden((shouldBeHidden) => !shouldBeHidden);
+                    }}
+                >
+                    <i
+                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                    />
+                </button>
+            )}
        </Input>
    );
 }
--- a/src/bootstrap/RadioSet.js
+++ b/src/bootstrap/RadioSet.js
@ -17,7 +17,7 @@ RadioSet.propTypes = {
    /** Choices . */
    choices: PropTypes.arrayOf(
        PropTypes.shape({
-            /** Choice lable . */
+            /** Choice label . */
            label: PropTypes.oneOfType([
                PropTypes.string,
                PropTypes.element,
@ -64,7 +64,7 @@ export function RadioSet({
    });

    return (
-        <div className="form-group">
+        <div className="mb-3">
            {label && (
                <label htmlFor={uid} className="d-block">
                    {label}
@ -72,7 +72,9 @@ export function RadioSet({
            )}
            {radios}
            {helpText && (
-                <small className="form-text text-muted">{helpText}</small>
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
            )}
        </div>
    );
@ -94,24 +96,24 @@ export function Radio({ label, id, helpText, inline, ...props }) {
    return (
        <>
            <div
-                className={`custom-control custom-radio ${
-                    inline ? "custom-control-inline" : ""
+                className={`mb-2 ${
+                    inline ? "form-check form-check-inline" : ""
                }`.trim()}
            >
                <input
                    id={id}
-                    className="custom-control-input"
+                    className="form-check-input me-2"
                    type="radio"
                    {...props}
                />
-                <label className="custom-control-label" htmlFor={id}>
+                <label className="form-check-label" htmlFor={id}>
                    {label}
+                    {helpText && (
+                        <div className="form-text">
+                            <small>{helpText}</small>
+                        </div>
+                    )}
                </label>
-                {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
-                        {helpText}
-                    </small>
-                )}
            </div>
        </>
    );
--- a/src/bootstrap/Select.js
+++ b/src/bootstrap/Select.js
@ -30,14 +30,18 @@ export function Select({ label, choices, helpText, ...props }) {
    ));

    return (
-        <div className="form-group">
-            <label htmlFor={uid}>{label}</label>
-            <select className="custom-select" id={uid} {...props}>
+        <div className="mb-3">
+            <label className="form-label" htmlFor={uid}>
+                {label}
+            </label>
+            <select className="form-select" id={uid} {...props}>
                {options}
            </select>
-            {helpText ? (
-                <small className="form-text text-muted">{helpText}</small>
-            ) : null}
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
        </div>
    );
 }
--- a/src/bootstrap/Spinner.js
+++ b/src/bootstrap/Spinner.js
@ -16,7 +16,7 @@ Spinner.propTypes = {
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node,
    ]),
-    /** Render component with full-screen mode (using apropriate `.css` styles) */
+    /** Render component with full-screen mode (using appropriate `.css` styles) */
    fullScreen: PropTypes.bool.isRequired,
    className: PropTypes.string,
 };
--- a/src/bootstrap/Switch.js
+++ b/src/bootstrap/Switch.js
@ -22,28 +22,30 @@ Switch.propTypes = {

 export function Switch({ label, helpText, switchHeading, ...props }) {
    const uid = useUID();
+
    return (
-        <div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
-            <div
-                className={`custom-control custom-switch ${
-                    !helpText ? "custom-control-inline" : ""
-                } ${switchHeading ? "switch-heading" : ""}`.trim()}
-            >
-                <input
-                    type="checkbox"
-                    className="custom-control-input"
-                    id={uid}
-                    {...props}
-                />
-                <label className="custom-control-label" htmlFor={uid}>
-                    {label}
-                </label>
-                {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
-                        {helpText}
-                    </small>
-                )}
-            </div>
+        <div
+            className={`form-check form-switch mb-3 ${
+                switchHeading ? "d-flex align-items-center" : null
+            }`.trim()}
+        >
+            <input
+                type="checkbox"
+                className={`form-check-input ${
+                    switchHeading ? "me-2" : ""
+                }`.trim()}
+                role="switch"
+                id={uid}
+                {...props}
+            />
+            <label className="form-check-label" htmlFor={uid}>
+                {label}
+            </label>
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
        </div>
    );
 }
--- a/src/bootstrap/tests/snapshots/Button.test.js.snap
+++ b/src/bootstrap/tests/snapshots/Button.test.js.snap
@ -29,7 +29,7 @@ exports[`<Button /> Render button with spinner 1`] = `
 >
  <span
    aria-hidden="true"
-    class="spinner-border spinner-border-sm mr-1"
+    class="spinner-border spinner-border-sm me-1"
    role="status"
  />
  <span>
--- a/src/common/WiFiSettings/ResetWiFiSettings.js
+++ b/src/common/WiFiSettings/ResetWiFiSettings.js
@ -58,7 +58,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
                    "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
                )}
            </p>
-            <div className="text-right">
+            <div className="text-end">
                <Button
                    className="btn-primary"
                    forisFormSize
--- a/src/common/WiFiSettings/WiFiForm.js
+++ b/src/common/WiFiSettings/WiFiForm.js
@ -92,7 +92,7 @@ function DeviceForm({
    return (
        <>
            <Switch
-                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
+                label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
                checked={formData.enabled}
                onChange={setFormValue((value) => ({
                    devices: {
@ -119,12 +119,10 @@ function DeviceForm({
                        }))}
                        {...props}
                    >
-                        <div className="input-group-append">
-                            <WiFiQRCode
-                                SSID={formData.SSID}
-                                password={formData.password}
-                            />
-                        </div>
+                        <WiFiQRCode
+                            SSID={formData.SSID}
+                            password={formData.password}
+                        />
                    </TextInput>

                    <PasswordInput
--- a/src/common/WiFiSettings/WiFiQRCode.js
+++ b/src/common/WiFiSettings/WiFiQRCode.js
@ -87,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                        createAndDownloadPdf(SSID, password);
                    }}
                >
-                    <i className="fas fa-arrow-down mr-2" />
+                    <i className="fas fa-file-download me-2" />
                    {_("Download PDF")}
                </Button>
            </ModalFooter>
--- a/src/common/WiFiSettings/tests/snapshots/WiFiSettings.test.js.snap
+++ b/src/common/WiFiSettings/tests/snapshots/WiFiSettings.test.js.snap
@ -298,7 +298,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
        </div>
      </div>
      <div
-        class="text-right"
+        class="text-end"
      >
        <button
          class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
@ -321,7 +321,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
      If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values.
    </p>
    <div
-      class="text-right"
+      class="text-end"
    >
      <button
        class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
@ -436,7 +436,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
          <div
@@ -551,10 +633,11 @@
        <div
-          class=\\"text-right\\"
+          class=\\"text-end\\"
        >
          <button
            class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"
--- a/src/form/tests/snapshots/SubmitButton.test.js.snap
+++ b/src/form/tests/snapshots/SubmitButton.test.js.snap
@ -9,7 +9,7 @@ exports[`<SubmitButton/> Render load 1`] = `
  >
    <span
      aria-hidden="true"
-      class="spinner-border spinner-border-sm mr-1"
+      class="spinner-border spinner-border-sm me-1"
      role="status"
    />
    <span>
@ -41,7 +41,7 @@ exports[`<SubmitButton/> Render saving 1`] = `
  >
    <span
      aria-hidden="true"
-      class="spinner-border spinner-border-sm mr-1"
+      class="spinner-border spinner-border-sm me-1"
      role="status"
    />
    <span>
--- a/src/form/components/ForisForm.js
+++ b/src/form/components/ForisForm.js
@ -190,7 +190,7 @@ export function ForisForm({
            <Prompt message={getMessageOnLeavingPage} />
            <form onSubmit={onSubmit} ref={formReference}>
                {childrenWithFormProps}
-                <div className="text-right">
+                <div className="text-end">
                    <SubmitButton
                        state={getSubmitButtonState()}
                        disabled={submitButtonIsDisabled}
--- a/src/index.js
+++ b/src/index.js
@ -69,7 +69,7 @@ export {
    withErrorMessage,
 } from "./utils/conditionalHOCs";
 export { ErrorMessage } from "./utils/ErrorMessage";
-export { useClickOutside } from "./utils/hooks";
+export { useClickOutside, useTooltip } from "./utils/hooks";
 export { toLocaleDateString } from "./utils/datetime";
 export { displayCard } from "./utils/displayCard";
 export { isPluginInstalled } from "./utils/isPluginInstalled";
--- a/src/utils/hooks.js
+++ b/src/utils/hooks.js
@ -1,11 +1,12 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
 *
 * This is free software, licensed under the GNU General Public License v3.
 * See /LICENSE for more information.
 */

-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle.min";

 /** Execute callback when condition is set to true. */
 export function useConditionalTimeout(
@ -40,3 +41,22 @@ export function useClickOutside(element, callback) {
        };
    });
 }
+
+/** useTooltip hook for Bootstrap tooltips. */
+export function useTooltip(description, placement = "top", trigger = "hover") {
+    const tooltipRef = useRef();
+
+    useEffect(() => {
+        const tooltip = new Tooltip(tooltipRef.current, {
+            title: description,
+            placement,
+            trigger,
+        });
+
+        return () => {
+            tooltip.dispose();
+        };
+    });
+
+    return tooltipRef;
+}