From 276665ac71db0590b7a84023619c6cf7e4d9cdf0 Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Tue, 14 Jan 2025 09:21:16 +0000 Subject: [PATCH 1/4] style: change spacing on CTA --- .../app/[lang]/register-a-patient/page-body.module.scss | 4 ---- website/src/app/[lang]/register-a-patient/page-body.tsx | 4 ++-- website/src/styles/_helpers.scss | 7 +++++++ website/src/styles/main.scss | 1 + 4 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 website/src/styles/_helpers.scss diff --git a/website/src/app/[lang]/register-a-patient/page-body.module.scss b/website/src/app/[lang]/register-a-patient/page-body.module.scss index 905a1a9..9ece803 100644 --- a/website/src/app/[lang]/register-a-patient/page-body.module.scss +++ b/website/src/app/[lang]/register-a-patient/page-body.module.scss @@ -162,7 +162,3 @@ } } } - -.open-new-tab { - margin-block-end: var(--spacing-4); -} diff --git a/website/src/app/[lang]/register-a-patient/page-body.tsx b/website/src/app/[lang]/register-a-patient/page-body.tsx index abd950e..1faef82 100644 --- a/website/src/app/[lang]/register-a-patient/page-body.tsx +++ b/website/src/app/[lang]/register-a-patient/page-body.tsx @@ -79,7 +79,7 @@ const RegisterPageBody: React.FC = ({ lang }) => { title="Natural history study registry signup" target="_blank" rel="noreferrer" - className={`button button--on-light-open-new-tab ${styles['open-new-tab']}`} + className="button button--on-light-open-new-tab mbe--4" > Register now @@ -89,7 +89,7 @@ const RegisterPageBody: React.FC = ({ lang }) => { title="Natural history study registry login" target="_blank" rel="noreferrer" - className={`button button--on-light-open-new-tab ${styles['open-new-tab']}`} + className="button button--on-light-open-new-tab mbe--6" > Login diff --git a/website/src/styles/_helpers.scss b/website/src/styles/_helpers.scss new file mode 100644 index 0000000..3e08634 --- /dev/null +++ b/website/src/styles/_helpers.scss @@ -0,0 +1,7 @@ +.mbe--4 { + margin-block-end: var(--spacing-4); +} + +.mbe--6 { + margin-block-end: var(--spacing-6); +} diff --git a/website/src/styles/main.scss b/website/src/styles/main.scss index 9af75ce..411f6f5 100644 --- a/website/src/styles/main.scss +++ b/website/src/styles/main.scss @@ -6,4 +6,5 @@ @use 'layout'; @use 'border'; @use 'buttons'; +@use 'helpers'; @use 'global'; From 9a9c0116f327c10c60f788078bc64baeb5712f12 Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Tue, 14 Jan 2025 09:38:08 +0000 Subject: [PATCH 2/4] fix: layout max-width --- .../register-a-patient/page-body.module.scss | 2 +- .../[lang]/register-a-patient/page-body.tsx | 76 ++++++++++--------- 2 files changed, 41 insertions(+), 37 deletions(-) diff --git a/website/src/app/[lang]/register-a-patient/page-body.module.scss b/website/src/app/[lang]/register-a-patient/page-body.module.scss index 9ece803..150add0 100644 --- a/website/src/app/[lang]/register-a-patient/page-body.module.scss +++ b/website/src/app/[lang]/register-a-patient/page-body.module.scss @@ -18,7 +18,7 @@ @include layout.content-max-width; display: grid; grid-column-gap: var(--spacing-12); - grid-template-columns: var(--spacing-56) minmax(38rem, 42rem) var( + grid-template-columns: var(--spacing-56) minmax(auto, 42rem) var( --spacing-56 ); grid-template-rows: repeat(3, min-content); diff --git a/website/src/app/[lang]/register-a-patient/page-body.tsx b/website/src/app/[lang]/register-a-patient/page-body.tsx index 1faef82..fe24918 100644 --- a/website/src/app/[lang]/register-a-patient/page-body.tsx +++ b/website/src/app/[lang]/register-a-patient/page-body.tsx @@ -94,27 +94,13 @@ const RegisterPageBody: React.FC = ({ lang }) => { Login
- Who will have access to the data? + Who can take part?

- Only a few study administrators have access to patient - identifying data. The patient or carer owns their own data. - They can share it with whoever they want, including doctors, - teachers, other carers, etc. if useful. + Parents or carers of a confirmed BBSOAS patient or BBSOAS + patients themselves. By confirmed we mean with a genetic + report showing the diagnosis.

-

Anonymous data is accessed by:

-
    -
  • - The NR2F1 Foundation - limited to whose working on Patient - Registry  -
    • -
  • COMBINEDBrain - our scientific partner
    • -
  • - Subject to approval by the NR2F1 Foundation - researchers - and industry who are working on BBSOAS studies -
    • -
  • Matrix - the company behind the Patient Registry tool
    • -
@@ -142,27 +128,45 @@ const RegisterPageBody: React.FC = ({ lang }) => {
- Who will have access to the data? + + Other than filling out surveys, how else can I use Patient + Registry? +

- Only a few study administrators have access to patient - identifying data. The patient or carer owns their own data. - They can share it with whoever they want, including doctors, - teachers, other carers, etc. if useful. + Patient Registry can also be used as a personal health + monitoring tool. It has features that make managing daily + medical care easier. +

+
+
+
+ + What languages is Matrix and the surveys available in? + +
+

+ Matrix is available in English, Spanish, Italian, French, + German, Portuguese and Korean. Surveys are available in + English, Spanish, Italian, French and German. Coming soon: + Portuguese, Korean and Hebrew. +

+
+
+
+ + Who can I contact about the Patient Registry for more help or + answers? + +
+

+ Email{' '} + + patientregistry@nr2f1.org + {' '} + and we can help or offer a Zoom meeting to help you get + registered.

-

Anonymous data is accessed by:

-
    -
  • - The NR2F1 Foundation - limited to whose working on Patient - Registry  -
    • -
  • COMBINEDBrain - our scientific partner
    • -
  • - Subject to approval by the NR2F1 Foundation - researchers - and industry who are working on BBSOAS studies -
    • -
  • Matrix - the company behind the Patient Registry tool
    • -
From 690c69bc88ab42b292b9ae169a96d5dcb56b96d6 Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Tue, 14 Jan 2025 13:39:44 +0000 Subject: [PATCH 3/4] feat: create an utility hash links --- website/src/shared/utils/hash-links.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 website/src/shared/utils/hash-links.ts diff --git a/website/src/shared/utils/hash-links.ts b/website/src/shared/utils/hash-links.ts new file mode 100644 index 0000000..148d5ae --- /dev/null +++ b/website/src/shared/utils/hash-links.ts @@ -0,0 +1,6 @@ +const createHashLink = (text: string): string => { + return text + .toLowerCase() + .replace(/ /g, '-') + .replace(/[^a-z0-9-]/g, ''); +}; From be2a509ea015aa5c769e5de5b56c0cd0ce17b43d Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Tue, 14 Jan 2025 17:03:46 +0000 Subject: [PATCH 4/4] feat: add page contents navigation --- .../[lang]/register-a-patient/page-body.tsx | 13 +++++--- .../src/components/page-contents/index.tsx | 33 +++++++++++++++---- website/src/shared/utils/hash-links.ts | 2 +- website/src/styles/_global.scss | 1 + 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/website/src/app/[lang]/register-a-patient/page-body.tsx b/website/src/app/[lang]/register-a-patient/page-body.tsx index fe24918..1843ed3 100644 --- a/website/src/app/[lang]/register-a-patient/page-body.tsx +++ b/website/src/app/[lang]/register-a-patient/page-body.tsx @@ -1,9 +1,10 @@ -import PageContents from '@components/page-contents'; import styles from './page-body.module.scss'; +import PageContents from '@components/page-contents'; import PageLatestNews from '@components/page-latest-news'; import SignupForm from '@components/signup-form'; import type { AvailableLocale } from '@i18n/locales'; +import { createHashLink } from '@shared/utils/hash-links'; interface RegisterPageBodyProps { lang: AvailableLocale; @@ -36,7 +37,7 @@ const RegisterPageBody: React.FC = ({ lang }) => {
-

Register with us

+

Register with us

We want to keep track of the number of diagnosed cases around the world, so that we can share this with you and our community of @@ -47,7 +48,9 @@ const RegisterPageBody: React.FC = ({ lang }) => {

-

Register with the NR2F1 Patient Registry

+

+ Register with the NR2F1 Patient Registry +

The Patient Registry collects information through surveys on how a disease affects a person over a lifetime to better understand @@ -172,7 +175,9 @@ const RegisterPageBody: React.FC = ({ lang }) => {

-

Register for a Clinical Research ID

+

+ Register for a Clinical Research ID +

The Clinical Research ID (CRID) is a free patient-generated service specifically for use in clinical research. The parent or diff --git a/website/src/components/page-contents/index.tsx b/website/src/components/page-contents/index.tsx index 31c66e3..e9cf879 100644 --- a/website/src/components/page-contents/index.tsx +++ b/website/src/components/page-contents/index.tsx @@ -1,3 +1,4 @@ +import { createHashLink } from '@shared/utils/hash-links'; import styles from './index.module.scss'; import type { AvailableLocale, LocalisedString } from '@i18n/locales'; @@ -23,13 +24,23 @@ const PageContents: React.FC = ({ lang }) => {

@@ -39,13 +50,23 @@ const PageContents: React.FC = ({ lang }) => { diff --git a/website/src/shared/utils/hash-links.ts b/website/src/shared/utils/hash-links.ts index 148d5ae..272d255 100644 --- a/website/src/shared/utils/hash-links.ts +++ b/website/src/shared/utils/hash-links.ts @@ -1,4 +1,4 @@ -const createHashLink = (text: string): string => { +export const createHashLink = (text: string): string => { return text .toLowerCase() .replace(/ /g, '-') diff --git a/website/src/styles/_global.scss b/website/src/styles/_global.scss index 012e840..3b16152 100644 --- a/website/src/styles/_global.scss +++ b/website/src/styles/_global.scss @@ -6,6 +6,7 @@ html { font-size: 100%; + scroll-behavior: smooth; } body {