Merge branch 'dev' into 'master'

Release v5.1.0 See merge request turris/reforis/foris-js!122
2024-12-26 00:21:36 +01:00 · 2020-08-26 11:55:07 +02:00 · 2020-08-26 11:55:07 +02:00 · f1feffb4bb
commit f1feffb4bb
parent a4bb41d585 61b349c6cc
94 changed files with 20058 additions and 19569 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,6 +1,8 @@
 module.exports = {
-    extends: "eslint-config-reforis",
+    extends: ["eslint-config-reforis", "prettier"],
+    plugins: ["prettier"],
    rules: {
+        "prettier/prettier": ["error"],
        "import/prefer-default-export": "off",
    },
 };
--- a/.gitignore
+++ b/.gitignore
@ -51,3 +51,4 @@ coverage.xml
 dist/
 foris-*.tgz
 styleguide/
+testUtils
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,4 +1,4 @@
-image: node:8-alpine
+image: node:10-alpine

 stages:
    - test
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,11 @@
+{
+    "singleQuote": false,
+    "printWidth": 80,
+    "proseWrap": "always",
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "semi": true
+}
--- a/README.md
+++ b/README.md
@ -1,4 +1,5 @@
 # foris-js
+
 Set of utils and common React elements for reForis.

 ## Publishing package
@ -18,12 +19,15 @@ unnecessary version
 4. New version should be published automatically

 ## Manually managed dependencies
-Because of `<ForisForm />` component it's required to use exposed `ReactRouterDOM`
-object from `react-router-dom` library. `ReactRouterDOM` is exposed by
+
+Because of `<ForisForm />` component it's required to use exposed
+`ReactRouterDOM` object from `react-router-dom` library. `ReactRouterDOM` is
+exposed by
 [reForis](https://gitlab.labs.nic.cz/turris/reforis/reforis/blob/master/js/webpack.config.js).
 It can be done by following steps:

-1. Setting `react-router-dom` as `peerDependencies` and `devDependencies` in `package.json`.
+1. Setting `react-router-dom` as `peerDependencies` and `devDependencies` in
+   `package.json`.
 2. Adding the following rules to `externals` in `webpack.conf.js` of the plugin:

 ```js
@ -34,11 +38,15 @@ externals: {
 ```

 ### Docs
+
 Build or watch docs to get more info about library:
+
 ```bash
 make docs
 ```
+
 or
+
 ```bash
 make docs-watch
 ```
--- a/babel.config.js
+++ b/babel.config.js
@ -1,9 +1,4 @@
 module.exports = {
-    presets: [
-        "@babel/preset-env",
-        "@babel/preset-react",
-    ],
-    plugins: [
-        "@babel/plugin-transform-runtime",
-    ],
+    presets: ["@babel/preset-env", "@babel/preset-react"],
+    plugins: ["@babel/plugin-transform-runtime"],
 };
--- a/docs/development.md
+++ b/docs/development.md
@ -1,12 +1,15 @@
-Sooner or later you will face with situation when you want/need to make some changes in the library.
-Then the most important tool for you it's [`npm link`](https://docs.npmjs.com/cli/link).
+Sooner or later you will face with situation when you want/need to make some
+changes in the library. Then the most important tool for you it's
+[`npm link`](https://docs.npmjs.com/cli/link).

-Please, notice that it will not work if you link library just from root of the repo. It happens due to location of 
-sources `./src`. You need to pack library first `make pack` and then link it from `./dist` directory.
+Please, notice that it will not work if you link library just from root of the
+repo. It happens due to location of sources `./src`. You need to pack library
+first `make pack` and then link it from `./dist` directory.

-Yeah it's not such comfortable solution for development. But it can fixed by writing small script similar as `make pack`
-but with linking every file and directory from `./src` to the some directory and linking then from it. Notice that you
-need to link `package.json` and `package-lock.json` as well.
+Yeah it's not such comfortable solution for development. But it can fixed by
+writing small script similar as `make pack` but with linking every file and
+directory from `./src` to the some directory and linking then from it. Notice
+that you need to link `package.json` and `package-lock.json` as well.

 So step by step:

--- a/docs/intro.md
+++ b/docs/intro.md
@ -1,4 +1,6 @@
-Foris JS library is set of components and utils for Foris JS application and plugins.
+Foris JS library is set of components and utils for Foris JS application and
+plugins.

-Please notice that all of these components or utils are used in reForis and plugins. If you like to study by example I would
-recommend to full-text search these repos.
+Please notice that all of these components or utils are used in reForis and
+plugins. If you like to study by example I would recommend to full-text search
+these repos.
--- a/jest.config.js
+++ b/jest.config.js
@ -27,7 +27,5 @@ module.exports = {
    globals: {
        TZ: "utc",
    },
-    transformIgnorePatterns: [
-        "node_modules/(?!(react-datetime)/)",
-    ],
+    transformIgnorePatterns: ["node_modules/(?!(react-datetime)/)"],
 };
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
    "name": "foris",
-  "version": "5.0.1",
+    "version": "5.1.0",
    "lockfileVersion": 1,
    "requires": true,
    "dependencies": {
@ -3928,6 +3928,12 @@
                "@types/istanbul-lib-report": "*"
            }
        },
+        "@types/json-schema": {
+            "version": "7.0.5",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
+            "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
+            "dev": true
+        },
        "@types/minimatch": {
            "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@ -6541,9 +6547,9 @@
            "dev": true
        },
        "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+            "version": "6.5.3",
+            "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+            "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
            "dev": true,
            "requires": {
                "bn.js": "^4.4.0",
@ -6756,9 +6762,9 @@
            },
            "dependencies": {
                "eslint-scope": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
-          "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
+                    "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
                    "dev": true,
                    "requires": {
                        "esrecurse": "^4.1.0",
@ -6766,37 +6772,23 @@
                    }
                },
                "glob-parent": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+                    "version": "5.1.1",
+                    "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+                    "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
                    "dev": true,
                    "requires": {
                        "is-glob": "^4.0.1"
                    }
                },
                "globals": {
-          "version": "12.3.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.3.0.tgz",
-          "integrity": "sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==",
+                    "version": "12.4.0",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+                    "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
                    "dev": true,
                    "requires": {
                        "type-fest": "^0.8.1"
                    }
                },
-        "optionator": {
-          "version": "0.8.3",
-          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-          "dev": true,
-          "requires": {
-            "deep-is": "~0.1.3",
-            "fast-levenshtein": "~2.0.6",
-            "levn": "~0.3.0",
-            "prelude-ls": "~1.1.2",
-            "type-check": "~0.3.2",
-            "word-wrap": "~1.2.3"
-          }
-        },
                "semver": {
                    "version": "6.3.0",
                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@ -6836,6 +6828,15 @@
                "object.entries": "^1.1.0"
            }
        },
+        "eslint-config-prettier": {
+            "version": "6.11.0",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
+            "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
+            "dev": true,
+            "requires": {
+                "get-stdin": "^6.0.0"
+            }
+        },
        "eslint-config-reforis": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/eslint-config-reforis/-/eslint-config-reforis-1.0.0.tgz",
@ -7107,6 +7108,15 @@
                "jsx-ast-utils": "^2.2.1"
            }
        },
+        "eslint-plugin-prettier": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz",
+            "integrity": "sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==",
+            "dev": true,
+            "requires": {
+                "prettier-linter-helpers": "^1.0.0"
+            }
+        },
        "eslint-plugin-react": {
            "version": "7.16.0",
            "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.16.0.tgz",
@ -7167,20 +7177,20 @@
            "dev": true
        },
        "espree": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz",
-      "integrity": "sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==",
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+            "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
            "dev": true,
            "requires": {
-        "acorn": "^7.1.0",
-        "acorn-jsx": "^5.1.0",
+                "acorn": "^7.1.1",
+                "acorn-jsx": "^5.2.0",
                "eslint-visitor-keys": "^1.1.0"
            },
            "dependencies": {
-        "acorn": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+                "acorn-jsx": {
+                    "version": "5.2.0",
+                    "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
+                    "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
                    "dev": true
                }
            }
@ -7192,12 +7202,20 @@
            "dev": true
        },
        "esquery": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
-      "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
+            "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
            "dev": true,
            "requires": {
-        "estraverse": "^4.0.0"
+                "estraverse": "^5.1.0"
+            },
+            "dependencies": {
+                "estraverse": {
+                    "version": "5.2.0",
+                    "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+                    "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+                    "dev": true
+                }
            }
        },
        "esrecurse": {
@ -7604,6 +7622,12 @@
            "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
            "dev": true
        },
+        "fast-diff": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+            "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+            "dev": true
+        },
        "fast-glob": {
            "version": "2.2.7",
            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
@ -7669,9 +7693,9 @@
            "dev": true
        },
        "figures": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz",
-      "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==",
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+            "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
            "dev": true,
            "requires": {
                "escape-string-regexp": "^1.0.5"
@ -7821,9 +7845,9 @@
            }
        },
        "flatted": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz",
-      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
+            "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
            "dev": true
        },
        "flush-write-stream": {
@ -8544,6 +8568,12 @@
            "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
            "dev": true
        },
+        "get-stdin": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+            "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
+            "dev": true
+        },
        "get-stream": {
            "version": "4.1.0",
            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@ -9184,42 +9214,95 @@
            "dev": true
        },
        "inquirer": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.3.tgz",
-      "integrity": "sha512-+OiOVeVydu4hnCGLCSX+wedovR/Yzskv9BFqUNNKq9uU2qg7LCcCo3R86S2E7WLo0y/x2pnEZfZe1CoYnORUAw==",
+            "version": "7.3.3",
+            "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+            "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
            "dev": true,
            "requires": {
                "ansi-escapes": "^4.2.1",
-        "chalk": "^2.4.2",
+                "chalk": "^4.1.0",
                "cli-cursor": "^3.1.0",
-        "cli-width": "^2.0.0",
+                "cli-width": "^3.0.0",
                "external-editor": "^3.0.3",
                "figures": "^3.0.0",
-        "lodash": "^4.17.15",
+                "lodash": "^4.17.19",
                "mute-stream": "0.0.8",
-        "run-async": "^2.2.0",
-        "rxjs": "^6.5.3",
+                "run-async": "^2.4.0",
+                "rxjs": "^6.6.0",
                "string-width": "^4.1.0",
-        "strip-ansi": "^5.1.0",
+                "strip-ansi": "^6.0.0",
                "through": "^2.3.6"
            },
            "dependencies": {
-        "ansi-escapes": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz",
-          "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==",
+                "ansi-styles": {
+                    "version": "4.2.1",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+                    "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
                    "dev": true,
                    "requires": {
-            "type-fest": "^0.8.1"
+                        "@types/color-name": "^1.1.1",
+                        "color-convert": "^2.0.1"
                    }
                },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+                "chalk": {
+                    "version": "4.1.0",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+                    "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
                    "dev": true,
                    "requires": {
-            "ansi-regex": "^4.1.0"
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "cli-width": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+                    "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+                    "dev": true
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true
+                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true
+                },
+                "run-async": {
+                    "version": "2.4.1",
+                    "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+                    "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+                    "dev": true
+                },
+                "rxjs": {
+                    "version": "6.6.2",
+                    "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",
+                    "integrity": "sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg==",
+                    "dev": true,
+                    "requires": {
+                        "tslib": "^1.9.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "7.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+                    "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+                    "dev": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
                    }
                }
            }
@ -12964,9 +13047,9 @@
            "dev": true
        },
        "minipass": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz",
-      "integrity": "sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==",
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+            "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
            "dev": true,
            "requires": {
                "yallist": "^4.0.0"
@ -12999,9 +13082,9 @@
            }
        },
        "minipass-pipeline": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz",
-      "integrity": "sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==",
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+            "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
            "dev": true,
            "requires": {
                "minipass": "^3.0.0"
@ -14101,6 +14184,21 @@
            "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
            "dev": true
        },
+        "prettier": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
+            "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
+            "dev": true
+        },
+        "prettier-linter-helpers": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+            "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+            "dev": true,
+            "requires": {
+                "fast-diff": "^1.1.2"
+            }
+        },
        "pretty-format": {
            "version": "24.9.0",
            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
@ -16627,9 +16725,9 @@
            "dev": true
        },
        "strip-json-comments": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz",
-      "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==",
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+            "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
            "dev": true
        },
        "style-loader": {
@ -16801,22 +16899,34 @@
            }
        },
        "terser-webpack-plugin": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz",
-      "integrity": "sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==",
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
+            "integrity": "sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w==",
            "dev": true,
            "requires": {
                "cacache": "^13.0.1",
-        "find-cache-dir": "^3.2.0",
-        "jest-worker": "^25.1.0",
-        "p-limit": "^2.2.2",
-        "schema-utils": "^2.6.4",
-        "serialize-javascript": "^2.1.2",
+                "find-cache-dir": "^3.3.1",
+                "jest-worker": "^25.4.0",
+                "p-limit": "^2.3.0",
+                "schema-utils": "^2.6.6",
+                "serialize-javascript": "^4.0.0",
                "source-map": "^0.6.1",
-        "terser": "^4.4.3",
+                "terser": "^4.6.12",
                "webpack-sources": "^1.4.3"
            },
            "dependencies": {
+                "ajv": {
+                    "version": "6.12.4",
+                    "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
+                    "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+                    "dev": true,
+                    "requires": {
+                        "fast-deep-equal": "^3.1.1",
+                        "fast-json-stable-stringify": "^2.0.0",
+                        "json-schema-traverse": "^0.4.1",
+                        "uri-js": "^4.2.2"
+                    }
+                },
                "cacache": {
                    "version": "13.0.1",
                    "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@ -16843,6 +16953,12 @@
                        "unique-filename": "^1.1.1"
                    }
                },
+                "fast-deep-equal": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+                    "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+                    "dev": true
+                },
                "find-cache-dir": {
                    "version": "3.3.1",
                    "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@ -16864,6 +16980,22 @@
                        "path-exists": "^4.0.0"
                    }
                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true
+                },
+                "jest-worker": {
+                    "version": "25.5.0",
+                    "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.5.0.tgz",
+                    "integrity": "sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==",
+                    "dev": true,
+                    "requires": {
+                        "merge-stream": "^2.0.0",
+                        "supports-color": "^7.0.0"
+                    }
+                },
                "locate-path": {
                    "version": "5.0.0",
                    "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@ -16874,18 +17006,18 @@
                    }
                },
                "make-dir": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
-          "integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+                    "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
                    "dev": true,
                    "requires": {
                        "semver": "^6.0.0"
                    }
                },
                "p-limit": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
-          "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+                    "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
                    "dev": true,
                    "requires": {
                        "p-try": "^2.0.0"
@ -16933,12 +17065,32 @@
                        "glob": "^7.1.3"
                    }
                },
+                "schema-utils": {
+                    "version": "2.7.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+                    "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+                    "dev": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.4",
+                        "ajv": "^6.12.2",
+                        "ajv-keywords": "^3.4.1"
+                    }
+                },
                "semver": {
                    "version": "6.3.0",
                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
                    "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
                    "dev": true
                },
+                "serialize-javascript": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+                    "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+                    "dev": true,
+                    "requires": {
+                        "randombytes": "^2.1.0"
+                    }
+                },
                "source-map": {
                    "version": "0.6.1",
                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -16954,6 +17106,26 @@
                        "figgy-pudding": "^3.5.1",
                        "minipass": "^3.1.1"
                    }
