feat(gui-client): re-design the "about" window (#9149)

This re-designs the "About" window of the GUI client.

|Before|After|
|---|---|
|![Screenshot From 2025-05-15
11-40-46](https://github.com/user-attachments/assets/ce7f1cf5-e234-4d64-825a-8e1c0badddb5)|![image](https://github.com/user-attachments/assets/a0c2f54f-f8f9-4d57-a8ee-0e826ce004da)|

I also reduced the window in its size and made it non-resizable to avoid
it looking bad when users try to fiddle around with it.

The embedded Git hash is also trimmed to 8 characters, currently it is
embedded as the fully hash.
This commit is contained in:
Thomas Eizinger
2025-05-15 13:07:26 +10:00
committed by GitHub
parent ce06996a14
commit 7703063830
4 changed files with 38 additions and 12 deletions

View File

@@ -0,0 +1,17 @@
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "default-capability",
"description": "Capability for our windows",
"windows": ["*"],
"permissions": [
"core:path:default",
"core:event:default",
"core:window:default",
"core:app:default",
"core:resources:default",
"core:menu:default",
"core:tray:default",
"notification:default",
"shell:default"
]
}

View File

@@ -42,7 +42,8 @@
"app": {
"withGlobalTauri": true,
"security": {
"csp": null
"csp": null,
"capabilities": ["default-capability"]
},
"windows": [
{
@@ -50,9 +51,9 @@
"title": "About Firezone",
"url": "src/about.html",
"fullscreen": false,
"resizable": true,
"width": 640,
"height": 480,
"resizable": false,
"width": 400,
"height": 300,
"visible": false
},
{

View File

@@ -10,14 +10,22 @@
<script type="module" src="about.ts" defer></script>
</head>
<body class="bg-neutral-100 text-neutral-900">
<div class="container">
<img src="logo.png" alt="Firezone Logo" class="mt-16 w-64 h-64 mx-auto" />
<p class="mt-12 text-center">
Version
<strong><span id="cargo-version"></span></strong>
<body class="bg-neutral-100 min-h-screen flex items-center justify-center">
<div class="w-full max-w-sm flex flex-col items-center">
<img src="logo.png" alt="Firezone Logo" class="w-20 h-20 mb-6" />
<p class="text-neutral-600 mb-1">Version</p>
<p class="text-2xl font-bold mb-1">
<span id="cargo-version"></span>
</p>
<p class="text-neutral-400 text-sm mb-6">
(<span id="git-version"></span>)
</p>
<a
href="https://docs.firezone.dev"
target="_blank"
class="text-accent-450 hover:underline text-sm"
>Documentation</a
>
</div>
</body>
</html>

View File

@@ -18,8 +18,8 @@ function get_cargo_version() {
function get_git_version() {
try {
invoke("get_git_version").then((gitVersion: unknown) => {
gitVersionSpan.innerText = gitVersion as string;
invoke<string>("get_git_version").then((gitVersion) => {
gitVersionSpan.innerText = gitVersion.substring(0, 8); // Trim Git hash
});
} catch (e) {
gitVersionSpan.innerText = "Unknown";