diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 4a72dc617..228fde192 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -73,6 +73,15 @@ export const SignInUpForm = () => { submitSSOEmail, } = useSignInUp(form); + if ( + signInUpStep === SignInUpStep.Init && + !authProviders.google && + !authProviders.microsoft && + !authProviders.sso + ) { + continueWithEmail(); + } + const toggleSSOMode = () => { if (signInUpStep === SignInUpStep.SSOEmail) { continueWithEmail(); @@ -155,6 +164,9 @@ export const SignInUpForm = () => { Icon={() => } title="Continue with Google" onClick={signInWithGoogle} + variant={ + signInUpStep === SignInUpStep.Init ? undefined : 'secondary' + } fullWidth /> @@ -167,6 +179,9 @@ export const SignInUpForm = () => { Icon={() => } title="Continue with Microsoft" onClick={signInWithMicrosoft} + variant={ + signInUpStep === SignInUpStep.Init ? undefined : 'secondary' + } fullWidth /> @@ -176,6 +191,9 @@ export const SignInUpForm = () => { <> } + variant={ + signInUpStep === SignInUpStep.Init ? undefined : 'secondary' + } title={ signInUpStep === SignInUpStep.SSOEmail ? 'Continue with email' @@ -282,9 +300,11 @@ export const SignInUpForm = () => { )} { if (signInUpStep === SignInUpStep.Init) { continueWithEmail(); @@ -301,7 +321,7 @@ export const SignInUpForm = () => { setShowErrors(true); form.handleSubmit(submitCredentials)(); }} - Icon={() => form.formState.isSubmitting && } + Icon={() => (form.formState.isSubmitting ? : null)} disabled={isSubmitButtonDisabled} fullWidth /> diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx index c70ff8952..5b8d12162 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx @@ -16,7 +16,7 @@ export const MultipleFiltersDropdownFilterOnFilterChangedEffect = ({ setDropdownWidth(280); break; default: - setDropdownWidth(160); + setDropdownWidth(200); } }, [filterDefinitionUsedInDropdownType, setDropdownWidth]); diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx index 1f64b2adc..db306bd1d 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx @@ -10,7 +10,7 @@ import { useRef, useState, } from 'react'; -import { IconComponent, IconEye, IconEyeOff } from 'twenty-ui'; +import { IconComponent, IconEye, IconEyeOff, RGBA } from 'twenty-ui'; import { useCombinedRefs } from '~/hooks/useCombinedRefs'; import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly'; @@ -33,6 +33,7 @@ const StyledInputContainer = styled.div` display: flex; flex-direction: row; width: 100%; + position: relative; `; const StyledInput = styled.input< @@ -42,12 +43,7 @@ const StyledInput = styled.input< border: 1px solid ${({ theme, error }) => error ? theme.border.color.danger : theme.border.color.medium}; - border-bottom-left-radius: ${({ theme, LeftIcon }) => - !LeftIcon && theme.border.radius.sm}; - border-right: none; - border-left: ${({ LeftIcon }) => LeftIcon && 'none'}; - border-top-left-radius: ${({ theme, LeftIcon }) => - !LeftIcon && theme.border.radius.sm}; + border-radius: ${({ theme }) => theme.border.radius.sm}; box-sizing: border-box; color: ${({ theme }) => theme.font.color.primary}; display: flex; @@ -57,6 +53,8 @@ const StyledInput = styled.input< height: 32px; outline: none; padding: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme, LeftIcon }) => + LeftIcon ? `calc(${theme.spacing(4)} + 16px)` : theme.spacing(2)}; width: 100%; &::placeholder, @@ -69,6 +67,13 @@ const StyledInput = styled.input< &:disabled { color: ${({ theme }) => theme.font.color.tertiary}; } + + &:focus { + ${({ theme }) => { + return `box-shadow: 0px 0px 0px 3px ${RGBA(theme.color.blue, 0.1)}; + border-color: ${theme.color.blue};`; + }}; + } `; const StyledErrorHelper = styled.div` @@ -79,30 +84,27 @@ const StyledErrorHelper = styled.div` const StyledLeftIconContainer = styled.div` align-items: center; - background-color: ${({ theme }) => theme.background.transparent.lighter}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm}; - border-right: none; - border-top-left-radius: ${({ theme }) => theme.border.radius.sm}; display: flex; justify-content: center; padding-left: ${({ theme }) => theme.spacing(2)}; + position: absolute; + top: 0; + bottom: 0; + margin: auto 0; `; const StyledTrailingIconContainer = styled.div< Pick >` align-items: center; - background-color: ${({ theme }) => theme.background.transparent.lighter}; - border: 1px solid - ${({ theme, error }) => - error ? theme.border.color.danger : theme.border.color.medium}; - border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm}; - border-left: none; - border-top-right-radius: ${({ theme }) => theme.border.radius.sm}; display: flex; justify-content: center; padding-right: ${({ theme }) => theme.spacing(1)}; + position: absolute; + top: 0; + bottom: 0; + right: 0; + margin: auto 0; `; const StyledTrailingIcon = styled.div` diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx index 499221ed0..9de37aff9 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx @@ -27,7 +27,7 @@ const StyledDropdownMenu = styled.div<{ flex-direction: column; z-index: 30; - width: ${({ width = 160 }) => + width: ${({ width = 200 }) => typeof width === 'number' ? `${width}px` : width}; `; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx index 48506704e..68ea50959 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx @@ -1,6 +1,6 @@ -import { act } from 'react-dom/test-utils'; import { expect } from '@storybook/test'; import { renderHook } from '@testing-library/react'; +import { act } from 'react-dom/test-utils'; import { RecoilRoot } from 'recoil'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; @@ -57,7 +57,7 @@ describe('useDropdown', () => { wrapper: Wrapper, }); - expect(result.current.dropdownWidth).toBe(160); + expect(result.current.dropdownWidth).toBe(200); await act(async () => { result.current.setDropdownWidth(220); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts index a9879b5f0..bec6cb37b 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts @@ -4,5 +4,5 @@ export const dropdownWidthComponentState = createComponentState< number | undefined >({ key: 'dropdownWidthComponentState', - defaultValue: 160, + defaultValue: 200, }); diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx index c3ce24018..84d32dc19 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx @@ -4,8 +4,8 @@ import { IconLayoutKanban, IconTable, IconX } from 'twenty-ui'; import { IconPicker } from '@/ui/input/components/IconPicker'; import { Select } from '@/ui/input/components/Select'; +import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; -import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; @@ -120,11 +120,11 @@ export const ViewPickerContentCreateMode = () => { disableBlur onClose={() => setHotkeyScope(ViewsHotkeyScope.ListDropdown)} /> - { + onChange={(value) => { setViewPickerIsDirty(true); - setViewPickerInputName(event.target.value); + setViewPickerInputName(value); }} autoFocus /> diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx index 3246651fb..c478dbfb3 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx @@ -2,8 +2,8 @@ import { Key } from 'ts-key-enum'; import { IconChevronLeft } from 'twenty-ui'; import { IconPicker } from '@/ui/input/components/IconPicker'; +import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; -import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; @@ -79,11 +79,11 @@ export const ViewPickerContentEditMode = () => { disableBlur onClose={() => setHotkeyScope(ViewsHotkeyScope.ListDropdown)} /> - { + onChange={(value) => { setViewPickerIsDirty(true); - setViewPickerInputName(event.target.value); + setViewPickerInputName(value); }} autoFocus /> diff --git a/packages/twenty-front/src/pages/auth/SignInUp.tsx b/packages/twenty-front/src/pages/auth/SignInUp.tsx index 2608ceaaa..712712c01 100644 --- a/packages/twenty-front/src/pages/auth/SignInUp.tsx +++ b/packages/twenty-front/src/pages/auth/SignInUp.tsx @@ -7,10 +7,10 @@ import { SignInUpForm } from '@/auth/sign-in-up/components/SignInUpForm'; import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp'; import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { AnimatedEaseIn } from 'twenty-ui'; -import { isDefined } from '~/utils/isDefined'; import { SignInUpStep } from '@/auth/states/signInUpStepState'; import { IconLockCustom } from '@ui/display/icon/components/IconLock'; +import { AnimatedEaseIn } from 'twenty-ui'; +import { isDefined } from '~/utils/isDefined'; import { SSOWorkspaceSelection } from './SSOWorkspaceSelection'; export const SignInUp = () => {