+                },
+                "supports-color": {
+                    "version": "7.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+                    "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+                    "dev": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                },
+                "terser": {
+                    "version": "4.8.0",
+                    "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+                    "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+                    "dev": true,
+                    "requires": {
+                        "commander": "^2.20.0",
+                        "source-map": "~0.6.1",
+                        "source-map-support": "~0.5.12"
+                    }
                }
            }
        },
@ -17566,9 +17738,9 @@
            "dev": true
        },
        "v8-compile-cache": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
-      "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==",
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
+            "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
            "dev": true
        },
        "v8-to-istanbul": {
--- a/package.json
+++ b/package.json
@ -1,11 +1,11 @@
 {
    "name": "foris",
-  "version": "5.0.1",
+    "version": "5.1.0",
    "description": "Set of components and utils for Foris and its plugins.",
    "author": "CZ.NIC, z.s.p.o.",
    "repository": {
        "type": "git",
-    "url": "https://gitlab.labs.nic.cz/turris/reforis/foris-js.git"
+        "url": "https://gitlab.nic.cz/turris/reforis/foris-js.git"
    },
    "keywords": [
        "foris",
@ -41,11 +41,14 @@
        "bootstrap": "^4.5.0",
        "css-loader": "^3.5.3",
        "eslint": "^6.8.0",
+        "eslint-config-prettier": "^6.11.0",
        "eslint-config-reforis": "^1.0.0",
+        "eslint-plugin-prettier": "^3.1.4",
        "file-loader": "^6.0.0",
        "jest": "^25.2.0",
        "jest-mock-axios": "^3.2.0",
        "moment-timezone": "^0.5.28",
+        "prettier": "2.0.5",
        "prop-types": "15.7.2",
        "react": "16.9.0",
        "react-dom": "16.9.0",
--- a/src/alertContext/AlertContext.js
+++ b/src/alertContext/AlertContext.js
@ -22,9 +22,12 @@ function AlertContextProvider({ children }) {
    const { AlertContext } = window;
    const [alert, setAlert] = useState(null);

-    const setAlertWrapper = useCallback((message, type = ALERT_TYPES.DANGER) => {
+    const setAlertWrapper = useCallback(
+        (message, type = ALERT_TYPES.DANGER) => {
            setAlert({ message, type });
-    }, [setAlert]);
+        },
+        [setAlert]
+    );

    const dismissAlert = useCallback(() => setAlert(null), [setAlert]);

--- a/src/alertContext/AlertContext.md
+++ b/src/alertContext/AlertContext.md
@ -1,4 +1,5 @@
-It provides alert context to children. `AlertContext` allows using `useAlert` in components.
+It provides alert context to children. `AlertContext` allows using `useAlert` in
+components.

-Notice that `<div id="alert-container"/>` should be presented in HTML doc to get it work (In reForis it's already done
-with base Jinja2 templates).
+Notice that `<div id="alert-container"/>` should be presented in HTML doc to get
+it work (In reForis it's already done with base Jinja2 templates).
--- a/src/alertContext/tests/AlertContext.test.js
+++ b/src/alertContext/tests/AlertContext.test.js
@ -6,9 +6,7 @@
 */

 import React from "react";
-import {
-    render, getByText, queryByText, fireEvent,
-} from "customTestRender";
+import { render, getByText, queryByText, fireEvent } from "customTestRender";

 import { useAlert, AlertContextProvider } from "../AlertContext";

@ -31,7 +29,7 @@ describe("AlertContext", () => {
        const { container } = render(
            <AlertContextProvider>
                <AlertTest />
-            </AlertContextProvider>,
+            </AlertContextProvider>
        );
        componentContainer = container;
    });
--- a/src/api/hooks.js
+++ b/src/api/hooks.js
@ -5,13 +5,16 @@
 * See /LICENSE for more information.
 */

-import {
-    useCallback, useEffect, useReducer, useState,
-} from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";

 import { ForisURLs } from "../utils/forisUrls";
 import {
-    API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT,
+    API_ACTIONS,
+    API_METHODS,
+    API_STATE,
+    getErrorPayload,
+    HEADERS,
+    TIMEOUT,
 } from "./utils";

 const DATA_METHODS = ["POST", "PATCH", "PUT"];
@ -23,7 +26,8 @@ function createAPIHook(method) {
            data: null,
        });

-        const sendRequest = useCallback(async ({ data, suffix } = {}) => {
+        const sendRequest = useCallback(
+            async ({ data, suffix } = {}) => {
                const headers = { ...HEADERS };
                if (contentType) {
                    headers["Content-Type"] = contentType;
@ -60,7 +64,9 @@ function createAPIHook(method) {
                        payload: errorPayload,
                    });
                }
-        }, [urlRoot, contentType]);
+            },
+            [urlRoot, contentType]
+        );
        return [state, sendRequest];
    };
 }
@ -83,8 +89,12 @@ function APIReducer(state, action) {
            }

            // Not an API error - should be rethrown.
-        if (action.payload && action.payload.stack && action.payload.message) {
-            throw (action.payload);
+            if (
+                action.payload &&
+                action.payload.stack &&
+                action.payload.message
+            ) {
+                throw action.payload;
            }

            return {
@ -102,11 +112,10 @@ const useAPIPatch = createAPIHook("PATCH");
 const useAPIPut = createAPIHook("PUT");
 const useAPIDelete = createAPIHook("DELETE");

-export {
-    useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete,
-};
+export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete };

-export function useAPIPolling(endpoint, delay = 1000, until) { // delay ms
+export function useAPIPolling(endpoint, delay = 1000, until) {
+    // delay ms
    const [state, setState] = useState({ state: API_STATE.INIT });
    const [getResponse, get] = useAPIGet(endpoint);

--- a/src/api/utils.js
+++ b/src/api/utils.js
@ -43,8 +43,10 @@ function getCookie(name) {
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (`${name}=`)) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+            if (cookie.substring(0, name.length + 1) === `${name}=`) {
+                cookieValue = decodeURIComponent(
+                    cookie.substring(name.length + 1)
+                );
                break;
            }
        }
--- a/src/bootstrap/Alert.js
+++ b/src/bootstrap/Alert.js
@ -35,12 +35,16 @@ Alert.defaultProps = {
    type: ALERT_TYPES.DANGER,
 };

-export function Alert({
-    type, onDismiss, children,
-}) {
+export function Alert({ type, onDismiss, children }) {
    return (
        <div className={`alert alert-dismissible alert-${type}`}>
-            {onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false}
+            {onDismiss ? (
+                <button type="button" className="close" onClick={onDismiss}>
+                    &times;
+                </button>
+            ) : (
+                false
+            )}
            {children}
        </div>
    );
--- a/src/bootstrap/Alert.md
+++ b/src/bootstrap/Alert.md
@ -1,21 +1,21 @@
 Bootstrap alert component.

 ```jsx
-import {useState} from 'react';
+import { useState } from "react";

 function AlertExample() {
    const [alert, setAlert] = useState(true);
    if (alert)
-        return <Alert 
-            type='warning' 
-            onDismiss={()=>setAlert(false)}
-        >
+        return (
+            <Alert type="warning" onDismiss={() => setAlert(false)}>
                Some warning out there!
-        </Alert>;
-    return <button 
-        className='btn btn-secondary' 
-        onClick={()=>setAlert(true)}
-    >Show alert again</button>;
-};
-<AlertExample/>
+            </Alert>
+        );
+    return (
+        <button className="btn btn-secondary" onClick={() => setAlert(true)}>
+            Show alert again
+        </button>
+    );
+}
+<AlertExample />;
 ```
--- a/src/bootstrap/Button.js
+++ b/src/bootstrap/Button.js
@ -25,22 +25,29 @@ Button.propTypes = {
 };

 export function Button({
-    className, loading, forisFormSize, children, ...props
+    className,
+    loading,
+    forisFormSize,
+    children,
+    ...props
 }) {
    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
    if (forisFormSize) {
-        buttonClass = `${buttonClass} col-sm-12 col-lg-3`;
+        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
    }

-    const span = loading
-        ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
+    const span = loading ? (
+        <span
+            className="spinner-border spinner-border-sm"
+            role="status"
+            aria-hidden="true"
+        />
+    ) : null;

    return (
        <button type="button" className={buttonClass} {...props}>
            {span}
-            {" "}
            {span ? " " : null}
-            {" "}
            {children}
        </button>
    );
--- a/src/bootstrap/Button.md
+++ b/src/bootstrap/Button.md
@ -11,5 +11,7 @@ Can be used without parameters:
 Using loading spinner:

 ```jsx
-<Button loading disabled>Loading...</Button>
+<Button loading disabled>
+    Loading...
+</Button>
 ```
--- a/src/bootstrap/CheckBox.js
+++ b/src/bootstrap/CheckBox.js
@ -22,9 +22,7 @@ CheckBox.defaultProps = {
    disabled: false,
 };

-export function CheckBox({
-    label, helpText, disabled, ...props
-}) {
+export function CheckBox({ label, helpText, disabled, ...props }) {
    const uid = useUID();
    return (
        <div className="form-group">
@ -34,12 +32,15 @@ export function CheckBox({
                    type="checkbox"
                    id={uid}
                    disabled={disabled}
-
                    {...props}
                />
                <label className="custom-control-label" htmlFor={uid}>
                    {label}
-                    {helpText && <small className="form-text text-muted">{helpText}</small>}
+                    {helpText && (
+                        <small className="form-text text-muted">
+                            {helpText}
+                        </small>
+                    )}
                </label>
            </div>
        </div>
--- a/src/bootstrap/Checkbox.md
+++ b/src/bootstrap/Checkbox.md
@ -1,16 +1,17 @@
-Checkbox with label Bootstrap component with predefined sizes and structure for using in foris forms.
-
-All additional `props` are passed to the `<input type="checkbox">` HTML component.
+Checkbox with label Bootstrap component with predefined sizes and structure for
+using in foris forms.

+All additional `props` are passed to the `<input type="checkbox">` HTML
+component.

 ```js
-import {useState} from 'react';
+import { useState } from "react";
 const [value, setValue] = useState(false);

 <CheckBox
    value={value}
    label="Some label"
    helpText="Read the small text!"
-    onChange={event =>setValue(event.target.value)}
-/>
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```
--- a/src/bootstrap/DataTimeInput.js
+++ b/src/bootstrap/DataTimeInput.js
@ -38,14 +38,17 @@ const DEFAULT_DATE_FORMAT = "YYYY-MM-DD";
 const DEFAULT_TIME_FORMAT = "HH:mm:ss";

 export function DataTimeInput({
-    value, onChange, isValidDate, dateFormat, timeFormat, children, ...props
+    value,
+    onChange,
+    isValidDate,
+    dateFormat,
+    timeFormat,
+    children,
+    ...props
 }) {
    function renderInput(datetimeProps) {
        return (
-            <Input
-                {...props}
-                {...datetimeProps}
-            >
+            <Input {...props} {...datetimeProps}>
                {children}
            </Input>
        );
@ -54,8 +57,12 @@ export function DataTimeInput({
    return (
        <Datetime
            locale={ForisTranslations.locale}
-            dateFormat={dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT}
-            timeFormat={timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT}
+            dateFormat={
+                dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT
+            }
+            timeFormat={
+                timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT
+            }
            value={value}
            onChange={onChange}
            isValidDate={isValidDate}
--- a/src/bootstrap/DataTimeInput.md
+++ b/src/bootstrap/DataTimeInput.md
@ -1,25 +1,26 @@
-Adopted from `react-datetime/DateTime` datatime picker component.
-It uses `momentjs` see example.
+Adopted from `react-datetime/DateTime` datatime picker component. It uses
+`momentjs` see example.

-It requires `ForisTranslations.locale` to be defined in order to use right locale.
+It requires `ForisTranslations.locale` to be defined in order to use right
+locale.

 ```js
-ForisTranslations={locale:'en'};
+ForisTranslations = { locale: "en" };

-import {useState, useEffect} from 'react';
-import moment from 'moment/moment';
+import { useState, useEffect } from "react";
+import moment from "moment/moment";

 const [dataTime, setDataTime] = useState(moment());
 const [error, setError] = useState();
 useEffect(() => {
-   dataTime.isValid() ? setError(null) : setError('Invalid value!');
+    dataTime.isValid() ? setError(null) : setError("Invalid value!");
 }, [dataTime]);

 <DataTimeInput
-    label='Time to sleep'
+    label="Time to sleep"
    value={dataTime}
    error={error}
-    helpText='Example helptext...'
-    onChange={value => setDataTime(value)}
-/>
+    helpText="Example helptext..."
+    onChange={(value) => setDataTime(value)}
+/>;
 ```
--- a/src/bootstrap/DownloadButton.js
+++ b/src/bootstrap/DownloadButton.js
@ -23,11 +23,7 @@ DownloadButton.defaultProps = {

 export function DownloadButton({ href, className, children }) {
    return (
-        <a
-            href={href}
-            className={`btn ${className}`.trim()}
-            download
-        >
+        <a href={href} className={`btn ${className}`.trim()} download>
            {children}
        </a>
    );
--- a/src/bootstrap/DownloadButton.md
+++ b/src/bootstrap/DownloadButton.md
@ -1,6 +1,9 @@
 Hyperlink with apperance of a button.

-It has `download` attribute, which prevents closing WebSocket connection on Firefox. See [related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more details.
+It has `download` attribute, which prevents closing WebSocket connection on
+Firefox. See
+[related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more
+details.

 ```js
 <DownloadButton href="example.zip">Download</DownloadButton>
--- a/src/bootstrap/EmailInput.md
+++ b/src/bootstrap/EmailInput.md
@ -1,18 +1,19 @@
-Bootstrap component of email input with label with predefined sizes and structure for using in foris forms.
-It use built-in browser email address checking. It's only meaningful using inside `<form>`.
+Bootstrap component of email input with label with predefined sizes and
+structure for using in foris forms. It use built-in browser email address
+checking. It's only meaningful using inside `<form>`.

 All additional `props` are passed to the `<input type="email">` HTML component.

 ```js
-import {useState} from 'react';
-const [email, setEmail] = useState('Wrong email');
-<form onSubmit={e=>e.preventDefault()}>
+import { useState } from "react";
+const [email, setEmail] = useState("Wrong email");
+<form onSubmit={(e) => e.preventDefault()}>
    <EmailInput
        value={email}
        label="Some label"
        helpText="Read the small text!"
-        onChange={event =>setEmail(event.target.value)}
+        onChange={(event) => setEmail(event.target.value)}
    />
    <button type="submit">Try to submit</button>
-</form>
+</form>;
 ```
--- a/src/bootstrap/FileInput.md
+++ b/src/bootstrap/FileInput.md
@ -1,9 +1,10 @@
-Bootstrap component for file input. Includes label and has predefined sizes and structure for using in foris forms. 
+Bootstrap component for file input. Includes label and has predefined sizes and
+structure for using in foris forms.

 All additional `props` are passed to the `<input type="file">` HTML component.

 ```js
-import { useState } from 'react';
+import { useState } from "react";

 const [files, setFiles] = useState([]);

@ -15,27 +16,33 @@ const label = files.length === 1 ? files[0].name : "Choose file";
        files={files}
        label={label}
        helpText="Will be uploaded"
-        onChange={event=>setFiles(event.target.files)}
+        onChange={(event) => setFiles(event.target.files)}
    />
-</form>
+</form>;
 ```

 ### FileInput with multiple files
+
 ```js
-import { useState } from 'react';
+import { useState } from "react";

 const [files, setFiles] = useState([]);

 // Note that files is not an array but FileList.
-const label = files.length > 0 ? Array.from(files).map(file=>file.name).join(", ") : "Choose files";
+const label =
+    files.length > 0
+        ? Array.from(files)
+              .map((file) => file.name)
+              .join(", ")
+        : "Choose files";

 <form className="col">
    <FileInput
        files={files}
        label={label}
        helpText="Will be uploaded"
-        onChange={event=>setFiles(event.target.files)}
+        onChange={(event) => setFiles(event.target.files)}
        multiple
    />
-</form>
+</form>;
 ```
--- a/src/bootstrap/Input.js
+++ b/src/bootstrap/Input.js
@ -25,25 +25,38 @@ Input.propTypes = {

 /** Base bootstrap input component. */
 export function Input({
-    type, label, helpText, error, className, children, labelClassName, groupClassName, ...props
+    type,
+    label,
+    helpText,
+    error,
+    className,
+    children,
+    labelClassName,
+    groupClassName,
+    ...props
 }) {
    const uid = useUID();
-    const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
+    const inputClassName = `form-control ${className || ""} ${
+        error ? "is-invalid" : ""
+    }`.trim();
    return (
        <div className="form-group">
-            <label className={labelClassName} htmlFor={uid}>{label}</label>
+            <label className={labelClassName} htmlFor={uid}>
+                {label}
+            </label>
            <div className={`input-group ${groupClassName || ""}`.trim()}>
                <input
                    className={inputClassName}
                    type={type}
                    id={uid}
-
                    {...props}
                />
                {children}
            </div>
            {error ? <div className="invalid-feedback">{error}</div> : null}
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            {helpText ? (
+                <small className="form-text text-muted">{helpText}</small>
+            ) : null}
        </div>
    );
 }
--- a/src/bootstrap/Modal.css
+++ b/src/bootstrap/Modal.css
@ -10,6 +10,6 @@
 .modal.show {
    display: block;
    animation-name: modalFade;
-    animation-duration: .3s;
+    animation-duration: 0.3s;
    background: rgba(0, 0, 0, 0.2);
 }
--- a/src/bootstrap/Modal.js
+++ b/src/bootstrap/Modal.js
@ -26,9 +26,7 @@ Modal.propTypes = {
    ]).isRequired,
 };

-export function Modal({
-    shown, setShown, scrollable, children,
-}) {
+export function Modal({ shown, setShown, scrollable, children }) {
    const dialogRef = useRef();

    useClickOutside(dialogRef, () => setShown(false));
@ -38,12 +36,12 @@ export function Modal({
            <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
                <div
                    ref={dialogRef}
-                    className={`modal-dialog modal-dialog-centered${scrollable ? " modal-dialog-scrollable" : ""}`}
+                    className={`modal-dialog modal-dialog-centered${
+                        scrollable ? " modal-dialog-scrollable" : ""
+                    }`}
                    role="document"
                >
-                    <div className="modal-content">
-                        {children}
-                    </div>
+                    <div className="modal-content">{children}</div>
                </div>
            </div>
        </Portal>
@ -59,7 +57,11 @@ export function ModalHeader({ setShown, title }) {
    return (
        <div className="modal-header">
            <h5 className="modal-title">{title}</h5>
-            <button type="button" className="close" onClick={() => setShown(false)}>
+            <button
+                type="button"
+                className="close"
+                onClick={() => setShown(false)}
+            >
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
@ -85,9 +87,5 @@ ModalFooter.propTypes = {
 };

 export function ModalFooter({ children }) {
-    return (
-        <div className="modal-footer">
-            {children}
-        </div>
-    );
+    return <div className="modal-footer">{children}</div>;
 }
--- a/src/bootstrap/Modal.md
+++ b/src/bootstrap/Modal.md
@ -1,31 +1,36 @@
 Bootstrap modal component.

-it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
+it's required to have an element `<div id={"modal-container"}/>` somewhere on
+the page since modals are rendered in portals.

 ```js
 <div id="modal-container" />
 ```

 ```js
-import {ModalHeader, ModalBody, ModalFooter} from './Modal';
+import { ModalHeader, ModalBody, ModalFooter } from "./Modal";

-import {useState} from 'react';
+import { useState } from "react";
 const [shown, setShown] = useState(false);

 <>
    <Modal setShown={setShown} shown={shown}>
-        <ModalHeader setShown={setShown} title='Warning!'/>
-        <ModalBody><p>Bla bla bla...</p></ModalBody>
+        <ModalHeader setShown={setShown} title="Warning!" />
+        <ModalBody>
+            <p>Bla bla bla...</p>
+        </ModalBody>
        <ModalFooter>
            <button
-                className='btn btn-secondary' 
+                className="btn btn-secondary"
                onClick={() => setShown(false)}
-            >Skip it</button>
+            >
+                Skip it
+            </button>
        </ModalFooter>
    </Modal>

-    <button className='btn btn-secondary' onClick={()=>setShown(true)}>
+    <button className="btn btn-secondary" onClick={() => setShown(true)}>
        Show modal
    </button>
-</>
+</>;
 ```
--- a/src/bootstrap/NumberInput.css
+++ b/src/bootstrap/NumberInput.css
@ -4,7 +4,7 @@ input[type="number"] {
    appearance: textfield;
 }

-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
 }
--- a/src/bootstrap/NumberInput.js
+++ b/src/bootstrap/NumberInput.js
@ -20,10 +20,7 @@ NumberInput.propTypes = {
    /** Help text message. */
    helpText: PropTypes.string,
    /** Number value. */
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]),
+    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. */
@ -34,15 +31,21 @@ NumberInput.defaultProps = {
    value: 0,
 };

-export function NumberInput({
-    onChange, inlineText, value, ...props
-}) {
+export function NumberInput({ onChange, inlineText, value, ...props }) {
    function updateValue(initialValue, difference) {
        onChange({ target: { value: initialValue + difference } });
    }

-    const enableIncrease = useConditionalTimeout({ callback: updateValue }, value, 1);
-    const enableDecrease = useConditionalTimeout({ callback: updateValue }, value, -1);
+    const enableIncrease = useConditionalTimeout(
+        { callback: updateValue },
+        value,
+        1
+    );
+    const enableDecrease = useConditionalTimeout(
+        { callback: updateValue },
+        value,
+        -1
+    );

    return (
        <Input type="number" onChange={onChange} value={value} {...props}>
--- a/src/bootstrap/NumberInput.md
+++ b/src/bootstrap/NumberInput.md
@ -1,17 +1,18 @@
-Bootstrap component of number input with label with predefined sizes and structure for using in foris forms.
+Bootstrap component of number input with label with predefined sizes and
+structure for using in foris forms.

 All additional `props` are passed to the `<input type="number">` HTML component.

 ```js
-import {useState} from 'react';
+import { useState } from "react";
 const [value, setValue] = useState(42);

 <NumberInput
    value={value}
    label="Some number"
    helpText="Read the small text!"
-    min='33'
-    max='54'
-    onChange={event =>setValue(event.target.value)}
-/>
+    min="33"
+    max="54"
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```
--- a/src/bootstrap/PasswordInput.js
+++ b/src/bootstrap/PasswordInput.js
@ -31,8 +31,7 @@ export function PasswordInput({ withEye, ...props }) {
            autoComplete={isHidden ? "new-password" : null}
            {...props}
        >
-            {withEye
-                ? (
+            {withEye ? (
                <div className="input-group-append">
                    <button
                        type="button"
@ -42,11 +41,14 @@ export function PasswordInput({ withEye, ...props }) {
                            setHidden((shouldBeHidden) => !shouldBeHidden);
                        }}
                    >
-                            <i className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`} />
+                        <i
+                            className={`fa ${
+                                isHidden ? "fa-eye" : "fa-eye-slash"
+                            }`}
+                        />
                    </button>
                </div>
-                )
-                : null}
+            ) : null}
        </Input>
    );
 }
--- a/src/bootstrap/PasswordInput.md
+++ b/src/bootstrap/PasswordInput.md
@ -1,17 +1,18 @@
-Password Bootstrap component input with label and predefined sizes and structure for using in foris forms.
-Can be used with "eye" button, see example.
+Password Bootstrap component input with label and predefined sizes and structure
+for using in foris forms. Can be used with "eye" button, see example.

-All additional `props` are passed to the `<input type="password">` HTML component.
+All additional `props` are passed to the `<input type="password">` HTML
+component.

 ```js
-import {useState} from 'react';
-const [value, setValue] = useState('secret');
+import { useState } from "react";
+const [value, setValue] = useState("secret");

 <PasswordInput
    withEye
    value={value}
    label="Some password"
    helpText="Read the small text!"
-    onChange={event =>setValue(event.target.value)}
-/>
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```
--- a/src/bootstrap/RadioSet.js
+++ b/src/bootstrap/RadioSet.js
@ -15,7 +15,8 @@ RadioSet.propTypes = {
    /** RadioSet label . */
    label: PropTypes.string,
    /** Choices . */
-    choices: PropTypes.arrayOf(PropTypes.shape({
+    choices: PropTypes.arrayOf(
+        PropTypes.shape({
            /** Choice lable . */
            label: PropTypes.oneOfType([
                PropTypes.string,
@ -24,17 +25,17 @@ RadioSet.propTypes = {
                PropTypes.arrayOf(PropTypes.node),
            ]).isRequired,
            /** Choice value . */
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    })).isRequired,
+            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+                .isRequired,
+        })
+    ).isRequired,
    /** Initial value . */
    value: PropTypes.string,
    /** Help text message . */
    helpText: PropTypes.string,
 };

-export function RadioSet({
-    name, label, choices, value, helpText, ...props
-}) {
+export function RadioSet({ name, label, choices, value, helpText, ...props }) {
    const uid = useUID();
    const radios = choices.map((choice, key) => {
        const id = `${name}-${key}`;
@ -47,7 +48,6 @@ export function RadioSet({
                value={choice.value}
                helpText={choice.helpText}
                checked={choice.value === value}
-
                {...props}
            />
        );
@ -55,9 +55,15 @@ export function RadioSet({

    return (
        <div className="form-group">
-            {label && <label htmlFor={uid} className="d-block">{label}</label>}
+            {label && (
+                <label htmlFor={uid} className="d-block">
+                    {label}
+                </label>
+            )}
            {radios}
-            {helpText && <small className="form-text text-muted">{helpText}</small>}
+            {helpText && (
+                <small className="form-text text-muted">{helpText}</small>
+            )}
        </div>
    );
 }
@ -73,21 +79,28 @@ Radio.propTypes = {
    helpText: PropTypes.string,
 };

-export function Radio({
-    label, id, helpText, ...props
-}) {
+export function Radio({ label, id, helpText, ...props }) {
    return (
        <>
-            <div className={`custom-control custom-radio ${!helpText ? "custom-control-inline" : ""}`.trim()}>
+            <div
+                className={`custom-control custom-radio ${
+                    !helpText ? "custom-control-inline" : ""
+                }`.trim()}
+            >
                <input
                    id={id}
                    className="custom-control-input"
                    type="radio"
-
                    {...props}
                />
-                <label className="custom-control-label" htmlFor={id}>{label}</label>
-                {helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
+                <label className="custom-control-label" htmlFor={id}>
+                    {label}
+                </label>
+                {helpText && (
+                    <small className="form-text text-muted mt-0 mb-3">
+                        {helpText}
+                    </small>
+                )}
            </div>
        </>
    );
--- a/src/bootstrap/RadioSet.md
+++ b/src/bootstrap/RadioSet.md
@ -1,15 +1,16 @@
-Set of radio Bootstrap component input with label and predefined sizes and structure for using in foris forms.
+Set of radio Bootstrap component input with label and predefined sizes and
+structure for using in foris forms.

 All additional `props` are passed to the `<input type="number">` HTML component.

 Unless `helpText` is set for one of the options they are displayed inline.

 ```js
-import {useState} from 'react';
+import { useState } from "react";
 const CHOICES = [
-    {value:'one',label:'1'},
-    {value:'two',label:'2'},
-    {value:'three',label:'3'},
+    { value: "one", label: "1" },
+    { value: "two", label: "2" },
+    { value: "three", label: "3" },
 ];
 const [value, setValue] = useState(CHOICES[0].value);

@ -17,10 +18,10 @@ const [value, setValue] = useState(CHOICES[0].value);
    {/*Yeah, it gets event, not value!*/}
    <RadioSet
        value={value}
-        name='some-radio'
+        name="some-radio"
        choices={CHOICES}
-        onChange={event =>setValue(event.target.value)}
+        onChange={(event) => setValue(event.target.value)}
    />
    <p>Selected value: {value}</p>
-</>
+</>;
 ```
--- a/src/bootstrap/Select.js
+++ b/src/bootstrap/Select.js
@ -15,35 +15,30 @@ Select.propTypes = {
    /** Choices if form of {value : "Label",...}. */
    choices: PropTypes.object.isRequired,
    /** Current value. */
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    /** Help text message. */
    helpText: PropTypes.string,
 };

-export function Select({
-    label, choices, helpText, ...props
-}) {
+export function Select({ label, choices, helpText, ...props }) {
    const uid = useUID();

-    const options = Object.keys(choices).sort(
-        (a, b) => a - b || a.toString().localeCompare(b.toString()),
-    ).map(
-        (key) => <option key={key} value={key}>{choices[key]}</option>,
-    );
+    const options = Object.keys(choices)
+        .sort((a, b) => a - b || a.toString().localeCompare(b.toString()))
+        .map((key) => (
+            <option key={key} value={key}>
+                {choices[key]}
+            </option>
+        ));
    return (
        <div className="form-group">
            <label htmlFor={uid}>{label}</label>
-            <select
-                className="custom-select"
-                id={uid}
-                {...props}
-            >
+            <select className="custom-select" id={uid} {...props}>
                {options}
            </select>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            {helpText ? (
+                <small className="form-text text-muted">{helpText}</small>
+            ) : null}
        </div>
    );
 }
--- a/src/bootstrap/Select.md
+++ b/src/bootstrap/Select.md
@ -1,13 +1,14 @@
-Select with options Bootstrap component input with label and predefined sizes and structure for using in foris forms.
+Select with options Bootstrap component input with label and predefined sizes
+and structure for using in foris forms.

 All additional `props` are passed to the `<select>` HTML component.

 ```js
-import {useState} from 'react';
+import { useState } from "react";
 const CHOICES = {
-    apple:'Apple',
-    banana:'Banana',
-    peach:'Peach',
+    apple: "Apple",
+    banana: "Banana",
+    peach: "Peach",
 };
 const [value, setValue] = useState(Object.keys(CHOICES)[0]);

@ -17,9 +18,9 @@ const [value, setValue] = useState(Object.keys(CHOICES)[0]);
        label="Fruit"
        value={value}
        choices={CHOICES}
-        onChange={event=>setValue(event.target.value)}
+        onChange={(event) => setValue(event.target.value)}
    />
    <p>Selected choice label: {CHOICES[value]}</p>
    <p>Selected choice value: {value}</p>
-</>
+</>;
 ```
--- a/src/bootstrap/Spinner.css
+++ b/src/bootstrap/Spinner.css
@ -5,7 +5,7 @@
 }

 .spinner-fs-background {
-    background-color: rgba(2, 2, 2, .5);
+    background-color: rgba(2, 2, 2, 0.5);
    color: rgb(230, 230, 230);
    position: fixed;
    width: 100%;
--- a/src/bootstrap/Spinner.js
+++ b/src/bootstrap/Spinner.js
@ -25,12 +25,12 @@ Spinner.defaultProps = {
    fullScreen: false,
 };

-export function Spinner({
-    fullScreen, children, className,
-}) {
+export function Spinner({ fullScreen, children, className }) {
    if (!fullScreen) {
        return (
-            <div className={`spinner-wrapper ${className || "my-3 text-center"}`}>
+            <div
+                className={`spinner-wrapper ${className || "my-3 text-center"}`}
+            >
                <SpinnerElement>{children}</SpinnerElement>
            </div>
        );
@ -61,7 +61,9 @@ export function SpinnerElement({ small, className, children }) {
    return (
        <>
            <div
-                className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
+                className={`spinner-border ${
+                    small ? "spinner-border-sm" : ""
+                } ${className || ""}`.trim()}
                role="status"
            >
                <span className="sr-only" />
--- a/src/bootstrap/Switch.js
+++ b/src/bootstrap/Switch.js
@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { useUID } from "react-uid";
+
+Switch.propTypes = {
+    label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.node,
+        PropTypes.arrayOf(PropTypes.node),
+    ]).isRequired,
+    helpText: PropTypes.string,
+    switchHeading: PropTypes.bool,
+};
+
+export function Switch({ label, helpText, switchHeading, ...props }) {
+    const uid = useUID();
+    return (
+        <div className="form-group">
+            <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>
+    );
+}
--- a/src/bootstrap/TextInput.md
+++ b/src/bootstrap/TextInput.md
@ -1,15 +1,16 @@
-Text Bootstrap component input with label and predefined sizes and structure for using in foris forms.
+Text Bootstrap component input with label and predefined sizes and structure for
+using in foris forms.

 All additional `props` are passed to the `<input type="text">` HTML component.

 ```js
-import {useState} from 'react';
-const [value, setValue] = useState('Bla bla');
+import { useState } from "react";
+const [value, setValue] = useState("Bla bla");

 <TextInput
    value={value}
    label="Some text"
    helpText="Read the small text!"
-    onChange={event =>setValue(event.target.value)}
-/>
+    onChange={(event) => setValue(event.target.value)}
+/>;
 ```
--- a/src/bootstrap/tests/Button.test.js
+++ b/src/bootstrap/tests/Button.test.js
@ -14,19 +14,18 @@ import { Button } from "../Button";
 describe("<Button />", () => {
    it("Render button correctly", () => {
        const { container } = render(<Button>Test Button</Button>);
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
    });

    it("Render button with custom classes", () => {
-        const { container } = render(<Button className="one two three">Test Button</Button>);
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        const { container } = render(
+            <Button className="one two three">Test Button</Button>
+        );
+        expect(container.firstChild).toMatchSnapshot();
    });

    it("Render button with spinner", () => {
        const { container } = render(<Button loading>Test Button</Button>);
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
    });
 });
--- a/src/bootstrap/tests/CheckBox.test.js
+++ b/src/bootstrap/tests/CheckBox.test.js
@ -18,22 +18,16 @@ describe("<Checkbox/>", () => {
                label="Test label"
                checked
                helpText="Some help text"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
        );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
    });

    it("Render uncheked checkbox", () => {
        const { container } = render(
-            <CheckBox
-                label="Test label"
-                helpText="Some help text"
-            />,
+            <CheckBox label="Test label" helpText="Some help text" />
        );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
    });
 });
--- a/src/bootstrap/tests/DownloadButton.test.js
+++ b/src/bootstrap/tests/DownloadButton.test.js
@ -13,7 +13,11 @@ import { DownloadButton } from "../DownloadButton";

 describe("<DownloadButton />", () => {
    it("should have download attribute", () => {
-        const { container } = render(<DownloadButton href="http://example.com">Test Button</DownloadButton>);
+        const { container } = render(
+            <DownloadButton href="http://example.com">
+                Test Button
+            </DownloadButton>
+        );
        expect(container.firstChild.getAttribute("download")).not.toBeNull();
    });
 });
--- a/src/bootstrap/tests/NumberInput.test.js
+++ b/src/bootstrap/tests/NumberInput.test.js
@ -7,9 +7,7 @@

 import React from "react";

-import {
-    render, fireEvent, getByLabelText, wait,
-} from "customTestRender";
+import { render, fireEvent, getByLabelText, wait } from "customTestRender";

 import { NumberInput } from "../NumberInput";

@ -24,7 +22,7 @@ describe("<NumberInput/>", () => {
                helpText="Some help text"
                value={1}
                onChange={onChangeMock}
-            />,
+            />
        );
        componentContainer = container;
    });
@ -36,12 +34,16 @@ describe("<NumberInput/>", () => {
    it("Increase number with button", async () => {
        const increaseButton = getByLabelText(componentContainer, "Increase");
        fireEvent.mouseDown(increaseButton);
-        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } }));
+        await wait(() =>
+            expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
+        );
    });

    it("Decrease number with button", async () => {
        const decreaseButton = getByLabelText(componentContainer, "Decrease");
        fireEvent.mouseDown(decreaseButton);
-        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } }));
+        await wait(() =>
+            expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
+        );
    });
 });
--- a/src/bootstrap/tests/PasswordInput.test.js
+++ b/src/bootstrap/tests/PasswordInput.test.js
@ -18,11 +18,9 @@ describe("<PasswordInput/>", () => {
                label="Test label"
                helpText="Some help text"
                value="Some password"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
        );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
    });
 });
--- a/src/bootstrap/tests/RadioSet.test.js
+++ b/src/bootstrap/tests/RadioSet.test.js
@ -35,11 +35,9 @@ describe("<RadioSet/>", () => {
                value="value"
                choices={TEST_CHOICES}
                helpText="Some help text"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
        );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
    });
 });
--- a/src/bootstrap/tests/Select.test.js
+++ b/src/bootstrap/tests/Select.test.js
@ -8,7 +8,10 @@
 import React from "react";

 import {
-    fireEvent, getByDisplayValue, getByText, render,
+    fireEvent,
+    getByDisplayValue,
+    getByText,
+    render,
 } from "customTestRender";

 import { Select } from "../Select";
@ -29,29 +32,24 @@ describe("<Select/>", () => {
                value="1"
                choices={TEST_CHOICES}
                helpText="Help text"
-
                onChange={onChangeHandler}
-            />,
+            />
        );
        selectContainer = container;
    });

    it("Test with snapshot.", () => {
-        expect(selectContainer)
-            .toMatchSnapshot();
+        expect(selectContainer).toMatchSnapshot();
    });

    it("Test onChange handling.", () => {
        const select = getByDisplayValue(selectContainer, "one");
-        expect(select.value)
-            .toBe("1");
+        expect(select.value).toBe("1");
        fireEvent.change(select, { target: { value: "2" } });

        const option = getByText(selectContainer, "two");
-        expect(onChangeHandler)
-            .toBeCalled();
+        expect(onChangeHandler).toBeCalled();

-        expect(option.value)
-            .toBe("2");
+        expect(option.value).toBe("2");
    });
 });
--- a/src/bootstrap/tests/Switch.test.js
+++ b/src/bootstrap/tests/Switch.test.js
@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+
+import { render } from "customTestRender";
+
+import { Switch } from "../Switch";
+
+describe("<Switch/>", () => {
+    it("Render switch", () => {
+        const { container } = render(
+            <Switch
+                label="Test label"
+                checked
+                helpText="Some help text"
+                onChange={() => {}}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it("Render uncheked switch", () => {
+        const { container } = render(
+            <Switch label="Test label" helpText="Some help text" />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
--- a/src/bootstrap/tests/TextInput.test.js
+++ b/src/bootstrap/tests/TextInput.test.js
@ -18,11 +18,9 @@ describe("<TextInput/>", () => {
                label="Test label"
                helpText="Some help text"
                value="Some text"
-                onChange={() => {
-                }}
-            />,
+                onChange={() => {}}
+            />
        );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
    });
 });
--- a/src/bootstrap/tests/snapshots/Button.test.js.snap
+++ b/src/bootstrap/tests/snapshots/Button.test.js.snap
@ -5,8 +5,6 @@ exports[`<Button /> Render button correctly 1`] = `
  class="btn btn-primary "
  type="button"
 >
-   
-   
  Test Button
 </button>
 `;
@ -16,8 +14,6 @@ exports[`<Button /> Render button with custom classes 1`] = `
  class="btn one two three"
  type="button"
 >
-   
-   
  Test Button
 </button>
 `;
@ -33,8 +29,6 @@ exports[`<Button /> Render button with spinner 1`] = `
    role="status"
  />
   
-   
-   
  Test Button
 </button>
 `;
--- a/src/bootstrap/tests/snapshots/Switch.test.js.snap
+++ b/src/bootstrap/tests/snapshots/Switch.test.js.snap
@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Switch/> Render switch 1`] = `
+<div
+  class="form-group"
+>
+  <div
+    class="custom-control custom-switch"
+  >
+    <input
+      checked=""
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+    </label>
+    <small
+      class="form-text text-muted mt-0 mb-3"
+    >
+      Some help text
+    </small>
+  </div>
+</div>
+`;
+
+exports[`<Switch/> Render uncheked switch 1`] = `
+<div
+  class="form-group"
+>
+  <div
+    class="custom-control custom-switch"
+  >
+    <input
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+    </label>
+    <small
+      class="form-text text-muted mt-0 mb-3"
+    >
+      Some help text
+    </small>
+  </div>
+</div>
+`;
--- a/src/bootstrap/constants.js
+++ b/src/bootstrap/constants.js
@ -7,4 +7,5 @@

 /** Bootstrap column size for form fields */
 // eslint-disable-next-line import/prefer-default-export
-export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3";
+export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-3";
+export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";
--- a/src/common/RebootButton.js
+++ b/src/common/RebootButton.js
@ -13,15 +13,9 @@ import { API_STATE } from "../api/utils";
 import { ForisURLs } from "../utils/forisUrls";

 import { Button } from "../bootstrap/Button";
-import {
-    Modal, ModalHeader, ModalBody, ModalFooter,
-} from "../bootstrap/Modal";
+import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
 import { useAlert } from "../alertContext/AlertContext";

-RebootButton.propTypes = {
-    forisFormSize: PropTypes.bool,
-};
-
 export function RebootButton(props) {
    const [triggered, setTriggered] = useState(false);
    const [modalShown, setModalShown] = useState(false);
@ -42,13 +36,16 @@ export function RebootButton(props) {

    return (
        <>
-            <RebootModal shown={modalShown} setShown={setModalShown} onReboot={rebootHandler} />
+            <RebootModal
+                shown={modalShown}
+                setShown={setModalShown}
+                onReboot={rebootHandler}
+            />
            <Button
                className="btn-danger"
                loading={triggered}
                disabled={triggered}
                onClick={() => setModalShown(true)}
-
                {...props}
            >
                {_("Reboot")}
@ -67,10 +64,14 @@ function RebootModal({ shown, setShown, onReboot }) {
    return (
        <Modal shown={shown} setShown={setShown}>
            <ModalHeader setShown={setShown} title={_("Reboot confirmation")} />
-            <ModalBody><p>{_("Are you sure you want to restart the router?")}</p></ModalBody>
+            <ModalBody>
+                <p>{_("Are you sure you want to restart the router?")}</p>
+            </ModalBody>
            <ModalFooter>
                <Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
-                <Button className="btn-danger" onClick={onReboot}>{_("Confirm reboot")}</Button>
+                <Button className="btn-danger" onClick={onReboot}>
+                    {_("Confirm reboot")}
+                </Button>
            </ModalFooter>
        </Modal>
    );
--- a/src/common/WiFiSettings/ResetWiFiSettings.js
+++ b/src/common/WiFiSettings/ResetWiFiSettings.js
@ -13,7 +13,7 @@ import { useAlert } from "../../alertContext/AlertContext";
 import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { useAPIPost } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";
-import { formFieldsSize } from "../../bootstrap/constants";
+import { buttonFormFieldsSize } from "../../bootstrap/constants";

 ResetWiFiSettings.propTypes = {
    ws: PropTypes.object.isRequired,
@ -25,8 +25,7 @@ export default function ResetWiFiSettings({ ws, endpoint }) {

    useEffect(() => {
        const module = "wifi";
-        ws.subscribe(module)
-            .bind(module, "reset", () => {
+        ws.subscribe(module).bind(module, "reset", () => {
            // eslint-disable-next-line no-restricted-globals
            setTimeout(() => location.reload(), 1000);
        });
@ -38,7 +37,10 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
        if (postResetResponse.state === API_STATE.ERROR) {
            setAlert(_("An error occurred during resetting Wi-Fi settings."));
        } else if (postResetResponse.state === API_STATE.SUCCESS) {
-            setAlert(_("Wi-Fi settings are set to defaults."), ALERT_TYPES.SUCCESS);
+            setAlert(
+                _("Wi-Fi settings are set to defaults."),
+                ALERT_TYPES.SUCCESS
+            );
        }
    }, [postResetResponse, setAlert]);

@ -50,20 +52,19 @@ export default function ResetWiFiSettings({ ws, endpoint }) {

    return (
        <>
-            <h4>{_("Reset Wi-Fi Settings")}</h4>
+            <h2>{_("Reset Wi-Fi Settings")}</h2>
            <p>
                {_(`
 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={`${formFieldsSize} text-right`}>
+            <div className={`${buttonFormFieldsSize} text-right`}>
                <Button
                    className="btn-warning"
                    forisFormSize
                    loading={isLoading}
                    disabled={isLoading}
-
                    onClick={onReset}
                >
                    {_("Reset Wi-Fi Settings")}
--- a/src/common/WiFiSettings/WiFiForm.js
+++ b/src/common/WiFiSettings/WiFiForm.js
@ -7,7 +7,7 @@

 import React from "react";
 import PropTypes from "prop-types";
-
+import { Switch } from "../../bootstrap/Switch";
 import { CheckBox } from "../../bootstrap/CheckBox";
 import { PasswordInput } from "../../bootstrap/PasswordInput";
 import { RadioSet } from "../../bootstrap/RadioSet";
@ -18,13 +18,9 @@ import WifiGuestForm from "./WiFiGuestForm";
 import { HELP_TEXTS, HTMODES, HWMODES } from "./constants";

 WiFiForm.propTypes = {
-    formData: PropTypes.shape(
-        { devices: PropTypes.arrayOf(PropTypes.object) },
-    ).isRequired,
-    formErrors: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.array,
-    ]),
+    formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
+        .isRequired,
+    formErrors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    setFormValue: PropTypes.func.isRequired,
    hasGuestNetwork: PropTypes.bool,
 };
@ -36,7 +32,11 @@ WiFiForm.defaultProps = {
 };

 export default function WiFiForm({
-    formData, formErrors, setFormValue, hasGuestNetwork, disabled,
+    formData,
+    formErrors,
+    setFormValue,
+    hasGuestNetwork,
+    disabled,
 }) {
    return formData.devices.map((device, index) => (
        <DeviceForm
@ -47,6 +47,7 @@ export default function WiFiForm({
            setFormValue={setFormValue}
            hasGuestNetwork={hasGuestNetwork}
            disabled={disabled}
+            divider={index + 1 !== formData.devices.length}
        />
    ));
 }
@ -67,6 +68,7 @@ DeviceForm.propTypes = {
    setFormValue: PropTypes.func.isRequired,
    hasGuestNetwork: PropTypes.bool,
    deviceIndex: PropTypes.number,
+    divider: PropTypes.bool,
 };

 DeviceForm.defaultProps = {
@ -75,40 +77,42 @@ DeviceForm.defaultProps = {
 };

 function DeviceForm({
-    formData, formErrors, setFormValue, hasGuestNetwork, deviceIndex, ...props
+    formData,
+    formErrors,
+    setFormValue,
+    hasGuestNetwork,
+    deviceIndex,
+    divider,
+    ...props
 }) {
    const deviceID = formData.id;
    return (
        <>
-            <h3>{_(`Wi-Fi ${deviceID + 1}`)}</h3>
-            <CheckBox
-                label={_("Enable")}
+            <Switch
+                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
                checked={formData.enabled}
-
-                onChange={setFormValue(
-                    (value) => ({ devices: { [deviceIndex]: { enabled: { $set: value } } } }),
-                )}
-
+                onChange={setFormValue((value) => ({
+                    devices: {
+                        [deviceIndex]: { enabled: { $set: value } },
+                    },
+                }))}
+                switchHeading
                {...props}
            />
-            {formData.enabled
-                ? (
+            {formData.enabled ? (
                <>
                    <TextInput
                        label="SSID"
                        value={formData.SSID}
                        error={formErrors.SSID || null}
                        required
-                            onChange={setFormValue(
-                                (value) => ({
+                        onChange={setFormValue((value) => ({
                            devices: {
                                [deviceIndex]: {
                                    SSID: { $set: value },
                                },
                            },
-                                }),
-                            )}
-
+                        }))}
                        {...props}
                    >
                        <div className="input-group-append">
@ -126,13 +130,11 @@ function DeviceForm({
                        error={formErrors.password}
                        helpText={HELP_TEXTS.password}
                        required
-
-                            onChange={setFormValue(
-                                (value) => (
-                                    { devices: { [deviceIndex]: { password: { $set: value } } } }
-                                ),
-                            )}
-
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { password: { $set: value } },
+                            },
+                        }))}
                        {...props}
                    />

@ -140,13 +142,11 @@ function DeviceForm({
                        label="Hide SSID"
                        helpText={HELP_TEXTS.hidden}
                        checked={formData.hidden}
-
-                            onChange={setFormValue(
-                                (value) => (
-                                    { devices: { [deviceIndex]: { hidden: { $set: value } } } }
-                                ),
-                            )}
-
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { hidden: { $set: value } },
+                            },
+                        }))}
                        {...props}
                    />

@ -156,18 +156,14 @@ function DeviceForm({
                        choices={getHwmodeChoices(formData)}
                        value={formData.hwmode}
                        helpText={HELP_TEXTS.hwmode}
-
-                            onChange={setFormValue(
-                                (value) => ({
+                        onChange={setFormValue((value) => ({
                            devices: {
                                [deviceIndex]: {
                                    hwmode: { $set: value },
                                    channel: { $set: "0" },
                                },
                            },
-                                }),
-                            )}
-
+                        }))}
                        {...props}
                    />

@ -176,13 +172,11 @@ function DeviceForm({
                        choices={getHtmodeChoices(formData)}
                        value={formData.htmode}
                        helpText={HELP_TEXTS.htmode}
-
-                            onChange={setFormValue(
-                                (value) => (
-                                    { devices: { [deviceIndex]: { htmode: { $set: value } } } }
-                                ),
-                            )}
-
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { htmode: { $set: value } },
+                            },
+                        }))}
                        {...props}
                    />

@ -190,29 +184,28 @@ function DeviceForm({
                        label="Channel"
                        choices={getChannelChoices(formData)}
                        value={formData.channel}
-
-                            onChange={setFormValue(
-                                (value) => (
-                                    { devices: { [deviceIndex]: { channel: { $set: value } } } }
-                                ),
-                            )}
-
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [deviceIndex]: { channel: { $set: value } },
+                            },
+                        }))}
                        {...props}
                    />

                    {hasGuestNetwork && (
                        <WifiGuestForm
-                                formData={{ id: deviceIndex, ...formData.guest_wifi }}
+                            formData={{
+                                id: deviceIndex,
+                                ...formData.guest_wifi,
+                            }}
                            formErrors={formErrors.guest_wifi || {}}
-
                            setFormValue={setFormValue}
-
                            {...props}
                        />
                    )}
                </>
-                )
-                : null}
+            ) : null}
+            {divider ? <hr /> : null}
        </>
    );
 }
@ -228,7 +221,9 @@ function getChannelChoices(device) {
        availableBand.available_channels.forEach((availableChannel) => {
            channelChoices[availableChannel.number.toString()] = `
                        ${availableChannel.number}
-                        (${availableChannel.frequency} MHz ${availableChannel.radar ? " ,DFS" : ""})
+                        (${availableChannel.frequency} MHz ${
+                availableChannel.radar ? " ,DFS" : ""
+            })
                    `;
        });
    });
--- a/src/common/WiFiSettings/WiFiGuestForm.js
+++ b/src/common/WiFiSettings/WiFiGuestForm.js
@ -8,8 +8,8 @@
 import React from "react";
 import PropTypes from "prop-types";

-import { CheckBox } from "../../bootstrap/CheckBox";
 import { TextInput } from "../../bootstrap/TextInput";
+import { Switch } from "../../bootstrap/Switch";
 import { PasswordInput } from "../../bootstrap/PasswordInput";
 import WiFiQRCode from "./WiFiQRCode";
 import { HELP_TEXTS } from "./constants";
@ -26,42 +26,44 @@ WifiGuestForm.propTypes = {
        password: PropTypes.string,
    }),
    setFormValue: PropTypes.func.isRequired,
