Skip to content

Improve treatment dialog UX and mobile responsiveness #98

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

Draft
michaelwschultz wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Improve treatment dialog UX and mobile responsiveness #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8920ae6
Polish app UI and treatment dialog responsiveness
cursoragent Mar 14, 2026
1cc8b34
Format treatment dialog updates
cursoragent Mar 14, 2026
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
81 changes: 46 additions & 35 deletions components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -67,48 +68,51 @@ const Header = (props: Props): JSX.Element | null => {

return (
<>
<Grid.Container justify='space-between' alignItems='center'>
<Grid>
<Logo />
</Grid>
<Grid>
<Grid.Container gap={2} alignItems='center'>
<Grid>
{!isMobile && (
<Button
onClick={() => setInfusionModalVisible(true)}
auto
type='success-light'
scale={3 / 4}
>
New treatment
</Button>
)}
</Grid>
<Grid>
{/* @ts-expect-error - Popover content prop has a type conflict with HTML content attribute */}
<Popover content={popoverContent} placement='bottomEnd'>
<Avatar
src={user.photoUrl || '/images/favicon-32x32.png'}
text={avatarInitial}
style={{ cursor: 'pointer' }}
scale={2}
/>
</Popover>
</Grid>
</Grid.Container>
</Grid>
</Grid.Container>
<StyledHeaderCard>
<Grid.Container justify='space-between' alignItems='center'>
<Grid>
<Logo />
</Grid>
<Grid>
<Grid.Container gap={1.5} alignItems='center'>
<Grid>
{!isMobile && (
<Button
onClick={() => setInfusionModalVisible(true)}
auto
type='success-light'
scale={3 / 4}
style={{ fontWeight: 600 }}
>
New treatment
</Button>
)}
</Grid>
<Grid>
{/* @ts-expect-error - Popover content prop has a type conflict with HTML content attribute */}
<Popover content={popoverContent} placement='bottomEnd'>
<Avatar
src={user.photoUrl || '/images/favicon-32x32.png'}
text={avatarInitial}
style={{ cursor: 'pointer' }}
scale={2}
/>
</Popover>
</Grid>
</Grid.Container>
</Grid>
</Grid.Container>
</StyledHeaderCard>

<Spacer />
<Spacer h={0.9} />

{isMobile && (
<Button
onClick={() => setInfusionModalVisible(true)}
style={{ width: '100%' }}
style={{ width: '100%', fontWeight: 600 }}
type='success-light'
>
Log infusion
New treatment
</Button>
)}

Expand All @@ -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%);
`
73 changes: 50 additions & 23 deletions components/homePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -84,22 +85,20 @@ const HomePage = (): JSX.Element => {
</>
)} */}

<Grid.Container
justify='space-between'
alignItems='center'
style={{ padding: '0 0 16px 0' }}
>
<Grid>
<Text h4 style={{ marginBottom: '0' }}>
Insights
</Text>
</Grid>
<Grid>
<Grid.Container gap={2} alignItems='center'>
<Grid alignItems='center'>
<StyledSectionHeader>
<Grid.Container
justify='space-between'
alignItems='center'
style={{ width: '100%', gap: '12px' }}
>
<Grid>
<Text h4 style={{ marginBottom: '0' }}>
Insights
</Text>
</Grid>
<Grid>
<StyledFilterWrap>
<Filter size={16} />
</Grid>
<Grid>
<Select
placeholder='Choose one'
disabled={infusionYears.length < 1}
Expand All @@ -118,25 +117,33 @@ const HomePage = (): JSX.Element => {
</Select.Option>
))}
</Select>
</Grid>
</Grid.Container>
</Grid>
</Grid.Container>
</StyledFilterWrap>
</Grid>
</Grid.Container>
</StyledSectionHeader>
<Stats filterYear={filterYear} />
<Spacer h={3} />

<Text h4>Annual overview ({filterYear})</Text>
<Text h6 type='secondary'>
Treatments are stacked by type (bleed, preventative, or prophy)
</Text>
<Chart filterYear={filterYear} />
<StyledPanel>
<Chart filterYear={filterYear} />
</StyledPanel>

<Spacer h={3} />
<Grid justify='space-between' alignItems='center'>
<Grid justify='space-between' alignItems='center' style={{ gap: '8px' }}>
<Text h4>Treatments</Text>
{smallerThanSmall && <Text>Swipe →</Text>}
{smallerThanSmall && (
<Text small type='secondary'>
Swipe →
</Text>
)}
</Grid>
<InfusionTable filterYear={filterYear} />
<StyledPanel>
<InfusionTable filterYear={filterYear} />
</StyledPanel>
</>
)
}
Expand All @@ -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;
`
Loading
Loading