diff --git a/front/src/modules/auth/components/Logo.tsx b/front/src/modules/auth/components/Logo.tsx index 0d60d69bc..d12b997a0 100644 --- a/front/src/modules/auth/components/Logo.tsx +++ b/front/src/modules/auth/components/Logo.tsx @@ -6,40 +6,62 @@ type Props = React.ComponentProps<'div'> & { workspaceLogo?: string | null; }; -const StyledLogo = styled.div` +const StyledContainer = styled.div` height: 48px; margin-bottom: ${({ theme }) => theme.spacing(4)}; margin-top: ${({ theme }) => theme.spacing(4)}; - img { - height: 100%; - width: 100%; - } - position: relative; width: 48px; `; -type StyledWorkspaceLogoProps = { +const StyledTwentyLogo = styled.img` + border-radius: ${({ theme }) => theme.border.radius.xs}; + height: 24px; + width: 24px; +`; + +const StyledTwentyLogoContainer = styled.div` + align-items: center; + background-color: ${({ theme }) => theme.background.primary}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + bottom: ${({ theme }) => `-${theme.spacing(3)}`}; + display: flex; + height: 28px; + justify-content: center; + + position: absolute; + right: ${({ theme }) => `-${theme.spacing(3)}`}; + width: 28px; +`; + +type StyledMainLogoProps = { logo?: string | null; }; -const StyledWorkspaceLogo = styled.div` +const StyledMainLogo = styled.div` background: url(${(props) => props.logo}); background-size: cover; - border-radius: ${({ theme }) => theme.border.radius.xs}; - bottom: ${({ theme }) => `-${theme.spacing(3)}`}; - height: ${({ theme }) => theme.spacing(6)}; - position: absolute; - right: ${({ theme }) => `-${theme.spacing(3)}`}; - width: ${({ theme }) => theme.spacing(6)}; + height: 100%; + + width: 100%; `; export function Logo({ workspaceLogo, ...props }: Props) { + if (!workspaceLogo) { + return ( + + + + ); + } + return ( - - - logo - + + + + + + ); } diff --git a/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 614893a8d..489b2b188 100644 --- a/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -76,7 +76,7 @@ export function SignInUpForm() { const title = useMemo(() => { if (signInUpMode === SignInUpMode.Invite) { - return `Join ${workspace?.displayName ?? ''} Team`; + return `Join ${workspace?.displayName ?? ''} team`; } return signInUpMode === SignInUpMode.SignIn diff --git a/front/src/modules/companies/components/CompanyTeam.tsx b/front/src/modules/companies/components/CompanyTeam.tsx index eb7e057b2..a65d7e081 100644 --- a/front/src/modules/companies/components/CompanyTeam.tsx +++ b/front/src/modules/companies/components/CompanyTeam.tsx @@ -12,6 +12,7 @@ const StyledContainer = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(2)}; + margin-bottom: ${({ theme }) => theme.spacing(2)}; `; const StyledTitleContainer = styled.div` @@ -32,7 +33,6 @@ const StyledListContainer = styled.div` border-radius: ${({ theme }) => theme.spacing(1)}; display: flex; flex-direction: column; - max-height: ${({ theme }) => theme.spacing(35)}; overflow: auto; width: 100%; `; diff --git a/front/src/modules/ui/board/components/EntityBoardColumn.tsx b/front/src/modules/ui/board/components/EntityBoardColumn.tsx index 1c3202f64..2bd8ab7bf 100644 --- a/front/src/modules/ui/board/components/EntityBoardColumn.tsx +++ b/front/src/modules/ui/board/components/EntityBoardColumn.tsx @@ -91,16 +91,13 @@ export function EntityBoardColumn({ /> ))} - + {(draggableProvided) => ( -
+
{boardOptions.newCardComponent} diff --git a/front/src/modules/ui/input/checkbox/components/Checkbox.tsx b/front/src/modules/ui/input/checkbox/components/Checkbox.tsx index 4caec5717..82c2ed4b3 100644 --- a/front/src/modules/ui/input/checkbox/components/Checkbox.tsx +++ b/front/src/modules/ui/input/checkbox/components/Checkbox.tsx @@ -38,6 +38,7 @@ const StyledInput = styled.input<{ variant: CheckboxVariant; indeterminate?: boolean; shape?: CheckboxShape; + isChecked: boolean; }>` cursor: pointer; margin: 0; @@ -79,9 +80,11 @@ const StyledInput = styled.input<{ width: var(--size); } - &:checked + label:before { - background: ${({ theme }) => theme.color.blue}; - border-color: ${({ theme }) => theme.color.blue}; + & + label:before { + background: ${({ theme, isChecked }) => + isChecked ? theme.color.blue : 'inherit'}; + border-color: ${({ theme, isChecked }) => + isChecked ? theme.color.blue : 'inherit'}; } & + label > svg { @@ -112,7 +115,6 @@ export function Checkbox({ React.useEffect(() => { setIsInternalChecked(checked); }, [checked]); - function handleChange(value: boolean) { onChange?.(value); setIsInternalChecked(!isInternalChecked); @@ -130,6 +132,7 @@ export function Checkbox({ variant={variant} checkboxSize={size} shape={shape} + isChecked={isInternalChecked} onChange={(event) => handleChange(event.target.checked)} />