+    deviceIndex: PropTypes.string,
 };

 export default function WifiGuestForm({
-    formData, formErrors, setFormValue, ...props
+    formData,
+    formErrors,
+    setFormValue,
+    deviceIndex,
+    ...props
 }) {
    return (
        <>
-            <CheckBox
-                label={_("Enable Guest Wifi")}
+            <Switch
+                label={_("Enable Guest Wi-Fi")}
                checked={formData.enabled}
                helpText={HELP_TEXTS.guest_wifi_enabled}
-
-                onChange={setFormValue(
-                    (value) => (
-                        { devices: { [formData.id]: { guest_wifi: { enabled: { $set: value } } } } }
-                    ),
-                )}
-
+                onChange={setFormValue((value) => ({
+                    devices: {
+                        [formData.id]: {
+                            guest_wifi: { enabled: { $set: value } },
+                        },
+                    },
+                }))}
                {...props}
            />
-            {formData.enabled
-                ? (
+            {formData.enabled ? (
                <>
                    <TextInput
                        label="SSID"
                        value={formData.SSID}
                        error={formErrors.SSID}
-
-                            onChange={setFormValue(
-                                (value) => ({
+                        onChange={setFormValue((value) => ({
                            devices: {
-                                        [formData.id]: { guest_wifi: { SSID: { $set: value } } },
+                                [formData.id]: {
+                                    guest_wifi: { SSID: { $set: value } },
                                },
-                                }),
-                            )}
-
+                            },
+                        }))}
                        {...props}
                    >
                        <div className="input-group-append">
@ -79,22 +81,17 @@ export default function WifiGuestForm({
                        helpText={HELP_TEXTS.password}
                        error={formErrors.password}
                        required
-
-                            onChange={setFormValue(
-                                (value) => ({
+                        onChange={setFormValue((value) => ({
                            devices: {
                                [formData.id]: {
                                    guest_wifi: { password: { $set: value } },
                                },
                            },
-                                }),
-                            )}
-
+                        }))}
                        {...props}
                    />
                </>
-                )
-                : null}
+            ) : null}
        </>
    );
 }
--- a/src/common/WiFiSettings/WiFiQRCode.js
+++ b/src/common/WiFiSettings/WiFiQRCode.js
@ -12,7 +12,10 @@ import PropTypes from "prop-types";
 import { ForisURLs } from "../../utils/forisUrls";
 import { Button } from "../../bootstrap/Button";
 import {
-    Modal, ModalBody, ModalFooter, ModalHeader,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader,
 } from "../../bootstrap/Modal";
 import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";

@ -36,11 +39,21 @@ export default function WiFiQRCode({ SSID, password }) {
                    setModal(true);
                }}
            >
-                <img width="20" src={QR_ICON_PATH} alt="QR" style={{ opacity: 0.67 }} />
+                <img
+                    width="20"
+                    src={QR_ICON_PATH}
+                    alt="QR"
+                    style={{ opacity: 0.67 }}
+                />
            </button>
-            {modal
-                ? <QRCodeModal setShown={setModal} shown={modal} SSID={SSID} password={password} />
-                : null}
+            {modal ? (
+                <QRCodeModal
+                    setShown={setModal}
+                    shown={modal}
+                    SSID={SSID}
+                    password={password}
+                />
+            ) : null}
        </>
    );
 }
