fixup! Update Bootstrap library to version 5.3.x

Makefile

@@ -11,7 +11,6 @@ MSGID_BUGS_ADDRESS="tech.support@turris.cz"
 
 DEV_PYTHON=python3
 VENV_NAME?=venv
-JS_DIR=js
 VENV_BIN=$(shell pwd)/$(VENV_NAME)/bin
 
 .PHONY: all

src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap

@@ -2,51 +2,55 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="form-group"
 >
-  <input
-    checked=""
-    class="form-check-input"
-    id="1"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-checkbox "
   >
-    <small>
+    <input
-      Some help text
+      checked=""
-    </small>
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+      <small
+        class="form-text text-muted"
+      >
+        Some help text
+      </small>
+    </label>
   </div>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="form-group"
 >
-  <input
-    class="form-check-input"
-    id="1"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-checkbox "
   >
-    <small>
+    <input
-      Some help text
+      class="custom-control-input"
-    </small>
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+      <small
+        class="form-text text-muted"
+      >
+        Some help text
+      </small>
+    </label>
   </div>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -2,10 +2,9 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -19,31 +18,33 @@ exports[`<NumberInput/> Render number input 1`] = `
       type="number"
       value="1"
     />
-    <button
+    <div
-      aria-label="Increase"
+      class="input-group-append"
-      class="btn btn-outline-secondary"
-      type="button"
     >
-      <i
+      <button
-        class="fas fa-plus"
+        aria-label="Increase"
-      />
+        class="btn btn-outline-secondary"
-    </button>
+        type="button"
-    <button
+      >
-      aria-label="Decrease"
+        <i
-      class="btn btn-outline-secondary"
+          class="fas fa-plus"
-      type="button"
+        />
-    >
+      </button>
-      <i
+      <button
-        class="fas fa-minus"
+        aria-label="Decrease"
-      />
+        class="btn btn-outline-secondary"
-    </button>
+        type="button"
+      >
+        <i
+          class="fas fa-minus"
+        />
+      </button>
+    </div>
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap

@@ -2,10 +2,9 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -21,12 +20,10 @@ exports[`<PasswordInput/> Render password input 1`] = `
       value="Some password"
     />
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
     class="d-block"
@@ -11,63 +11,61 @@ exports[`<RadioSet/> Render radio set 1`] = `
     Radios set label
   </label>
   <div
-    class="mb-2"
+    class="custom-control custom-radio"
   >
     <input
       checked=""
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-0"
       name="test_name"
       type="radio"
       value="value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-0"
     >
       label
     </label>
   </div>
   <div
-    class="mb-2"
+    class="custom-control custom-radio"
   >
     <input
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-1"
       name="test_name"
       type="radio"
       value="another value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-1"
     >
       another label
     </label>
   </div>
   <div
-    class="mb-2"
+    class="custom-control custom-radio"
   >
     <input
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-2"
       name="test_name"
       type="radio"
       value="another on value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-2"
     >
       another one  label
     </label>
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/Select.test.js.snap

@@ -3,16 +3,15 @@
 exports[`<Select/> Test with snapshot. 1`] = `
 <div>
   <div
-    class="mb-3"
+    class="form-group"
   >
     <label
-      class="form-label"
       for="1"
     >
       Test label
     </label>
     <select
-      class="form-select"
+      class="custom-select"
       id="1"
     >
       <option
@@ -31,13 +30,11 @@ exports[`<Select/> Test with snapshot. 1`] = `
         three
       </option>
     </select>
-    <div
+    <small
-      class="form-text"
+      class="form-text text-muted"
     >
-      <small>
+      Help text
-        Help text
+    </small>
-      </small>
-    </div>
   </div>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/Switch.test.js.snap

@@ -2,25 +2,26 @@
 
 exports[`<Switch/> Render switch 1`] = `
 <div
-  class="form-check form-switch mb-3 null"
+  class="form-group"
 >
-  <input
-    checked=""
-    class="form-check-input"
-    id="1"
-    role="switch"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-switch"
   >
-    <small>
+    <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>
@@ -29,24 +30,25 @@ exports[`<Switch/> Render switch 1`] = `
 
 exports[`<Switch/> Render uncheked switch 1`] = `
 <div
