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..62b9935 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,170 @@ 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.
+
-
+
closeModal()}>
Cancel
@@ -373,9 +393,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;
+ }
`