Add banner for not vetted apps (#19655)

https://github.com/user-attachments/assets/4038e21a-d5d9-4b93-8589-7a4baf35ef5b

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -19,8 +19,8 @@ import {
   IconLink,
   IconRefresh,
   TooltipDelay,
+  InlineBanner,
 } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
 import { Card } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { parseThemeColor } from 'twenty-ui/utilities';
@@ -73,42 +73,6 @@ const StyledLabel = styled.span`
   margin-bottom: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledConflictBanner = styled.div`
-  align-items: center;
-  background-color: ${themeCssVariables.accent.secondary};
-  border-radius: ${themeCssVariables.border.radius.md};
-  box-sizing: border-box;
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
-  margin-bottom: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledBannerContent = styled.div`
-  align-items: center;
-  display: flex;
-  flex: 1;
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledBannerText = styled.span`
-  color: ${themeCssVariables.color.blue};
-  flex: 1;
-`;
-
-const StyledConflictButtonContainer = styled.div`
-  > button {
-    border-color: ${themeCssVariables.color.blue};
-    color: ${themeCssVariables.color.blue};
-    &:hover {
-      background: ${themeCssVariables.accent.secondary};
-    }
-    &:focus-visible {
-      box-shadow: 0 0 0 3px ${themeCssVariables.accent.tertiary};
-    }
-  }
-`;
-
 const infoCircleElementId = 'info-circle-id';
 
 export const SettingsDataModelObjectAboutForm = ({
@@ -293,31 +257,18 @@ export const SettingsDataModelObjectAboutForm = ({
         <StyledAdvancedSettingsContainer>
           <StyledAdvancedSettingsSectionInputWrapper>
             {isDefined(conflictingObjectMetadataItem) && (
-              <StyledConflictBanner>
-                <StyledBannerContent>
-                  <IconInfoCircle
-                    color={theme.color.blue}
-                    size={theme.icon.size.md}
-                  />
-                  <StyledBannerText>
-                    {t`An object with this name already exists`}
-                  </StyledBannerText>
-                </StyledBannerContent>
-                <StyledConflictButtonContainer>
-                  <Button
-                    size="small"
-                    variant="secondary"
-                    accent="blue"
-                    title={t`Open`}
-                    onClick={() =>
-                      navigateSettings(SettingsPath.ObjectDetail, {
-                        objectNamePlural:
-                          conflictingObjectMetadataItem.namePlural,
-                      })
-                    }
-                  />
-                </StyledConflictButtonContainer>
-              </StyledConflictBanner>
+              <InlineBanner
+                color={'blue'}
+                message={t`An object with this name already exists`}
+                button={{
+                  title: t`Open`,
+                  onClick: () =>
+                    navigateSettings(SettingsPath.ObjectDetail, {
+                      objectNamePlural:
+                        conflictingObjectMetadataItem.namePlural,
+                    }),
+                }}
+              />
             )}
             {[
               {