-  class="form-check form-switch mb-3 null"
+  class="form-group"
 >
-  <input
-    class="form-check-input"
-    id="1"
-    role="switch"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-switch"
   >
-    <small>
+    <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>

src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap

@@ -2,10 +2,9 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -20,12 +19,10 @@ exports[`<TextInput/> Render text input 1`] = `
       value="Some text"
     />
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

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

@@ -5,7 +5,7 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
 - First value
 + Second value
 
-@@ -243,207 +243,95 @@
+@@ -241,207 +241,95 @@
               value=\\"0\\"
             >
               auto
@@ -255,51 +255,53 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
   >
     <form>
       <div
-        class="form-check form-switch mb-3 d-flex align-items-center"
+        class="form-group switch"
       >
-        <input
+        <div
-          class="form-check-input me-2"
+          class="custom-control custom-switch custom-control-inline switch-heading"
-          id="1"
-          role="switch"
-          type="checkbox"
-        />
-        <label
-          class="form-check-label"
-          for="1"
         >
-          <h2
+          <input
-            class="mb-0"
+            class="custom-control-input"
+            id="1"
+            type="checkbox"
+          />
+          <label
+            class="custom-control-label"
+            for="1"
           >
-            Wi-Fi 1
+            <h2>
-          </h2>
+              Wi-Fi 1
-        </label>
+            </h2>
+          </label>
+        </div>
       </div>
       <hr />
       <div
-        class="form-check form-switch mb-3 d-flex align-items-center"
+        class="form-group switch"
       >
-        <input
+        <div
-          class="form-check-input me-2"
+          class="custom-control custom-switch custom-control-inline switch-heading"
-          id="2"
-          role="switch"
-          type="checkbox"
-        />
-        <label
-          class="form-check-label"
-          for="2"
         >
-          <h2
+          <input
-            class="mb-0"
+            class="custom-control-input"
+            id="2"
+            type="checkbox"
+          />
+          <label
+            class="custom-control-label"
+            for="2"
           >
-            Wi-Fi 2
+            <h2>
-          </h2>
+              Wi-Fi 2
-        </label>
+            </h2>
+          </label>
+        </div>
       </div>
       <div
         class="text-end"
       >
         <button
-          class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+          class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
           type="submit"
         >
           <span>
@@ -322,7 +324,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
       class="text-end"
     >
       <button
-        class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+        class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
         type="button"
       >
         <span>
@@ -339,17 +341,16 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value
 
-@@ -527,10 +527,94 @@
+@@ -524,10 +524,92 @@
-            <small>
+            >
               Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to access the internet, but aren't allowed to access other devices and the configuration interface of the router. Parameters of the guest network can be set in the Guest network tab.
             </small>
           </div>
         </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
-+           class=\\"form-label\\"
 +           for=\\"24\\"
 +         >
 +           SSID
@@ -379,19 +380,16 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +             </button>
 +           </div>
 +         </div>
-+         <div
++         <small
-+           class=\\"form-text\\"
++           class=\\"form-text text-muted\\"
 +         >
-+           <small>
++           SSID which contains non-standard characters could cause problems on some devices.
-+             SSID which contains non-standard characters could cause problems on some devices.
++         </small>
-+           </small>
-+         </div>
 +       </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
-+           class=\\"form-label\\"
 +           for=\\"25\\"
 +         >
 +           Password
@@ -401,45 +399,47 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +         >
 +           <input
 +             autocomplete=\\"current-password\\"
-+             class=\\"form-control is-invalid\\"
++             class=\\"form-control  is-invalid\\"
 +             id=\\"25\\"
 +             required=\\"\\"
 +             type=\\"password\\"
 +             value=\\"\\"
 +           />
-+           <button
++           <div
-+             class=\\"input-group-text\\"
++             class=\\"input-group-append\\"
-+             type=\\"button\\"
 +           >
-+             <i
++             <button
-+               class=\\"fa fa-eye\\"
++               class=\\"input-group-text\\"
-+             />
++               type=\\"button\\"
-+           </button>
++             >
++               <i
++                 class=\\"fa fa-eye\\"
++               />
++             </button>
++           </div>
 +         </div>
 +         <div
 +           class=\\"invalid-feedback\\"
 +         >
 +           Password must contain at least 8 symbols
 +         </div>
-+         <div
++         <small
-+           class=\\"form-text\\"
++           class=\\"form-text text-muted\\"
 +         >
-+           <small>
++           WPA2/3 pre-shared key, that is required to connect to the network.
-+             WPA2/3 pre-shared key, that is required to connect to the network.
++         </small>
-+           </small>
-+         </div>
 +       </div>
         <hr />
         <div
-          class=\\"form-check form-switch mb-3 d-flex align-items-center\\"
+          class=\\"form-group switch\\"
         >
-          <input
+          <div
-@@ -553,10 +637,11 @@
+@@ -551,10 +633,11 @@
         <div
           class=\\"text-end\\"
         >
           <button
-            class=\\"btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"
+            class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"
 +           disabled=\\"\\"
             type=\\"submit\\"
           >
@@ -453,17 +453,16 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 - First value
 + Second value
 
-@@ -21,10 +21,516 @@
+@@ -22,10 +22,512 @@
-            >
+                Wi-Fi 1
-              Wi-Fi 1
+              </h2>
-            </h2>
+            </label>
-          </label>
+          </div>
         </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
-+           class=\\"form-label\\"
 +           for=\\"4\\"
 +         >
 +           SSID
@@ -478,31 +477,32 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             type=\\"text\\"
 +             value=\\"TestSSID1\\"
 +           />
-+           <button
++           <div
-+             class=\\"input-group-text\\"
++             class=\\"input-group-append\\"
-+             type=\\"button\\"
 +           >
-+             <img
++             <button
-+               alt=\\"QR\\"
++               class=\\"input-group-text\\"
-+               src=\\"/reforis/static/reforis/imgs/QR_icon.svg\\"
++               type=\\"button\\"
-+               style=\\"opacity: 0.67;\\"
++             >
-+               width=\\"20\\"
++               <img
-+             />
++                 alt=\\"QR\\"
-+           </button>
++                 src=\\"/reforis/static/reforis/imgs/QR_icon.svg\\"
++                 style=\\"opacity: 0.67;\\"
++                 width=\\"20\\"
++               />
++             </button>
++           </div>
 +         </div>
-+         <div
++         <small
-+           class=\\"form-text\\"
++           class=\\"form-text text-muted\\"
 +         >
-+           <small>
++           SSID which contains non-standard characters could cause problems on some devices.
-+             SSID which contains non-standard characters could cause problems on some devices.
++         </small>
-+           </small>
-+         </div>
 +       </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
-+           class=\\"form-label\\"
 +           for=\\"5\\"
 +         >
 +           Password
@@ -518,48 +518,51 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             type=\\"password\\"
 +             value=\\"TestPass\\"
 +           />
-+           <button
++           <div
-+             class=\\"input-group-text\\"
++             class=\\"input-group-append\\"
-+             type=\\"button\\"
 +           >
-+             <i
++             <button
-+               class=\\"fa fa-eye\\"
++               class=\\"input-group-text\\"
-+             />
++               type=\\"button\\"
-+           </button>
++             >
++               <i
++                 class=\\"fa fa-eye\\"
++               />
++             </button>
++           </div>
 +         </div>
-+         <div
++         <small
-+           class=\\"form-text\\"
++           class=\\"form-text text-muted\\"
 +         >
-+           <small>
++           WPA2/3 pre-shared key, that is required to connect to the network.
-+             WPA2/3 pre-shared key, that is required to connect to the network.
++         </small>
-+           </small>
-+         </div>
 +       </div>
 +       <div
-+         class=\\"form-check form-switch mb-3 null\\"
++         class=\\"form-group\\"
 +       >
-+         <input
-+           class=\\"form-check-input\\"
-+           id=\\"6\\"
-+           role=\\"switch\\"
-+           type=\\"checkbox\\"
-+         />
-+         <label
-+           class=\\"form-check-label\\"
-+           for=\\"6\\"
-+         >
-+           Hide SSID
-+         </label>
 +         <div
-+           class=\\"form-text\\"
++           class=\\"custom-control custom-switch\\"
 +         >
-+           <small>
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"6\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"6\\"
++           >
++             Hide SSID
++           </label>
++           <small
++             class=\\"form-text text-muted mt-0 mb-3\\"
++           >
 +             If set, network is not visible when scanning for available networks.
 +           </small>
 +         </div>
 +       </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
 +           class=\\"d-block\\"
@@ -568,59 +571,56 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           GHz
 +         </label>
 +         <div
-+           class=\\"mb-2 form-check form-check-inline\\"
++           class=\\"custom-control custom-radio custom-control-inline\\"
 +         >
 +           <input
-+             class=\\"form-check-input me-2\\"
++             class=\\"custom-control-input\\"
 +             id=\\"hwmode-0-0\\"
 +             name=\\"hwmode-0\\"
 +             type=\\"radio\\"
 +             value=\\"11g\\"
 +           />
 +           <label
-+             class=\\"form-check-label\\"
++             class=\\"custom-control-label\\"
 +             for=\\"hwmode-0-0\\"
 +           >
 +             2.4
 +           </label>
 +         </div>
 +         <div
-+           class=\\"mb-2 form-check form-check-inline\\"
++           class=\\"custom-control custom-radio custom-control-inline\\"
 +         >
 +           <input
 +             checked=\\"\\"
-+             class=\\"form-check-input me-2\\"
++             class=\\"custom-control-input\\"
 +             id=\\"hwmode-0-1\\"
 +             name=\\"hwmode-0\\"
 +             type=\\"radio\\"
 +             value=\\"11a\\"
 +           />
 +           <label
-+             class=\\"form-check-label\\"
++             class=\\"custom-control-label\\"
 +             for=\\"hwmode-0-1\\"
 +           >
 +             5
 +           </label>
 +         </div>
-+         <div
++         <small
-+           class=\\"form-text\\"
++           class=\\"form-text text-muted\\"
 +         >
-+           <small>
++           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 does not carry so well indoors.
-+             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 does not carry so well indoors.
++         </small>
-+           </small>
-+         </div>
 +       </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
-+           class=\\"form-label\\"
 +           for=\\"8\\"
 +         >
 +           802.11n/ac/ax mode
 +         </label>
 +         <select
-+           class=\\"form-select\\"
++           class=\\"custom-select\\"
 +           id=\\"8\\"
 +         >
 +           <option
@@ -654,25 +654,22 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             802.11ac - 80 MHz wide channel
 +           </option>
 +         </select>
-+         <div
++         <small
-+           class=\\"form-text\\"
++           class=\\"form-text text-muted\\"
 +         >
-+           <small>
++           Change this to adjust 802.11n/ac/ax mode of operation. 802.11n with 40 MHz wide channels can yield higher throughput but can cause more interference in the network. If you don't know what to choose, use the default option with 20 MHz wide channel.
-+             Change this to adjust 802.11n/ac/ax mode of operation. 802.11n with 40 MHz wide channels can yield higher throughput but can cause more interference in the network. If you don't know what to choose, use the default option with 20 MHz wide channel.
++         </small>
-+           </small>
-+         </div>
 +       </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
-+           class=\\"form-label\\"
 +           for=\\"9\\"
 +         >
 +           Channel
 +         </label>
 +         <select
-+           class=\\"form-select\\"
++           class=\\"custom-select\\"
 +           id=\\"9\\"
 +         >
 +           <option
@@ -883,16 +880,15 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         </select>
 +       </div>
 +       <div
-+         class=\\"mb-3\\"
++         class=\\"form-group\\"
 +       >
 +         <label
-+           class=\\"form-label\\"
 +           for=\\"10\\"
 +         >
 +           Encryption
 +         </label>
 +         <select
-+           class=\\"form-select\\"
++           class=\\"custom-select\\"
 +           id=\\"10\\"
 +         >
 +           <option
@@ -911,63 +907,63 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +             WPA2 only
 +           </option>
 +         </select>
-+         <div
++         <small
-+           class=\\"form-text\\"
++           class=\\"form-text text-muted\\"
 +         >
-+           <small>
++           The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2.
-+             The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2.
++         </small>
-+           </small>
-+         </div>
 +       </div>
 +       <div
-+         class=\\"form-check form-switch mb-3 null\\"
++         class=\\"form-group\\"
 +       >
-+         <input
-+           class=\\"form-check-input\\"
-+           id=\\"11\\"
-+           role=\\"switch\\"
-+           type=\\"checkbox\\"
-+         />
-+         <label
-+           class=\\"form-check-label\\"
-+           for=\\"11\\"
-+         >
-+           Disable Management Frame Protection
-+         </label>
 +         <div
-+           class=\\"form-text\\"
++           class=\\"custom-control custom-switch\\"
 +         >
-+           <small>
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"11\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"11\\"
++           >
++             Disable Management Frame Protection
++           </label>
++           <small
++             class=\\"form-text text-muted mt-0 mb-3\\"
++           >
 +             In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection.
 +           </small>
 +         </div>
 +       </div>
 +       <div
-+         class=\\"form-check form-switch mb-3 null\\"
++         class=\\"form-group\\"
 +       >
-+         <input
-+           class=\\"form-check-input\\"
-+           id=\\"12\\"
-+           role=\\"switch\\"
-+           type=\\"checkbox\\"
-+         />
-+         <label
-+           class=\\"form-check-label\\"
-+           for=\\"12\\"
-+         >
-+           Enable Guest Wi-Fi
-+         </label>
 +         <div
-+           class=\\"form-text\\"
++           class=\\"custom-control custom-switch\\"
 +         >
-+           <small>
++           <input
++             class=\\"custom-control-input\\"
++             id=\\"12\\"
++             type=\\"checkbox\\"
++           />
++           <label
++             class=\\"custom-control-label\\"
++             for=\\"12\\"
++           >
++             Enable Guest Wi-Fi
++           </label>
++           <small
++             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 access the internet, but aren't allowed to access other devices and the configuration interface of the router. Parameters of the guest network can be set in the Guest network tab.
 +           </small>
 +         </div>
 +       </div>
         <hr />
         <div
-          class=\\"form-check form-switch mb-3 d-flex align-items-center\\"
+          class=\\"form-group switch\\"
         >
-          <input"
+          <div"
 `;

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

