feat: update impact component spacing

ONEARMY · Jan 8, 2025 · 8dbd9f8 · 8dbd9f8
1 parent 38cb7d0
commit 8dbd9f8
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 16 deletions.
diff --git a/src/pages/User/impact/ImpactField.tsx b/src/pages/User/impact/ImpactField.tsx
@@ -1,6 +1,6 @@
 import { impactQuestions } from 'src/pages/UserSettings/content/impactQuestions'
 import { numberWithCommas } from 'src/utils/helpers'
-import { Box, Text } from 'theme-ui'
+import { Flex, Text } from 'theme-ui'
 
 import { ImpactIcon } from './ImpactIcon'
 
@@ -17,10 +17,11 @@ export const ImpactField = ({ field }: Props) => {
   if (!impactQuestion || !isVisible) return null
 
   const sx = {
+    alignItems: 'center',
     backgroundColor: 'background',
     borderRadius: 1,
+    gap: 1,
     padding: 1,
-    mt: 2,
   }
 
   const prefix = impactQuestion?.prefix || ''
@@ -29,10 +30,9 @@ export const ImpactField = ({ field }: Props) => {
   const text = `${prefix} ${numberWithCommas(value)} ${suffix} ${label}`
 
   return (
-    <Box sx={sx}>
-      <Text variant="label">
-        <ImpactIcon id={id} /> {text}
-      </Text>
-    </Box>
+    <Flex sx={sx}>
+      <ImpactIcon id={id} />
+      <Text variant="label">{text}</Text>
+    </Flex>
   )
 }
diff --git a/src/pages/User/impact/ImpactItem.tsx b/src/pages/User/impact/ImpactItem.tsx
@@ -1,5 +1,5 @@
 import { sortImpactYearDisplayFields } from 'src/pages/UserSettings/utils'
-import { Box, Heading } from 'theme-ui'
+import { Box, Flex, Heading } from 'theme-ui'
 
 import { ImpactField } from './ImpactField'
 import { ImpactMissing } from './ImpactMissing'
@@ -35,9 +35,11 @@ export const ImpactItem = ({ fields, user, year }: Props) => {
           {year}
         </Heading>
         {visibleFields && visibleFields.length > 0 ? (
-          visibleFields.map((field, index) => {
-            return <ImpactField field={field} key={index} />
-          })
+          <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+            {visibleFields.map((field, index) => {
+              return <ImpactField field={field} key={index} />
+            })}
+          </Flex>
         ) : (
           <ImpactMissing
             fields={fields}

diff --git a/src/pages/UserSettings/content/fields/ImpactQuestion.field.tsx b/src/pages/UserSettings/content/fields/ImpactQuestion.field.tsx
@@ -46,6 +46,7 @@ export const ImpactQuestionField = ({ field, formId }: Props) => {
               name={`${field.id}.value`}
               sx={{ background: 'white' }}
               type="number"
+              formatOnBlur
             />
           </Box>
 

diff --git a/src/pages/UserSettings/content/fields/ImpactYear.field.tsx b/src/pages/UserSettings/content/fields/ImpactYear.field.tsx
@@ -25,6 +25,7 @@ export const ImpactYearField = (props: Props) => {
         type="submit"
         onClick={handleSubmit}
         form={formId}
+        sx={{ alignSelf: 'start' }}
       >
         {buttons.impact.save}
       </Button>

diff --git a/src/pages/UserSettings/content/sections/ImpactYear.section.tsx b/src/pages/UserSettings/content/sections/ImpactYear.section.tsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { UserContactError } from 'src/pages/User/contact'
 import { form } from 'src/pages/UserSettings/labels'
-import { Box, Heading } from 'theme-ui'
+import { Flex, Heading, Text } from 'theme-ui'
 
 import {
   sortImpactYearDisplayFields,
@@ -17,6 +17,7 @@ import { ImpactYearDisplayField } from '../fields/ImpactYearDisplay.field'
 
 import type { IImpactYear, IImpactYearFieldList } from 'oa-shared'
 import type { SubmitResults } from 'src/pages/User/contact/UserContactError'
+import type { ThemeUIStyleObject } from 'theme-ui'
 
 interface Props {
   year: IImpactYear
@@ -37,9 +38,11 @@ export const ImpactYearSection = observer(({ year }: Props) => {
   const sx = {
     backgroundColor: 'background',
     borderRadius: 2,
+    gap: 1,
     marginBottom: 2,
     padding: 2,
-  }
+    flexDirection: 'column',
+  } as ThemeUIStyleObject
 
   useEffect(() => {
     const fetchImpact = () => {
@@ -86,11 +89,16 @@ export const ImpactYearSection = observer(({ year }: Props) => {
   }
 
   return (
-    <Box sx={sx} id={`year_${year}`}>
+    <Flex sx={sx} id={`year_${year}`}>
+      <UserContactError submitResults={submitResults} />
+
       <Heading as="h3" variant="small" ref={impactDivRef}>
         {year}
       </Heading>
-      <UserContactError submitResults={submitResults} />
+      <Text as="h4" variant="quiet" sx={{ marginBottom: 2 }}>
+        All fields optional
+      </Text>
+
       <Form
         id={formId}
         initialValues={impact ? transformImpactData(impact) : undefined}
@@ -113,6 +121,6 @@ export const ImpactYearSection = observer(({ year }: Props) => {
           )
         }}
       />
-    </Box>
+    </Flex>
   )
 })