Merge pull request #44 from Light-it-labs/update-patient-caregiver-qu…

…estion Update patient caregiver question
Light-it-labs · Dec 6, 2023 · 78af620 · 78af620
2 parents ab371c7 + 1bc3e4d
commit 78af620
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 83 deletions.
diff --git a/apps/eo_web/dist/assets/main-b31d824d.js → apps/eo_web/dist/assets/main-04c3bc1b.js b/apps/eo_web/dist/assets/main-b31d824d.js → apps/eo_web/dist/assets/main-04c3bc1b.js
diff --git a/apps/eo_web/dist/assets/main-efb2b034.css → apps/eo_web/dist/assets/main-6ce7fccd.css b/apps/eo_web/dist/assets/main-efb2b034.css → apps/eo_web/dist/assets/main-6ce7fccd.css
diff --git a/apps/eo_web/dist/manifest.json b/apps/eo_web/dist/manifest.json
@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-efb2b034.css",
+    "file": "assets/main-6ce7fccd.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-efb2b034.css"
+      "assets/main-6ce7fccd.css"
     ],
-    "file": "assets/main-b31d824d.js",
+    "file": "assets/main-04c3bc1b.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

diff --git a/apps/eo_web/src/screens/AccountCreation.tsx b/apps/eo_web/src/screens/AccountCreation.tsx
@@ -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.
@@ -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{" "}
@@ -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)()}

diff --git a/apps/eo_web/src/screens/UserRolSelector.tsx b/apps/eo_web/src/screens/UserRolSelector.tsx
@@ -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";
@@ -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,
@@ -46,47 +46,75 @@ 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-col lg:flex-row gap-5">
+              <button
+                className={tw("flex items-center justify-start gap-2 h-[48px] lg: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">
+                  <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] lg: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 rounded-none"
+              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" />}
+            >
+              <span className="text-gray-300 hidden lg:flex">PREVIOUS</span>
+            </Button>
+
+            <Button
+              className="click:border-0 focus:ring-outline-0 hover:outline-0 focus:ring-0 rounded-none hidden lg:flex"
+              variant="black"
+              size="lg"
+              right={<icons.RightArrow className="h-6 w-6" />}
+              onClick={() => redirectForm(selectedValue)}
             >
-              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")}
+              NEXT
+            </Button>
+            <Button
+              className="click:border-0 focus:ring-outline-0 hover:outline-0 focus:ring-0 rounded-none lg:hidden flex"
+              variant="black"
+              size="lg"
+              right={<icons.RightArrow className="h-6 w-6" />}
+              onClick={() => redirectForm(selectedValue)}
             >
-              Caregiver
-            </button>
-          </div>
+            </Button>
+          </section>
         </div>
       </div>
     </LayoutDefault>

diff --git a/packages/ui/src/common/Button.tsx b/packages/ui/src/common/Button.tsx
@@ -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",
@@ -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",
@@ -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"