Fix design (#19628)

## Before
<img width="614" height="348" alt="image"
src="https://github.com/user-attachments/assets/0a87b8cb-efe0-42ab-ad50-98a3635796f6"
/>

## After

<img width="622" height="411" alt="image"
src="https://github.com/user-attachments/assets/4f3ab135-dbe9-4384-97c2-4d20a13b3d9c"
/>

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`

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}
         />
       </Section>
-      {application.canBeUninstalled && (
-        <>
-          <Section>
-            <H2Title
-              title={t`Manage your app`}
-              description={t`Uninstall this application`}
-            />
-            <Button
-              accent="danger"
-              variant="secondary"
-              title={t`Uninstall`}
-              Icon={IconTrash}
-              onClick={() => openModal(UNINSTALL_APPLICATION_MODAL_ID)}
-            />
-          </Section>
-          <ConfirmationModal
-            confirmationPlaceholder={confirmationValue}
-            confirmationValue={confirmationValue}
-            modalInstanceId={UNINSTALL_APPLICATION_MODAL_ID}
-            title={t`Uninstall Application?`}
-            subtitle={
-              <Trans>
-                Please type {`"${confirmationValue}"`} to confirm you want to
-                uninstall this application.
-              </Trans>
-            }
-            onConfirmClick={handleUninstallApplication}
-            confirmButtonText={t`Uninstall`}
-            loading={isLoading}
+      <>
+        <Section>
+          <H2Title
+            title={t`Manage your app`}
+            description={t`Uninstall this application`}
           />
-        </>
-      )}
+          <Button
+            accent="danger"
+            id={'uninstall-button-anchor'}
+            variant="secondary"
+            title={t`Uninstall`}
+            Icon={IconTrash}
+            disabled={!application.canBeUninstalled}
+            onClick={() =>
+              application.canBeUninstalled
+                ? openModal(UNINSTALL_APPLICATION_MODAL_ID)
+                : null
+            }
+          />
+          {!application.canBeUninstalled && (
+            <AppTooltip
+              anchorSelect={`#uninstall-button-anchor`}
+              content={t`This application is required for your workspace to function properly and cannot be uninstalled.`}
+              place="bottom-start"
+            />
+          )}
+        </Section>
+        <ConfirmationModal
+          confirmationPlaceholder={confirmationValue}
+          confirmationValue={confirmationValue}
+          modalInstanceId={UNINSTALL_APPLICATION_MODAL_ID}
+          title={t`Uninstall Application?`}
+          subtitle={
+            <Trans>
+              Please type {`"${confirmationValue}"`} to confirm you want to
+              uninstall this application.
+            </Trans>
+          }
+          onConfirmClick={handleUninstallApplication}
+          confirmButtonText={t`Uninstall`}
+          loading={isLoading}
+        />
+      </>
     </>
   );
 };

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}
     >
       <StyledButton
+        id={id}
         fullWidth={fullWidth}
         position={position}
         disabled={isDisabled}