@ -52,9 +65,7 @@ QRCodeModal.propTypes = {
    setShown: PropTypes.func.isRequired,
 };

-function QRCodeModal({
-    shown, setShown, SSID, password,
-}) {
+function QRCodeModal({ shown, setShown, SSID, password }) {
    return (
        <Modal setShown={setShown} shown={shown}>
            <ModalHeader setShown={setShown} title={_("Wi-Fi QR Code")} />
--- a/src/common/WiFiSettings/WiFiSettings.js
+++ b/src/common/WiFiSettings/WiFiSettings.js
@ -19,9 +19,7 @@ WiFiSettings.propTypes = {
    hasGuestNetwork: PropTypes.bool,
 };

-export function WiFiSettings({
-    ws, endpoint, resetEndpoint, hasGuestNetwork,
-}) {
+export function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
    return (
        <>
            <ForisForm
@ -59,35 +57,41 @@ function prepDataToSubmit(formData) {
            return;
        }

-        if (!device.guest_wifi.enabled) formData.devices[idx].guest_wifi = { enabled: false };
+        if (!device.guest_wifi.enabled)
+            formData.devices[idx].guest_wifi = { enabled: false };
    });
    return formData;
 }

 export function validator(formData) {
-    const formErrors = formData.devices.map(
-        (device) => {
+    const formErrors = formData.devices.map((device) => {
        if (!device.enabled) return {};

        const errors = {};
-            if (device.SSID.length > 32) errors.SSID = _("SSID can't be longer than 32 symbols");
+        if (device.SSID.length > 32)
+            errors.SSID = _("SSID can't be longer than 32 symbols");
        if (device.SSID.length === 0) errors.SSID = _("SSID can't be empty");

-            if (device.password.length < 8) errors.password = _("Password must contain at least 8 symbols");
+        if (device.password.length < 8)
+            errors.password = _("Password must contain at least 8 symbols");

        if (!device.guest_wifi.enabled) return errors;

        const guest_wifi_errors = {};
-            if (device.guest_wifi.SSID.length > 32) guest_wifi_errors.SSID = _("SSID can't be longer than 32 symbols");
-            if (device.guest_wifi.SSID.length === 0) guest_wifi_errors.SSID = _("SSID can't be empty");
+        if (device.guest_wifi.SSID.length > 32)
+            guest_wifi_errors.SSID = _("SSID can't be longer than 32 symbols");
+        if (device.guest_wifi.SSID.length === 0)
+            guest_wifi_errors.SSID = _("SSID can't be empty");

-            if (device.guest_wifi.password.length < 8) guest_wifi_errors.password = _("Password must contain at least 8 symbols");
+        if (device.guest_wifi.password.length < 8)
+            guest_wifi_errors.password = _(
+                "Password must contain at least 8 symbols"
+            );

        if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
            errors.guest_wifi = guest_wifi_errors;
        }
        return errors;
-        },
-    );
+    });
    return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
 }
--- a/src/common/WiFiSettings/tests/ResetWiFiSettings.test.js
+++ b/src/common/WiFiSettings/tests/ResetWiFiSettings.test.js
@ -22,19 +22,34 @@ describe("<ResetWiFiSettings/>", () => {
    let getAllByText;

    beforeEach(() => {
-        ({ getAllByText } = render(<ResetWiFiSettings ws={webSockets} endpoint={endpoint} />));
+        ({ getAllByText } = render(
+            <ResetWiFiSettings ws={webSockets} endpoint={endpoint} />
+        ));
    });

    it("should display alert on open ports - success", async () => {
        fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
-        expect(mockAxios.post).toBeCalledWith(endpoint, undefined, expect.anything());
+        expect(mockAxios.post).toBeCalledWith(
+            endpoint,
+            undefined,
+            expect.anything()
+        );
        mockAxios.mockResponse({ data: { foo: "bar" } });
-        await wait(() => expect(mockSetAlert).toBeCalledWith("Wi-Fi settings are set to defaults.", ALERT_TYPES.SUCCESS));
+        await wait(() =>
+            expect(mockSetAlert).toBeCalledWith(
+                "Wi-Fi settings are set to defaults.",
+                ALERT_TYPES.SUCCESS
+            )
+        );
    });

    it("should display alert on open ports - failure", async () => {
        fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
        mockJSONError();
-        await wait(() => expect(mockSetAlert).toBeCalledWith("An error occurred during resetting Wi-Fi settings."));
+        await wait(() =>
+            expect(mockSetAlert).toBeCalledWith(
+                "An error occurred during resetting Wi-Fi settings."
+            )
+        );
    });
 });
--- a/src/common/WiFiSettings/tests/WiFiSettings.test.js
+++ b/src/common/WiFiSettings/tests/WiFiSettings.test.js
@ -13,7 +13,12 @@ import { fireEvent, render, wait } from "customTestRender";
 import { WebSockets } from "webSockets/WebSockets";
 import { mockJSONError } from "testUtils/network";

-import { wifiSettingsFixture, oneDevice, twoDevices, threeDevices } from "./__fixtures__/wifiSettings";
+import {
+    wifiSettingsFixture,
+    oneDevice,
+    twoDevices,
+    threeDevices,
+} from "./__fixtures__/wifiSettings";
 import { WiFiSettings, validator } from "../WiFiSettings";

 describe("<WiFiSettings/>", () => {
@ -26,7 +31,13 @@ describe("<WiFiSettings/>", () => {

    beforeEach(async () => {
        const webSockets = new WebSockets();
-        const renderRes = render(<WiFiSettings ws={webSockets} endpoint={endpoint} resetEndpoint="foo" />);
+        const renderRes = render(
+            <WiFiSettings
+                ws={webSockets}
+                endpoint={endpoint}
+                resetEndpoint="foo"
+            />
+        );
        asFragment = renderRes.asFragment;
        getAllByText = renderRes.getAllByText;
        getAllByLabelText = renderRes.getAllByLabelText;
@ -38,7 +49,14 @@ describe("<WiFiSettings/>", () => {

    it("should handle error", async () => {
        const webSockets = new WebSockets();
-        const { getByText } = render(<WiFiSettings ws={webSockets} ws={webSockets} endpoint={endpoint} resetEndpoint="foo" />);
+        const { getByText } = render(
+            <WiFiSettings
+                ws={webSockets}
+                ws={webSockets}
+                endpoint={endpoint}
+                resetEndpoint="foo"
+            />
+        );
        const errorMessage = "An API error occurred.";
        mockJSONError(errorMessage);
        await wait(() => {
@ -51,21 +69,21 @@ describe("<WiFiSettings/>", () => {
    });

    it("Snapshot one module enabled.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
        expect(diffSnapshot(firstRender, asFragment())).toMatchSnapshot();
    });

    it("Snapshot 2.4 GHz", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
        const enabledRender = asFragment();
        fireEvent.click(getAllByText("2.4")[0]);
        expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
    });

    it("Snapshot guest network.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
        const enabledRender = asFragment();
-        fireEvent.click(getAllByText("Enable Guest Wifi")[0]);
+        fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
        expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
    });

@ -78,11 +96,15 @@ describe("<WiFiSettings/>", () => {
                { enabled: false, id: 1 },
            ],
        };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
    });

    it("Post form: one module enabled.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));

        fireEvent.click(getByText("Save"));
        expect(mockAxios.post).toBeCalled();
@ -102,11 +124,15 @@ describe("<WiFiSettings/>", () => {
                { enabled: false, id: 1 },
            ],
        };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
    });

    it("Post form: 2.4 GHz", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
+        fireEvent.click(getByText("Wi-Fi 1"));
        fireEvent.click(getAllByText("2.4")[0]);

        fireEvent.click(getByText("Save"));
@ -127,13 +153,19 @@ describe("<WiFiSettings/>", () => {
                { enabled: false, id: 1 },
            ],
        };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
    });

    it("Post form: guest network.", () => {
-        fireEvent.click(getAllByText("Enable")[0]);
-        fireEvent.click(getAllByText("Enable Guest Wifi")[0]);
-        fireEvent.change(getAllByLabelText("Password")[1], { target: { value: "test_password" } });
+        fireEvent.click(getByText("Wi-Fi 1"));
+        fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
+        fireEvent.change(getAllByLabelText("Password")[1], {
+            target: { value: "test_password" },
+        });

        fireEvent.click(getByText("Save"));
        expect(mockAxios.post).toBeCalled();
@ -157,7 +189,11 @@ describe("<WiFiSettings/>", () => {
                { enabled: false, id: 1 },
            ],
        };
-        expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            endpoint,
+            data,
+            expect.anything()
+        );
    });

    it("Validator function using regex for one device", () => {
@ -170,7 +206,11 @@ describe("<WiFiSettings/>", () => {
    });

    it("Validator function using regex for three devices", () => {
-        const threeDevicesFormErrors = [{}, {}, {password: "Password must contain at least 8 symbols"}];    
+        const threeDevicesFormErrors = [
+            {},
+            {},
+            { password: "Password must contain at least 8 symbols" },
+        ];
        expect(validator(threeDevices)).toEqual(threeDevicesFormErrors);
    });
 });
--- a/src/common/WiFiSettings/tests/fixtures/wifiSettings.js
+++ b/src/common/WiFiSettings/tests/fixtures/wifiSettings.js
@ -292,11 +292,7 @@ export function wifiSettingsFixture() {
                                radar: false,
                            },
                        ],
-                        available_htmodes: [
-                            "NOHT",
-                            "HT20",
-                            "HT40",
-                        ],
+                        available_htmodes: ["NOHT", "HT20", "HT40"],
                        hwmode: "11g",
                    },
                ],
@ -327,9 +323,9 @@ const oneDevice = {
            htmode: "HT40",
            hwmode: "11a",
            id: 0,
-            password: "TestPass"
-        }
-    ]
+            password: "TestPass",
+        },
+    ],
 };

 const twoDevices = {
@ -343,7 +339,7 @@ const twoDevices = {
            htmode: "HT40",
            hwmode: "11a",
            id: 0,
-            password: "TestPass"
+            password: "TestPass",
        },
        {
            SSID: "Turris2",
@ -354,9 +350,9 @@ const twoDevices = {
            htmode: "HT40",
            hwmode: "11a",
            id: 0,
-            password: "TestPass"
-        }
-    ]
+            password: "TestPass",
+        },
+    ],
 };

 const threeDevices = {
@ -370,7 +366,7 @@ const threeDevices = {
            htmode: "HT40",
            hwmode: "11a",
            id: 0,
-            password: "TestPass"
+            password: "TestPass",
        },
        {
            SSID: "Turris2",
@ -381,7 +377,7 @@ const threeDevices = {
            htmode: "HT40",
            hwmode: "11a",
            id: 0,
-            password: "TestPass"
+            password: "TestPass",
        },
        {
            SSID: "Turris3",
@ -392,9 +388,9 @@ const threeDevices = {
            htmode: "HT40",
            hwmode: "11a",
            id: 0,
-            password: ""
-        }
-    ]
+            password: "",
+        },
+    ],
 };

 export { oneDevice, twoDevices, threeDevices };
