diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailTitle.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailTitle.tsx index 4c06e7d99b..66bc765fd9 100644 --- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailTitle.tsx +++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailTitle.tsx @@ -12,7 +12,6 @@ type SettingsApplicationDetailTitleProps = { }; const StyledTitleContainer = styled.div` - margin-bottom: ${themeCssVariables.spacing[4]}; width: ${() => { return OBJECT_SETTINGS_WIDTH + 'px'; }}; @@ -34,7 +33,7 @@ const StyledHeaderLeft = styled.div` const StyledHeaderTop = styled.div` align-items: center; display: flex; - gap: ${themeCssVariables.spacing[3]}; + gap: ${themeCssVariables.spacing[2]}; `; const StyledLogo = styled.div` @@ -75,9 +74,10 @@ const StyledAppName = styled.div` `; const StyledAppDescription = styled.div` - color: ${themeCssVariables.font.color.secondary}; + color: ${themeCssVariables.font.color.tertiary}; font-size: ${themeCssVariables.font.size.md}; font-weight: ${themeCssVariables.font.weight.regular}; + line-height: ${themeCssVariables.text.lineHeight.lg}; `; const StyledUnlistedBanner = styled.div` diff --git a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationDetailAboutTab.tsx b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationDetailAboutTab.tsx index ce31ace490..437cdf016f 100644 --- a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationDetailAboutTab.tsx +++ b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationDetailAboutTab.tsx @@ -1,7 +1,6 @@ -import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput'; import { t } from '@lingui/core/macro'; import { isDefined } from 'twenty-shared/utils'; -import { H2Title, IconTrash } from 'twenty-ui/display'; +import { H2Title, IconTrash, AppTooltip } from 'twenty-ui/display'; import { Section } from 'twenty-ui/layout'; import { SettingsApplicationVersionContainer } from '~/pages/settings/applications/components/SettingsApplicationVersionContainer'; import { Button } from 'twenty-ui/input'; @@ -46,8 +45,6 @@ export const SettingsApplicationDetailAboutTab = ({ return null; } - const { id, name, description } = application; - const handleUninstallApplication = async () => { setIsLoading(true); try { @@ -77,38 +74,49 @@ export const SettingsApplicationDetailAboutTab = ({ appRegistrationId={registrationId} /> - {application.canBeUninstalled && ( - <> -
- -
- - Please type {`"${confirmationValue}"`} to confirm you want to - uninstall this application. - - } - onConfirmClick={handleUninstallApplication} - confirmButtonText={t`Uninstall`} - loading={isLoading} + <> +
+ - - )} +
+ + Please type {`"${confirmationValue}"`} to confirm you want to + uninstall this application. + + } + onConfirmClick={handleUninstallApplication} + confirmButtonText={t`Uninstall`} + loading={isLoading} + /> + ); }; diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx index 23b6dd479a..715f25267d 100644 --- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/Button.tsx @@ -18,6 +18,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'; export type ButtonAccent = 'default' | 'blue' | 'danger'; export type ButtonProps = { + id?: string; className?: string; Icon?: IconComponent; title?: string; @@ -441,7 +442,9 @@ const computeButtonWrapperColor = ( : themeCssVariables.font.color.inverted; case 'danger': return !inverted - ? themeCssVariables.font.color.danger + ? !disabled + ? themeCssVariables.font.color.danger + : themeCssVariables.color.red5 : themeCssVariables.font.color.inverted; } break; @@ -453,6 +456,7 @@ export const Button = ({ className, Icon, title, + id, fullWidth = false, variant = 'primary', inverted = false, @@ -512,6 +516,7 @@ export const Button = ({ style={dynamicStyles} >