fix: update site notes screens to match designs (#1553)

* fix: use pushpin icon on note button on site instructions card * fix: correct background color on add note button * fix: simplify styling on project instructions * fix: simplify add pinned note button * fix: eliminate inline style on ScreenFormWrapper * fix: correct size and alignment of notes delete button * fix: update styling on SiteNoteCard * fix: correct layout of project settings screen — make it full height * fix: correct style of iconlink (used for delete project) * fix: in notes, show date and time without comma * fix: change Site Instructions to Pinned Note * chore: update snapshots
techmatters · Jun 18, 2024 · 8cf613f · 8cf613f
1 parent a7de0fe
commit 8cf613f
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 52 deletions.
diff --git a/dev-client/__tests__/integration/__snapshots__/CreateProjectScreen-test.tsx.snap b/dev-client/__tests__/integration/__snapshots__/CreateProjectScreen-test.tsx.snap
@@ -1686,6 +1686,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }
@@ -1889,6 +1890,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }

diff --git a/dev-client/__tests__/integration/__snapshots__/CreateSiteScreen-test.tsx.snap b/dev-client/__tests__/integration/__snapshots__/CreateSiteScreen-test.tsx.snap
@@ -1934,6 +1934,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }
@@ -2137,6 +2138,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }

diff --git a/dev-client/__tests__/integration/__snapshots__/LocationDashboardScreen-test.tsx.snap b/dev-client/__tests__/integration/__snapshots__/LocationDashboardScreen-test.tsx.snap
@@ -1669,6 +1669,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }
@@ -1872,6 +1873,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }

