feat(editor): Use a single SVG for logo and favicon (no-changelog) (#11811)

This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2024-12-16 10:31:55 +01:00 committed by GitHub
parent 58bab461c4
commit 4ae6049d82
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 317 additions and 85 deletions

View file

@ -148,24 +148,9 @@ describe('User Management', { disableAutoLogin: true }, () => {
personalSettingsPage.actions.changeTheme('Dark');
cy.get('body').should('have.attr', 'data-theme', 'dark');
settingsSidebar.actions.back();
mainSidebar.getters
.logo()
.should('have.attr', 'src')
.then((src) => {
expect(src).to.include('/static/logo/channel/dev-dark.svg');
});
cy.visit(personalSettingsPage.url);
personalSettingsPage.actions.changeTheme('Light');
cy.get('body').should('have.attr', 'data-theme', 'light');
settingsSidebar.actions.back();
mainSidebar.getters
.logo()
.should('have.attr', 'src')
.then((src) => {
expect(src).to.include('/static/logo/channel/dev.svg');
});
});
it('should delete user and their data', () => {

View file

@ -588,6 +588,7 @@
--border-width-base: 1px;
--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
--font-size-4xs: 0.5rem;
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;

View file

@ -103,6 +103,7 @@
"unplugin-icons": "^0.19.0",
"unplugin-vue-components": "^0.27.2",
"vite": "catalog:frontend",
"vite-svg-loader": "5.1.0",
"vitest": "catalog:frontend",
"vitest-mock-extended": "catalog:frontend",
"vue-tsc": "catalog:frontend"

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="201" height="40" fill="none"><g clip-path="url(#a)"><mask id="b" width="143" height="40" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M143 0H0v40h143z"/></mask><g mask="url(#b)"><path fill="#EA4B71" fill-rule="evenodd" d="M78.974 8a8 8 0 0 1-15.748 2h-11.17a4 4 0 0 0-3.945 3.342l-.329 1.973a7.98 7.98 0 0 1-2.6 4.685 7.98 7.98 0 0 1 2.6 4.685l.329 1.973A4 4 0 0 0 52.056 30h3.17a8 8 0 1 1 0 4h-3.17a8 8 0 0 1-7.89-6.685l-.33-1.973A4 4 0 0 0 39.891 22h-3.263a8.004 8.004 0 0 1-15.309 0h-4.691a8 8 0 1 1 .172-4h4.348A8.003 8.003 0 0 1 36.8 18h3.09a4 4 0 0 0 3.946-3.342l.33-1.973A8 8 0 0 1 52.055 6h11.17a8 8 0 0 1 15.748 2m-4 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-66 15.667a4 4 0 1 0 0-8 4 4 0 0 0 0 8m20 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8m34 12.333a4 4 0 1 0 0-8 4 4 0 0 0 0 8" clip-rule="evenodd"/><path fill="#fff" d="M86.979 30.001h4.176v-8.843c0-2.904 1.763-4.177 3.753-4.177 1.958 0 3.492 1.305 3.492 3.981v9.039h4.176v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.26l-.36-1.925h-3.818zm31.584-10.997v-.196c1.436-.718 2.872-1.958 2.872-4.405 0-3.524-2.905-5.645-6.918-5.645-4.112 0-7.049 2.251-7.049 5.71 0 2.35 1.371 3.622 2.872 4.34v.196a5.54 5.54 0 0 0-3.655 5.286c0 3.557 2.937 6.037 7.799 6.037s7.701-2.48 7.701-6.037c0-2.936-1.958-4.666-3.622-5.286m-4.079-7.244c1.632 0 2.839 1.044 2.839 2.806s-1.24 2.807-2.839 2.807-2.937-1.045-2.937-2.807c0-1.795 1.273-2.806 2.937-2.806m0 15.435c-1.893 0-3.426-1.208-3.426-3.264 0-1.86 1.272-3.263 3.393-3.263 2.089 0 3.362 1.37 3.362 3.329 0 1.99-1.469 3.198-3.329 3.198m11.944 2.806h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.491 1.305 3.491 3.981v9.039h4.177v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.261l-.359-1.925h-3.818z"/></g><path fill="#EA4B71" d="M198 12.5h-41a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h41a3 3 0 0 0 3-3v-13a3 3 0 0 0-3-3"/><path fill="#fff" d="M164.496 21.334c.7.252 1.638.938 1.638 2.45 0 1.722-1.19 2.716-3.164 2.716h-4.004v-9.8h4.032c1.932 0 2.856 1.008 2.856 2.45 0 1.176-.644 1.764-1.358 2.1zm-3.724-3.15v2.534h1.946c.84 0 1.288-.504 1.288-1.274 0-.784-.504-1.26-1.26-1.26zm2.03 6.832c.952 0 1.442-.574 1.442-1.372 0-.826-.532-1.442-1.442-1.442h-2.03v2.814zm8.161-.126h4.9v1.61h-6.706v-9.8h6.566v1.61h-4.76v2.436h4.102v1.568h-4.102zm14.643-8.19v1.652h-2.772V26.5h-1.848v-8.148h-2.772V16.7zm8.189 9.8-.798-2.366h-3.668l-.798 2.366h-1.974l3.5-9.8h2.226l3.486 9.8zm-3.962-3.892h2.66l-1.274-3.78h-.112z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h201v40H0z"/></clipPath></defs></svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="201" height="40" fill="none"><g clip-path="url(#a)"><path fill="#EA4B71" fill-rule="evenodd" d="M78.974 8a8 8 0 0 1-15.748 2h-11.17a4 4 0 0 0-3.945 3.342l-.329 1.973a7.98 7.98 0 0 1-2.6 4.685 7.98 7.98 0 0 1 2.6 4.685l.329 1.973A4 4 0 0 0 52.056 30h3.17a8 8 0 1 1 0 4h-3.17a8 8 0 0 1-7.89-6.685l-.33-1.973A4 4 0 0 0 39.891 22h-3.263a8.004 8.004 0 0 1-15.309 0h-4.691a8 8 0 1 1 .172-4h4.348A8.003 8.003 0 0 1 36.8 18h3.09a4 4 0 0 0 3.946-3.342l.33-1.973A8 8 0 0 1 52.055 6h11.17a8 8 0 0 1 15.748 2m-4 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-66 15.667a4 4 0 1 0 0-8 4 4 0 0 0 0 8m20 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8m34 12.333a4 4 0 1 0 0-8 4 4 0 0 0 0 8" clip-rule="evenodd"/><path fill="#101330" d="M86.979 30.001h4.176v-8.843c0-2.904 1.763-4.177 3.753-4.177 1.958 0 3.492 1.305 3.492 3.981v9.039h4.176v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.26l-.36-1.925h-3.818zm31.584-10.997v-.196c1.436-.718 2.872-1.958 2.872-4.405 0-3.524-2.905-5.645-6.918-5.645-4.112 0-7.049 2.251-7.049 5.71 0 2.35 1.371 3.622 2.872 4.34v.196a5.54 5.54 0 0 0-3.655 5.286c0 3.557 2.937 6.037 7.799 6.037s7.701-2.48 7.701-6.037c0-2.936-1.958-4.666-3.622-5.286m-4.079-7.244c1.632 0 2.839 1.044 2.839 2.806s-1.24 2.807-2.839 2.807-2.937-1.045-2.937-2.807c0-1.795 1.273-2.806 2.937-2.806m0 15.435c-1.893 0-3.426-1.208-3.426-3.264 0-1.86 1.272-3.263 3.393-3.263 2.089 0 3.362 1.37 3.362 3.329 0 1.99-1.469 3.198-3.329 3.198m11.944 2.806h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.491 1.305 3.491 3.981v9.039h4.177v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.261l-.359-1.925h-3.818z"/></g><rect width="47" height="19" x="154" y="12.5" fill="#EA4B71" rx="3"/><path fill="#fff" d="M164.496 21.334c.7.252 1.638.938 1.638 2.45 0 1.722-1.19 2.716-3.164 2.716h-4.004v-9.8h4.032c1.932 0 2.856 1.008 2.856 2.45 0 1.176-.644 1.764-1.358 2.1zm-3.724-3.15v2.534h1.946c.84 0 1.288-.504 1.288-1.274 0-.784-.504-1.26-1.26-1.26zm2.03 6.832c.952 0 1.442-.574 1.442-1.372 0-.826-.532-1.442-1.442-1.442h-2.03v2.814zm8.161-.126h4.9v1.61h-6.706v-9.8h6.566v1.61h-4.76v2.436h4.102v1.568h-4.102zm14.643-8.19v1.652h-2.772V26.5h-1.848v-8.148h-2.772V16.7zm8.189 9.8-.798-2.366h-3.668l-.798 2.366h-1.974l3.5-9.8h2.226l3.486 9.8zm-3.962-3.892h2.66l-1.274-3.78h-.112z"/><defs><clipPath id="a"><path fill="#fff" d="M0 0h143v40H0z"/></clipPath></defs></svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="40" fill="none"><mask id="a" width="143" height="40" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M0 0h143v40H0z"/></mask><g mask="url(#a)"><path fill="#838383" fill-rule="evenodd" d="M78.974 8a8 8 0 0 1-15.748 2h-11.17a4 4 0 0 0-3.945 3.342l-.329 1.973a7.98 7.98 0 0 1-2.6 4.685 7.98 7.98 0 0 1 2.6 4.685l.329 1.973A4 4 0 0 0 52.056 30h3.17a8 8 0 1 1 0 4h-3.17a8 8 0 0 1-7.89-6.685l-.33-1.973A4 4 0 0 0 39.891 22h-3.263a8.005 8.005 0 0 1-15.309 0h-4.691a8 8 0 1 1 .172-4h4.348A8.003 8.003 0 0 1 36.8 18h3.09a4 4 0 0 0 3.946-3.342l.33-1.973A8 8 0 0 1 52.055 6h11.17a8 8 0 0 1 15.749 2m-4 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-66 15.667a4 4 0 1 0 0-8 4 4 0 0 0 0 8m20 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8m34 12.333a4 4 0 1 0 0-8 4 4 0 0 0 0 8" clip-rule="evenodd"/><path fill="#fff" d="M86.978 30h4.177v-8.842c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.492 1.305 3.492 3.98v9.04h4.176v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.25h-.26l-.36-1.924H86.98zm31.585-10.996v-.196c1.436-.718 2.872-1.958 2.872-4.405 0-3.524-2.905-5.645-6.918-5.645-4.112 0-7.049 2.25-7.049 5.71 0 2.35 1.371 3.622 2.872 4.34v.196a5.54 5.54 0 0 0-3.655 5.286c0 3.557 2.937 6.037 7.799 6.037s7.701-2.48 7.701-6.037c0-2.936-1.958-4.666-3.622-5.286m-4.079-7.244c1.632 0 2.839 1.044 2.839 2.806s-1.24 2.807-2.839 2.807-2.937-1.045-2.937-2.807c0-1.794 1.273-2.806 2.937-2.806m0 15.435c-1.893 0-3.426-1.208-3.426-3.263 0-1.86 1.272-3.264 3.393-3.264 2.089 0 3.362 1.37 3.362 3.329 0 1.99-1.469 3.198-3.329 3.198M126.428 30h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.491 1.305 3.491 3.98V30h4.177v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.25h-.261l-.359-1.924h-3.818z"/></g><path fill="#858585" d="M221.216 6.657h-61.5a4.5 4.5 0 0 0-4.5 4.5v19.5a4.5 4.5 0 0 0 4.5 4.5h61.5a4.5 4.5 0 0 0 4.5-4.5v-19.5a4.5 4.5 0 0 0-4.5-4.5"/><path fill="#fff" d="M183.47 20.765q0 2.597-.688 4.283-.677 1.686-1.847 2.634a7 7 0 0 1-2.658 1.317q-1.477.381-3.065.381h-4.603V12.322h4.308q1.637 0 3.163.345a6.9 6.9 0 0 1 2.745 1.243q1.218.898 1.932 2.56.714 1.65.713 4.295m-4.184 0q0-2.303-.504-3.483-.493-1.182-1.354-1.6-.85-.43-1.92-.43h-.862v11.211h.862q1.12 0 1.969-.48.85-.492 1.33-1.735t.48-3.483zm11.139-5.563V19.3h5.907v2.831h-5.907v4.357h7.126v2.892h-11.163V12.322h11.15l-.406 2.88zm15.901 11.028 3.213-13.908h4.135L208.75 29.38h-4.997l-4.899-17.058h4.284z"/></svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="40" fill="none"><g clip-path="url(#a)"><path fill="#838383" fill-rule="evenodd" d="M78.974 8a8 8 0 0 1-15.748 2h-11.17a4 4 0 0 0-3.945 3.342l-.329 1.973a7.98 7.98 0 0 1-2.6 4.685 7.98 7.98 0 0 1 2.6 4.685l.329 1.973A4 4 0 0 0 52.056 30h3.17a8 8 0 1 1 0 4h-3.17a8 8 0 0 1-7.89-6.685l-.33-1.973A4 4 0 0 0 39.891 22h-3.263a8.004 8.004 0 0 1-15.309 0h-4.691a8 8 0 1 1 .172-4h4.348A8.003 8.003 0 0 1 36.8 18h3.09a4 4 0 0 0 3.946-3.342l.33-1.973A8 8 0 0 1 52.055 6h11.17a8 8 0 0 1 15.748 2zm-4 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-66 15.667a4 4 0 1 0 0-8 4 4 0 0 0 0 8m20 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8m34 12.333a4 4 0 1 0 0-8 4 4 0 0 0 0 8" clip-rule="evenodd"/><path fill="#101330" d="M86.978 30.001h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.492 1.305 3.492 3.981v9.039h4.176v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.26l-.36-1.925H86.98zm31.585-10.997v-.196c1.436-.718 2.872-1.958 2.872-4.405 0-3.524-2.905-5.645-6.918-5.645-4.112 0-7.049 2.251-7.049 5.71 0 2.35 1.371 3.622 2.872 4.34v.196a5.54 5.54 0 0 0-3.655 5.286c0 3.557 2.937 6.037 7.799 6.037s7.701-2.48 7.701-6.037c0-2.936-1.958-4.666-3.622-5.286m-4.079-7.244c1.632 0 2.839 1.044 2.839 2.806s-1.24 2.807-2.839 2.807-2.937-1.045-2.937-2.807c0-1.794 1.273-2.806 2.937-2.806m0 15.435c-1.893 0-3.426-1.208-3.426-3.263 0-1.86 1.272-3.264 3.393-3.264 2.089 0 3.362 1.37 3.362 3.329 0 1.99-1.469 3.198-3.329 3.198m11.944 2.806h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.491 1.305 3.491 3.981v9.039h4.177v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.261l-.359-1.925h-3.818z"/></g><rect width="70.5" height="28.5" x="155.216" y="6.657" fill="#858585" rx="4.5"/><defs><clipPath id="a"><path fill="#fff" d="M0 0h143v40H0z"/></clipPath></defs><path fill="#fff" d="M183.47 20.765q0 2.597-.688 4.283-.677 1.686-1.847 2.634-1.169.935-2.658 1.317-1.477.381-3.065.381h-4.603V12.322h4.308q1.637 0 3.163.345 1.539.332 2.745 1.243 1.218.898 1.932 2.56.714 1.649.714 4.295zm-4.184 0q0-2.302-.504-3.483-.493-1.182-1.354-1.6-.85-.43-1.92-.43h-.862v11.211h.862q1.12 0 1.969-.48.85-.492 1.33-1.735t.48-3.483zm11.139-5.563V19.3h5.907v2.831h-5.907v4.357h7.126v2.892h-11.163V12.322h11.15l-.406 2.88zm15.901 11.028 3.213-13.908h4.135L208.75 29.38h-4.997l-4.899-17.058h4.284z"/></svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="230" height="40" fill="none"><mask id="a" width="143" height="40" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M0 0h143v40H0z"/></mask><g mask="url(#a)"><path fill="#EA4B71" fill-rule="evenodd" d="M78.974 8a8 8 0 0 1-15.748 2h-11.17a4 4 0 0 0-3.945 3.342l-.329 1.973a7.98 7.98 0 0 1-2.6 4.685 7.98 7.98 0 0 1 2.6 4.685l.329 1.973A4 4 0 0 0 52.056 30h3.17a8 8 0 1 1 0 4h-3.17a8 8 0 0 1-7.89-6.685l-.33-1.973A4 4 0 0 0 39.891 22h-3.263a8.005 8.005 0 0 1-15.309 0h-4.691a8 8 0 1 1 .172-4h4.348A8.003 8.003 0 0 1 36.8 18h3.09a4 4 0 0 0 3.946-3.342l.33-1.973A8 8 0 0 1 52.055 6h11.17a8 8 0 0 1 15.749 2m-4 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-66 15.667a4 4 0 1 0 0-8 4 4 0 0 0 0 8m20 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8m34 12.333a4 4 0 1 0 0-8 4 4 0 0 0 0 8" clip-rule="evenodd"/><path fill="#fff" d="M86.978 30h4.177v-8.842c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.492 1.305 3.492 3.98v9.04h4.176v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.25h-.26l-.36-1.924H86.98zm31.585-10.996v-.196c1.436-.718 2.872-1.958 2.872-4.405 0-3.524-2.905-5.645-6.918-5.645-4.112 0-7.049 2.25-7.049 5.71 0 2.35 1.371 3.622 2.872 4.34v.196a5.54 5.54 0 0 0-3.655 5.286c0 3.557 2.937 6.037 7.799 6.037s7.701-2.48 7.701-6.037c0-2.936-1.958-4.666-3.622-5.286m-4.079-7.244c1.632 0 2.839 1.044 2.839 2.806s-1.24 2.807-2.839 2.807-2.937-1.045-2.937-2.807c0-1.794 1.273-2.806 2.937-2.806m0 15.435c-1.893 0-3.426-1.208-3.426-3.263 0-1.86 1.272-3.264 3.393-3.264 2.089 0 3.362 1.37 3.362 3.329 0 1.99-1.469 3.198-3.329 3.198M126.428 30h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.491 1.305 3.491 3.98V30h4.177v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.25h-.261l-.359-1.924h-3.818z"/></g><path fill="#EA4B71" d="M214.852 12.5h-56.703A4.15 4.15 0 0 0 154 16.649v10.702a4.15 4.15 0 0 0 4.149 4.149h56.703a4.15 4.15 0 0 0 4.149-4.149V16.649a4.15 4.15 0 0 0-4.149-4.149"/><path fill="#fff" d="m162.985 26.312-2.496-7.624q.061.404.143 1.04.082.63.137 1.4.062.774.062 1.608v3.576h-1.908v-9.477h2.797l2.42 7.583a33 33 0 0 1-.226-1.661 20 20 0 0 1-.116-2.291v-3.63h1.908v9.476zm10.611-9.477v1.64h-1.955v6.189h1.955v1.648h-6.153v-1.648h1.955v-6.188h-1.955v-1.64zm5.477 9.71q-2.018 0-3.084-1.272-1.06-1.28-1.06-3.72 0-1.613.589-2.714.588-1.108 1.586-1.675.997-.568 2.229-.568 1.04 0 1.75.32.711.323 1.265.849l-1.176 1.217a3.5 3.5 0 0 0-.827-.567 2.1 2.1 0 0 0-.903-.185 1.96 1.96 0 0 0-1.135.342q-.492.334-.78 1.074-.286.73-.286 1.92 0 1.238.198 1.97.206.732.615 1.053.41.314 1.04.314.335 0 .629-.075.294-.082.547-.212V22.45h-1.19l-.219-1.573h3.528v4.71a6.8 6.8 0 0 1-1.531.699 5.8 5.8 0 0 1-1.785.259m9.005-.233v-3.993h-2.297v3.993h-2.243v-9.477h2.243v3.638h2.297v-3.638h2.243v9.477zm8.164-7.76v7.76h-2.243v-7.76h-2.66v-1.717h7.672l-.232 1.717zm4.266 7.76v-9.477h2.243v7.706h4.11l-.233 1.77zm12.157-3.555v3.555h-2.242V22.77l-3.09-5.935h2.454l1.798 4.082 1.812-4.082h2.359z"/></svg>

Before

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="230" height="40" fill="none"><g clip-path="url(#a)"><path fill="#ea4b71" fill-rule="evenodd" d="M78.974 8a8 8 0 0 1-15.748 2h-11.17a4 4 0 0 0-3.945 3.342l-.329 1.973a7.98 7.98 0 0 1-2.6 4.685 7.98 7.98 0 0 1 2.6 4.685l.329 1.973A4 4 0 0 0 52.056 30h3.17a8 8 0 1 1 0 4h-3.17a8 8 0 0 1-7.89-6.685l-.33-1.973A4 4 0 0 0 39.891 22h-3.263a8.004 8.004 0 0 1-15.309 0h-4.691a8 8 0 1 1 .172-4h4.348A8.003 8.003 0 0 1 36.8 18h3.09a4 4 0 0 0 3.946-3.342l.33-1.973A8 8 0 0 1 52.055 6h11.17a8 8 0 0 1 15.748 2zm-4 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-66 15.667a4 4 0 1 0 0-8 4 4 0 0 0 0 8m20 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8m34 12.333a4 4 0 1 0 0-8 4 4 0 0 0 0 8" clip-rule="evenodd"/><path fill="#101330" d="M86.978 30.001h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.492 1.305 3.492 3.981v9.039h4.176v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.26l-.36-1.925H86.98zm31.585-10.997v-.196c1.436-.718 2.872-1.958 2.872-4.405 0-3.524-2.905-5.645-6.918-5.645-4.112 0-7.049 2.251-7.049 5.71 0 2.35 1.371 3.622 2.872 4.34v.196a5.54 5.54 0 0 0-3.655 5.286c0 3.557 2.937 6.037 7.799 6.037s7.701-2.48 7.701-6.037c0-2.936-1.958-4.666-3.622-5.286m-4.079-7.244c1.632 0 2.839 1.044 2.839 2.806s-1.24 2.807-2.839 2.807-2.937-1.045-2.937-2.807c0-1.794 1.273-2.806 2.937-2.806m0 15.435c-1.893 0-3.426-1.208-3.426-3.263 0-1.86 1.272-3.264 3.393-3.264 2.089 0 3.362 1.37 3.362 3.329 0 1.99-1.469 3.198-3.329 3.198m11.944 2.806h4.177v-8.843c0-2.904 1.762-4.177 3.753-4.177 1.958 0 3.491 1.305 3.491 3.981v9.039h4.177v-9.887c0-4.275-2.48-6.755-6.363-6.755-2.447 0-3.818.979-4.797 2.251h-.261l-.359-1.925h-3.818z"/></g><rect width="65.001" height="19" x="154" y="12.5" fill="#ea4b71" rx="4.149"/><defs><clipPath id="a"><path fill="#fff" d="M0 0h143v40H0z"/></clipPath></defs><path fill="#fff" d="m162.985 26.312-2.496-7.624q.061.404.143 1.04.082.629.137 1.401.062.773.062 1.607v3.576h-1.908v-9.477h2.797l2.42 7.583q-.11-.65-.226-1.661t-.116-2.291v-3.63h1.908v9.476Zm10.611-9.477v1.641h-1.955v6.188h1.955v1.648h-6.153v-1.648h1.955v-6.188h-1.955v-1.64zm5.477 9.71q-2.017 0-3.084-1.272-1.06-1.279-1.06-3.72 0-1.613.589-2.714.588-1.108 1.586-1.675.998-.568 2.229-.568 1.04 0 1.75.321.711.322 1.265.848l-1.176 1.217q-.43-.383-.827-.567-.397-.185-.903-.185-.636 0-1.135.342-.492.335-.78 1.074-.286.731-.286 1.92 0 1.238.198 1.97.205.732.615 1.053.41.314 1.04.314.335 0 .629-.075.294-.082.547-.212V22.45h-1.19l-.219-1.573h3.528v4.711q-.71.438-1.531.698-.814.26-1.785.26zm9.005-.233v-3.993h-2.297v3.993h-2.243v-9.477h2.243v3.638h2.297v-3.638h2.243v9.477Zm8.164-7.76v7.76h-2.243v-7.76h-2.66v-1.717h7.672l-.232 1.717zm4.266 7.76v-9.477h2.243v7.706h4.11l-.233 1.771Zm12.157-3.555v3.555h-2.242V22.77l-3.09-5.935h2.454l1.798 4.082 1.812-4.082h2.359z"/></svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" fill="none"><path fill="#EA4B71" fill-rule="evenodd" d="M28.013 6.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.579 1.337l-.131.79A3.2 3.2 0 0 1 18.496 8a3.2 3.2 0 0 1 1.04 1.874l.131.789A1.6 1.6 0 0 0 21.246 12h.467a3.201 3.201 0 0 1 6.3.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.157-2.674l-.131-.789A1.6 1.6 0 0 0 16.379 8.8h-1.267a3.201 3.201 0 0 1-6.199 0H7.112a3.201 3.201 0 0 1-6.3-.8 3.2 3.2 0 0 1 6.3-.8h1.801a3.201 3.201 0 0 1 6.199 0h1.267a1.6 1.6 0 0 0 1.579-1.337l.131-.79A3.2 3.2 0 0 1 21.246 2.4h3.667a3.201 3.201 0 0 1 6.3.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"/></svg>

Before

Width:  |  Height:  |  Size: 847 B

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="58" height="16" fill="none"><g clip-path="url(#a)"><path fill="#EA4B71" fill-rule="evenodd" d="M27.2 6.4A3.2 3.2 0 0 1 24.1 4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 8a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 12h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789A1.6 1.6 0 0 0 15.567 8.8h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 8a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79A3.2 3.2 0 0 1 20.433 2.4h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2M12.8 8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M48.002 6.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"/><path fill="#fff" d="M51.367 11.2h1.624V7.758c0-1.13.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V7.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0h-1.624V4.848h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85h-1.624V7.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h58v16H0z"/></clipPath></defs></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="58" height="16" fill="none"><path fill="#EA4B71" fill-rule="evenodd" d="M27.2 6.4A3.2 3.2 0 0 1 24.1 4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 8a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 12h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789A1.6 1.6 0 0 0 15.567 8.8h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 8a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79A3.2 3.2 0 0 1 20.433 2.4h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2M12.8 8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"/><path fill="#101330" fill-rule="evenodd" d="M48.002 6.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"/><path fill="#101330" d="M51.367 11.2h1.624V7.758c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V7.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0h-1.624V4.848h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85h-1.624V7.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"/></svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -1,22 +0,0 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useRootStore } from '@/stores/root.store';
import { useUIStore } from '@/stores/ui.store';
const rootStore = useRootStore();
const uiStore = useUIStore();
const basePath = computed(() => rootStore.baseUrl);
const logoPath = computed(() => basePath.value + uiStore.logo);
</script>
<template>
<img :src="logoPath" :class="$style.img" alt="n8n.io" />
</template>
<style lang="scss" module>
.img {
height: 32px;
}
</style>

View file

@ -0,0 +1,119 @@
<script setup lang="ts">
import type { FrontendSettings } from '@n8n/api-types';
import { computed, onMounted, useCssModule, useTemplateRef } from 'vue';
import { useFavicon } from '@vueuse/core';
import LogoIcon from './logo-icon.svg';
import LogoText from './logo-text.svg';
const props = defineProps<
(
| {
location: 'authView';
}
| {
location: 'sidebar';
collapsed: boolean;
}
) & {
releaseChannel: FrontendSettings['releaseChannel'];
}
>();
const { location, releaseChannel } = props;
const showReleaseChannelTag = computed(() => {
if (releaseChannel === 'stable') return false;
if (location === 'authView') return true;
return !props.collapsed;
});
const showLogoText = computed(() => {
if (location === 'authView') return true;
return !props.collapsed;
});
const $style = useCssModule();
const containerClasses = computed(() => {
if (location === 'authView') {
return [$style.logoContainer, $style.authView];
}
return [
$style.logoContainer,
$style.sidebar,
props.collapsed ? $style.sidebarCollapsed : $style.sidebarExpanded,
];
});
const svg = useTemplateRef<{ $el: Element }>('logo');
onMounted(() => {
if (releaseChannel === 'stable' || !('createObjectURL' in URL)) return;
const logoEl = svg.value!.$el;
// Change the logo fill color inline, so that favicon can also use it
const logoColor = releaseChannel === 'dev' ? '#838383' : '#E9984B';
logoEl.querySelector('path')?.setAttribute('fill', logoColor);
// Reuse the SVG as favicon
const blob = new Blob([logoEl.outerHTML], { type: 'image/svg+xml' });
useFavicon(URL.createObjectURL(blob));
});
</script>
<template>
<div :class="containerClasses" data-test-id="n8n-logo">
<LogoIcon :class="$style.logo" ref="logo" />
<LogoText v-if="showLogoText" :class="$style.logoText" />
<div v-if="showReleaseChannelTag" size="small" round :class="$style.releaseChannelTag">
{{ releaseChannel }}
</div>
</div>
</template>
<style lang="scss" module>
.logoContainer {
display: flex;
justify-content: center;
}
.logoText {
margin-left: var(--spacing-5xs);
path {
fill: var(--color-text-dark);
}
}
.releaseChannelTag {
color: var(--color-text-dark);
padding: var(--spacing-5xs) var(--spacing-4xs);
background-color: var(--color-background-base);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-base);
font-size: var(--font-size-4xs);
font-weight: var(--font-weight-bold);
text-transform: capitalize;
line-height: var(--font-line-height-regular);
height: var(--spacing-s);
margin: 10px 0 0 3px;
}
.authView {
transform: scale(2);
margin-bottom: var(--spacing-xl);
}
.sidebar {
transform: scale(1.3);
}
.sidebarExpanded .logo {
margin-left: var(--spacing-xs);
}
.sidebarCollapsed .logo {
width: 40px;
height: 30px;
padding: 0 var(--spacing-4xs);
}
</style>

View file

@ -0,0 +1,38 @@
import { createComponentRenderer } from '@/__tests__/render';
import Logo from '../Logo.vue';
vi.stubGlobal('URL', {
createObjectURL: vi.fn(),
});
describe('Logo', () => {
const renderComponent = createComponentRenderer(Logo);
it('renders the logo for authView location', () => {
const wrapper = renderComponent({
props: { location: 'authView', releaseChannel: 'stable' },
});
expect(wrapper.html()).toMatchSnapshot();
});
it('renders the logo for sidebar location when sidebar is expanded', () => {
const wrapper = renderComponent({
props: { location: 'sidebar', collapsed: false, releaseChannel: 'stable' },
});
expect(wrapper.html()).toMatchSnapshot();
});
it('renders the logo for sidebar location when sidebar is collapsed', () => {
const wrapper = renderComponent({
props: { location: 'sidebar', collapsed: true, releaseChannel: 'stable' },
});
expect(wrapper.html()).toMatchSnapshot();
});
it('renders the releaseChannelTag for non-stable releaseChannel', async () => {
const wrapper = renderComponent({
props: { location: 'authView', releaseChannel: 'dev' },
});
expect(wrapper.html()).toMatchSnapshot();
});
});

View file

@ -0,0 +1,49 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Logo > renders the logo for authView location 1`] = `
"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
<path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg><svg width="26" height="30" class="logoText">
<g fill="#101330">
<path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
<path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
</g>
</svg>
<!--v-if-->
</div>"
`;
exports[`Logo > renders the logo for sidebar location when sidebar is collapsed 1`] = `
"<div class="logoContainer sidebar sidebarCollapsed" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
<path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg>
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Logo > renders the logo for sidebar location when sidebar is expanded 1`] = `
"<div class="logoContainer sidebar sidebarExpanded" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
<path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg><svg width="26" height="30" class="logoText">
<g fill="#101330">
<path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
<path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
</g>
</svg>
<!--v-if-->
</div>"
`;
exports[`Logo > renders the releaseChannelTag for non-stable releaseChannel 1`] = `
"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
<path fill="#838383" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg><svg width="26" height="30" class="logoText">
<g fill="#101330">
<path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
<path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
</g>
</svg>
<div size="small" round="" class="releaseChannelTag">dev</div>
</div>"
`;

View file

@ -0,0 +1,3 @@
<svg xmlns='http://www.w3.org/2000/svg' width="30" height="30">
<path fill="#EA4B71" fill-rule="evenodd" clip-rule="evenodd" transform="translate(0, 10)" d="M27.2 6.4A3.2 3.2 0 0 1 24.1 4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 8a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 12h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789A1.6 1.6 0 0 0 15.567 8.8h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 8a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79A3.2 3.2 0 0 1 20.433 2.4h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2M12.8 8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" />
</svg>

After

Width:  |  Height:  |  Size: 863 B

View file

@ -0,0 +1,6 @@
<svg width="26" height="30">
<g fill="#101330" transform="translate(-33, 10)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 48.002,6.918 V 6.842 c 0.558,-0.28 1.116,-0.762 1.116,-1.716 0,-1.372 -1.13,-2.198 -2.69,-2.198 -1.598,0 -2.74,0.877 -2.74,2.224 0,0.915 0.533,1.41 1.116,1.69 v 0.076 a 2.16,2.16 0 0 0 -1.42,2.059 c 0,1.385 1.141,2.351 3.032,2.351 1.89,0 2.994,-0.966 2.994,-2.351 A 2.16,2.16 0 0 0 48.002,6.918 m -1.587,-2.82 c 0.635,0 1.104,0.406 1.104,1.092 0,0.686 -0.482,1.093 -1.103,1.093 -0.622,0 -1.142,-0.407 -1.142,-1.093 0,-0.699 0.495,-1.093 1.142,-1.093 m 0,6.01 c -0.735,0 -1.332,-0.47 -1.332,-1.27 0,-0.725 0.495,-1.272 1.32,-1.272 0.812,0 1.307,0.534 1.307,1.297 0,0.775 -0.571,1.245 -1.294,1.245" />
<path d="m 51.367,11.2 h 1.624 V 7.758 c 0,-1.131 0.685,-1.627 1.46,-1.627 0.76,0 1.357,0.509 1.357,1.55 v 3.52 h 1.624 V 7.35 c 0,-1.664 -0.964,-2.63 -2.474,-2.63 -0.952,0 -1.485,0.381 -1.865,0.877 h -0.102 l -0.14,-0.75 h -1.484 z m -14.376,0 H 35.367 V 4.848 h 1.485 l 0.14,0.75 h 0.1 c 0.381,-0.496 0.914,-0.877 1.866,-0.877 1.51,0 2.474,0.966 2.474,2.63 v 3.85 H 39.808 V 7.68 c 0,-1.041 -0.596,-1.55 -1.358,-1.55 -0.774,0 -1.459,0.496 -1.459,1.627 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -25,6 +25,7 @@ import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper
import { useGlobalEntityCreation } from '@/composables/useGlobalEntityCreation';
import { N8nNavigationDropdown } from 'n8n-design-system';
import { onClickOutside, type VueInstance } from '@vueuse/core';
import Logo from './Logo/Logo.vue';
const becomeTemplateCreatorStore = useBecomeTemplateCreatorStore();
const cloudPlanStore = useCloudPlanStore();
@ -165,10 +166,6 @@ const createBtn = ref<InstanceType<typeof N8nNavigationDropdown>>();
const isCollapsed = computed(() => uiStore.sidebarMenuCollapsed);
const logoPath = computed(
() => basePath.value + (isCollapsed.value ? 'static/logo/collapsed.svg' : uiStore.logo),
);
const hasVersionUpdates = computed(
() => settingsStore.settings.releaseChannel === 'stable' && versionsStore.hasVersionUpdates,
);
@ -321,7 +318,11 @@ onClickOutside(createBtn as Ref<VueInstance>, () => {
<N8nIcon v-else icon="chevron-left" size="xsmall" class="mr-5xs" />
</div>
<div :class="$style.logo">
<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
<Logo
location="sidebar"
:collapsed="isCollapsed"
:release-channel="settingsStore.settings.releaseChannel"
/>
<N8nNavigationDropdown
ref="createBtn"
data-test-id="universal-add"
@ -451,15 +452,11 @@ onClickOutside(createBtn as Ref<VueInstance>, () => {
&.sideMenuCollapsed {
width: $sidebar-width;
padding-top: 90px;
padding-top: 100px;
.logo {
flex-direction: column;
gap: 16px;
}
.logo img {
left: 0;
gap: 12px;
}
}
}

View file

@ -188,14 +188,6 @@ export const useUIStore = defineStore(STORES.UI, () => {
return theme.value === 'system' ? getPreferredTheme() : theme.value;
});
const logo = computed(() => {
const { releaseChannel } = settingsStore.settings;
const suffix = appliedTheme.value === 'dark' ? '-dark.svg' : '.svg';
return `static/logo/${
releaseChannel === 'stable' ? 'expanded' : `channel/${releaseChannel}`
}${suffix}`;
});
const contextBasedTranslationKeys = computed(() => {
const deploymentType = settingsStore.deploymentType;
@ -563,7 +555,6 @@ export const useUIStore = defineStore(STORES.UI, () => {
return {
appGridWidth,
appliedTheme,
logo,
contextBasedTranslationKeys,
getLastSelectedNode,
isVersionsOpen,

View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import Logo from '@/components/Logo/Logo.vue';
import SSOLogin from '@/components/SSOLogin.vue';
import type { IFormBoxConfig } from '@/Interface';
import { useSettingsStore } from '@/stores/settings.store';
withDefaults(
defineProps<{
@ -32,13 +34,15 @@ const onSubmit = (values: { [key: string]: string }) => {
const onSecondaryClick = () => {
emit('secondaryClick');
};
const {
settings: { releaseChannel },
} = useSettingsStore();
</script>
<template>
<div :class="$style.container">
<div :class="$style.logoContainer">
<Logo />
</div>
<Logo location="authView" :release-channel="releaseChannel" />
<div v-if="subtitle" :class="$style.textContainer">
<n8n-text size="large">{{ subtitle }}</n8n-text>
</div>
@ -69,16 +73,10 @@ body {
padding-top: var(--spacing-2xl);
> * {
margin-bottom: var(--spacing-l);
width: 352px;
}
}
.logoContainer {
display: flex;
justify-content: center;
}
.textContainer {
text-align: center;
}

View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { IFormInputs } from '@/Interface';
import Logo from '../components/Logo.vue';
import Logo from '@/components/Logo/Logo.vue';
import {
MFA_AUTHENTICATION_RECOVERY_CODE_INPUT_MAX_LENGTH,
MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH,
@ -10,6 +10,7 @@ import { mfaEventBus } from '@/event-bus';
import { onMounted, ref } from 'vue';
import { useI18n } from '@/composables/useI18n';
import { toRefs } from '@vueuse/core';
import { useSettingsStore } from '@/stores/settings.store';
// ---------------------------------------------------------------------------
// #region Props
@ -152,6 +153,10 @@ const onSaveClick = () => {
// #endregion
const {
settings: { releaseChannel },
} = useSettingsStore();
// ---------------------------------------------------------------------------
// #region Lifecycle hooks
// ---------------------------------------------------------------------------
@ -165,9 +170,7 @@ onMounted(() => {
<template>
<div :class="$style.container">
<div :class="$style.logoContainer">
<Logo />
</div>
<Logo location="authView" :release-channel="releaseChannel" />
<n8n-card>
<div :class="$style.headerContainer">
<n8n-heading size="xlarge" color="text-dark">{{
@ -245,16 +248,10 @@ body {
padding-top: var(--spacing-2xl);
> * {
margin-bottom: var(--spacing-l);
width: 352px;
}
}
.logoContainer {
display: flex;
justify-content: center;
}
.formContainer {
padding-bottom: var(--spacing-xl);
}

View file

@ -1,6 +1,7 @@
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { defineConfig, mergeConfig } from 'vite';
import svgLoader from 'vite-svg-loader';
import { vitestConfig } from '../design-system/vite.config.mts';
import icons from 'unplugin-icons/vite';
@ -59,6 +60,7 @@ const plugins = [
],
}),
vue(),
svgLoader(),
legacy({
modernTargets: browsers,
modernPolyfills: true,

View file

@ -1583,6 +1583,9 @@ importers:
vite:
specifier: catalog:frontend
version: 6.0.2(@types/node@18.16.16)(jiti@1.21.0)(sass@1.64.1)(terser@5.16.1)
vite-svg-loader:
specifier: 5.1.0
version: 5.1.0(vue@3.5.13(typescript@5.7.2))
vitest:
specifier: catalog:frontend
version: 2.1.8(@types/node@18.16.16)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1)
@ -5422,6 +5425,10 @@ packages:
resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
engines: {node: '>= 10'}
'@trysound/sax@0.2.0':
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'}
'@tsconfig/node10@1.0.11':
resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
@ -7029,6 +7036,10 @@ packages:
resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
engines: {node: '>= 6'}
commander@7.2.0:
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
engines: {node: '>= 10'}
commander@9.4.1:
resolution: {integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==}
engines: {node: ^12.20.0 || >=14}
@ -7210,6 +7221,14 @@ packages:
css-to-react-native@3.2.0:
resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
css-tree@2.2.1:
resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
css-tree@2.3.1:
resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
css-what@6.1.0:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'}
@ -7225,6 +7244,10 @@ packages:
cssfilter@0.0.10:
resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
csso@5.0.5:
resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
cssom@0.3.8:
resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
@ -9862,6 +9885,12 @@ packages:
md5@2.3.0:
resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
mdn-data@2.0.28:
resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
mdn-data@2.0.30:
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
mdurl@1.0.1:
resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
@ -12094,6 +12123,11 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
svgo@3.3.2:
resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
engines: {node: '>=14.0.0'}
hasBin: true
swagger-ui-dist@5.11.0:
resolution: {integrity: sha512-j0PIATqQSEFGOLmiJOJZj1X1Jt6bFIur3JpY7+ghliUnfZs0fpWDdHEkn9q7QUlBtKbkn6TepvSxTqnE8l3s0A==}
@ -12790,6 +12824,11 @@ packages:
vite:
optional: true
vite-svg-loader@5.1.0:
resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
peerDependencies:
vue: '>=3.2.13'
vite@5.4.11:
resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
engines: {node: ^18.0.0 || >=20.0.0}
@ -18089,6 +18128,8 @@ snapshots:
'@tootallnate/once@2.0.0': {}
'@trysound/sax@0.2.0': {}
'@tsconfig/node10@1.0.11':
optional: true
@ -20053,6 +20094,8 @@ snapshots:
commander@6.2.1: {}
commander@7.2.0: {}
commander@9.4.1: {}
commist@3.2.0: {}
@ -20261,6 +20304,16 @@ snapshots:
css-color-keywords: 1.0.0
postcss-value-parser: 4.2.0
css-tree@2.2.1:
dependencies:
mdn-data: 2.0.28
source-map-js: 1.2.1
css-tree@2.3.1:
dependencies:
mdn-data: 2.0.30
source-map-js: 1.2.1
css-what@6.1.0: {}
css.escape@1.5.1: {}
@ -20269,6 +20322,10 @@ snapshots:
cssfilter@0.0.10: {}
csso@5.0.5:
dependencies:
css-tree: 2.2.1
cssom@0.3.8: {}
cssom@0.5.0: {}
@ -23697,6 +23754,10 @@ snapshots:
crypt: 0.0.2
is-buffer: 1.1.6
mdn-data@2.0.28: {}
mdn-data@2.0.30: {}
mdurl@1.0.1: {}
media-typer@0.3.0: {}
@ -26467,6 +26528,16 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {}
svgo@3.3.2:
dependencies:
'@trysound/sax': 0.2.0
commander: 7.2.0
css-select: 5.1.0
css-tree: 2.3.1
css-what: 6.1.0
csso: 5.0.5
picocolors: 1.0.1
swagger-ui-dist@5.11.0: {}
swagger-ui-express@5.0.1(express@4.21.1):
@ -27195,6 +27266,11 @@ snapshots:
- rollup
- supports-color
vite-svg-loader@5.1.0(vue@3.5.13(typescript@5.7.2)):
dependencies:
svgo: 3.3.2
vue: 3.5.13(typescript@5.7.2)
vite@5.4.11(@types/node@18.16.16)(sass@1.64.1)(terser@5.16.1):
dependencies:
esbuild: 0.24.0