feat: rozdělení nastavení do 2 sloupců

client/src/components/modals/SettingsModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Modal, Button, Form } from "react-bootstrap"
+import { Modal, Button, Form, Row, Col } from "react-bootstrap"
 import { useSettings, ThemePreference, StyleTheme, STYLE_THEMES } from "../../context/settings";
 import { NotificationSettings, UdalostEnum, getNotificationSettings, updateNotificationSettings } from "../../../../types";
 import { useAuth } from "../../context/auth";
@@ -92,11 +92,14 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
     };
 
     return (
-        <Modal show={isOpen} onHide={onClose} size="lg">
+        <Modal show={isOpen} onHide={onClose} size="xl">
             <Modal.Header closeButton>
                 <Modal.Title><h2>Nastavení</h2></Modal.Title>
             </Modal.Header>
             <Modal.Body>
+                {/* Na širších obrazovkách rozdělení do dvou sloupců, na užších pod sebou */}
+                <Row className="gx-5">
+                    <Col lg={6}>
                         <h4>Vzhled</h4>
                         <Form.Group className="mb-3">
                             <Form.Label>Styl</Form.Label>
@@ -144,6 +147,42 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
 
                         <hr />
 
+                        <h4>Bankovní účet</h4>
+                        <p>
+                            Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
+                        </p>
+
+                        <Form.Group className="mb-3">
+                            <Form.Label>Číslo účtu</Form.Label>
+                            <Form.Control
+                                ref={bankAccountRef}
+                                type="text"
+                                placeholder="123456-1234567890/1234"
+                                defaultValue={settings?.bankAccount}
+                                onKeyDown={e => e.stopPropagation()}
+                            />
+                            <Form.Text className="text-muted">
+                                Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
+                            </Form.Text>
+                        </Form.Group>
+
+                        <Form.Group className="mb-3">
+                            <Form.Label>Název příjemce</Form.Label>
+                            <Form.Control
+                                ref={nameRef}
+                                type="text"
+                                placeholder="Jan Novák"
+                                defaultValue={settings?.holderName}
+                                onKeyDown={e => e.stopPropagation()}
+                            />
+                            <Form.Text className="text-muted">
+                                Jméno majitele účtu pro QR platbu.
+                            </Form.Text>
+                        </Form.Group>
+                    </Col>
+                    <Col lg={6}>
+                        <hr className="d-lg-none" />
+
                         <h4>Notifikace</h4>
                         <p>
                             Nastavením notifikací budete dostávat upozornění o událostech (např. "Jdeme na oběd") přímo do vámi zvoleného komunikačního kanálu.
@@ -238,41 +277,8 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
                                 Zvolte události, o kterých chcete být notifikováni. Notifikace jsou odesílány pouze uživatelům se stejnou zvolenou lokalitou.
                             </Form.Text>
                         </Form.Group>
-
+                    </Col>
-                <hr />
+                </Row>
-
-                <h4>Bankovní účet</h4>
-                <p>
-                    Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
-                </p>
-
-                <Form.Group className="mb-3">
-                    <Form.Label>Číslo účtu</Form.Label>
-                    <Form.Control
-                        ref={bankAccountRef}
-                        type="text"
-                        placeholder="123456-1234567890/1234"
-                        defaultValue={settings?.bankAccount}
-                        onKeyDown={e => e.stopPropagation()}
-                    />
-                    <Form.Text className="text-muted">
-                        Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
-                    </Form.Text>
-                </Form.Group>
-
-                <Form.Group className="mb-3">
-                    <Form.Label>Název příjemce</Form.Label>
-                    <Form.Control
-                        ref={nameRef}
-                        type="text"
-                        placeholder="Jan Novák"
-                        defaultValue={settings?.holderName}
-                        onKeyDown={e => e.stopPropagation()}
-                    />
-                    <Form.Text className="text-muted">
-                        Jméno majitele účtu pro QR platbu.
-                    </Form.Text>
-                </Form.Group>
             </Modal.Body>
             <Modal.Footer>
                 <Button variant="secondary" onClick={onClose}>