adds confirmation to the git ref link

werewolves/index.scss

@@ -2195,6 +2195,11 @@ li.choice {
 			color: hsl(280, 65%, 43%);
 		}
 	}
+
+	.redir-url {
+		user-select: text;
+		color: rgba(255, 255, 255, 0.7);
+	}
 }
 
 .footer {
@@ -2210,3 +2215,7 @@ li.choice {
 	padding: 10px 0 10px 0;
 	border-top: 1px solid white;
 }
+
+.has-confirm {
+	cursor: pointer;
+}

werewolves/src/components/client/footer.rs

@@ -57,26 +57,30 @@ pub fn ClientFooter() -> Html {
 
 #[function_component]
 pub fn About() -> Html {
-    let confirm_state = use_state(|| false);
+    let source_confirm_state = use_state(|| false);
+    let git_ref_confirm_state = use_state(|| false);
+
     let source_code_confirm = {
         let confirm_callback = {
             move |_| {
                 let _ = gloo::utils::window().location().set_href(SOURCE_CODE_URL);
             }
         };
-        let message = html! {
+        let confirm_message = html! {
             <>
                 <h1>{"this will take you away from the game"}</h1>
+                <h5>{"("}<span class="redir-url">{SOURCE_CODE_URL}</span>{")"}</h5>
                 <h3>{"make sure this isn't an oopsie"}</h3>
             </>
         };
+
         html! {
             <WithConfirmation
-                state={confirm_state}
+                state={source_confirm_state}
                 confirm_callback={confirm_callback}
-                message={message}
+                message={confirm_message}
             >
-                {"source code"}
+                <button class="default-button">{"source code"}</button>
             </WithConfirmation>
         }
     };
@@ -86,16 +90,43 @@ pub fn About() -> Html {
             <span class="dirty">{"(dirty)"}</span>
         </>
     });
+    let git_ref_confirm = {
+        let git_ref_url = format!("{SOURCE_CODE_URL}/commit/{}", crate::BUILD_ID_LONG);
+        let confirm_callback = {
+            let git_ref_url = git_ref_url.clone();
+            move |_| {
+                let _ = gloo::utils::window().location().set_href(&git_ref_url);
+            }
+        };
+        let confirm_message = html! {
+            <>
+                <h1>{"this will take you away from the game"}</h1>
+                <h4>{"("}<span class="redir-url">{git_ref_url}</span>{")"}</h4>
+                <h3>{"make sure this isn't an oopsie"}</h3>
+            </>
+        };
+
+        html! {
+            <WithConfirmation
+                state={git_ref_confirm_state}
+                confirm_callback={confirm_callback}
+                message={confirm_message}
+            >
+                <a>
+                    {crate::BUILD_ID}
+                    {dirty}
+                </a>
+            </WithConfirmation>
+        }
+    };
+
     html! {
         <div class="about">
             <h1>{"werewolves"}</h1>
             <div class="build-info">
                 <p class="build-id">
                     <label>{"build: "}</label>
-                    <a href={format!("{SOURCE_CODE_URL}/commit/{}", crate::BUILD_ID_LONG)}>
-                        {crate::BUILD_ID}
-                        {dirty}
-                    </a>
+                    {git_ref_confirm}
                 </p>
                 <p class="build-time">
                     <label>{"built at: "}</label>

werewolves/src/components/dialog.rs

@@ -132,7 +132,7 @@ pub fn WithConfirmation(
     };
     html! {
         <>
-            <Button on_click={confirmation_click}>{children.clone()}</Button>
+            <span class="has-confirm" onclick={confirmation_click}>{children.clone()}</span>
             {confirmation_dialog}
         </>
     }