From 1f956011ef6f350c4ff3ded1d6fabbf33c0fba4b Mon Sep 17 00:00:00 2001 From: Cletus Razakou Date: Mon, 20 Mar 2023 13:41:19 -0400 Subject: [PATCH 1/4] update beacon ui core to 2.1.2 --- web/beacon-app/package.json | 4 ++-- web/beacon-app/src/main.tsx | 1 - web/beacon-app/tailwind.config.js | 2 +- web/beacon-app/yarn.lock | 8 ++++---- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/web/beacon-app/package.json b/web/beacon-app/package.json index cb2db44c6..bea4aef17 100644 --- a/web/beacon-app/package.json +++ b/web/beacon-app/package.json @@ -53,7 +53,7 @@ "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-tooltip": "^1.0.5", "@reduxjs/toolkit": "^1.9.2", - "@rotational/beacon-core": "^2.0.9", + "@rotational/beacon-core": "^2.1.2", "@rotational/beacon-foundation": "^2.0.1", "@sentry/react": "^7.37.1", "@sentry/tracing": "^7.33.0", @@ -173,4 +173,4 @@ "engines": { "node": ">=14.19.1 <=18.x.x" } -} +} \ No newline at end of file diff --git a/web/beacon-app/src/main.tsx b/web/beacon-app/src/main.tsx index 19ee89e33..f693eb7f1 100644 --- a/web/beacon-app/src/main.tsx +++ b/web/beacon-app/src/main.tsx @@ -7,7 +7,6 @@ import App from './App'; import { appConfig } from './application/config'; import initSentry from './application/config/sentry'; -// eslint-disable-next-line no-console console.info('initializing beacon ui', appConfig.nodeENV, appConfig.version, appConfig.revision); initSentry(); diff --git a/web/beacon-app/tailwind.config.js b/web/beacon-app/tailwind.config.js index 19e9b0948..8f369d864 100644 --- a/web/beacon-app/tailwind.config.js +++ b/web/beacon-app/tailwind.config.js @@ -70,7 +70,7 @@ module.exports = { }, }, presets: [ - require('@rotational/beacon-foundation/lib/tailwindPreset.config', require('@rotational/beacon-core/lib/tailwind.config')), + require('@rotational/beacon-foundation/lib/tailwindPreset.config'), ], safelist: [ { diff --git a/web/beacon-app/yarn.lock b/web/beacon-app/yarn.lock index 2d2cc19f0..49ffa8dd1 100644 --- a/web/beacon-app/yarn.lock +++ b/web/beacon-app/yarn.lock @@ -3745,10 +3745,10 @@ estree-walker "^2.0.2" picomatch "^2.3.1" -"@rotational/beacon-core@^2.0.9": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@rotational/beacon-core/-/beacon-core-2.1.0.tgz#a8e0888fbe730f81b60933abbac489a9c2a05164" - integrity sha512-aCiQ8AcMLSb9KY02pDoaREH1xMqbCudQ4hNRc8gXRvjJ5UBAXBA7C5ySmpo/kWzfi8ZgxT2aDmkDo/OJCrKIyw== +"@rotational/beacon-core@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@rotational/beacon-core/-/beacon-core-2.1.2.tgz#f4d7ccedd2264a25610543128f9941a48e1517df" + integrity sha512-v2jTDgX+QvfnQRLIH2vVp8p7VqNl/UrGwFw07tojXt9QEAdTyQpBmlyTNNm8A7Lym2ZagdCfC5Svgeg2d97+cQ== dependencies: "@radix-ui/react-avatar" "^1.0.1" "@radix-ui/react-toast" "^1.1.2" From 0d1d0bb9a3290a5f2c51d97de56a374e1b0ec66c Mon Sep 17 00:00:00 2001 From: Cletus Razakou Date: Mon, 20 Mar 2023 14:44:21 -0400 Subject: [PATCH 2/4] refact: make domain editable --- .../src/components/ui/Button/Button.tsx | 6 ++++ .../components/Register/RegistrationForm.tsx | 31 +++++++++++++------ .../schemas/registrationFormValidation.ts | 2 +- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/web/beacon-app/src/components/ui/Button/Button.tsx b/web/beacon-app/src/components/ui/Button/Button.tsx index 896018914..8062e86a2 100644 --- a/web/beacon-app/src/components/ui/Button/Button.tsx +++ b/web/beacon-app/src/components/ui/Button/Button.tsx @@ -24,6 +24,12 @@ const StyledButton = styled(AriaButton)((props) => ({ background: 'rgba(230,104,9, 0.8)!important', }), }, + ...(props.variant === 'secondary' && { + border: '1px solid #e66809', + }), + ...(props.variant === 'secondary' && { + border: '1px solid #e66809', + }), })); export default Button; diff --git a/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx b/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx index b8b6f9612..72dbddfcd 100644 --- a/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx +++ b/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx @@ -29,6 +29,8 @@ const initialValues = { privacy_agreement: false, } satisfies NewUserAccount; +const DOMAIN_BASE = 'https://rotational.app/'; + type RegistrationFormProps = { onSubmit: (values: NewUserAccount, helpers: FormikHelpers) => void; }; @@ -59,11 +61,18 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { // if organization name is set then set domain to the slugified version of the organization name useEffect(() => { - if (values.organization) { + if (touched.organization && !touched.domain) { setFieldValue('domain', stringify_org(values.organization)); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [values.organization]); + }, [touched.organization, touched.domain]); + + useEffect(() => { + if (values.domain) { + setFieldValue('domain', stringify_org(values.domain)); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [values.domain]); return ( @@ -75,7 +84,7 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { data-testid="name" fullWidth errorMessage={touched.name && errors.name} - errorMessageClassName="py-1" + errorMessageClassName="py-2" {...getFieldProps('name')} />
@@ -115,7 +124,7 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { placeholder={`Password`} data-testid="password" errorMessage={touched.password && errors.password} - errorMessageClassName="py-1" + errorMessageClassName="py-2" fullWidth {...getFieldProps('password')} onFocus={onFocus} @@ -129,7 +138,7 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { fullWidth data-testid="pwcheck" errorMessage={touched.pwcheck && errors.pwcheck} - errorMessageClassName="py-1" + errorMessageClassName="py-2" {...getFieldProps('pwcheck')} />
- https://rotational.app/ + {DOMAIN_BASE} @@ -177,9 +186,11 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { } placeholder="organization name" fullWidth - value={stringify_org(values.organization)} - errorMessageClassName="py-1" + data-testid="domain" + errorMessage={touched.domain && errors.domain} + errorMessageClassName="py-2" className="mt-0" + {...getFieldProps('domain')} />
diff --git a/web/beacon-app/src/features/auth/components/Register/schemas/registrationFormValidation.ts b/web/beacon-app/src/features/auth/components/Register/schemas/registrationFormValidation.ts index cbb2eb160..677beb3e6 100644 --- a/web/beacon-app/src/features/auth/components/Register/schemas/registrationFormValidation.ts +++ b/web/beacon-app/src/features/auth/components/Register/schemas/registrationFormValidation.ts @@ -10,7 +10,7 @@ const validationSchema = Yup.object().shape({ .oneOf([Yup.ref('password'), null], 'The passwords must match.') .required('The confirm password is required.'), organization: Yup.string().required('The organization is required.'), - domain: Yup.string().notRequired(), + domain: Yup.string().required('The domain is required.'), terms_agreement: Yup.boolean().required('The agreement is required.'), }) satisfies Yup.SchemaOf>; From 048c66b26b950979a866dae80d4c12dd90f26724 Mon Sep 17 00:00:00 2001 From: Cletus Razakou Date: Mon, 20 Mar 2023 15:33:04 -0400 Subject: [PATCH 3/4] fix domain error message style --- .../src/components/ui/Button/Button.tsx | 35 +++++++++++++------ .../components/Register/RegistrationForm.tsx | 8 ++--- 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/web/beacon-app/src/components/ui/Button/Button.tsx b/web/beacon-app/src/components/ui/Button/Button.tsx index 8062e86a2..a1d3d692f 100644 --- a/web/beacon-app/src/components/ui/Button/Button.tsx +++ b/web/beacon-app/src/components/ui/Button/Button.tsx @@ -11,25 +11,38 @@ function Button(props: ButtonProps) { const StyledButton = styled(AriaButton)((props) => ({ fontSize: '0.875rem', lineHeight: '1.25rem', + '&:focus': { + outline: 'none', + }, ...(props.isDisabled && { background: 'rgb(233 236 239)', color: 'rgb(206 212 218)', }), - '&:hover': { - ...(!props.isDisabled && { + ...(props.variant === 'primary' && { + '&:hover': { background: 'rgba(29,101,166, 0.8)!important', - }), - ...(props.variant === 'secondary' && - !props.isDisabled && { - background: 'rgba(230,104,9, 0.8)!important', - }), - }, - ...(props.variant === 'secondary' && { - border: '1px solid #e66809', + borderColor: 'rgba(29,101,166, 0.8)!important', + }, + '&:active': { + background: 'rgba(29,101,166, 0.8)!important', + borderColor: 'rgba(29,101,166, 0.8)!important', + }, }), ...(props.variant === 'secondary' && { - border: '1px solid #e66809', + '&:hover': { + background: 'rgba(230,104,9, 0.8)!important', + borderColor: 'rgba(230,104,9, 0.8)!important', + }, + '&:active': { + background: 'rgba(230,104,9, 0.8)!important', + borderColor: 'rgba(230,104,9, 0.8)!important', + }, }), + '&:disabled': { + background: 'rgb(233 236 239)', + color: 'rgb(206 212 218)', + pointer: 'not-allowed', + }, })); export default Button; diff --git a/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx b/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx index ff5cd6f8f..c8222ae2c 100644 --- a/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx +++ b/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx @@ -170,7 +170,7 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { {DOMAIN_BASE} + Domain @@ -241,7 +241,6 @@ const Fieldset = styled.fieldset` border-radius: 0.5rem; padding-top: 25px; padding-bottom: 17px; - overflow: hidden; & div label { position: absolute; top: 0; @@ -258,7 +257,7 @@ const Fieldset = styled.fieldset` } & div > div { position: absolute; - bottom: 0; + bottom: -7px; left: 0; } `; @@ -279,6 +278,7 @@ const Span = styled.span` // TODO: fix it in the design system const CheckboxFieldset = styled.fieldset` + margin-top: 1rem; label svg { min-width: 23px; } From bc32b9ed16154e92cc24b96e5766f5a036f87036 Mon Sep 17 00:00:00 2001 From: Cletus Razakou Date: Mon, 20 Mar 2023 18:29:58 -0400 Subject: [PATCH 4/4] set the textfield padding style globally --- web/beacon-app/package.json | 2 +- .../auth/components/Register/RegistrationForm.tsx | 9 +-------- web/beacon-app/yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 13 deletions(-) diff --git a/web/beacon-app/package.json b/web/beacon-app/package.json index bea4aef17..a11949f13 100644 --- a/web/beacon-app/package.json +++ b/web/beacon-app/package.json @@ -53,7 +53,7 @@ "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-tooltip": "^1.0.5", "@reduxjs/toolkit": "^1.9.2", - "@rotational/beacon-core": "^2.1.2", + "@rotational/beacon-core": "^2.1.3", "@rotational/beacon-foundation": "^2.0.1", "@sentry/react": "^7.37.1", "@sentry/tracing": "^7.33.0", diff --git a/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx b/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx index c8222ae2c..a7c86648a 100644 --- a/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx +++ b/web/beacon-app/src/features/auth/components/Register/RegistrationForm.tsx @@ -84,7 +84,6 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { data-testid="name" fullWidth errorMessage={touched.name && errors.name} - errorMessageClassName="py-2" {...getFieldProps('name')} />
@@ -124,7 +122,6 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { placeholder={`Password`} data-testid="password" errorMessage={touched.password && errors.password} - errorMessageClassName="py-2" fullWidth {...getFieldProps('password')} onFocus={onFocus} @@ -138,7 +135,6 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { fullWidth data-testid="pwcheck" errorMessage={touched.pwcheck && errors.pwcheck} - errorMessageClassName="py-2" {...getFieldProps('pwcheck')} />
@@ -188,8 +183,6 @@ function RegistrationForm({ onSubmit }: RegistrationFormProps) { fullWidth data-testid="domain" errorMessage={touched.domain && errors.domain} - errorMessageClassName="-pt-2" - className="mt-0" {...getFieldProps('domain')} />
@@ -257,7 +250,7 @@ const Fieldset = styled.fieldset` } & div > div { position: absolute; - bottom: -7px; + bottom: -13px; left: 0; } `; diff --git a/web/beacon-app/yarn.lock b/web/beacon-app/yarn.lock index 49ffa8dd1..33f269f2a 100644 --- a/web/beacon-app/yarn.lock +++ b/web/beacon-app/yarn.lock @@ -3745,10 +3745,10 @@ estree-walker "^2.0.2" picomatch "^2.3.1" -"@rotational/beacon-core@^2.1.2": - version "2.1.2" - resolved "https://registry.yarnpkg.com/@rotational/beacon-core/-/beacon-core-2.1.2.tgz#f4d7ccedd2264a25610543128f9941a48e1517df" - integrity sha512-v2jTDgX+QvfnQRLIH2vVp8p7VqNl/UrGwFw07tojXt9QEAdTyQpBmlyTNNm8A7Lym2ZagdCfC5Svgeg2d97+cQ== +"@rotational/beacon-core@^2.1.3": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@rotational/beacon-core/-/beacon-core-2.1.3.tgz#d3ef8da596b7d507d1275d3d37da6e83b8e50c29" + integrity sha512-pqplEywUXB+SOtPj0WY8CTlPTuQDlSuhg09vcNFKc3QMI5LPTZ3OMDDfSR+ZJWW6ovYXLHRo0t9A+h1V5fXVpQ== dependencies: "@radix-ui/react-avatar" "^1.0.1" "@radix-ui/react-toast" "^1.1.2"