feat: redesign aplikace pomocí claude code

client/src/components/modals/RefreshMenuModal.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { Modal, Button, Alert } from "react-bootstrap";
+import { Modal, Button, Alert, Form } from "react-bootstrap";
 
 type Props = {
     isOpen: boolean;
@@ -30,7 +30,6 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
             if (res.ok) {
                 setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
                 if (refreshPassRef.current) {
-                    // Clean hesla xd
                     refreshPassRef.current.value = '';
                 }
             } else {
@@ -50,7 +49,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
     };
 
     return (
-        <Modal show={isOpen} onHide={handleClose} size="lg">
+        <Modal show={isOpen} onHide={handleClose}>
             <Modal.Header closeButton>
                 <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
             </Modal.Header>
@@ -63,36 +62,29 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
                     </Alert>
                 )}
 
-                <div className="mb-3">
-                    Heslo: <input
+                <Form.Group className="mb-3">
+                    <Form.Label>Heslo</Form.Label>
+                    <Form.Control
                         ref={refreshPassRef}
                         type="password"
                         placeholder="Zadejte heslo"
-                        className="form-control d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
                         onKeyDown={e => e.stopPropagation()}
                     />
-                </div>
+                </Form.Group>
 
-                <div className="mb-3">
-                    Typ refreshe: <select
-                        ref={refreshTypeRef}
-                        className="form-select d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
-                        defaultValue="week"
-                    >
+                <Form.Group className="mb-3">
+                    <Form.Label>Typ refreshe</Form.Label>
+                    <Form.Select ref={refreshTypeRef} defaultValue="week">
                         <option value="week">Týden</option>
                         <option value="day">Den</option>
-                    </select>
-                </div>
+                    </Form.Select>
+                </Form.Group>
 
                 <Button
-                    variant="info"
                     onClick={handleRefresh}
                     disabled={refreshLoading}
-                    className="mb-3"
                 >
-                    {refreshLoading ? 'Refreshing...' : 'Refresh'}
+                    {refreshLoading ? 'Načítám...' : 'Obnovit menu'}
                 </Button>
             </Modal.Body>
             <Modal.Footer>
@@ -102,4 +94,4 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
             </Modal.Footer>
         </Modal>
     );
-}
+}

client/src/components/modals/SettingsModal.tsx

@@ -16,38 +16,81 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
     const hideSoupsRef = useRef<HTMLInputElement>(null);
     const themeRef = useRef<HTMLSelectElement>(null);
 
-    return <Modal show={isOpen} onHide={onClose} size="lg">
-        <Modal.Header closeButton>
-            <Modal.Title><h2>Nastavení</h2></Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-            <h4>Vzhled</h4>
-            <Form.Group className="mb-3">
-                <Form.Label>Barevný motiv</Form.Label>
-                <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
-                    <option value="system">Podle systému</option>
-                    <option value="light">Světlý</option>
-                    <option value="dark">Tmavý</option>
-                </Form.Select>
-            </Form.Group>
-            <hr />
-            <h4>Obecné</h4>
-            <span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
-                <input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
-            </span>
-            <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.<br />Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.<br /><br />Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.</p>
-            Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br />
-            Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} />
-        </Modal.Body>
-        <Modal.Footer>
-            <Button variant="secondary" onClick={onClose}>
-                Storno
-            </Button>
-            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
-                Uložit
-            </Button>
-        </Modal.Footer>
-    </Modal>
-}
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Nastavení</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <h4>Vzhled</h4>
+                <Form.Group className="mb-3">
+                    <Form.Label>Barevný motiv</Form.Label>
+                    <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
+                        <option value="system">Podle systému</option>
+                        <option value="light">Světlý</option>
+                        <option value="dark">Tmavý</option>
+                    </Form.Select>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Obecné</h4>
+                <Form.Group className="mb-3">
+                    <Form.Check
+                        ref={hideSoupsRef}
+                        type="checkbox"
+                        label="Skrýt polévky"
+                        defaultChecked={settings?.hideSoups}
+                        title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
+                    />
+                    <Form.Text className="text-muted">
+                        Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
+                    </Form.Text>
+                </Form.Group>
+
+                <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>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose}>
+                    Storno
+                </Button>
+                <Button onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
+                    Uložit
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}