Switch the edit game and game list components away from deprecated glimmer

Cargo.lock

@@ -1691,8 +1691,6 @@ dependencies = [
 [[package]]
 name = "glimmer-yew"
 version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "84c8c89f333b3a0901a972157054488443d48a03496332a1516b9f13e2cf35f6"
 dependencies = [
  "derive_builder",
  "gloo-console 0.4.0",

visions/ui/Cargo.toml

@@ -6,7 +6,8 @@ edition = "2024"
 
 [dependencies]
 async-std                   = { workspace = true }
-glimmer-yew                 = { workspace = true }
+# glimmer-yew                 = { workspace = true }
+glimmer-yew                 = { path = "../../../../glimmer/modal/yew" }
 glimmer-yew-deprecated      = { path = "../../glimmer/yew" }
 gloo-console                = { workspace = true }
 gloo-net                    = { workspace = true }

visions/ui/index.html

@@ -8,5 +8,5 @@
         <link data-trunk href="static/glimmer-style-neon.css" rel="css" type="text/css"></link>
         <link data-trunk href="static/style-default.css" rel="css" type="text/css"></link>
     </head>
-    <body data-theme="default"></body>
+    <body data-theme="neon"></body>
 </html>

visions/ui/src/components/edit_game.rs

@@ -1,4 +1,5 @@
-use glimmer_yew_deprecated::prelude::*;
+#![deny(clippy::pedantic)]
+use glimmer_yew::prelude::*;
 use stylist::css;
 use visions_types::{CharacterId, GameOverview, UserOverview};
 use yew::prelude::*;
@@ -45,7 +46,7 @@ pub fn NewGame(
     html! {
         <div class={classes!(class.clone())}>
             <Row>
-                <TextEntry on_changed={on_name_change} placeholder="game name" />
+                <TextEntry on_change={on_name_change} placeholder="game name" />
             </Row>
             <Row>
                 <DropMenu<SystemName>
@@ -54,8 +55,8 @@ pub fn NewGame(
                     change_selection={on_system_change} />
             </Row>
             <Row>
-                <Button variant={ButtonVariant::Plain} on_click={on_cancel}>{"Cancel"}</Button>
-                <Button variant={ButtonVariant::Primary} on_click={on_save}>{"Save"}</Button>
+                <Button variant={button::Variant::Plain} on_click={on_cancel}>{"Cancel"}</Button>
+                <Button variant={button::Variant::Primary} on_click={on_save}>{"Save"}</Button>
             </Row>
         </div>
     }
@@ -233,7 +234,7 @@ pub fn PlayerRow(PlayerRowProps { user, on_remove }: &PlayerRowProps) -> Html {
     html! {
         <Row class={"edit-game__player"}>
             <div>{user.name.clone()}</div>
-            <div><Button variant={ButtonVariant::Plain} destructive=true on_click={on_click}>{"Remove from Game"}</Button></div>
+            <div><Button variant={button::Variant::Plain} destructive=true on_click={on_click}>{"Remove from Game"}</Button></div>
         </Row>
     }
 }
@@ -255,7 +256,7 @@ pub fn AddRow(AddProps { user, on_add }: &AddProps) -> Html {
     html! {
         <Row class={"edit-game__player"}>
             <div>{user.name.clone()}</div>
-            <div><Button variant={ButtonVariant::Primary} on_click={on_click}>{"Add to Game"}</Button></div>
+            <div><Button variant={button::Variant::Primary} on_click={on_click}>{"Add to Game"}</Button></div>
         </Row>
     }
 }
@@ -363,11 +364,11 @@ fn CharacterRow(
 
     let edit_button = match user {
         Some(user) if sheet.user_id == user.id => {
-            html! { <Button on_click={on_edit} variant={ButtonVariant::Primary}>{"Edit"}</Button> }
+            html! { <Button on_click={on_edit} variant={button::Variant::Primary}>{"Edit"}</Button> }
         }
         Some(_user) => html! {},
         None => {
-            html! { <Button on_click={on_edit} variant={ButtonVariant::Primary}>{"Edit"}</Button> }
+            html! { <Button on_click={on_edit} variant={button::Variant::Primary}>{"Edit"}</Button> }
         }
     };
 

visions/ui/src/components/game_list.rs

@@ -95,7 +95,7 @@ pub fn GameInformation(
     let enter_game_button =
         if overview.gm == user.id || players.iter().any(|player| player.0.id == user.id) {
             html! {
-                <Button variant={ButtonVariant::Primary} on_click={on_enter}>{"Play"}</Button>
+                <Button variant={button::Variant::Primary} on_click={on_enter}>{"Play"}</Button>
             }
         } else {
             html! {}

visions/ui/src/views/landing.rs

@@ -85,7 +85,7 @@ fn GameList(client: &AuthedClient) -> Html {
             />
             <Button on_click={on_add_game}>{"+ Add Game"}</Button>
 
-            <Modal
+            <Dialog
                 title={(*modal_title).clone()}
                 open={modal_content.is_some()}
                 on_cancel={clone!(modal_content, move |()| modal_content.set(None))}
@@ -93,7 +93,7 @@ fn GameList(client: &AuthedClient) -> Html {
                 {if let Some(ref content) = *modal_content {
                     (*content).clone()
                 } else { html! {}}}
-            </Modal>
+            </Dialog>
         </div>
     }
 }

visions/ui/static/glimmer-style-base.css

@@ -24,7 +24,6 @@ body {
     display: flex;
     align-items: center;
     flex-direction: row;
-    flex-wrap: wrap;
 }
 
 .layout-row__gap-sm {
@@ -173,7 +172,7 @@ body {
     margin: 0px;
 }
 
-.panel:hover {
+.panel_clickable:hover {
     border: var(--border-hover);
 }
 
@@ -285,3 +284,26 @@ body {
     border-radius: var(--radius-lg);
 }
 
+.dialog {
+    padding: var(--spacing-md);
+    border: 2px solid var(--accent-300);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface-raised2-background);
+    color: var(--color-surface-raised2-text);
+}
+
+.dialog__title {
+    margin: 0px;
+    padding: 0px;
+    padding-bottom: var(--spacing-lg);
+}
+
+.dialog__header {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--spacing-lg);
+
+    .button {
+        align-self: start;
+    }
+}