Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update patient caregiver question #44

Merged
merged 3 commits into from
Dec 6, 2023
Merged

Update patient caregiver question #44

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1109452
Update UI for patient/caregiver question
LeoBLightIt Dec 6, 2023
0021d41
remove unused radio
LeoBLightIt Dec 6, 2023
1bc3e4d
Update for mobile viewing
LeoBLightIt Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/eo_web/dist/assets/main-efb2b034.css → apps/eo_web/dist/assets/main-86afbb56.css
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions apps/eo_web/dist/assets/main-b31d824d.js → apps/eo_web/dist/assets/main-8c81e69a.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions apps/eo_web/dist/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@
"src": "../../packages/ui/src/assets/avatar.svg"
},
"src/main.css": {
"file": "assets/main-efb2b034.css",
"file": "assets/main-86afbb56.css",
"src": "src/main.css"
},
"src/main.tsx": {
"assets": [
"assets/UploadFile-694e44b5.svg"
],
"css": [
"assets/main-efb2b034.css"
"assets/main-86afbb56.css"
],
"file": "assets/main-b31d824d.js",
"file": "assets/main-8c81e69a.js",
"isEntry": true,
"src": "src/main.tsx"
}
Expand Down
6 changes: 3 additions & 3 deletions apps/eo_web/src/screens/AccountCreation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export const AccountCreation = () => {
className={tw(
"font-nunito text-[11px] font-light ",
errors.agreeReceiveNotifications?.message &&
"text-red-500",
"text-red-500",
)}
>
I agree to receive emails and text messages.
Expand All @@ -225,7 +225,7 @@ export const AccountCreation = () => {
className={tw(
"font-nunito text-[11px] font-light !leading-4",
errors.agreeTermsAndConditions?.message &&
"text-red-500",
"text-red-500",
)}
>
I have read and agree to the{" "}
Expand Down Expand Up @@ -268,7 +268,7 @@ export const AccountCreation = () => {
</Typography>
<Button
id="ga-sign-up-button"
className="click:border-0 focus:rign-outline-0 w-[150px] border-none hover:outline-0 focus:ring-0"
className="click:border-0 focus:ring-outline-0 w-[150px] border-none hover:outline-0 focus:ring-0"
variant="black"
size="lg"
onClick={() => void handleSubmit(onFormSubmission)()}
Expand Down
104 changes: 62 additions & 42 deletions apps/eo_web/src/screens/UserRolSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { useNavigate, useSearchParams } from "react-router-dom";

import { Typography } from "@eo/ui";

import { Button, Typography, icons } from "@eo/ui";
import { useMount } from "~/hooks/useMount";
import { LayoutDefault } from "~/layouts";
import { ROUTES } from "~/router";
Expand All @@ -10,11 +8,13 @@ import {
type Channel,
type Type,
} from "~/stores/useProfilingStore";

import { useState } from "react";
import { tw } from "@eo/shared";

export const UserRolSelector = () => {
const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const [selectedValue, setSelectedValue] = useState<Type>(null);
const {
setChannel,
setType,
Expand Down Expand Up @@ -46,47 +46,67 @@ export const UserRolSelector = () => {
return (
<LayoutDefault>
<div className="flex h-full w-full items-center justify-center bg-opacity-50">
<div className="relative w-3/4 bg-white px-[43px] py-[52px] md:w-[742px]">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="2"
stroke="currentColor"
className="absolute left-4 top-4 h-6 w-6"
onClick={() => {
if (window.data.isMarketingSite(origin)) {
window.location.href = `https://${window.location.host}/pilot#how-eo-care-plans-works`;
} else if (window.data.isPartnerSite(origin)) {
window.location.href = `https://${window.location.host}/cancer-pilot#how-eo-care-plans-works`;
} else {
history.back();
<div className="relative w-3/4 bg-white md:w-[742px]">
<div className="px-[28px] py-[28px]">
<Typography className="font-nunito text-lg font-normal">
Which best describes you? <span className="text-red-600">*</span>
</Typography>

<div className="mt-6 flex flex-row gap-5">
<button
className={tw("flex items-center justify-start gap-2 h-[48px] w-1/2 border border-solid border-gray-800 text-gray-800 rounded px-[15px] py-[9px] font-nunito",
selectedValue === 'Patient' && 'border-[#5AADFD] bg-[#5AADFD] bg-opacity-20')}
onClick={() => setSelectedValue('Patient')}
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add this arrows to icons component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a circle used for this particular button, simulating a radio button (which should not be inside of a button)

<circle cx="12" cy="12" r="10" fill='none' stroke={selectedValue === 'Patient' ? '#5AADFD' : '#535A63'} strokeWidth={selectedValue === 'Patient' ? 3 : 1.5} />
<circle cx="12" cy="12" r="9" fill={selectedValue === 'Patient' ? '#5AADFD' : 'none'} stroke={selectedValue === 'Patient' ? 'white' : 'none'} strokeWidth={1.5} />
</svg>
Patient
</button>
<button
className={tw("flex items-center justify-start gap-2 h-[48px] w-1/2 border border-solid border-gray-800 text-gray-800 rounded px-[15px] py-[9px] font-nunito",
selectedValue === 'Caregiver' && 'border-[#5AADFD] bg-[#5AADFD] bg-opacity-20')}
onClick={() => setSelectedValue("Caregiver")}
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
<circle cx="12" cy="12" r="10" fill='none' stroke={selectedValue === 'Caregiver' ? '#5AADFD' : '#535A63'} strokeWidth={selectedValue === 'Caregiver' ? 3 : 1.5} />
<circle cx="12" cy="12" r="9" fill={selectedValue === 'Caregiver' ? '#5AADFD' : 'none'} stroke={selectedValue === 'Caregiver' ? 'white' : 'none'} strokeWidth={1.5} />
</svg>
Caregiver
</button>
</div>
</div>
<section className="flex h-[53px] items-center justify-between rounded-b-md bg-black pb-[19px] pt-4 md:w-full ">
<Button
className="click:border-0 focus:ring-outline-0 hover:outline-0 focus:ring-0"
variant="black"
size="lg"
onClick={() => {
if (window.data.isMarketingSite(origin)) {
window.location.href = `https://${window.location.host}/pilot#how-eo-care-plans-works`;
} else if (window.data.isPartnerSite(origin)) {
window.location.href = `https://${window.location.host}/cancer-pilot#how-eo-care-plans-works`;
} else {
history.back();
}
}
}
}}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
/>
</svg>
<Typography className="font-nunito text-lg font-normal">
Which best describes you? <span className="text-red-600">*</span>
</Typography>
<div className="mt-6 flex flex-row gap-5">
<button
className="h-[41px] w-1/2 border border-solid border-[#a5c4ff] bg-[#a5c4ff] bg-opacity-10 px-[15px] py-[9px] font-nunito "
onClick={() => redirectForm("Patient")}
left={<icons.RightArrow className="rotate-180 h-6 w-6 text-gray-300" />}
>
Patient
</button>
<button
className="h-[41px] w-1/2 border border-solid border-[#a5c4ff] bg-[#a5c4ff] bg-opacity-10 px-[15px] py-[9px] font-nunito "
onClick={() => redirectForm("Caregiver")}
<span className="text-gray-300">PREVIOUS</span>
</Button>

<Button
className="click:border-0 focus:ring-outline-0 hover:outline-0 focus:ring-0"
variant="black"
size="lg"
right={<icons.RightArrow className="h-6 w-6" />}
onClick={() => redirectForm(selectedValue)}
>
Caregiver
</button>
</div>
NEXT
</Button>
</section>
</div>
</div>
</LayoutDefault>
Expand Down
22 changes: 11 additions & 11 deletions packages/ui/src/common/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,19 @@ export const Button = forwardRef(
"rounded-[37.3px] focus:ring-2 focus:ring-offset-0",
!left && !right && "justify-center",
variant === "primary" &&
"bg-primary text-black hover:bg-primary-900 focus:bg-primary focus:ring-primary-100",
"bg-primary text-black hover:bg-primary-900 focus:bg-primary focus:ring-primary-100",
variant === "outline" &&
"border-primary text-primary hover:border-primary-800 hover:text-primary-800 focus:ring-primary-100",
"border-primary text-primary hover:border-primary-800 hover:text-primary-800 focus:ring-primary-100",
variant === "outline-white" &&
"border-primary-white-500 text-primary-white-500 focus:ring-0",
"border-primary-white-500 text-primary-white-500 focus:ring-0",
variant === "secondary" &&
"bg-primary-50 text-primary-400 hover:bg-primary-100 focus:bg-primary-50 focus:ring-primary-100",
"bg-primary-50 text-primary-400 hover:bg-primary-100 focus:bg-primary-50 focus:ring-primary-100",
variant === "tertiary-link" &&
"text-primary hover:text-primary-700 focus:text-primary-700 focus:ring-1 focus:ring-primary-700",
"text-primary hover:text-primary-700 focus:text-primary-700 focus:ring-1 focus:ring-primary-700",
variant === "white" &&
"bg-white text-black shadow-lg hover:outline focus:outline focus:ring-1 focus:ring-primary-900",
"bg-white text-black shadow-lg hover:outline focus:outline focus:ring-1 focus:ring-primary-900",
variant === "black" &&
"bg-black text-white shadow-lg hover:outline focus:outline focus:ring-1 focus:ring-primary-900",
"bg-black text-white shadow-lg hover:outline focus:outline focus:ring-1 focus:ring-primary-900",

size === "sm" && "px-4 py-2 text-sm leading-[17px]",
size === "md" && "px-[18px] py-3 text-base leading-5",
Expand All @@ -73,11 +73,11 @@ export const Button = forwardRef(
disabled && [
variant === "primary" && "text-black",
variant === "outline" &&
"border-primary-dark-200 text-primary-white-600",
"border-primary-dark-200 text-primary-white-600",
variant === "outline-white" &&
"border-primary-white-700 text-primary-white-700",
"border-primary-white-700 text-primary-white-700",
variant === "secondary" &&
"bg-primary-dark-50 text-primary-white-600",
"bg-primary-dark-50 text-primary-white-600",
variant === "tertiary-link" && "text-primary-white-600",
variant === "white" && "text-primary-white-600",
variant === "black" && "text-primary-white-600",
Expand All @@ -93,7 +93,7 @@ export const Button = forwardRef(
disabled={disabled}
{...props}
>
<div className="flex flex-row gap-2">
<div className="flex flex-row items-center gap-2">
{left && <IconWrapper size={size}>{left}</IconWrapper>}
<Typography
variant="base"
Expand Down