Styling

Copied Ninos styles with copilot

frontend/src/pages/basic_pages.rs

@@ -56,11 +56,13 @@ pub fn home_component() -> Html {
     }
 
     html! {
-        <div>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Welcome" }</h1>
+            </div>
             <crate::utilities::TicketCount/>
-
             <p>{ "You are logged in as: " }</p>
-            <p>{ &*name }</p>
+            <p class="text-muted">{ &*name }</p>
         </div>
     }
 }
@@ -80,9 +82,12 @@ pub fn home_component() -> Html {
 pub fn not_found_component() -> Html {
     let message = "404 Not found";
     html! {
-        <div>
-            <h1>{&message}</h1>
-            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
+        <div class="form-container">
+            <div class="empty-state">
+                <h1>{&message}</h1>
+                <p>{ "The page you are looking for does not exist." }</p>
+                <Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
+            </div>
         </div>
     }
 }
@@ -102,10 +107,13 @@ pub fn not_found_component() -> Html {
 #[component(PermissionDenied)]
 pub fn denied_component() -> Html {
     html! {
-        <div>
-            <h1>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</h1>
-            <h3>{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</h3>
-            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
+        <div class="form-container">
+            <div class="empty-state">
+                <h1>{ "Access Denied" }</h1>
+                <p>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</p>
+                <p class="text-muted">{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</p>
+                <Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
+            </div>
         </div>
     }
 }

frontend/src/pages/ticket.rs

@@ -287,52 +287,53 @@ pub fn submit_ticket_component() -> Html {
     let room_valid = (*room).is_some();
 
     html! {
-        <form {onsubmit}>
-            <label>{ "Betreff:" }
-                <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
-            </label>
-            <br/>
-            <label>{ "Beschreibung:" }
-                <input type="text" value={(*description).clone()} oninput={description_change}/>
-            </label>
-            <br/>
-            <label>{ "Kategorie:" }
-                <select value={(*category).clone()} onchange={category_change}>
-                    <option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
-                    <option value="Internet">{ "Internet" }</option>
-                    <option value="iPad Koffer">{ "iPad Koffer" }</option>
-                    <option value="Apple TV">{ "Apple TV" }</option>
-                    <option value="Docu Cam">{ "Dokumenten Kamera" }</option>
-                    <option value="Sonstiges">{ "Sonstiges" }</option>
-                </select>
-            </label>
-            <br/>
-            <label>{ "Raum:" }
-                <input type="text" value={(*room_input).clone()} oninput={room_change}/>
-            </label>
-            {
-                if !room_valid {
-                    html! {
-                        <p style="color: red;">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Create Ticket" }</h1>
+            </div>
+            <form {onsubmit}>
+                <label>{ "Betreff:" }
+                    <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
+                </label>
+                <label>{ "Beschreibung:" }
+                    <textarea value={(*description).clone()} oninput={description_change}/>
+                </label>
+                <label>{ "Kategorie:" }
+                    <select value={(*category).clone()} onchange={category_change}>
+                        <option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
+                        <option value="Internet">{ "Internet" }</option>
+                        <option value="iPad Koffer">{ "iPad Koffer" }</option>
+                        <option value="Apple TV">{ "Apple TV" }</option>
+                        <option value="Docu Cam">{ "Dokumenten Kamera" }</option>
+                        <option value="Sonstiges">{ "Sonstiges" }</option>
+                    </select>
+                </label>
+                <label>{ "Raum:" }
+                    <input type="text" value={(*room_input).clone()} oninput={room_change}/>
+                </label>
+                {
+                    if !room_valid {
+                        html! {
+                            <p class="alert error">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
+                        }
+                    } else {
+                        html! {}
                     }
-                } else {
-                    html! {}
                 }
-            }
-            <br/>
-            <button type="submit">{ "Send" }</button>
+                <button type="submit">{ "Send" }</button>
 
-            <Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
+                <Link<crate::Route> to={crate::Route::AllTickets}>{ "View All Tickets" }</Link<crate::Route>>
 
-            {
-                if let Some(s) = &*status {
-                    html!{ <p>{ s }</p> }
-                } else {
-                    html!{}
+                {
+                    if let Some(s) = &*status {
+                        html!{ <p class="alert success">{ s }</p> }
+                    } else {
+                        html!{}
+                    }
                 }
-            }
 
-        </form>
+            </form>
+        </div>
     }
 }
 

frontend/src/pages/user.rs

@@ -222,24 +222,29 @@ pub fn register_component() -> Html {
     };
 
     html! {
-        <form {onsubmit}>
-            <label>{ "Vorname:" }
-                <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
-            </label>
-            <label>{ "Nachname:" }
-                <input type="text" value={(*last_name).clone()} oninput={ln_change}/>
-            </label>
-            <label>{ "Benutzername:" }
-                <input type="text" value={(*username).clone()} oninput={un_change}/>
-            </label>
-            <label>{ "Admin:" }
-                <input type="checkbox" checked={*is_admin} onchange={admin_change}/>
-            </label>
-            <label>{ "Password:" }
-                <input type="password" value={(*pwd).clone()} oninput={pwd_change}/>
-            </label>
-            <button type="submit">{ "Bestätigen" }</button>
-        </form>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Register User" }</h1>
+            </div>
+            <form {onsubmit}>
+                <label>{ "Vorname:" }
+                    <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
+                </label>
+                <label>{ "Nachname:" }
+                    <input type="text" value={(*last_name).clone()} oninput={ln_change}/>
+                </label>
+                <label>{ "Benutzername:" }
+                    <input type="text" value={(*username).clone()} oninput={un_change}/>
+                </label>
+                <label>{ "Admin:" }
+                    <input type="checkbox" checked={*is_admin} onchange={admin_change}/>
+                </label>
+                <label>{ "Password:" }
+                    <input type="password" value={(*pwd).clone()} oninput={pwd_change}/>
+                </label>
+                <button type="submit">{ "Bestätigen" }</button>
+            </form>
+        </div>
     }
 }
 
@@ -328,27 +333,32 @@ pub fn login_component() -> Html {
     };
 
     html! {
-        <form {onsubmit}>
-            <input
-                placeholder="username"
-                value={(*username).clone()}
-                oninput={Callback::from(move |e: InputEvent| {
-                    let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                    username.set(input.value());
-                })}
-            />
-            <input
-                type="password"
-                placeholder="password"
-                value={(*pwd).clone()}
-                oninput={Callback::from(move |e: InputEvent| {
-                    let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                    pwd.set(input.value());
-                })}
-            />
-            <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
-            if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
-        </form>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Login" }</h1>
+            </div>
+            <form {onsubmit}>
+                <input
+                    placeholder="username"
+                    value={(*username).clone()}
+                    oninput={Callback::from(move |e: InputEvent| {
+                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                        username.set(input.value());
+                    })}
+                />
+                <input
+                    type="password"
+                    placeholder="password"
+                    value={(*pwd).clone()}
+                    oninput={Callback::from(move |e: InputEvent| {
+                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                        pwd.set(input.value());
+                    })}
+                />
+                <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
+                if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
+            </form>
+        </div>
     }
 }
 
@@ -417,18 +427,37 @@ pub fn all_users_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p>{ "Loading..." }</p>
+            </div>
+        }
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p class="alert error">{ format!("Error: {}", e) }</p>
+            </div>
+        }
     } else {
         html! {
-            <ul>
-            { for users.iter().map(|t| html! {
-                    <li key={t.id.to_string()}>
-                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
-                    </li>
-                })}
-            </ul>
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <ul>
+                { for users.iter().map(|t| html! {
+                        <li key={t.id.to_string()}>
+                            <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
+                        </li>
+                    })}
+                </ul>
+            </div>
         }
     }
 }