[feat] Minor updates to the edit db connection page (#5250)

- Add placeholders in db connection edit page
- Fix icon alignement and size (should not change) in Info banner

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx

@@ -33,12 +33,10 @@ const StyledInputsContainer = styled.div`
 
 type SettingsIntegrationPostgreSQLConnectionFormProps = {
   disabled?: boolean;
-  passwordPlaceholder?: string;
 };
 
 export const SettingsIntegrationPostgreSQLConnectionForm = ({
   disabled,
-  passwordPlaceholder,
 }: SettingsIntegrationPostgreSQLConnectionFormProps) => {
   const { control } =
     useFormContext<SettingsIntegrationPostgreSQLConnectionFormValues>();
@@ -46,13 +44,26 @@ export const SettingsIntegrationPostgreSQLConnectionForm = ({
   return (
     <StyledInputsContainer>
       {[
-        { name: 'dbname' as const, label: 'Database Name' },
+        {
-        { name: 'host' as const, label: 'Host' },
+          name: 'dbname' as const,
-        { name: 'port' as const, label: 'Port' },
+          label: 'Database Name',
-        { name: 'username' as const, label: 'Username' },
+          placeholder: 'default',
-        { name: 'password' as const, label: 'Password', type: 'password' },
+        },
-        { name: 'schema' as const, label: 'Schema' },
+        { name: 'host' as const, label: 'Host', placeholder: 'host' },
-      ].map(({ name, label, type }) => (
+        { name: 'port' as const, label: 'Port', placeholder: '5432' },
+        {
+          name: 'username' as const,
+          label: 'Username',
+          placeholder: 'username',
+        },
+        {
+          name: 'password' as const,
+          label: 'Password',
+          type: 'password',
+          placeholder: '••••••',
+        },
+        { name: 'schema' as const, label: 'Schema', placeholder: 'public' },
+      ].map(({ name, label, type, placeholder }) => (
         <Controller
           key={name}
           name={name}
@@ -67,11 +78,7 @@ export const SettingsIntegrationPostgreSQLConnectionForm = ({
                 fullWidth
                 type={type}
                 disabled={disabled}
-                placeholder={
+                placeholder={placeholder}
-                  passwordPlaceholder && name === 'password'
-                    ? passwordPlaceholder
-                    : ''
-                }
               />
             );
           }}

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -141,7 +141,6 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
 
             <SettingsIntegrationPostgreSQLConnectionForm
               disabled={hasSyncedTables}
-              passwordPlaceholder="••••••"
             />
           </Section>
         ) : null}

packages/twenty-front/src/modules/ui/display/info/components/Info.tsx

@@ -14,10 +14,15 @@ export type InfoProps = {
 };
 
 const StyledTextContainer = styled.div`
+  align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledIconInfoCircle = styled(IconInfoCircle)`
+  flex-shrink: 0;
+`;
+
 const StyledInfo = styled.div<Pick<InfoProps, 'accent'>>`
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -51,7 +56,7 @@ export const Info = ({
   return (
     <StyledInfo accent={accent}>
       <StyledTextContainer>
-        <IconInfoCircle size={theme.icon.size.md} />
+        <StyledIconInfoCircle size={theme.icon.size.md} />
         {text}
       </StyledTextContainer>
       {buttonTitle && onClick && (