feat: add Settings/Accounts Connected Accounts section accounts list (#2953)

Closes #2887

packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx

@@ -1,13 +1,14 @@
-import React, { MouseEvent, useMemo } from 'react';
+import { MouseEvent } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { TablerIconsProps } from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 export type LightButtonAccent = 'secondary' | 'tertiary';
 
 export type LightButtonProps = {
   className?: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   title?: string;
   accent?: LightButtonAccent;
   active?: boolean;
@@ -76,7 +77,7 @@ const StyledButton = styled.button<
 
 export const LightButton = ({
   className,
-  icon: initialIcon,
+  Icon,
   title,
   active = false,
   accent = 'secondary',
@@ -84,15 +85,7 @@ export const LightButton = ({
   focus = false,
   onClick,
 }: LightButtonProps) => {
-  const icon = useMemo(() => {
-    if (!initialIcon || !React.isValidElement(initialIcon)) {
-      return null;
-    }
-
-    return React.cloneElement<TablerIconsProps>(initialIcon as any, {
-      size: 14,
-    });
-  }, [initialIcon]);
+  const theme = useTheme();
 
   return (
     <StyledButton
@@ -103,7 +96,7 @@ export const LightButton = ({
       className={className}
       active={active}
     >
-      {icon}
+      {!!Icon && <Icon size={theme.icon.size.sm} />}
       {title}
     </StyledButton>
   );

packages/twenty-front/src/modules/ui/input/button/components/__stories__/LightButton.stories.tsx

@@ -22,16 +22,16 @@ export const Default: Story = {
     disabled: false,
     active: false,
     focus: false,
-    icon: <IconSearch />,
+    Icon: IconSearch,
   },
   argTypes: {
-    icon: { control: false },
+    Icon: { control: false },
   },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: CatalogStory<Story, typeof LightButton> = {
-  args: { title: 'Filter', icon: <IconSearch /> },
+  args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     accent: { control: false },
     disabled: { control: false },

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -15,13 +15,17 @@ export type SelectProps<Value extends string | number | null> = {
   className?: string;
   disabled?: boolean;
   dropdownScopeId: string;
+  fullWidth?: boolean;
   label?: string;
   onChange?: (value: Value) => void;
   options: { value: Value; label: string; Icon?: IconComponent }[];
   value?: Value;
 };
 
-const StyledControlContainer = styled.div<{ disabled?: boolean }>`
+const StyledControlContainer = styled.div<{
+  disabled?: boolean;
+  fullWidth?: boolean;
+}>`
   align-items: center;
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -29,7 +33,7 @@ const StyledControlContainer = styled.div<{ disabled?: boolean }>`
   color: ${({ disabled, theme }) =>
     disabled ? theme.font.color.tertiary : theme.font.color.primary};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  display: inline-flex;
+  display: ${({ fullWidth }) => (fullWidth ? 'flex' : 'inline-flex')};
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ theme }) => theme.spacing(8)};
   justify-content: space-between;
@@ -60,6 +64,7 @@ export const Select = <Value extends string | number | null>({
   className,
   disabled,
   dropdownScopeId,
+  fullWidth,
   label,
   onChange,
   options,
@@ -72,7 +77,7 @@ export const Select = <Value extends string | number | null>({
   const { closeDropdown } = useDropdown({ dropdownScopeId });
 
   const selectControl = (
-    <StyledControlContainer disabled={disabled}>
+    <StyledControlContainer disabled={disabled} fullWidth={fullWidth}>
       <StyledControlLabel>
         {!!selectedOption?.Icon && (
           <selectedOption.Icon

packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
 
 const StyledCard = styled.div`
-  background-color: ${({ theme }) => theme.background.secondary};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  padding: ${({ theme }) => theme.spacing(3)};
+  color: ${({ theme }) => theme.font.color.secondary};
+  overflow: hidden;
 `;
 
 export { StyledCard as Card };

packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx

@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledCardContent = styled.div<{ divider?: boolean }>`
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  ${({ divider, theme }) =>
+    divider
+      ? css`
+          border-bottom: 1px solid ${theme.border.color.medium};
+        `
+      : ''}
+`;
+
+export { StyledCardContent as CardContent };

packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledCardFooter = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+export { StyledCardFooter as CardFooter };

packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const StyledCardHeader = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+export { StyledCardHeader as CardHeader };

packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx

@@ -1,10 +1,31 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
 import { Card } from '../Card';
+import { CardContent } from '../CardContent';
+import { CardFooter } from '../CardFooter';
+import { CardHeader } from '../CardHeader';
 
 const meta: Meta<typeof Card> = {
   title: 'UI/Layout/Card/Card',
   component: Card,
+  decorators: [ComponentDecorator],
+  render: (args) => (
+    <Card {...args}>
+      <CardHeader>Lorem ipsum</CardHeader>
+      <CardContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id massa
+        vel odio ullamcorper molestie eu nec ipsum. Sed semper convallis
+        consectetur.
+      </CardContent>
+      <CardFooter>Lorem ipsum</CardFooter>
+    </Card>
+  ),
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
 };
 
 export default meta;

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -21,6 +21,7 @@ import { DropdownMenu } from './DropdownMenu';
 import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
 
 type DropdownProps = {
+  className?: string;
   clickableComponent?: JSX.Element | JSX.Element[];
   dropdownComponents: JSX.Element | JSX.Element[];
   hotkey?: {
@@ -37,6 +38,7 @@ type DropdownProps = {
 };
 
 export const Dropdown = ({
+  className,
   clickableComponent,
   dropdownComponents,
   dropdownMenuWidth,
@@ -97,7 +99,7 @@ export const Dropdown = ({
   );
 
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} className={className}>
       {clickableComponent && (
         <div ref={refs.setReference} onClick={toggleDropdown}>
           {clickableComponent}