--- a/src/common/WiFiSettings/tests/snapshots/WiFiSettings.test.js.snap
+++ b/src/common/WiFiSettings/tests/snapshots/WiFiSettings.test.js.snap
@ -5,7 +5,7 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 - First value
 + Second value

-@@ -246,207 +246,95 @@
+@@ -245,207 +245,95 @@
              value=\\"0\\"
            >
              auto
@ -251,17 +251,14 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
 <DocumentFragment>
  <div
-    class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3"
+    class="card p-4 col-sm-12 col-lg-12 p-0 mb-3"
  >
    <form>
-      <h3>
-        Wi-Fi 1
-      </h3>
      <div
        class="form-group"
      >
        <div
-          class="custom-control custom-checkbox "
+          class="custom-control custom-switch custom-control-inline switch-heading"
        >
          <input
            class="custom-control-input"
@ -272,18 +269,18 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
            class="custom-control-label"
            for="1"
          >
-            Enable
+            <h2>
+              Wi-Fi 1
+            </h2>
          </label>
        </div>
      </div>
-      <h3>
-        Wi-Fi 2
-      </h3>
+      <hr />
      <div
        class="form-group"
      >
        <div
-          class="custom-control custom-checkbox "
+          class="custom-control custom-switch custom-control-inline switch-heading"
        >
          <input
            class="custom-control-input"
