From 8920ae6243a4eae7e1997c8b36947857fef40c46 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 14 Mar 2026 19:13:00 +0000 Subject: [PATCH 1/2] Polish app UI and treatment dialog responsiveness Co-authored-by: Michael Schultz --- components/header.tsx | 81 +++++---- components/homePage.tsx | 73 +++++--- components/infusionModal.tsx | 314 ++++++++++++++++++++--------------- components/infusionTable.tsx | 4 +- pages/_app.tsx | 5 +- pages/home.tsx | 18 +- 6 files changed, 294 insertions(+), 201 deletions(-) diff --git a/components/header.tsx b/components/header.tsx index 3f800d3..940cfbe 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -8,6 +8,7 @@ import { Spacer, useMediaQuery, } from '@geist-ui/react' +import styled from 'styled-components' import { useAuth } from 'lib/auth' import Logo from 'components/logo' @@ -67,48 +68,51 @@ const Header = (props: Props): JSX.Element | null => { return ( <> - - - - - - - - {!isMobile && ( - - )} - - - {/* @ts-expect-error - Popover content prop has a type conflict with HTML content attribute */} - - - - - - - + + + + + + + + + {!isMobile && ( + + )} + + + {/* @ts-expect-error - Popover content prop has a type conflict with HTML content attribute */} + + + + + + + + - + {isMobile && ( )} @@ -125,3 +129,10 @@ const Header = (props: Props): JSX.Element | null => { } export default Header + +const StyledHeaderCard = styled.div` + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 14px; + padding: 14px 16px; + background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%); +` diff --git a/components/homePage.tsx b/components/homePage.tsx index 801326c..cfea40c 100644 --- a/components/homePage.tsx +++ b/components/homePage.tsx @@ -2,6 +2,7 @@ import { useState } from 'react' import { Text, Spacer, Grid, Select, useMediaQuery } from '@geist-ui/react' import Filter from '@geist-ui/react-icons/filter' import { getYear } from 'date-fns' +import styled from 'styled-components' import dynamic from 'next/dynamic' import InfusionTable from 'components/infusionTable' @@ -84,22 +85,20 @@ const HomePage = (): JSX.Element => { )} */} - - - - Insights - - - - - + + + + + Insights + + + + - - - - - - + + + + @@ -129,14 +128,22 @@ const HomePage = (): JSX.Element => { Treatments are stacked by type (bleed, preventative, or prophy) - + + + - + Treatments - {smallerThanSmall && Swipe →} + {smallerThanSmall && ( + + Swipe → + + )} - + + + ) } @@ -162,3 +169,23 @@ const HomePage = (): JSX.Element => { // ` export default HomePage + +const StyledSectionHeader = styled.div` + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 14px; + padding: 12px 14px; + margin-bottom: 16px; + background: linear-gradient(180deg, #ffffff 0%, #fff9fc 100%); +` + +const StyledFilterWrap = styled.div` + display: flex; + align-items: center; + gap: 8px; +` + +const StyledPanel = styled.div` + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 14px; + padding: 8px; +` diff --git a/components/infusionModal.tsx b/components/infusionModal.tsx index 4af89b0..d84851e 100644 --- a/components/infusionModal.tsx +++ b/components/infusionModal.tsx @@ -6,9 +6,11 @@ import { Button, Grid, useToasts, + useMediaQuery, } from '@geist-ui/react' import { useFormik } from 'formik' import { compareDesc, format, parseISO } from 'date-fns' +import styled from 'styled-components' import { useAuth } from 'lib/auth' import { track } from 'lib/helpers' @@ -46,6 +48,7 @@ export default function InfusionModal(props: ModalProps): JSX.Element { const { user } = useAuth() const [, setToast] = useToasts() const { data: infusions } = useInfusions() + const isPhone = useMediaQuery('xs', { match: 'down' }) // TODO:(michael) limit the firebase call instead of having // to return all the infusions and filtering them here @@ -186,153 +189,168 @@ export default function InfusionModal(props: ModalProps): JSX.Element { } return ( - - Treatment + + {infusion ? 'Update treatment' : 'Log new treatment'} + + Save your treatment details so stats stay accurate and easy to review. + -
- - - - - - - - - - - - {user?.monoclonalAntibody && ( - - + + + + Treatment type + + + + + + + + + + + {user?.monoclonalAntibody && ( + + + + )} - )} - - - Date - - - - Medication - - + + + + + Medication details + + + + Date + + + + Medication + + {formik.values.type !== TreatmentTypeEnum.ANTIBODY && ( + <> + + + Amount + + + + Lot + + + )} + + {formik.values.type !== TreatmentTypeEnum.ANTIBODY && ( - <> - - - - + + + Bleed notes + + Cause of bleed - + )} {/* Notes @@ -364,7 +382,7 @@ export default function InfusionModal(props: ModalProps): JSX.Element { width='100%' placeholder='Notes to help you remember anything special about this infusion' /> */} - +
closeModal()}> Cancel @@ -373,9 +391,33 @@ export default function InfusionModal(props: ModalProps): JSX.Element { onClick={handleSubmit} disabled={!formik.isValid} loading={formik.isSubmitting} + style={isPhone ? { fontWeight: 600 } : undefined} > {infusion ? 'Update Treatment' : 'Log Treatment'} ) } + +const TREATMENT_BUTTON_STYLE = { + minHeight: '42px', + paddingLeft: '6px', + paddingRight: '6px', +} + +const StyledModalDescription = styled(Text)` + margin-top: -8px; + text-align: center; +` + +const StyledForm = styled.form` + display: flex; + flex-direction: column; + gap: 14px; +` + +const StyledSection = styled.section` + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 14px; + padding: 14px; +` diff --git a/components/infusionTable.tsx b/components/infusionTable.tsx index 1793185..fcc7397 100644 --- a/components/infusionTable.tsx +++ b/components/infusionTable.tsx @@ -258,5 +258,7 @@ export default function InfusionTable(props: InfusionTableProps): JSX.Element { } const StyledTableWrapper = styled.div` - overflow-x: scroll; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border-radius: 12px; ` diff --git a/pages/_app.tsx b/pages/_app.tsx index f4fc1d9..739b273 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -105,10 +105,9 @@ const GlobalStyle = createGlobalStyle` } /* targets Nextjs empty div issue */ - /* TODO(michael): remove scrollbar on mobile */ body > div:first-child { - overflow: -moz-scrollbars-vertical; - overflow-y: scroll; + overflow-x: hidden; + overflow-y: auto; height: inherit; } diff --git a/pages/home.tsx b/pages/home.tsx index 904cf41..896cc26 100644 --- a/pages/home.tsx +++ b/pages/home.tsx @@ -112,7 +112,7 @@ const StyledPage = styled.div` height: 100%; display: flex; flex-direction: column; - max-width: 850pt; + max-width: 980px; width: 100%; margin: 0 auto; @@ -125,13 +125,25 @@ const StyledPage = styled.div` ` const StyledPageHeader = styled.header` - padding: 24px; + padding: 20px 24px 12px; + + @media (max-width: 650px) { + padding: 16px 16px 8px; + } ` const StyledPageContent = styled.main` padding: 0 24px; + + @media (max-width: 650px) { + padding: 0 16px; + } ` const StyledPageSection = styled.section` - padding: 40px 0 0 0; + padding: 28px 0 0; + + @media (max-width: 650px) { + padding-top: 20px; + } ` From 1cc8b34244eec442bf69b94899e488b9082eef8c Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 14 Mar 2026 19:14:03 +0000 Subject: [PATCH 2/2] Format treatment dialog updates Co-authored-by: Michael Schultz --- components/infusionModal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/infusionModal.tsx b/components/infusionModal.tsx index d84851e..62b9935 100644 --- a/components/infusionModal.tsx +++ b/components/infusionModal.tsx @@ -194,7 +194,9 @@ export default function InfusionModal(props: ModalProps): JSX.Element { {...bindings} style={{ width: isPhone ? 'calc(100vw - 16px)' : 'min(620px, 94vw)' }} > - {infusion ? 'Update treatment' : 'Log new treatment'} + + {infusion ? 'Update treatment' : 'Log new treatment'} + Save your treatment details so stats stay accurate and easy to review.