diff --git a/dev-client/__tests__/integration/__snapshots__/ProjectViewScreen-test.tsx.snap b/dev-client/__tests__/integration/__snapshots__/ProjectViewScreen-test.tsx.snap
@@ -2265,6 +2265,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }
@@ -2468,6 +2469,7 @@ exports[`renders correctly 1`] = `
                                         "fontSize": 16,
                                         "fontWeight": "400",
                                         "paddingLeft": 4,
+                                        "paddingTop": 4,
                                         "textTransform": "uppercase",
                                       }
                                     }

diff --git a/dev-client/src/components/ScreenFormWrapper.tsx b/dev-client/src/components/ScreenFormWrapper.tsx
@@ -17,7 +17,7 @@
 
 import {forwardRef, useCallback, useImperativeHandle, useRef} from 'react';
 import {useTranslation} from 'react-i18next';
-import {KeyboardAvoidingView, Platform} from 'react-native';
+import {KeyboardAvoidingView, Platform, StyleSheet} from 'react-native';
 
 import {Formik, FormikProps} from 'formik';
 import {Button, Spacer} from 'native-base';
@@ -86,8 +86,7 @@ export const ScreenFormWrapper = forwardRef(
       <ScreenScaffold BottomNavigation={null} AppBar={null}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'} // Handle platform-specific keyboard avoidance
-          // eslint-disable-next-line react-native/no-inline-styles
-          style={{flex: 1}}>
+          style={styles.view}>
           <Formik
             innerRef={formikRef}
             initialValues={initialValues}
@@ -101,14 +100,13 @@ export const ScreenFormWrapper = forwardRef(
               trigger={onOpen => (
                 <Box pt={2} pr={5}>
                   <HorizontalIconButton
-                    p={0}
                     name="delete"
                     isUppercase={true}
                     label={t('general.delete_fab')}
                     colorScheme="error.main"
                     _icon={{
                       color: 'error.main',
-                      size: '5',
+                      size: 'md',
                     }}
                     isDisabled={isSubmitting}
                     onPress={() => conditionallyConfirmDelete(onOpen)}
@@ -134,3 +132,7 @@ export const ScreenFormWrapper = forwardRef(
     );
   },
 );
+
+const styles = StyleSheet.create({
+  view: {flex: 1},
+});
diff --git a/dev-client/src/components/icons/HorizontalIconButton.tsx b/dev-client/src/components/icons/HorizontalIconButton.tsx
@@ -65,6 +65,7 @@ export const HorizontalIconButton = React.forwardRef(
               color={colorScheme}
               fontSize="md"
               pl={1}
+              pt="4px"
               textTransform={isUppercase ? 'uppercase' : 'none'}>
               {label}
             </Text>

diff --git a/dev-client/src/components/icons/IconLink.tsx b/dev-client/src/components/icons/IconLink.tsx
@@ -38,9 +38,12 @@ export default function IconLink({
 }: Props) {
   return (
     <Link
-      _text={{color, fontSize: 'xs', textTransform: 'uppercase'}}
-      alignItems="center"
-      alignContent="flex-start"
+      _text={{
+        color,
+        fontWeight: 500,
+        fontSize: 'md',
+        textTransform: 'uppercase',
+      }}
       isUnderlined={underlined}
       {...props}>
       <Icon name={iconName} color={color} size="md" mr={3} />

diff --git a/dev-client/src/screens/ProjectInputScreen/ProjectInputScreen.tsx b/dev-client/src/screens/ProjectInputScreen/ProjectInputScreen.tsx
@@ -115,26 +115,17 @@ export const ProjectInputScreen = ({
             />
           </Row>
           <RestrictByProjectRole role="MANAGER">
-            <Text bold fontSize="md">
-              {t('projects.inputs.instructions.title')}
-            </Text>
-            <Text fontSize="md">
-              {t('projects.inputs.instructions.description')}
-            </Text>
+            <Text bold>{t('projects.inputs.instructions.title')}</Text>
+            <Text>{t('projects.inputs.instructions.description')}</Text>
             <Button
               mt={2}
               pl={4}
               pr={4}
               size="lg"
-              backgroundColor="primary.main"
               shadow={5}
-              onPress={onEditInstructions}>
-              <Row>
-                <Icon color="primary.contrast" size="sm" mr={2} name="edit" />
-                <Text color="primary.contrast" textTransform="uppercase">
-                  {t('projects.inputs.instructions.add_label')}
-                </Text>
-              </Row>
+              onPress={onEditInstructions}
+              leftIcon={<Icon name="push-pin" />}>
+              {t('projects.inputs.instructions.add_label')}
             </Button>
           </RestrictByProjectRole>
         </Box>

diff --git a/dev-client/src/screens/ProjectSettingsScreen.tsx b/dev-client/src/screens/ProjectSettingsScreen.tsx
@@ -16,6 +16,7 @@
  */
 
 import {useTranslation} from 'react-i18next';
+import {StyleSheet} from 'react-native';
 
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
 import {ScrollView} from 'native-base';
@@ -66,35 +67,45 @@ export function ProjectSettingsScreen({
   const userRole = useProjectRoleContext();
 
   return (
-    <ScrollView backgroundColor={theme.colors.background.default}>
-      <Column px={2} py={4} space={2} m={3} pb="50px">
+    <ScrollView
+      backgroundColor={theme.colors.primary.contrast}
+      contentContainerStyle={styles.scrollview}>
+      <Column space={4} m={3} mb="50px" style={styles.column}>
         <EditProjectForm
           onSubmit={onSubmit}
           name={name}
           description={description}
           userRole={userRole}
         />
-        <Column space={1}>
-          <RestrictByProjectRole role="MANAGER">
-            <ConfirmModal
-              title={t('projects.settings.delete_button_prompt')}
-              actionName={t('projects.settings.delete_button')}
-              body={t('projects.settings.delete_description')}
-              handleConfirm={triggerDeleteProject}
-              trigger={onOpen => (
-                <IconLink
-                  iconName="delete"
-                  underlined={false}
-                  onPress={onOpen}
-                  color="error.main"
-                  textTransform="uppercase">
-                  {t('projects.settings.delete')}
-                </IconLink>
-              )}
-            />
-          </RestrictByProjectRole>
-        </Column>
+        <RestrictByProjectRole role="MANAGER">
+          <ConfirmModal
+            title={t('projects.settings.delete_button_prompt')}
+            actionName={t('projects.settings.delete_button')}
+            body={t('projects.settings.delete_description')}
+            handleConfirm={triggerDeleteProject}
+            trigger={onOpen => (
+              <IconLink
+                iconName="delete"
+                underlined={false}
+                onPress={onOpen}
+                pt="20px"
+                color="error.main"
+                textTransform="uppercase">
+                {t('projects.settings.delete')}
+              </IconLink>
+            )}
+          />
+        </RestrictByProjectRole>
       </Column>
     </ScrollView>
   );
 }
+
+const styles = StyleSheet.create({
+  scrollview: {
+    flexGrow: 1,
+  },
+  column: {
+    flex: 1,
+  },
+});
diff --git a/dev-client/src/screens/SiteNotesScreen/SiteNotesScreen.tsx b/dev-client/src/screens/SiteNotesScreen/SiteNotesScreen.tsx
@@ -74,7 +74,6 @@ export const SiteNotesScreen = ({siteId}: {siteId: string}) => {
         <Box pl={4} pb={4} alignItems="flex-start">
           <Button
             size="lg"
-            backgroundColor="primary.dark"
             shadow={5}
             onPress={onAddNote}
             _text={{textTransform: 'uppercase'}}>

diff --git a/dev-client/src/screens/SiteNotesScreen/components/SiteInstructionsCard.tsx b/dev-client/src/screens/SiteNotesScreen/components/SiteInstructionsCard.tsx
@@ -47,7 +47,7 @@ export const SiteInstructionsCard = ({siteInstructions}: Props) => {
       mr={4}
       onPress={onShowNote}>
       <Row>
-        <Icon name="place" color="primary.dark" size="sm" mr={1} />
+        <Icon name="push-pin" color="primary.dark" size="sm" mr={1} />
         <Text bold fontSize="md">
           {t('site.notes.project_instructions')}
         </Text>

diff --git a/dev-client/src/screens/SiteNotesScreen/components/SiteNoteCard.tsx b/dev-client/src/screens/SiteNotesScreen/components/SiteNoteCard.tsx
@@ -54,7 +54,7 @@ export const SiteNoteCard = ({note}: Props) => {
       mr={4}
       onPress={onShowNote}>
       <Row>
-        <Text italic>
+        <Text variant="body2" italic>
           {t('site.notes.note_attribution', {
             createdAt: formatDate(note.createdAt),
             name: formatFullName(note.authorFirstName, note.authorLastName),
@@ -71,7 +71,7 @@ export const SiteNoteCard = ({note}: Props) => {
           onPress={onEditNote}
         />
       </Row>
-      <Text pt={1} fontSize="md" numberOfLines={3} ellipsizeMode="tail">
+      <Text pt={2} numberOfLines={3} ellipsizeMode="tail">
         {note.content}
       </Text>
     </Card>

diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json
@@ -162,7 +162,7 @@
       "confirm_removal_body": "This action cannot be undone.",
       "min_length_error": "Must be at least {{min}} characters",
       "placeholder_text": "Start typing your note…",
-      "project_instructions": "Site Instructions"
+      "project_instructions": "Pinned Note"
     },
     "search": {
       "placeholder": "Search sites",
@@ -228,7 +228,7 @@
       },
       "instructions": {
         "title": "Pinned Note",
-        "screen_title": "Site Instructions",
+        "screen_title": "Pinned Note",
         "description": "This content will display at the top of the Notes section of each site in this project.",
         "add_label": "Note"
       },

diff --git a/dev-client/src/util.ts b/dev-client/src/util.ts
@@ -45,9 +45,17 @@ const shortDateFormatters: Record<string, Intl.DateTimeFormat> = {};
 export const formatDate = (dateString: string) => {
   const locale = getSystemLocale();
   shortDateFormatters[locale] ??= new Intl.DateTimeFormat(locale, {
-    dateStyle: 'short',
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false,
   });
-  return shortDateFormatters[locale].format(new Date(dateString));
+  return shortDateFormatters[locale]
+    .format(new Date(dateString))
+    .split(', ')
+    .join(' ');
 };
 
 export const formatPercent = (value: number) => {