ui: use vectorized and natively color-scheme aware Proxmox logo

Not only does the logo now actually looks crisp, especially if the desktop or browser is scaling things up (i.e., zoomed in) like for HiDPI, the size is almost the same size as the black bitmap one and we lost the white one, which was 4 times bigger, completely. Only set the height on the element, the browser then figures out the correct proportions. The displayed image itself became a bit bigger, that was done on purpose when adapting the viewBox/padding of the vector for the UI. Signed-off-by: Thomas Lamprecht <[email protected]>
proxmox · Dec 17, 2024 · 2a81bf3 · 2a81bf3
1 parent ff601a4
commit 2a81bf3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/ui/Makefile b/ui/Makefile
@@ -57,8 +57,7 @@ install: $(COMPILED_OUTPUT) index.hbs
 	install -m0644 images/favicon.svg $(DESTDIR)$(UIDIR)/images
 	install -m0644 images/icon-cpu.svg $(DESTDIR)$(UIDIR)/images
 	install -m0644 images/icon-memory.svg $(DESTDIR)$(UIDIR)/images
-	install -m0644 images/proxmox_logo.png $(DESTDIR)$(UIDIR)/images
-	install -m0644 images/proxmox_logo_white.png $(DESTDIR)$(UIDIR)/images
+	install -m0644 images/proxmox_logo.svg $(DESTDIR)$(UIDIR)/images
 
 	install -dm0755 $(DESTDIR)$(UIDIR)/fonts
 	install -m0644 pwt-assets/assets/fonts/RobotoFlexVariableFont.ttf $(DESTDIR)$(UIDIR)/fonts

diff --git a/ui/images/proxmox_logo.png b/ui/images/proxmox_logo.png
diff --git a/ui/images/proxmox_logo.svg b/ui/images/proxmox_logo.svg
diff --git a/ui/images/proxmox_logo_white.png b/ui/images/proxmox_logo_white.png
diff --git a/ui/src/top_nav_bar.rs b/ui/src/top_nav_bar.rs
@@ -189,12 +189,6 @@ impl Component for PdmTopNavBar {
             );
         }
 
-        let src = if self.dark_mode {
-            "/images/proxmox_logo_white.png"
-        } else {
-            "/images/proxmox_logo.png"
-        };
-
         let dialog: Option<Html> = self.view_state.as_ref().map(|view_state| match view_state {
             ViewState::LanguageDialog => LanguageDialog::new()
                 .on_close(ctx.link().callback(|_| Msg::ChangeView(None)))
@@ -216,7 +210,9 @@ impl Component for PdmTopNavBar {
             .class("pwt-border-bottom")
             .padding(2)
             .with_child(html! {
-                <a href="https://www.proxmox.com" target="_blank"><img {src} alt="Proxmox logo"/></a>
+                <a href="https://www.proxmox.com" target="_blank">
+                    <img src="/images/proxmox_logo.svg" height="30" alt="Proxmox logo"/>
+                </a>
             })
             .with_child({
                 let text = if let Some(info) = &self.version_info {