diff --git a/static/app/components/nav/orgDropdown.tsx b/static/app/components/nav/orgDropdown.tsx
index fd1f4750a846da..6bc7f447781060 100644
--- a/static/app/components/nav/orgDropdown.tsx
+++ b/static/app/components/nav/orgDropdown.tsx
@@ -5,7 +5,8 @@ import {logout} from 'sentry/actionCreators/account';
import {Button} from 'sentry/components/button';
import {OrganizationAvatar} from 'sentry/components/core/avatar/organizationAvatar';
import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
-import IdBadge from 'sentry/components/idBadge';
+import OrganizationBadge from 'sentry/components/idBadge/organizationBadge';
+import UserBadge from 'sentry/components/idBadge/userBadge';
import {IconAdd, IconWarning} from 'sentry/icons';
import {t, tn} from 'sentry/locale';
import ConfigStore from 'sentry/stores/configStore';
@@ -49,25 +50,6 @@ function createOrganizationMenuItem(): MenuItemProps {
};
}
-function MenuOrgSummary() {
- const organization = useOrganization();
- const {projects} = useProjects();
-
- return (
-
-
-
-
- {organization.name}
-
-
{tn('%s Project', '%s Projects', projects.length)}
-
-
- );
-}
-
function SwitchOrganizationItem({organization}: {organization: OrganizationSummary}) {
return (
@@ -102,6 +84,8 @@ export function OrgDropdown() {
const {organizations} = useLegacyStore(OrganizationsStore);
+ const {projects} = useProjects();
+
function handleLogout() {
logout(api);
}
@@ -115,20 +99,22 @@ export function OrgDropdown() {
aria-label={t('Toggle organization menu')}
{...props}
>
-
-
-
+
)}
minMenuWidth={200}
items={[
{
key: 'organization',
- label: ,
+ label: (
+
+
+
+ ),
children: [
{
key: 'organization-settings',
@@ -173,9 +159,9 @@ export function OrgDropdown() {
{
key: 'user',
label: (
-
-
-
+
+
+
),
textValue: t('User Summary'),
children: [
@@ -212,26 +198,10 @@ const OrgDropdownTrigger = styled(Button)`
width: 44px;
`;
-const AvatarWrapper = styled('div')`
- position: relative;
-`;
-
const StyledOrganizationAvatar = styled(OrganizationAvatar)`
border-radius: 6px; /* Fixes background bleeding on corners */
`;
-const MenuOrgSummaryWrapper = styled('div')`
- font-size: ${p => p.theme.fontSizeMedium};
- font-weight: ${p => p.theme.fontWeightNormal};
-
- display: grid;
- grid-template-columns: max-content minmax(0, 1fr);
- gap: ${space(1)};
- align-items: center;
- padding: ${space(0.5)} 0;
- text-transform: none;
-`;
-
const SwitchOrganizationWrapper = styled('div')`
display: flex;
align-items: center;
@@ -241,7 +211,7 @@ const SwitchOrganizationWrapper = styled('div')`
font-weight: ${p => p.theme.fontWeightNormal};
`;
-const UserSummaryWrapper = styled('div')`
+const SectionTitleWrapper = styled('div')`
text-transform: none;
font-size: ${p => p.theme.fontSizeMedium};
font-weight: ${p => p.theme.fontWeightNormal};
@@ -254,21 +224,6 @@ const SwitchOrganizationItemName = styled('div')<{pendingDeletion: boolean}>`
${p => p.theme.overflowEllipsis};
`;
-const MenuOrgSummaryName = styled('div')<{pendingDeletion: boolean}>`
- color: ${p => (p.pendingDeletion ? p.theme.subText : p.theme.textColor)};
- line-height: normal;
- font-weight: ${p => p.theme.fontWeightBold};
- ${p => p.theme.overflowEllipsis};
-`;
-
-const ProjectCount = styled('div')`
- color: ${p => p.theme.subText};
- font-size: ${p => p.theme.fontSizeMedium};
- line-height: 1;
- margin-top: ${space(0.5)};
- ${p => p.theme.overflowEllipsis};
-`;
-
const PendingDeletionAvatar = styled('div')`
height: 22px;
width: 22px;