@ -294,7 +291,9 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
            class="custom-control-label"
            for="2"
          >
-            Enable
+            <h2>
+              Wi-Fi 2
+            </h2>
          </label>
        </div>
      </div>
@ -302,7 +301,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
        class="text-right"
      >
        <button
-          class="btn btn-primary  col-sm-12 col-lg-3"
+          class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
          type="submit"
        >
          Save
@ -310,9 +309,9 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
      </div>
    </form>
  </div>
-  <h4>
+  <h2>
    Reset Wi-Fi Settings
-  </h4>
+  </h2>
  <p>
    
 If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the
@ -320,10 +319,10 @@ current Wi-Fi configuration and restore the default values.
        
  </p>
  <div
-    class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3 text-right"
+    class="col-sm-12 col-lg-12 p-0 mb-3 text-right"
  >
    <button
-      class="btn btn-warning col-sm-12 col-lg-3"
+      class="btn btn-warning col-sm-12 col-md-3 col-lg-2"
      type="button"
    >
      Reset Wi-Fi Settings
@ -337,10 +336,10 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value

-@@ -475,10 +475,89 @@
+@@ -474,10 +474,89 @@
+          Parameters of the guest network can be set in the Guest network tab.
          
            </small>
-            </label>
          </div>
        </div>
 +       <div
@ -422,17 +421,17 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +     
 +         </small>
 +       </div>
-        <h3>
-          Wi-Fi 2
-        </h3>
+        <hr />
        <div
          class=\\"form-group\\"
-@@ -502,10 +581,11 @@
+        >
+          <div
+@@ -501,10 +580,11 @@
        <div
          class=\\"text-right\\"
        >
          <button
-            class=\\"btn btn-primary  col-sm-12 col-lg-3\\"
+            class=\\"btn btn-primary  col-sm-12 col-md-3 col-lg-2\\"
 +           disabled=\\"\\"
            type=\\"submit\\"
          >
@ -446,9 +445,9 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 - First value
 + Second value

-@@ -23,10 +23,462 @@
-            >
-              Enable
+@@ -22,10 +22,462 @@
+                Wi-Fi 1
+              </h2>
            </label>
          </div>
        </div>
@ -880,7 +879,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         class=\\"form-group\\"
 +       >
 +         <div
-+           class=\\"custom-control custom-checkbox \\"
+           class=\\"custom-control custom-switch\\"
 +         >
 +           <input
 +             class=\\"custom-control-input\\"
@ -891,9 +890,10 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             class=\\"custom-control-label\\"
 +             for=\\"10\\"
 +           >
-+             Enable Guest Wifi
+             Enable Guest Wi-Fi
+           </label>
 +           <small
-+               class=\\"form-text text-muted\\"
+             class=\\"form-text text-muted mt-0 mb-3\\"
 +           >
 +             
 +         Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to
@ -901,12 +901,11 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         Parameters of the guest network can be set in the Guest network tab.
 +         
 +           </small>
-+           </label>
 +         </div>
 +       </div>
-        <h3>
-          Wi-Fi 2
-        </h3>
+        <hr />
        <div
-          class=\\"form-group\\""
+          class=\\"form-group\\"
+        >
+          <div"
 `;
--- a/src/common/WiFiSettings/constants.js
+++ b/src/common/WiFiSettings/constants.js
@ -22,7 +22,9 @@ export const HELP_TEXTS = {
    password: _(`
        WPA2 pre-shared key, that is required to connect to the network.
    `),
-    hidden: _("If set, network is not visible when scanning for available networks."),
+    hidden: _(
+        "If set, network is not visible when scanning for available networks."
+    ),
    hwmode: _(`
        The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a
        newer standard and may not be supported by all your devices. It usually has less interference, but the signal
--- a/src/common/tests/RebootButton.test.js
+++ b/src/common/tests/RebootButton.test.js
@ -8,7 +8,11 @@
 import React from "react";

 import {
-    fireEvent, getByText, queryByText, render, wait,
+    fireEvent,
+    getByText,
+    queryByText,
+    render,
+    wait,
 } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import { mockJSONError } from "testUtils/network";
@ -19,38 +23,41 @@ import { RebootButton } from "../RebootButton";
 describe("<RebootButton/>", () => {
    let componentContainer;
    beforeEach(() => {
-        const { container } = render(<>
+        const { container } = render(
+            <>
                <div id="modal-container" />
                <RebootButton />
-        </>);
+            </>
+        );
        componentContainer = container;
    });

    it("Render.", () => {
-        expect(componentContainer)
-            .toMatchSnapshot();
+        expect(componentContainer).toMatchSnapshot();
    });

    it("Render modal.", () => {
-        expect(queryByText(componentContainer, "Confirm reboot"))
-            .toBeNull();
+        expect(queryByText(componentContainer, "Confirm reboot")).toBeNull();
        fireEvent.click(getByText(componentContainer, "Reboot"));
-        expect(componentContainer)
-            .toMatchSnapshot();
+        expect(componentContainer).toMatchSnapshot();
    });

    it("Confirm reboot.", () => {
        fireEvent.click(getByText(componentContainer, "Reboot"));
        fireEvent.click(getByText(componentContainer, "Confirm reboot"));
-        expect(mockAxios.post)
-            .toHaveBeenCalledWith("/reforis/api/reboot", undefined, expect.anything());
+        expect(mockAxios.post).toHaveBeenCalledWith(
+            "/reforis/api/reboot",
+            undefined,
+            expect.anything()
+        );
    });

    it("Hold error.", async () => {
        fireEvent.click(getByText(componentContainer, "Reboot"));
        fireEvent.click(getByText(componentContainer, "Confirm reboot"));
        mockJSONError();
-        await wait(() => expect(mockSetAlert)
-            .toBeCalledWith("Reboot request failed."));
+        await wait(() =>
+            expect(mockSetAlert).toBeCalledWith("Reboot request failed.")
+        );
    });
 });
--- a/src/common/tests/snapshots/RebootButton.test.js.snap
+++ b/src/common/tests/snapshots/RebootButton.test.js.snap
@ -49,16 +49,12 @@ exports[`<RebootButton/> Render modal. 1`] = `
              class="btn btn-primary "
              type="button"
            >
-               
-               
              Cancel
            </button>
            <button
              class="btn btn-danger"
              type="button"
            >
-               
-               
              Confirm reboot
            </button>
          </div>
@ -70,8 +66,6 @@ exports[`<RebootButton/> Render modal. 1`] = `
    class="btn btn-danger"
    type="button"
  >
-     
-     
    Reboot
  </button>
 </div>
@ -86,8 +80,6 @@ exports[`<RebootButton/> Render. 1`] = `
    class="btn btn-danger"
    type="button"
  >
-     
-     
    Reboot
  </button>
 </div>
--- a/src/form/tests/SubmitButton.test.js
+++ b/src/form/tests/SubmitButton.test.js
@ -13,17 +13,14 @@ import { STATES, SubmitButton } from "../components/SubmitButton";
 describe("<SubmitButton/>", () => {
    it("Render ready", () => {
        const { container } = render(<SubmitButton state={STATES.READY} />);
-        expect(container)
-            .toMatchSnapshot();
+        expect(container).toMatchSnapshot();
    });
    it("Render saving", () => {
        const { container } = render(<SubmitButton state={STATES.SAVING} />);
-        expect(container)
-            .toMatchSnapshot();
+        expect(container).toMatchSnapshot();
    });
    it("Render load", () => {
        const { container } = render(<SubmitButton state={STATES.LOAD} />);
-        expect(container)
-            .toMatchSnapshot();
+        expect(container).toMatchSnapshot();
    });
 });
--- a/src/form/tests/snapshots/SubmitButton.test.js.snap
+++ b/src/form/tests/snapshots/SubmitButton.test.js.snap
@ -3,7 +3,7 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
  <button
-    class="btn btn-primary  col-sm-12 col-lg-3"
+    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
    disabled=""
    type="submit"
  >
@ -13,8 +13,6 @@ exports[`<SubmitButton/> Render load 1`] = `
      role="status"
    />
     
-     
-     
    Load settings
  </button>
 </div>
@ -23,11 +21,9 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
  <button
-    class="btn btn-primary  col-sm-12 col-lg-3"
+    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
    type="submit"
  >
-     
-     
    Save
  </button>
 </div>
@ -36,7 +32,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
  <button
-    class="btn btn-primary  col-sm-12 col-lg-3"
+    class="btn btn-primary  col-sm-12 col-md-3 col-lg-2"
    disabled=""
    type="submit"
  >
