`
- : nothing}
-
- ${isSuperAdmin
- ? html`
-
+ `
+ : ""}
${this.authService.authState
- ? html` ${this.renderOrgs()}
-
-
+
-
-
- ${this.renderMenuUserInfo()}
-
- this.navigate(ROUTES.accountSettings)}
- >
-
- ${msg("Account Settings")}
-
- ${this.appState.userInfo?.isSuperAdmin
- ? html` this.navigate(ROUTES.usersInvite)}
- >
-
- ${msg("Invite Users")}
- `
- : ""}
-
-
-
- ${msg("Log Out")}
-
-
- `
+ shape="rounded"
+ class="[--size:1.75rem]"
+ >
+
+
+ ${this.renderMenuUserInfo()}
+
+ this.navigate(ROUTES.accountSettings)}
+ >
+
+ ${msg("Account Settings")}
+
+ ${this.appState.userInfo?.isSuperAdmin
+ ? html` this.navigate(ROUTES.usersInvite)}
+ >
+
+ ${msg("Invite Users")}
+ `
+ : ""}
+
+
+
+ ${msg("Log Out")}
+
+
+ `
: html`
${msg("Log In")}
${this.appState.settings?.registrationEnabled
@@ -388,7 +411,7 @@ export class App extends LiteElement {
private renderOrgs() {
const orgs = this.appState.userInfo?.orgs;
- if (!orgs || orgs.length < 2 || !this.appState.userInfo) return;
+ if (!orgs) return;
const selectedOption = this.appState.orgSlug
? orgs.find(({ slug }) => slug === this.appState.orgSlug)
@@ -405,47 +428,61 @@ export class App extends LiteElement {
const orgNameLength = 50;
return html`
-
- ${selectedOption.name.slice(0, orgNameLength)}
- ) => {
- const { value } = e.detail.item;
- if (value) {
- this.navigate(`/orgs/${value}`);
- } else {
- if (this.appState.userInfo) {
- this.clearSelectedOrg();
- }
- this.navigate(`/`);
- }
- }}
- >
- ${when(
- this.appState.userInfo.isSuperAdmin,
- () => html`
- ${msg("All Organizations")}
-
- `,
- )}
- ${orgs.map(
- (org) => html`
- ${org.name.slice(0, orgNameLength)}
- `,
- )}
-
-
+
+ ${selectedOption.name.slice(0, orgNameLength)}
+
+ ${when(
+ orgs.length > 1,
+ () => html`
+
+
+ ) => {
+ const { value } = e.detail.item;
+ if (value) {
+ this.navigate(`/orgs/${value}`);
+ } else {
+ if (this.appState.userInfo) {
+ this.clearSelectedOrg();
+ }
+ this.navigate(`/`);
+ }
+ }}
+ >
+ ${when(
+ this.appState.userInfo?.isSuperAdmin,
+ () => html`
+ ${msg("All Organizations")}
+
+ `,
+ )}
+ ${orgs.map(
+ (org) => html`
+ ${org.name.slice(0, orgNameLength)}
+ `,
+ )}
+
+
+ `,
+ )}
`;
}
@@ -454,9 +491,7 @@ export class App extends LiteElement {
if (this.appState.userInfo.isSuperAdmin) {
return html`
- ${msg("admin")}
+ ${msg("Admin")}
${this.appState.userInfo.name}
@@ -729,7 +764,7 @@ export class App extends LiteElement {
>
diff --git a/frontend/src/shoelace.ts b/frontend/src/shoelace.ts
index c60601e3..0dbd3742 100644
--- a/frontend/src/shoelace.ts
+++ b/frontend/src/shoelace.ts
@@ -7,6 +7,7 @@ import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/ico
import "@shoelace-style/shoelace/dist/themes/light.css";
import "@shoelace-style/shoelace/dist/components/alert/alert";
+import "@shoelace-style/shoelace/dist/components/avatar/avatar";
import "@shoelace-style/shoelace/dist/components/button/button";
import "@shoelace-style/shoelace/dist/components/icon/icon";
import "@shoelace-style/shoelace/dist/components/input/input";
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index 5875dd84..203c8f64 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -102,6 +102,14 @@
}
@layer components {
+ sl-avatar::part(base) {
+ transition: var(--sl-transition-x-fast) background-color;
+ }
+
+ sl-avatar:hover::part(base) {
+ background-color: var(--sl-color-primary-500);
+ }
+
/* Add more spacing between label, input and help text */
.form-label,
btrix-tag-input::part(form-control-label),