improved style and added usage of icons

Author: timea-solid

README.md

@@ -266,7 +266,7 @@ solid-ui ships self-contained Lit-based custom elements as subpath exports. Each
 
 ### solid-ui-header
 
-A header bar with branding, auth state (logged-out / logged-in), an account dropdown, and a desktop-only help menu.
+A header bar with branding, auth state (logged-out / logged-in), an account dropdown, an optional logout icon, and a desktop-only help menu.
 
 **Subpath export:** `solid-ui/components/header`
 
@@ -294,7 +294,7 @@ import { LoginButton } from 'solid-ui/components/login-button'
 ```
 
 ```html
-<solid-ui-login-button label="Log in" issuer-url="https://solidcommunity.net"></solid-ui-login-button>
+<solid-ui-login-button label="Log in" issuer-url="https://solidcommunity.net" icon="https://example.com/login-icon.svg"></solid-ui-login-button>
 ```
 
 ```typescript
@@ -315,7 +315,7 @@ import { SignupButton } from 'solid-ui/components/signup-button'
 ```
 
 ```html
-<solid-ui-signup-button label="Get a Pod" signup-url="https://solidproject.org/get_a_pod"></solid-ui-signup-button>
+<solid-ui-signup-button label="Get a Pod" signup-url="https://solidproject.org/get_a_pod" icon="https://example.com/icon.svg"></solid-ui-signup-button>
 ```
 
 ### Component build pipeline

src/v2/components/header/Header.ts

@@ -5,7 +5,7 @@ import '../loginButton/index'
 import '../signupButton/index'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-const DEFAULT_HELP_MENU_ICON = icons.iconBase + 'noun_help.svg'
+const DEFAULT_HELP_MENU_ICON = ''
 const DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg'
 const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'
 const DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = icons.iconBase + 'emptyProfileAvatar.png'
@@ -17,6 +17,7 @@ export type HeaderMenuItem = {
   url?: string
   target?: string
   action?: string
+  icon?: string
 }
 
 export type HeaderAccountMenuItem = HeaderMenuItem & {
@@ -36,8 +37,12 @@ export class Header extends LitElement {
     signUpAction: { type: Object, attribute: false },
     accountMenu: { type: Array, attribute: false },
     logoutLabel: { type: String, attribute: 'logout-label', reflect: true },
+    logoutIcon: { type: String, attribute: 'logout-icon', reflect: true },
     accountLabel: { type: String, attribute: 'account-label', reflect: true },
     accountAvatar: { type: String, attribute: 'account-avatar', reflect: true },
+    accountAvatarFallback: { type: String, attribute: 'account-avatar-fallback', reflect: true },
+    loginIcon: { type: String, attribute: 'login-icon', reflect: true },
+    signUpIcon: { type: String, attribute: 'sign-up-icon', reflect: true },
     helpMenuList: { type: Array },
     accountMenuOpen: { state: true },
     helpMenuOpen: { state: true },
@@ -62,7 +67,6 @@ export class Header extends LitElement {
     --header-button-bg: var(--color-menu-bg, #ffffff);
     --header-button-text: var(--color-header-button-text, #0F172B);
     --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);
-    --header-icon-filter: invert(1) brightness(1.3); /* special way to invert SVG color of icons, from back to white */
     --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
     font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
   }
@@ -84,7 +88,7 @@ export class Header extends LitElement {
     --header-button-bg: var(--color-menu-bg, #ffffff);
     --header-button-text: var(--color-header-button-text, #0f172a);
     --header-button-detail-text: var(--color-header-button-detail-text, #878192);
-    --header-icon-filter: invert(1) brightness(1.3); /* special way to invert SVG color of icons, from back to white */
+    --header-icon-filter: invert(1) brightness(1.3); /* special way to invert SVG color of icons, from white to black */
     --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
     font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
   }
@@ -265,6 +269,7 @@ export class Header extends LitElement {
     height: 1.75rem;
     border-radius: 999px;
     object-fit: cover;
+    background-color: var(--header-border);
   }
 
   .account-dropdown {
@@ -462,11 +467,23 @@ export class Header extends LitElement {
   }
 
   .help-icon {
-    width: 24px;
-    height: 24px;
-    filter: var(--header-icon-filter);
+    width: 35px;
+    height: 35px;
     cursor: pointer;
   }
+
+  .help-text {
+    color: var(--header-text, #ffffff);
+    font: inherit;
+  }
+
+  .logout-action-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    object-fit: contain;
+    margin-right: 0.5rem;
+  }
   `
 
   declare logo: string