@ -46,8 +42,6 @@ exports[`<SubmitButton/> Render saving 1`] = `
      role="status"
    />
     
-     
-     
    Updating
  </button>
 </div>
--- a/src/form/tests/hooks.test.js
+++ b/src/form/tests/hooks.test.js
@ -7,9 +7,7 @@

 import React from "react";

-import {
-    act, fireEvent, render, waitForElement,
-} from "customTestRender";
+import { act, fireEvent, render, waitForElement } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import { WebSockets } from "webSockets/WebSockets";
 import { ForisForm } from "../components/ForisForm";
@ -38,8 +36,12 @@ describe("useForm hook.", () => {

    beforeEach(async () => {
        mockPrepData = jest.fn(() => ({ field: "preparedData" }));
-        mockPrepDataToSubmit = jest.fn(() => ({ field: "preparedDataToSubmit" }));
-        mockValidator = jest.fn((data) => (data.field === "invalidValue" ? { field: "Error" } : {}));
+        mockPrepDataToSubmit = jest.fn(() => ({
+            field: "preparedDataToSubmit",
+        }));
+        mockValidator = jest.fn((data) =>
+            data.field === "invalidValue" ? { field: "Error" } : {}
+        );
        const { getByTestId, container } = render(
            <ForisForm
                ws={new WebSockets()}
@ -53,7 +55,7 @@ describe("useForm hook.", () => {
                validator={mockValidator}
            >
                <Child />
-            </ForisForm>,
+            </ForisForm>
        );
        mockAxios.mockResponse({ field: "fetchedData" });

@ -67,16 +69,22 @@ describe("useForm hook.", () => {
        expect(Child.mock.calls[0][0].formErrors).toMatchObject({});

        act(() => {
-            fireEvent.change(input, { target: { value: "invalidValue", type: "text" } });
+            fireEvent.change(input, {
+                target: { value: "invalidValue", type: "text" },
+            });
        });

        expect(Child).toHaveBeenCalledTimes(2);
        expect(mockValidator).toHaveBeenCalledTimes(2);
-        expect(Child.mock.calls[1][0].formErrors).toMatchObject({ field: "Error" });
+        expect(Child.mock.calls[1][0].formErrors).toMatchObject({
+            field: "Error",
+        });
    });

    it("Update text value.", () => {
-        fireEvent.change(input, { target: { value: "newValue", type: "text" } });
+        fireEvent.change(input, {
+            target: { value: "newValue", type: "text" },
+        });
        expect(input.value).toBe("newValue");
    });

@ -86,14 +94,21 @@ describe("useForm hook.", () => {
    });

    it("Update checkbox value.", () => {
-        fireEvent.change(input, { target: { checked: true, type: "checkbox" } });
+        fireEvent.change(input, {
+            target: { checked: true, type: "checkbox" },
+        });
        expect(input.checked).toBe(true);
    });

    it("Fetch data.", () => {
-        expect(mockAxios.get).toHaveBeenCalledWith("testEndpoint", expect.anything());
+        expect(mockAxios.get).toHaveBeenCalledWith(
+            "testEndpoint",
+            expect.anything()
+        );
        expect(mockPrepData).toHaveBeenCalledTimes(1);
-        expect(Child.mock.calls[0][0].formData).toMatchObject({ field: "preparedData" });
+        expect(Child.mock.calls[0][0].formData).toMatchObject({
+            field: "preparedData",
+        });
    });

    it("Submit.", () => {
@ -107,7 +122,7 @@ describe("useForm hook.", () => {
        expect(mockAxios.post).toHaveBeenCalledWith(
            "testEndpoint",
            { field: "preparedDataToSubmit" },
-            expect.anything(),
+            expect.anything()
        );
    });
 });
--- a/src/form/tests/validation.test.js
+++ b/src/form/tests/validation.test.js
@ -16,120 +16,75 @@ import {

 describe("Validation functions", () => {
    it("validateIPv4Address valid", () => {
-        expect(validateIPv4Address("192.168.1.1"))
-            .toBe(undefined);
-        expect(validateIPv4Address("1.1.1.1"))
-            .toBe(undefined);
-        expect(validateIPv4Address("0.0.0.0"))
-            .toBe(undefined);
+        expect(validateIPv4Address("192.168.1.1")).toBe(undefined);
+        expect(validateIPv4Address("1.1.1.1")).toBe(undefined);
+        expect(validateIPv4Address("0.0.0.0")).toBe(undefined);
    });
    it("validateIPv4Address invalid", () => {
-        expect(validateIPv4Address("invalid"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.256.1.1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.168.256.1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.168.1.256"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv4Address("192.168.1.256"))
-            .not
-            .toBe(undefined);
+        expect(validateIPv4Address("invalid")).not.toBe(undefined);
+        expect(validateIPv4Address("192.256.1.1")).not.toBe(undefined);
+        expect(validateIPv4Address("192.168.256.1")).not.toBe(undefined);
+        expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
+        expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
    });

    it("validateIPv6Address valid", () => {
-        expect(validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
-            .toBe(undefined);
-        expect(validateIPv6Address("0:0:0:0:0:0:0:1"))
-            .toBe(undefined);
-        expect(validateIPv6Address("::1"))
-            .toBe(undefined);
-        expect(validateIPv6Address("::"))
-            .toBe(undefined);
+        expect(
+            validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
+        ).toBe(undefined);
+        expect(validateIPv6Address("0:0:0:0:0:0:0:1")).toBe(undefined);
+        expect(validateIPv6Address("::1")).toBe(undefined);
+        expect(validateIPv6Address("::")).toBe(undefined);
    });
    it("validateIPv6Address invalid", () => {
-        expect(validateIPv6Address("invalid"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Address("1.1.1.1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313"))
-            .not
-            .toBe(undefined);
+        expect(validateIPv6Address("invalid")).not.toBe(undefined);
+        expect(validateIPv6Address("1.1.1.1")).not.toBe(undefined);
+        expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313")).not.toBe(
+            undefined
+        );
+        expect(
+            validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313")
+        ).not.toBe(undefined);
    });

    it("validateIPv6Prefix valid", () => {
-        expect(validateIPv6Prefix("2002:0000::/16"))
-            .toBe(undefined);
-        expect(validateIPv6Prefix("0::/0"))
-            .toBe(undefined);
+        expect(validateIPv6Prefix("2002:0000::/16")).toBe(undefined);
+        expect(validateIPv6Prefix("0::/0")).toBe(undefined);
    });
    it("validateIPv6Prefix invalid", () => {
-        expect(validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Prefix("::1"))
-            .not
-            .toBe(undefined);
-        expect(validateIPv6Prefix("2002:0000::/999"))
-            .not
-            .toBe(undefined);
+        expect(
+            validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
+        ).not.toBe(undefined);
+        expect(validateIPv6Prefix("::1")).not.toBe(undefined);
+        expect(validateIPv6Prefix("2002:0000::/999")).not.toBe(undefined);
    });

    it("validateDomain valid", () => {
-        expect(validateDomain("example.com"))
-            .toBe(undefined);
-        expect(validateDomain("one.two.three"))
-            .toBe(undefined);
+        expect(validateDomain("example.com")).toBe(undefined);
+        expect(validateDomain("one.two.three")).toBe(undefined);
    });
    it("validateDomain invalid", () => {
-        expect(validateDomain("test/"))
-            .not
-            .toBe(undefined);
-        expect(validateDomain("."))
-            .not
-            .toBe(undefined);
+        expect(validateDomain("test/")).not.toBe(undefined);
+        expect(validateDomain(".")).not.toBe(undefined);
    });

    it("validateDUID valid", () => {
-        expect(validateDUID("abcdefAB"))
-            .toBe(undefined);
-        expect(validateDUID("ABCDEF12"))
-            .toBe(undefined);
-        expect(validateDUID("ABCDEF12AB"))
-            .toBe(undefined);
+        expect(validateDUID("abcdefAB")).toBe(undefined);
+        expect(validateDUID("ABCDEF12")).toBe(undefined);
+        expect(validateDUID("ABCDEF12AB")).toBe(undefined);
    });
    it("validateDUID invalid", () => {
-        expect(validateDUID("gggggggg"))
-            .not
-            .toBe(undefined);
-        expect(validateDUID("abcdefABa"))
-            .not
-            .toBe(undefined);
+        expect(validateDUID("gggggggg")).not.toBe(undefined);
+        expect(validateDUID("abcdefABa")).not.toBe(undefined);
    });

    it("validateMAC valid", () => {
-        expect(validateMAC("00:D0:56:F2:B5:12"))
-            .toBe(undefined);
-        expect(validateMAC("00:26:DD:14:C4:EE"))
-            .toBe(undefined);
-        expect(validateMAC("06:00:00:00:00:00"))
-            .toBe(undefined);
+        expect(validateMAC("00:D0:56:F2:B5:12")).toBe(undefined);
+        expect(validateMAC("00:26:DD:14:C4:EE")).toBe(undefined);
+        expect(validateMAC("06:00:00:00:00:00")).toBe(undefined);
    });
    it("validateMAC invalid", () => {
-        expect(validateMAC("00:00:00:00:00:0G"))
-            .not
-            .toBe(undefined);
-        expect(validateMAC("06:00:00:00:00:00:00"))
-            .not
-            .toBe(undefined);
+        expect(validateMAC("00:00:00:00:00:0G")).not.toBe(undefined);
+        expect(validateMAC("06:00:00:00:00:00:00")).not.toBe(undefined);
    });
 });
--- a/src/form/components/ForisForm.js
+++ b/src/form/components/ForisForm.js
@ -59,12 +59,18 @@ ForisForm.propTypes = {

    // eslint-disable-next-line react/no-unused-prop-types
    customWSProp(props) {
-        const wsModuleIsSpecified = !!(props.forisConfig && props.forisConfig.wsModule);
+        const wsModuleIsSpecified = !!(
+            props.forisConfig && props.forisConfig.wsModule
+        );
        if (props.ws && !wsModuleIsSpecified) {
-            return new Error("forisConfig.wsModule should be specified when ws object is passed.");
+            return new Error(
+                "forisConfig.wsModule should be specified when ws object is passed."
+            );
        }
        if (!props.ws && wsModuleIsSpecified) {
-            return new Error("forisConfig.wsModule is specified without passing ws object.");
+            return new Error(
+                "forisConfig.wsModule is specified without passing ws object."
+            );
        }
    },
 };
@ -95,7 +101,10 @@ export function ForisForm({
    formReference,
    children,
 }) {
-    const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
+    const [formState, onFormChangeHandler, resetFormData] = useForm(
+        validator,
+        prepData
+    );
    const [setAlert, dismissAlert] = useAlert();

    const [forisModuleState] = useForisModule(ws, forisConfig);
@ -141,29 +150,39 @@ export function ForisForm({
        return SUBMIT_BUTTON_STATES.READY;
    }

-    const formIsDisabled = (disabled
-        || forisModuleState.state === API_STATE.SENDING
-        || postState.state === API_STATE.SENDING);
+    const formIsDisabled =
+        disabled ||
+        forisModuleState.state === API_STATE.SENDING ||
+        postState.state === API_STATE.SENDING;
    const submitButtonIsDisabled = disabled || !!formState.errors;

-    const childrenWithFormProps = React.Children.map(
-        children,
-        (child) => React.cloneElement(child, {
+    const childrenWithFormProps = React.Children.map(children, (child) =>
+        React.cloneElement(child, {
            initialData: formState.initialData,
            formData: formState.data,
            formErrors: formState.errors,
            setFormValue: onFormChangeHandler,
            disabled: formIsDisabled,
-        }),
+        })
    );

    const onSubmit = onSubmitOverridden
-        ? onSubmitOverridden(formState.data, onFormChangeHandler, onSubmitHandler)
+        ? onSubmitOverridden(
+              formState.data,
+              onFormChangeHandler,
+              onSubmitHandler
+          )
        : onSubmitHandler;

    function getMessageOnLeavingPage() {
-        if (JSON.stringify(formState.data) === JSON.stringify(formState.initialData)) return true;
-        return _("Changes you made may not be saved. Are you sure you want to leave?");
+        if (
+            JSON.stringify(formState.data) ===
+            JSON.stringify(formState.initialData)
+        )
+            return true;
+        return _(
+            "Changes you made may not be saved. Are you sure you want to leave?"
+        );
    }

    return (
--- a/src/form/components/ForisForm.md
+++ b/src/form/components/ForisForm.md
@ -1,8 +1,11 @@
-`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic and provides with children required props.
-This component structure provides comfort API and allows to create typical Foris module forms easily.
+`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic
+and provides with children required props. This component structure provides
+comfort API and allows to create typical Foris module forms easily.

 ## Example of usage of `<ForisForm/>`
+
 You can pass more forms as children.
+
 ```js
 <ForisForm
    ws={ws}
@ -24,7 +27,10 @@ You can pass more forms as children.

 ```js
 export default function MACForm({
-    formData, formErrors, setFormValue, ...props
+    formData,
+    formErrors,
+    setFormValue,
+    ...props
 }) {
    const macSettings = formData.mac_settings;
    const errors = (formErrors || {}).mac_settings || {};
@ -35,38 +41,33 @@ export default function MACForm({
                label={_("Custom MAC address")}
                checked={macSettings.custom_mac_enabled}
                helpText={HELP_TEXTS.custom_mac_enabled}
-
-                onChange={setFormValue(
-                    (value) => ({ mac_settings: { custom_mac_enabled: { $set: value } } }),
-                )}
-
+                onChange={setFormValue((value) => ({
+                    mac_settings: { custom_mac_enabled: { $set: value } },
+                }))}
                {...props}
            />
-            {macSettings.custom_mac_enabled
-                ? (
+            {macSettings.custom_mac_enabled ? (
                <TextInput
                    label={_("MAC address")}
                    value={macSettings.custom_mac || ""}
                    helpText={HELP_TEXTS.custom_mac}
                    error={errors.custom_mac}
                    required
-
-                        onChange={setFormValue(
-                            (value) => ({ mac_settings: { custom_mac: { $set: value } } }),
-                        )}
-
+                    onChange={setFormValue((value) => ({
+                        mac_settings: { custom_mac: { $set: value } },
+                    }))}
                    {...props}
                />
-                )
-                : null}
+            ) : null}
        </>
    );
 }
 ```
+
 The <ForisForm/> passes subsequent `props` to the child components.

 | Prop           | Type   | Description                                                                |
-|----------------|--------|----------------------------------------------------------------------------|
+| -------------- | ------ | -------------------------------------------------------------------------- |
 | `formData`     | object | Data returned from API.                                                    |
 | `formErrors`   | object | Errors returned after validation via validator.                            |
 | `setFormValue` | func   | Function for data update. It takes update rule as arg (see example above). |
