Merge branch 'fix-wifi-layout' into 'dev'

Fix Wi-Fi layout

See merge request turris/reforis/foris-js!145

package.json

@@ -14,7 +14,7 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
-        "axios": "^0.19.2",
+        "axios": "^0.21.1",
         "immutability-helper": "3.0.1",
         "moment": "^2.24.0",
         "qrcode.react": "^0.9.3",
@@ -29,7 +29,7 @@
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.8.4",
+        "@babel/cli": "^7.12.10",
         "@babel/core": "^7.9.0",
         "@babel/plugin-transform-runtime": "^7.9.0",
         "@babel/preset-env": "^7.9.0",
@@ -53,10 +53,10 @@
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
-        "react-styleguidist": "^10.6.2",
+        "react-styleguidist": "^11.1.5",
         "snapshot-diff": "^0.7.0",
         "style-loader": "^1.2.1",
-        "webpack": "^4.43.0"
+        "webpack": "^5.15.0"
     },
     "scripts": {
         "lint": "eslint src",

src/bootstrap/Modal.js

@@ -69,7 +69,7 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
             >
                 <div
                     ref={dialogRef}
-                    className={`modal-dialog ${modalSize} modal-dialog-centered ${
+                    className={`${modalSize.trim()} modal-dialog modal-dialog-centered ${
                         scrollable ? "modal-dialog-scrollable" : ""
                     }`.trim()}
                     role="document"

src/bootstrap/constants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 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.
@@ -7,5 +7,5 @@
 
 /** Bootstrap column size for form fields */
 // eslint-disable-next-line import/prefer-default-export
-export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-3";
+export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-4";
 export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 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.
@@ -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 { buttonFormFieldsSize } from "../../bootstrap/constants";
+import { formFieldsSize } from "../../bootstrap/constants";
 
 ResetWiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,
@@ -51,7 +51,7 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
     }
 
     return (
-        <>
+        <div className={formFieldsSize}>
             <h2>{_("Reset Wi-Fi Settings")}</h2>
             <p>
                 {_(`
@@ -59,7 +59,7 @@ If a number of wireless cards doesn't match, you may try to reset the Wi-Fi sett
 current Wi-Fi configuration and restore the default values.
         `)}
             </p>
-            <div className={`${buttonFormFieldsSize} text-right`}>
+            <div className="text-right">
                 <Button
                     className="btn-warning"
                     forisFormSize
@@ -70,6 +70,6 @@ current Wi-Fi configuration and restore the default values.
                     {_("Reset Wi-Fi Settings")}
                 </Button>
             </div>
-        </>
+        </div>
     );
 }

src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap

@@ -251,7 +251,7 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
 <DocumentFragment>
   <div
-    class="card p-4 col-sm-12 col-lg-12 p-0 mb-3"
+    class="card p-4 col-sm-12 col-lg-12 p-0 mb-4"
   >
     <form>
       <div
@@ -309,24 +309,28 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
       </div>
     </form>
   </div>
-  <h2>
+  <div
-    Reset Wi-Fi Settings
+    class="card p-4 col-sm-12 col-lg-12 p-0 mb-4"
-  </h2>
+  >
-  <p>
+    <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>
+    </p>
-  <div
+    <div
-    class="col-sm-12 col-lg-12 p-0 mb-3 text-right"
+      class="text-right"
-  >
-    <button
-      class="btn btn-warning col-sm-12 col-md-3 col-lg-2"
-      type="button"
     >
-      Reset Wi-Fi Settings
+      <button
-    </button>
+        class="btn btn-warning col-sm-12 col-md-3 col-lg-2"
+        type="button"
+      >
+        Reset Wi-Fi Settings
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;

src/common/__tests__/__snapshots__/RebootButton.test.js.snap

@@ -10,7 +10,7 @@ exports[`<RebootButton/> Render modal. 1`] = `
       role="dialog"
     >
       <div
-        class="modal-dialog  modal-dialog-centered"
+        class="modal-dialog modal-dialog-centered"
         role="document"
       >
         <div