@@ -25,10 +25,15 @@ exports[`<RebootButton/> Render modal. 1`] = `
               Warning!
             </h5>
             <button
-              aria-label="Close"
+              class="close"
-              class="btn-close"
               type="button"
-            />
+            >
+              <span
+                aria-hidden="true"
+              >
+                ×
+              </span>
+            </button>
           </div>
           <div
             class="modal-body"

src/context/alertContext/__tests__/AlertContext.test.js

@@ -48,7 +48,7 @@ describe("AlertContext", () => {
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
 
-        fireEvent.click(componentContainer.querySelector(".btn-close"));
+        fireEvent.click(componentContainer.querySelector(".close"));
         // Alert is gone
         expect(queryByText(componentContainer, "Alert content")).toBeNull();
     });

src/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -6,13 +6,14 @@ exports[`AlertContext should render alert 1`] = `
     id="alert-container"
   >
     <div
-      class="alert alert-danger alert-dismissible"
+      class="alert alert-dismissible alert-danger"
     >
       <button
-        aria-label="Close"
+        class="close"
-        class="btn-close"
         type="button"
-      />
+      >
+        ×
+      </button>
       Alert content
     </div>
   </div>

src/form/__tests__/__snapshots__/SubmitButton.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >
@@ -22,7 +22,7 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     type="submit"
   >
     <span>
@@ -35,7 +35,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >

src/utils/hooks.js

@@ -1,12 +1,12 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019 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 { useState, useEffect, useRef } from "react";
-import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle.min";
+import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle.min.js";
 
 /** Execute callback when condition is set to true. */
 export function useConditionalTimeout(
@@ -42,15 +42,14 @@ export function useClickOutside(element, callback) {
     });
 }
 
-/** useTooltip hook for Bootstrap tooltips. */
 export function useTooltip(description, placement = "top", trigger = "hover") {
     const tooltipRef = useRef();
 
     useEffect(() => {
         const tooltip = new Tooltip(tooltipRef.current, {
             title: description,
-            placement,
+            placement: placement,
-            trigger,
+            trigger: trigger,
         });
 
         return () => {