@@ -479,8 +496,12 @@ export class Header extends LitElement {
   declare signUpAction: HeaderMenuItem
   declare accountMenu: HeaderAccountMenuItem[]
   declare logoutLabel: string | null
+  declare logoutIcon: string
   declare accountLabel: string
   declare accountAvatar: string
+  declare accountAvatarFallback: string
+  declare loginIcon: string
+  declare signUpIcon: string
   declare helpMenuList: HeaderMenuItem[]
   declare accountMenuOpen: boolean
   declare helpMenuOpen: boolean
@@ -499,8 +520,12 @@ export class Header extends LitElement {
     this.signUpAction = { label: 'Sign Up', action: 'sign-up', url: DEFAULT_SIGNUP_URL }
     this.accountMenu = []
     this.logoutLabel = 'Log Out'
+    this.logoutIcon = ''
     this.accountLabel = 'Accounts'
     this.accountAvatar = ''
+    this.accountAvatarFallback = ''
+    this.loginIcon = ''
+    this.signUpIcon = ''
     this.helpMenuList = []
     this.accountMenuOpen = false
     this.helpMenuOpen = false
@@ -596,7 +621,7 @@ export class Header extends LitElement {
 
   private renderLoggedInAvatar (avatar?: string, wrapperClass = 'account-avatar') {
     const hasAvatar = Boolean(avatar)
-    const imageSrc = hasAvatar ? avatar : DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR
+    const imageSrc = hasAvatar ? avatar : this.accountAvatarFallback || DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR
     const imageAlt = hasAvatar ? 'Profile Avatar' : 'Default Avatar'
 
     if (this.layout === 'mobile' && wrapperClass === 'account-avatar') {
@@ -616,6 +641,7 @@ export class Header extends LitElement {
         <slot name="login-action">
           <solid-ui-login-button
             label="${this.loginAction.label}"
+            icon=${ifDefined(this.layout !== 'mobile' ? (this.loginIcon || this.loginAction.icon) : undefined)}
             theme="${this.theme}"
             part="login-action"
             @login-success="${() => this.handleLoginSuccess()}"
@@ -625,6 +651,8 @@ export class Header extends LitElement {
           <solid-ui-signup-button
             label="${this.signUpAction.label}"
             signup-url="${ifDefined(this.signUpAction.url)}"
+            layout="${this.layout}"
+            .icon=${ifDefined(this.layout !== 'mobile' ? (this.signUpIcon || this.signUpAction.icon) : undefined)}
             theme="${this.theme}"
             part="sign-up-action"
           ></solid-ui-signup-button>
@@ -662,7 +690,7 @@ export class Header extends LitElement {
       ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}
       <span class="account-menu-copy">
         <span class="account-menu-label">${item.label}</span>
-        ${item.webid ? html`<span class="account-menu-webid">${item.webid}</span>` : ''}
+        ${item.webid && this.layout !== 'mobile' ? html`<span class="account-menu-webid">${item.webid}</span>` : ''}
       </span>
     `
 
@@ -742,6 +770,9 @@ export class Header extends LitElement {
               part="logout-action"
               role="menuitem"
             >
+              ${this.logoutIcon && this.layout !== 'mobile'
+                ? html`<img class="logout-action-icon" src="${this.logoutIcon}" alt="" aria-hidden="true" part="logout-action-icon" />`
+                : ''}
               ${this.logoutLabel}
             </button>
           `
@@ -809,7 +840,9 @@ export class Header extends LitElement {
                 @click="${(e: MouseEvent) => this.toggleHelpMenu(e)}"
                 part="help-menu-trigger"
               >
-                <img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />
+                ${this.helpIcon
+                  ? html`<img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />`
+                  : html`<span class="help-text" part="help-text">Help</span>`}
               </button>
 
             <nav

src/v2/components/header/README.md

@@ -2,7 +2,7 @@
 
 A Lit-based custom element that renders the Solid application header, including branding, auth actions, account management, and a help menu.
 
-When `layout="mobile"`, the header hides the help menu entirely, even if `helpMenuList` items or `help-menu` slotted content are provided.
+When `layout="mobile"`, the header hides the help menu entirely, even if `helpMenuList` items or `help-menu` slotted content are provided. In this mode the header also omits icons from the built-in login/sign-up buttons, hides the account webid text in the account dropdown, and hides the logout icon.
 
 When `auth-state="logged-out"`, the header renders a `<solid-ui-login-button>` as the login action. The login button opens a Solid IDP selection popup and handles the full OIDC login flow via `solid-logic`. On success it emits a `login-success` event and the header transitions to `logged-in` state automatically.
 
@@ -79,17 +79,21 @@ The header automatically imports and registers it — no separate import is need
 Properties/attributes:
 
 - `logo`: URL string for the brand image (default: Solid emblem URL).
-- `helpIcon`: URL string for the help icon, default from icons asset.
+- `helpIcon`: URL string for the help icon, default from icons asset. If `help-icon` is empty or not provided, the help trigger renders the text `Help` instead.
 - `brandLink`: URL string for the brand link (default: `#`).
-- `layout`: `desktop` or `mobile`. Mobile layout hides the brand logo link and does not render the help menu.
+- `layout`: `desktop` or `mobile`. Mobile layout hides the brand logo link, does not render the help menu, omits icons from the built-in login and sign-up buttons, hides the account webid text in the dropdown, and hides the logout icon.
 - `theme`: `light` or `dark`.
 - `authState`: `logged-out` or `logged-in`.
-- `loginAction`: object with a `label` for the login button. When `authState` is `logged-out` this is rendered as a `<solid-ui-login-button>` which handles the full OIDC flow; supplying a `url` instead opts out of the built-in flow and renders a plain link.
-- `signUpAction`: object for the logged-out Sign Up action. The `label` field sets the button text and the `url` field (default: `https://solidproject.org/get_a_pod`) is the destination opened in a new tab when the button is clicked.
+- `loginAction`: object with a `label` for the login button. When `authState` is `logged-out` this is rendered as a `<solid-ui-login-button>` which handles the full OIDC flow; supplying a `url` instead opts out of the built-in flow and renders a plain link. The optional `icon` field supplies a left-aligned icon URL for the rendered login button, but icons are hidden on mobile layout.
+- `signUpAction`: object for the logged-out Sign Up action. The `label` field sets the button text, the `url` field (default: `https://solidproject.org/get_a_pod`) is the destination opened in a new tab when the button is clicked, and the optional `icon` field supplies a left-aligned icon URL for the rendered signup button, but icons are hidden on mobile layout.
 - `accountLabel`: label for the logged-in dropdown trigger (default: `Accounts`).
 - `accountAvatar`: avatar URL used as the logged-in dropdown icon.
+- `accountAvatarFallback`: avatar URL used when `accountAvatar` is not provided. This replaces the internal default profile placeholder image.
+- `loginIcon`: optional URL string for a left-aligned icon on the login action button, taking precedence over `loginAction.icon`. Icons are still hidden on mobile layout.
+- `signUpIcon`: optional URL string for a left-aligned icon on the sign-up action button, taking precedence over `signUpAction.icon`. Icons are still hidden on mobile layout.
 - `accountMenu`: array of account entries for the logged-in dropdown.
 - `logoutLabel`: string label for the logout button at the bottom of the logged-in dropdown (default: `Log out`). Set to `null` to hide it.
+- `logoutIcon`: URL string for a left-aligned icon displayed in the logout menu item. Hidden on mobile layout.
 
 Slots:
 
@@ -115,10 +119,14 @@ Use `auth-state="logged-out"` to render the `<solid-ui-login-button>` and a Sign
 
   const header = document.querySelector('solid-ui-header')
   header.authState = 'logged-out'
-  // Optionally override the login button label:
-  header.loginAction = { label: 'Log In' }
-  // Optionally override the sign-up destination (opens in a new tab):
-  header.signUpAction = { label: 'Sign Up', url: 'https://myprovider.example/signup' }
+  // Optionally add an icon to the login button:
+  header.loginAction = { label: 'Log In', icon: 'https://example.com/login-icon.svg' }
+  // Optionally override the sign-up destination and add an icon (opens in a new tab):
+  header.signUpAction = {
+    label: 'Sign Up',
+    url: 'https://myprovider.example/signup',
+    icon: 'https://example.com/signup-icon.svg'
+  }
 
   header.addEventListener('auth-action-select', ({ detail }) => {
     if (detail.role === 'login') {

src/v2/components/header/header.test.ts

@@ -52,8 +52,10 @@ describe('SolidUIHeaderElement', () => {
     const authActionSelected = jest.fn()
 
     header.authState = 'logged-out'
-    header.loginAction = { label: 'Log in', action: 'login' }
-    header.signUpAction = { label: 'Sign Up', url: '/signup' }
+    header.loginAction = { label: 'Log in', action: 'login', icon: 'https://example.com/login-icon.svg' }
+    header.signUpAction = { label: 'Sign Up', url: '/signup', icon: 'https://example.com/signup-icon.svg' }
+    header.loginIcon = 'https://example.com/login-icon-top.svg'
+    header.signUpIcon = 'https://example.com/signup-icon-top.svg'
 
     header.addEventListener('auth-action-select', (event: Event) => {
       authActionSelected((event as CustomEvent).detail)
@@ -69,8 +71,10 @@ describe('SolidUIHeaderElement', () => {
     expect(loginButton).not.toBeNull()
     expect(signUpLink).not.toBeNull()
     expect(loginButton.getAttribute('label')).toBe('Log in')
+    expect(loginButton.getAttribute('icon')).toBe('https://example.com/login-icon-top.svg')
     expect(signUpLink.getAttribute('label')).toBe('Sign Up')
     expect(signUpLink.getAttribute('signup-url')).toBe('/signup')
+    expect(signUpLink.getAttribute('icon')).toBe('https://example.com/signup-icon-top.svg')
 
     loginButton.dispatchEvent(new CustomEvent('login-success', { bubbles: true, composed: true }))
 
@@ -79,13 +83,51 @@ describe('SolidUIHeaderElement', () => {
     })
   })
 
+  it('does not show login or signup icons on mobile layout', async () => {
+    const header = new Header()
+    header.authState = 'logged-out'
+    header.layout = 'mobile'
+    header.loginAction = { label: 'Log in', action: 'login', icon: 'https://example.com/login-icon.svg' }
+    header.signUpAction = { label: 'Sign Up', url: '/signup', icon: 'https://example.com/signup-icon.svg' }
+    header.loginIcon = 'https://example.com/login-icon-top.svg'
+    header.signUpIcon = 'https://example.com/signup-icon-top.svg'
+
+    document.body.appendChild(header)
+    await header.updateComplete
+
+    const shadow = header.shadowRoot
+    const loginButton = shadow?.querySelector('solid-ui-login-button') as HTMLElement
+    const signUpButton = shadow?.querySelector('solid-ui-signup-button') as HTMLElement
+
+    expect(loginButton?.shadowRoot?.querySelector('.login-button-icon')).toBeNull()
+    expect(signUpButton?.shadowRoot?.querySelector('.signup-button-icon')).toBeNull()
+  })
+
+  it('uses a custom fallback avatar when no accountAvatar is configured', async () => {
+    const header = new Header()
+
+    header.authState = 'logged-in'
+    header.accountAvatar = ''
+    header.accountAvatarFallback = 'https://example.com/fallback-avatar.png'
+
+    document.body.appendChild(header)
+    await header.updateComplete
+
+    const shadow = header.shadowRoot
+    const avatarImg = shadow?.querySelector('.account-avatar img') as HTMLImageElement
+
+    expect(avatarImg).not.toBeNull()
+    expect(avatarImg.src).toContain('https://example.com/fallback-avatar.png')
+  })
+
   it('renders an accounts dropdown with avatar when logged in', async () => {
     const header = new Header()
     const accountMenuSelected = jest.fn()
 
     header.authState = 'logged-in'
     header.accountLabel = 'Accounts'
     header.accountAvatar = 'https://example.com/avatar.png'
+    header.logoutIcon = 'https://example.com/logout-icon.svg'
     header.accountMenu = [
       { label: 'Personal Pod', webid: 'https://pod.example/profile/card#me', action: 'switch-personal' },
       { label: 'Work Pod', webid: 'https://work.example/profile/card#me', url: '/work' }
@@ -116,6 +158,7 @@ describe('SolidUIHeaderElement', () => {
     expect(dropdown.hidden).toBe(false)
     expect(firstItem.textContent).toContain('Personal Pod')
     expect(lastItem.textContent).toContain('Log Out')
+    expect((lastItem.querySelector('img.logout-action-icon') as HTMLImageElement)?.src).toContain('https://example.com/logout-icon.svg')
 
     firstItem.click()
 
@@ -128,6 +171,53 @@ describe('SolidUIHeaderElement', () => {
     expect(lastItem.textContent?.trim()).toBe('Log Out')
   })
 
+  it('does not render the logout icon on mobile layout', async () => {
+    const header = new Header()
+    header.layout = 'mobile'
+    header.authState = 'logged-in'
+    header.logoutIcon = 'https://example.com/logout-icon.svg'
+    header.logoutLabel = 'Log Out'
+
+    document.body.appendChild(header)
+    await header.updateComplete
+
+    const shadow = header.shadowRoot
+    const trigger = shadow?.getElementById('accountMenuTrigger') as HTMLButtonElement
+    expect(trigger).not.toBeNull()
+
+    trigger.click()
+    await header.updateComplete
+
+    const lastItem = shadow?.querySelectorAll('.account-menu-item-button')[0] as HTMLButtonElement
+    expect(lastItem).not.toBeNull()
+    expect(lastItem.querySelector('img.logout-action-icon')).toBeNull()
+    expect(lastItem.textContent?.trim()).toBe('Log Out')
+  })
+
+  it('does not render account webid on mobile layout', async () => {
+    const header = new Header()
+    header.layout = 'mobile'
+    header.authState = 'logged-in'
+    header.accountMenu = [
+      { label: 'Personal Pod', webid: 'https://pod.example/profile/card#me', action: 'switch-personal' }
+    ]
+
+    document.body.appendChild(header)
+    await header.updateComplete
+
+    const shadow = header.shadowRoot
+    const trigger = shadow?.getElementById('accountMenuTrigger') as HTMLButtonElement
+    expect(trigger).not.toBeNull()
+
+    trigger.click()
+    await header.updateComplete
+
+    const firstItem = shadow?.querySelector('.account-menu-item-button') as HTMLButtonElement
+    expect(firstItem).not.toBeNull()
+    expect(firstItem.querySelector('.account-menu-webid')).toBeNull()
+    expect(firstItem.textContent?.trim()).toBe('Personal Pod')
+  })
+
   it('supports theme and layout attributes', async () => {
     const header = new Header()
     header.setAttribute('theme', 'dark')
@@ -177,6 +267,7 @@ describe('SolidUIHeaderElement', () => {
     const helpMenuClicked = jest.fn()
 
     header.authState = 'logged-in'
+    header.helpIcon = ''
     header.helpMenuList = [{ label: 'Docs', url: 'https://example.com/docs', target: '_blank' }]
 
     header.addEventListener('help-menu-select', (event: Event) => {
@@ -190,6 +281,7 @@ describe('SolidUIHeaderElement', () => {
     const helpTrigger = shadow?.getElementById('helpMenuTrigger') as HTMLButtonElement
 
     expect(helpTrigger?.disabled).toBe(false)
+    expect(helpTrigger?.textContent?.trim()).toBe('Help')
 
     helpTrigger?.click()
     await header.updateComplete