diff --git a/packages/twenty-front/src/modules/applications/components/AppChip.tsx b/packages/twenty-front/src/modules/applications/components/AppChip.tsx
index 179cc592fb3..fbaeb1cfeeb 100644
--- a/packages/twenty-front/src/modules/applications/components/AppChip.tsx
+++ b/packages/twenty-front/src/modules/applications/components/AppChip.tsx
@@ -1,64 +1,48 @@
import { useApplicationChipData } from '@/applications/hooks/useApplicationChipData';
+import { styled } from '@linaria/react';
import { Avatar } from 'twenty-ui/display';
-import {
- Chip,
- ChipAccent,
- type ChipSize,
- ChipVariant,
- LinkChip,
-} from 'twenty-ui/components';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
type AppChipProps = {
applicationId: string;
- variant?: ChipVariant;
- size?: ChipSize;
- to?: string;
className?: string;
};
-export const AppChip = ({
- applicationId,
- variant,
- size,
- to,
- className,
-}: AppChipProps) => {
+const StyledContainer = styled.div`
+ align-items: center;
+ color: ${themeCssVariables.font.color.secondary};
+ display: inline-flex;
+ font-size: ${themeCssVariables.font.size.sm};
+ font-weight: ${themeCssVariables.font.weight.regular};
+ gap: ${themeCssVariables.spacing[2]};
+ max-width: 100%;
+ min-width: 0;
+ overflow: hidden;
+`;
+
+const StyledLabel = styled.span`
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
+export const AppChip = ({ applicationId, className }: AppChipProps) => {
const { applicationChipData } = useApplicationChipData({ applicationId });
- const leftComponent = (
-
- );
-
- if (to) {
- return (
-
- );
- }
-
return (
-
+
+
+
+ {applicationChipData.name}
+
+
);
};
diff --git a/packages/twenty-front/src/modules/applications/hooks/useApplicationAvatarColors.ts b/packages/twenty-front/src/modules/applications/hooks/useApplicationAvatarColors.ts
index b4f5f9c6c99..3b21263f890 100644
--- a/packages/twenty-front/src/modules/applications/hooks/useApplicationAvatarColors.ts
+++ b/packages/twenty-front/src/modules/applications/hooks/useApplicationAvatarColors.ts
@@ -1,10 +1,7 @@
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useContext } from 'react';
-import {
- TWENTY_STANDARD_APPLICATION_NAME,
- TWENTY_STANDARD_APPLICATION_UNIVERSAL_IDENTIFIER,
-} from 'twenty-shared/application';
+import { TWENTY_STANDARD_APPLICATION_UNIVERSAL_IDENTIFIER } from 'twenty-shared/application';
import { isDefined } from 'twenty-shared/utils';
import { ThemeContext } from 'twenty-ui/theme-constants';
@@ -20,6 +17,18 @@ type UseApplicationAvatarColorsArgs = {
universalIdentifier?: string | null;
};
+const STANDARD_APPLICATION_AVATAR_COLORS: ApplicationAvatarColors = {
+ // The standard application avatar follows the Figma `Colors/Blue` palette,
+ // which is Radix's pure blue and not Twenty's `theme.color.blue*` tokens
+ // (those map to the indigo palette).
+ // oxlint-disable-next-line twenty/no-hardcoded-colors
+ backgroundColor: '#CEE7FE',
+ // oxlint-disable-next-line twenty/no-hardcoded-colors
+ borderColor: '#B7D9F8',
+ // oxlint-disable-next-line twenty/no-hardcoded-colors
+ color: '#113264',
+};
+
export const useApplicationAvatarColors = (
application: UseApplicationAvatarColorsArgs | null | undefined,
): ApplicationAvatarColors | undefined => {
@@ -31,20 +40,16 @@ export const useApplicationAvatarColors = (
}
const isStandard =
+ isDefined(application.universalIdentifier) &&
application.universalIdentifier ===
- TWENTY_STANDARD_APPLICATION_UNIVERSAL_IDENTIFIER ||
- application.name === TWENTY_STANDARD_APPLICATION_NAME;
+ TWENTY_STANDARD_APPLICATION_UNIVERSAL_IDENTIFIER;
const isCustom =
isDefined(currentWorkspace?.workspaceCustomApplication?.id) &&
currentWorkspace.workspaceCustomApplication.id === application.id;
if (isStandard) {
- return {
- backgroundColor: theme.color.blue5,
- borderColor: theme.color.blue6,
- color: theme.color.blue12,
- };
+ return STANDARD_APPLICATION_AVATAR_COLORS;
}
if (isCustom) {
diff --git a/packages/twenty-front/src/modules/applications/hooks/useApplicationChipData.ts b/packages/twenty-front/src/modules/applications/hooks/useApplicationChipData.ts
index 1463e23dbaa..0bb1b8f1cdb 100644
--- a/packages/twenty-front/src/modules/applications/hooks/useApplicationChipData.ts
+++ b/packages/twenty-front/src/modules/applications/hooks/useApplicationChipData.ts
@@ -7,6 +7,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { t } from '@lingui/core/macro';
import { useContext } from 'react';
+import { TWENTY_STANDARD_APPLICATION_UNIVERSAL_IDENTIFIER } from 'twenty-shared/application';
import { isDefined } from 'twenty-shared/utils';
type UseApplicationChipDataArgs = {
@@ -47,9 +48,26 @@ export const useApplicationChipData = ({
const isCurrent =
isDefined(currentApplicationId) && currentApplicationId === applicationId;
+ const isStandard =
+ isDefined(application.universalIdentifier) &&
+ application.universalIdentifier ===
+ TWENTY_STANDARD_APPLICATION_UNIVERSAL_IDENTIFIER;
+
+ const isCustom =
+ isDefined(currentWorkspace?.workspaceCustomApplication?.id) &&
+ currentWorkspace.workspaceCustomApplication.id === application.id;
+
+ const displayName = isCurrent
+ ? t`This app`
+ : isStandard
+ ? t`Standard`
+ : isCustom
+ ? t`Custom`
+ : application.name;
+
return {
applicationChipData: {
- name: isCurrent ? t`This app` : application.name,
+ name: displayName,
seed: application.universalIdentifier ?? application.name,
colors,
},