ui: full logo in sidebar; new chat icon update
Alessandro committed
Mar 17, 2026 at 14:35 UTC
848937f1ced735878decd1b09e309ccab1fb3a48
4 files changed
+29
-13
webui/components/sidebar/chats/chats-list.html
+1
-1
@@ -15,7 +15,7 @@
15
<h3 class="section-header">Chats</h3>
16
<!-- New Chat Button -->
17
<button id="newChat" class="btn-icon-action chat-list-action-btn" @click="$store.chats.newChat()" aria-label="New Chat" title="New Chat" data-bs-placement="top" data-bs-trigger="hover">
18
- <span class="material-symbols-outlined">edit_square</span>
18
+ <span class="material-symbols-outlined">chat_add_on</span>
19
</button>
20
</div>
21
webui/components/sidebar/top-section/header-icons.html
+26
-11
@@ -13,8 +13,8 @@
13
</button>
14
15
<div id="logo-container">
16
- <a href="https://github.com/agent0ai/agent-zero" target="_blank" rel="noopener noreferrer">
17
- <img src="./public/splash.jpg" alt="a0" width="22" height="22">
16
+ <a href="https://github.com/agent0ai/agent-zero" target="_blank" rel="noopener noreferrer" aria-label="Agent Zero on GitHub">
17
+ <span id="a0-logo" role="img" aria-label="Agent Zero"></span>
18
</a>
19
</div>
20
</div>
@@ -25,27 +25,27 @@
25
.toggle-sidebar-button {
26
height: 2.6rem;
27
width: 2.6rem;
28
- background-color: var(--color-background);
29
- border: 0.1rem solid var(--color-border);
30
- border-radius: var(--spacing-xs);
28
+ background-color: transparent;
29
+ border: none;
30
color: var(--color-text);
31
opacity: 0.8;
32
cursor: pointer;
33
left: var(--spacing-md);
34
padding: 0.47rem 0.56rem;
35
position: absolute;
37
- top: var(--spacing-md);
36
+ top: 1.4rem;
37
z-index: 999;
38
-webkit-transition: all var(--transition-speed) ease-in-out;
39
transition: all var(--transition-speed) ease-in-out;
40
}
42
- .toggle-sidebar-button:hover { background-color: var(--color-background-hover); opacity: 1; }
41
+ .toggle-sidebar-button:hover { background-color: transparent; opacity: 1; }
42
.toggle-sidebar-button:active { opacity: 0.5; }
43
.toggle-sidebar-button .material-symbols-outlined {
44
font-size: 22px;
45
-webkit-transition: all var(--transition-speed) ease;
46
transition: all var(--transition-speed) ease;
47
}
48
+
49
.toggle-sidebar-button:active .material-symbols-outlined { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); }
50
51
#logo-container {
@@ -54,16 +54,31 @@
54
align-items: center;
55
justify-content: space-between;
56
position: fixed;
57
- left: 4.6rem;
57
+ left: 4rem;
58
top: var(--spacing-md);
59
z-index: 1004;
60
-webkit-transition: margin-left var(--transition-speed) ease-in-out;
61
transition: margin-left var(--transition-speed) ease-in-out;
62
}
63
#logo-container a { color: inherit; text-decoration: none; }
64
- #logo-container img { border-radius: var(--spacing-xs); width: auto; height: 2.6rem; -webkit-transition: filter 0.3s ease; transition: filter 0.3s ease; }
65
-
66
- .light-mode #logo-container img { -webkit-filter: invert(100%) grayscale(100%); filter: invert(100%) grayscale(100%); }
64
+ #a0-logo {
65
+ display: block;
66
+ height: 2.6rem;
67
+ aspect-ratio: 120 / 50;
68
+ -webkit-mask-image: url('/public/a0-fullDark.svg');
69
+ mask-image: url('/public/a0-fullDark.svg');
70
+ -webkit-mask-repeat: no-repeat;
71
+ mask-repeat: no-repeat;
72
+ -webkit-mask-size: contain;
73
+ mask-size: contain;
74
+ -webkit-mask-position: center;
75
+ mask-position: center;
76
+ background-color: var(--color-text);
77
+ opacity: 0.8;
78
+ -webkit-transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease;
79
+ transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease;
80
+ }
81
+ #logo-container a:hover #a0-logo { opacity: 1; }
82
83
@media (max-width: 768px) {
84
.toggle-sidebar-button { position: fixed; left: var(--spacing-md); z-index: 1004; }
webui/components/sidebar/top-section/quick-actions.html
+1
-1
@@ -70,7 +70,7 @@
70
<div class="dropdown-header">Chat Actions</div>
71
72
<button class="dropdown-item" @click="$store.chats.newChat(); dropdownOpen = false">
73
- <span class="material-symbols-outlined">edit_square</span>
73
+ <span class="material-symbols-outlined">chat_add_on</span>
74
<span>New Chat</span>
75
</button>
76
webui/public/a0-fullDark.svg
new
+1
@@ -0,0 +1 @@
1
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 50" width="104" height="50"><style>.a{fill:#7a7a7a}</style><path class="a" d="m31.9 40.7c-4.1-6.9-8.1-13.8-12.2-20.9-4.1 7.1-8.1 14-12.2 20.9h-6.2c6.1-10.5 18.4-31.4 18.4-31.4 0 0 12.3 20.8 18.4 31.4 0 0-6.2 0-6.2 0z"/><path class="a" d="m27.5 40.7h-15.8q1.6-2.7 3.1-5.3h9.7c1 1.7 2 3.5 3 5.3zm52.3-6.5c0.6 1 1.2 1.9 1.9 2.9h-2.1c-0.6-0.8-1.2-1.7-1.8-2.5h-2.4v2.5h-1.6v-8.6q1.4 0 2.8 0c0.7 0 1.5-0.1 2.3 0 1.2 0.2 2.1 0.9 2.4 2.1 0.2 1.3 0 2.5-1.2 3.4-0.1 0.1-0.2 0.1-0.3 0.2q0 0 0 0zm-4.4-1.3c1.1 0 2.2 0.1 3.2 0 0.7 0 1-0.6 1-1.3 0.1-0.7-0.3-1.3-1-1.3-1-0.1-2.1 0-3.2 0zm-22.1-4.5v1.3c-1.7 1.8-3.4 3.7-5.2 5.7h5.1v1.6h-7.3v-1.7c1.5-1.6 3-3.3 4.7-5.2h-4.7v-1.7zm29.2-15.7c2.1 2.1 4 4 6.1 6v-4.9h1.5v8.7c-2.1-2-4-3.9-6.1-6v5.2h-1.5v-9q0 0 0 0zm6.3 22.2c0.4-0.2 1-0.5 1.4-0.7 1.4 1.8 3.4 1.4 4.3 0.6 0.9-0.8 1.1-1.9 0.8-3.1-0.4-1.1-1.4-1.9-2.8-1.9-1.4 0.1-2.6 1.1-2.7 2.7h-1.7c0-1.6 1.2-3.5 3.1-4 2.3-0.7 4.6 0.4 5.5 2.7 0.8 2-0.2 4.4-2.3 5.4-2 1-4.5 0.3-5.6-1.7q0 0 0 0zm-26.2-19.9c-0.3 0.2-0.8 0.5-1.1 0.8-1.8-1.5-3.8-1-4.6 0.9-0.4 1.2 0.2 2.8 1.6 3.3 1.2 0.4 2.5 0 2.8-1-0.3-0.1-0.5-0.2-0.9-0.3 0-0.4-0.1-0.8-0.1-1.3h3.1c0.3 1.8-1.2 3.8-3 4.2-2 0.5-4.2-0.6-4.9-2.5-0.8-2 0.1-4.2 2-5.2 1.8-0.9 4-0.5 5.1 1.1zm-17.1-1.8c1.6 3 3 5.7 4.5 8.6h-1.7c-0.9-1.6-1.8-3.3-2.8-5-0.9 1.7-1.8 3.3-2.7 5h-1.8c1.5-2.8 3-5.6 4.5-8.6zm52.9 2h-2.9v-1.5h7.2v1.5h-2.7v6.6h-1.6v-6.6zm-36.3 14.8v2.1h2c0 0 0 1 0 1.6-0.8 0.1-1.7 0-2.5-0.1-0.7-0.2-1.2-0.8-1.2-1.5 0-1.2 0-2.5 0-3.7h7v1.6h-5.3q0 0 0 0zm-1.7 7v-2.2q0.7 0 1.3-0.1c0.1 0.3 0.1 0.7 0.3 0.7 0.3 0 3.5 0 5.3 0v1.6c0 0-6.9 0-6.9 0zm11-21.8v2h1.9c0 0 0 0.9 0 1.5-0.8 0-1.6 0-2.3-0.2-0.7-0.1-1.1-0.6-1.1-1.3-0.1-1.1-0.1-2.3-0.1-3.4h6.5v1.4h-4.9zm-1.5 6.5v-2q0.6 0 1.2-0.1c0.1 0.2 0.1 0.6 0.3 0.6 0.2 0 3.2 0 4.9 0v1.5h-6.4z"/></svg>
\ No newline at end of file