--- a/src/form/components/SubmitButton.js
+++ b/src/form/components/SubmitButton.js
@ -18,8 +18,7 @@ export const STATES = {

 SubmitButton.propTypes = {
    disabled: PropTypes.bool,
-    state: PropTypes.oneOf(Object.keys(STATES)
-        .map((key) => STATES[key])),
+    state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
 };

 export function SubmitButton({ disabled, state, ...props }) {
@ -44,7 +43,6 @@ export function SubmitButton({ disabled, state, ...props }) {
            loading={loadingSubmitButton}
            disabled={disableSubmitButton}
            forisFormSize
-
            {...props}
        >
            {labelSubmitButton}
--- a/src/form/hooks.js
+++ b/src/form/hooks.js
@ -23,29 +23,31 @@ export function useForm(validator, dataPreprocessor) {
        errors: {},
    });

-    const onFormReload = useCallback((data) => {
+    const onFormReload = useCallback(
+        (data) => {
            dispatch({
                type: FORM_ACTIONS.resetData,
                data,
                dataPreprocessor,
                validator,
            });
-    }, [dataPreprocessor, validator]);
+        },
+        [dataPreprocessor, validator]
+    );

-    const onFormChangeHandler = useCallback((updateRule) => (event) => {
+    const onFormChangeHandler = useCallback(
+        (updateRule) => (event) => {
            dispatch({
                type: FORM_ACTIONS.updateValue,
                value: getChangedValue(event.target),
                updateRule,
                validator,
            });
-    }, [validator]);
+        },
+        [validator]
+    );

-    return [
-        state,
-        onFormChangeHandler,
-        onFormReload,
-    ];
+    return [state, onFormChangeHandler, onFormReload];
 }

 function formReducer(state, action) {
@ -64,7 +66,9 @@ function formReducer(state, action) {
                return { ...state, initialData: state.data };
            }

-        const data = action.dataPreprocessor ? action.dataPreprocessor(action.data) : action.data;
+            const data = action.dataPreprocessor
+                ? action.dataPreprocessor(action.data)
+                : action.data;
            return {
                data,
                initialData: data,
--- a/src/index.js
+++ b/src/index.js
@ -30,18 +30,11 @@ export { PasswordInput } from "./bootstrap/PasswordInput";
 export { Radio, RadioSet } from "./bootstrap/RadioSet";
 export { Select } from "./bootstrap/Select";
 export { TextInput } from "./bootstrap/TextInput";
-export { formFieldsSize } from "./bootstrap/constants";
+export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants";
+export { Switch } from "./bootstrap/Switch";

-export {
-    Spinner,
-    SpinnerElement,
-} from "./bootstrap/Spinner";
-export {
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-} from "./bootstrap/Modal";
+export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
+export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";

 // Common
 export { RebootButton } from "./common/RebootButton";
@ -49,7 +42,10 @@ export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";

 // Form
 export { ForisForm } from "./form/components/ForisForm";
-export { SubmitButton, STATES as SUBMIT_BUTTON_STATES } from "./form/components/SubmitButton";
+export {
+    SubmitButton,
+    STATES as SUBMIT_BUTTON_STATES,
+} from "./form/components/SubmitButton";
 export { useForisModule, useForm } from "./form/hooks";

 // WebSockets
@ -58,9 +54,18 @@ export { WebSockets } from "./webSockets/WebSockets";

 // Utils
 export { Portal } from "./utils/Portal";
-export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "./utils/objectHelpers";
 export {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
+    undefinedIfEmpty,
+    withoutUndefinedKeys,
+    onlySpecifiedKeys,
+} from "./utils/objectHelpers";
+export {
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
 } from "./utils/conditionalHOCs";
 export { ErrorMessage } from "./utils/ErrorMessage";
 export { useClickOutside } from "./utils/hooks";
--- a/src/testUtils/customTestRender.js
+++ b/src/testUtils/customTestRender.js
@ -26,15 +26,14 @@ function Wrapper({ children }) {
    return (
        <AlertContextMock>
            <StaticRouter>
-                <UIDReset>
-                    {children}
-                </UIDReset>
+                <UIDReset>{children}</UIDReset>
            </StaticRouter>
        </AlertContextMock>
    );
 }

-const customTestRender = (ui, options) => render(ui, { wrapper: Wrapper, ...options });
+const customTestRender = (ui, options) =>
+    render(ui, { wrapper: Wrapper, ...options });

 // re-export everything
 export * from "@testing-library/react";
--- a/src/testUtils/network.js
+++ b/src/testUtils/network.js
@ -8,5 +8,7 @@
 import mockAxios from "jest-mock-axios";

 export function mockJSONError(data) {
-    mockAxios.mockError({ response: { data, headers: { "content-type": "application/json" } } });
+    mockAxios.mockError({
+        response: { data, headers: { "content-type": "application/json" } },
+    });
 }
--- a/src/utils/ErrorMessage.js
+++ b/src/utils/ErrorMessage.js
@ -17,7 +17,5 @@ ErrorMessage.defaultProps = {
 };

 export function ErrorMessage({ message }) {
-    return (
-        <p className="text-center text-danger">{message}</p>
-    );
+    return <p className="text-center text-danger">{message}</p>;
 }
--- a/src/utils/tests/conditionalHOCs.test.js
+++ b/src/utils/tests/conditionalHOCs.test.js
@ -9,7 +9,12 @@ import React from "react";
 import { render } from "customTestRender";
 import { API_STATE } from "api/utils";
 import {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
 } from "../conditionalHOCs";

 describe("conditional HOCs", () => {
@ -52,14 +57,18 @@ describe("conditional HOCs", () => {
        it("should render First component", () => {
            const withAlternative = withSending(Alternative);
            const FirstWithConditional = withAlternative(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SUCCESS} />
+            );
            expect(getByText("First")).toBeDefined();
        });

        it("should render Alternative component", () => {
            const withAlternative = withSending(Alternative);
            const FirstWithConditional = withAlternative(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SENDING} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SENDING} />
+            );
            expect(getByText("Alternative")).toBeDefined();
        });
    });
@ -67,13 +76,17 @@ describe("conditional HOCs", () => {
    describe("withSpinnerOnSending", () => {
        it("should render First component", () => {
            const FirstWithConditional = withSpinnerOnSending(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SUCCESS} />
+            );
            expect(getByText("First")).toBeDefined();
        });

        it("should render spinner", () => {
            const FirstWithConditional = withSpinnerOnSending(First);
-            const { container } = render(<FirstWithConditional apiState={API_STATE.SENDING} />);
+            const { container } = render(
+                <FirstWithConditional apiState={API_STATE.SENDING} />
+            );
            expect(container).toMatchSnapshot();
        });
    });
@ -97,13 +110,17 @@ describe("conditional HOCs", () => {
    describe("withErrorMessage", () => {
        it("should render First component", () => {
            const FirstWithConditional = withErrorMessage(First);
-            const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
+            const { getByText } = render(
+                <FirstWithConditional apiState={API_STATE.SUCCESS} />
+            );
            expect(getByText("First")).toBeDefined();
        });

        it("should render error message", () => {
            const FirstWithConditional = withErrorMessage(First);
-            const { container } = render(<FirstWithConditional apiState={API_STATE.ERROR} />);
+            const { container } = render(
+                <FirstWithConditional apiState={API_STATE.ERROR} />
+            );
            expect(container).toMatchSnapshot();
        });
    });
--- a/src/utils/tests/datetime.test.js
+++ b/src/utils/tests/datetime.test.js
@ -10,42 +10,40 @@ import { toLocaleDateString } from "../datetime";
 describe("toLocaleDateString", () => {
    it("should work with different locale", () => {
        global.ForisTranslations = { locale: "fr" };
-        expect(
-            toLocaleDateString("2020-02-20T12:51:36+00:00")
-        ).toBe("20 février 2020 12:51");
+        expect(toLocaleDateString("2020-02-20T12:51:36+00:00")).toBe(
+            "20 février 2020 12:51"
+        );
        global.ForisTranslations = { locale: "en" };
-    })
+    });

    it("should convert with default format", () => {
-        expect(
-            toLocaleDateString("2020-02-20T12:51:36+00:00")
-        ).toBe("February 20, 2020 12:51 PM");
+        expect(toLocaleDateString("2020-02-20T12:51:36+00:00")).toBe(
+            "February 20, 2020 12:51 PM"
+        );
    });

    it("should convert with custom input format", () => {
        expect(
-            toLocaleDateString(
-                "2020-02-20 12:51:36 +0000",
-                { inputFormat: "YYYY-MM-DD HH:mm:ss Z" },
-            )
+            toLocaleDateString("2020-02-20 12:51:36 +0000", {
+                inputFormat: "YYYY-MM-DD HH:mm:ss Z",
+            })
        ).toBe("February 20, 2020 12:51 PM");
    });

    it("should convert with custom output format", () => {
        expect(
-            toLocaleDateString(
-                "2020-02-20T12:51:36+00:00",
-                { outputFormat: "LL" },
-            )
+            toLocaleDateString("2020-02-20T12:51:36+00:00", {
+                outputFormat: "LL",
+            })
        ).toBe("February 20, 2020");
    });

    it("should convert with custom input and output format", () => {
        expect(
-            toLocaleDateString(
-                "2020-02-20 12:51:36 +0000",
-                { inputFormat: "YYYY-MM-DD HH:mm:ss Z", outputFormat: "LL" },
-            )
+            toLocaleDateString("2020-02-20 12:51:36 +0000", {
+                inputFormat: "YYYY-MM-DD HH:mm:ss Z",
+                outputFormat: "LL",
+            })
        ).toBe("February 20, 2020");
    });
 });
--- a/src/utils/conditionalHOCs.js
+++ b/src/utils/conditionalHOCs.js
@ -24,8 +24,8 @@ function withEither(conditionalFn, Either) {

 function isSending(props) {
    if (Array.isArray(props.apiState)) {
-        return props.apiState.some(
-            (state) => [API_STATE.INIT, API_STATE.SENDING].includes(state),
+        return props.apiState.some((state) =>
+            [API_STATE.INIT, API_STATE.SENDING].includes(state)
        );
    }
    return [API_STATE.INIT, API_STATE.SENDING].includes(props.apiState);
@ -38,15 +38,18 @@ const withSpinnerOnSending = withSpinner(isSending);
 // Error handling

 const withError = (conditionalFn) => withEither(conditionalFn, ErrorMessage);
-const withErrorMessage = withError(
-    (props) => {
+const withErrorMessage = withError((props) => {
    if (Array.isArray(props.apiState)) {
        return props.apiState.includes(API_STATE.ERROR);
    }
    return props.apiState === API_STATE.ERROR;
-    },
-);
+});

 export {
-    withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
+    withEither,
+    withSpinner,
+    withSending,
+    withSpinnerOnSending,
+    withError,
+    withErrorMessage,
 };
--- a/src/utils/datetime.js
+++ b/src/utils/datetime.js
@ -1,8 +1,9 @@
 import moment from "moment";

-export function toLocaleDateString(date, { inputFormat, outputFormat = "LLL" } = {}) {
+export function toLocaleDateString(
+    date,
+    { inputFormat, outputFormat = "LLL" } = {}
+) {
    const parsedDate = inputFormat ? moment(date, inputFormat) : moment(date);
-    return parsedDate
-        .locale(ForisTranslations.locale)
-        .format(outputFormat);
+    return parsedDate.locale(ForisTranslations.locale).format(outputFormat);
 }
--- a/src/utils/forisUrls.js
+++ b/src/utils/forisUrls.js
@ -21,9 +21,13 @@ export const ForisURLs = {
    },

    // Notifications links are used with <Link/> inside Router, thus url subdir is not required.
-    notifications: "/notifications",
+    overview: "/overview",
+    notifications: "/overview#notifications",
    notificationsSettings: "/administration/notifications-settings",

+    approveUpdates: "/package-management/updates",
+    languages: "/package-management/languages",
+    rebootPage: "/reforis/administration/reboot",
    luci: "/cgi-bin/luci",

    // API
--- a/src/utils/hooks.js
+++ b/src/utils/hooks.js
@ -8,11 +8,17 @@
 import { useState, useEffect } from "react";

 /** Execute callback when condition is set to true. */
-export function useConditionalTimeout({ callback, timeout = 125 }, ...callbackArgs) {
+export function useConditionalTimeout(
+    { callback, timeout = 125 },
+    ...callbackArgs
+) {
    const [condition, setCondition] = useState(false);
    useEffect(() => {
        if (condition) {
-            const interval = setTimeout(() => callback(...callbackArgs), timeout);
+            const interval = setTimeout(
+                () => callback(...callbackArgs),
+                timeout
+            );
            return () => setTimeout(interval);
        }
    }, [condition, callback, timeout, callbackArgs]);
--- a/src/utils/objectHelpers.js
+++ b/src/utils/objectHelpers.js
@ -15,21 +15,18 @@ export function undefinedIfEmpty(instance) {

 /** Return object without keys that have undefined value. */
 export function withoutUndefinedKeys(instance) {
-    return Object.keys(instance).reduce(
-        (accumulator, key) => {
+    return Object.keys(instance).reduce((accumulator, key) => {
        if (instance[key] !== undefined) {
            accumulator[key] = instance[key];
        }
        return accumulator;
-        },
-        {},
-    );
+    }, {});
 }

 /** Return copy of passed object that has only desired keys. */
 export function onlySpecifiedKeys(object, desiredKeys) {
-    return desiredKeys.reduce(
-        (accumulator, key) => { accumulator[key] = object[key]; return accumulator; },
-        {},
-    );
+    return desiredKeys.reduce((accumulator, key) => {
+        accumulator[key] = object[key];
+        return accumulator;
+    }, {});
 }
--- a/src/utils/validations.js
+++ b/src/utils/validations.js
@ -30,7 +30,10 @@ const REs = {
 };

 const createValidator = (fieldType) => (value) => {
-    if (value && value !== "") return REs[fieldType].test(value) ? undefined : ERROR_MESSAGES[fieldType];
+    if (value && value !== "")
+        return REs[fieldType].test(value)
+            ? undefined
+            : ERROR_MESSAGES[fieldType];
 };

 const validateIPv4Address = createValidator("IPv4");
--- a/src/webSockets/WebSockets.js
+++ b/src/webSockets/WebSockets.js
@ -22,7 +22,9 @@ export class WebSockets {
        this.ws = new WebSocket(URL);
        this.ws.onerror = (e) => {
            if (window.location.pathname !== ForisURLs.login) {
-                console.error("WS: Error observed, you aren't logged probably.");
+                console.error(
+                    "WS: Error observed, you aren't logged probably."
+                );
                window.location.replace(ForisURLs.login);
            }
            console.error(`WS: Error: ${e}`);
@ -111,7 +113,9 @@ export class WebSockets {
            chain = this.callbacks[json.module][json.action];
        } catch (error) {
            if (error instanceof TypeError) {
-                console.warn(`Callback for this message wasn't found:${error.data}`);
+                console.warn(
+                    `Callback for this message wasn't found:${error.data}`
+                );
            } else throw error;
        }

--- a/src/webSockets/hooks.js
+++ b/src/webSockets/hooks.js
@ -7,7 +7,12 @@

 import { useEffect, useState } from "react";

-export function useWSForisModule(ws, module, action = "update_settings", controllerID) {
+export function useWSForisModule(
+    ws,
+    module,
+    action = "update_settings",
+    controllerID
+) {
    const [data, setData] = useState(null);

    useEffect(() => {
@ -18,14 +23,16 @@ export function useWSForisModule(ws, module, action = "update_settings", control

        function callback(message) {
            // Accept only messages addressed to device with passed controller ID.
-            if (controllerID !== undefined && controllerID !== message.controller_id) {
+            if (
+                controllerID !== undefined &&
+                controllerID !== message.controller_id
+            ) {
                return;
            }
            setData(message.data);
        }

-        ws.subscribe(module)
-            .bind(module, action, callback);
+        ws.subscribe(module).bind(module, action, callback);

        return () => {
            ws.unbind(module, action, callback);
--- a/styleguide.config.js
+++ b/styleguide.config.js
@ -30,9 +30,7 @@ module.exports = {
        },
        {
            name: "Alert Context",
-            components: [
-                "src/alertContext/AlertContext.js",
-            ],
+            components: ["src/alertContext/AlertContext.js"],
            exampleMode: "expand",
            usageMode: "expand",
        },
@ -42,16 +40,20 @@ module.exports = {
            components: "src/bootstrap/*.js",
            exampleMode: "expand",
            usageMode: "expand",
-            ignore: [
-                "src/bootstrap/constants.js",
-            ],
+            ignore: ["src/bootstrap/constants.js"],
        },
    ],
    require: [
        "babel-polyfill",
        path.join(__dirname, "src/testUtils/mockGlobals"),
-        path.join(__dirname, "node_modules/bootstrap/dist/css/bootstrap.min.css"),
-        path.join(__dirname, "node_modules/@fortawesome/fontawesome-free/css/all.min.css"),
+        path.join(
+            __dirname,
+            "node_modules/bootstrap/dist/css/bootstrap.min.css"
+        ),
+        path.join(
+            __dirname,
+            "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        ),
    ],
    webpackConfig: {
        module: {
@ -60,10 +62,12 @@ module.exports = {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "babel-loader",
-                }, {
+                },
+                {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader"],
-                }, {
+                },
+                {
                    test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
                    loader: "file-loader",
                },