Update Connected Accounts Design (#13332)

/closes #13328 --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Félix Malfait <felix@twenty.com>
2025-07-25 16:48:02 +05:30
parent 79992b53d1
commit d4ca63dbb7
8 changed files with 153 additions and 70 deletions
@@ -0,0 +1,50 @@
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
+import { SettingsConnectedAccountIcon } from '@/settings/accounts/components/SettingsConnectedAccountIcon';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledNameCell = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+    cursor: pointer;
+  }
+`;
+
+type SettingsConnectedAccountsTableRowProps = {
+  account: ConnectedAccount;
+};
+
+export const SettingsConnectedAccountsTableRow = ({
+  account,
+}: SettingsConnectedAccountsTableRowProps) => {
+  const theme = useTheme();
+
+  const IconComponent = SettingsConnectedAccountIcon({ account });
+
+  return (
+    <StyledTableRow key={account.id} gridAutoColumns="332px 1fr">
+      <TableCell>
+        <StyledNameCell>
+          <IconComponent
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+          {account.handle}
+        </StyledNameCell>
+      </TableCell>
+      <TableCell align={'right'}>
+        <SettingsAccountsConnectedAccountsRowRightContainer account={account} />
+      </TableCell>
+    </StyledTableRow>
+  );
+};