Added a new key and illustration for empty assignments, updated the i…

…llustration and text in the Notifications pop-up
sws2apps · Dec 11, 2024 · 37323c4 · 37323c4
1 parent 5013dbb
commit 37323c4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 1 deletion.
diff --git a/src/assets/img/illustration_no_assigments.svg b/src/assets/img/illustration_no_assigments.svg
diff --git a/src/features/app_notification/container/index.tsx b/src/features/app_notification/container/index.tsx
@@ -34,9 +34,10 @@ const NotificationContainer = ({
         {notifications.length === 0 && (
           <Box
             sx={{
-              height: '318px',
+              height: '100%',
               display: 'flex',
               alignItems: 'center',
+              justifyContent: 'center',
               gap: '24px',
             }}
           >

diff --git a/src/features/meetings/my_assignments/index.tsx b/src/features/meetings/my_assignments/index.tsx
@@ -9,6 +9,7 @@ import MenuItem from '@components/menuitem';
 import MonthContainer from './month_container';
 import Select from '@components/select';
 import Typography from '@components/typography';
+import NoAssigmentsImg from '@assets/img/illustration_no_assigments.svg?component';
 
 const MyAssignments = () => {
   const { t } = useAppTranslation();
@@ -70,6 +71,33 @@ const MyAssignments = () => {
               },
             }}
           >
+            {personAssignments.length === 0 && (
+              <Box
+                sx={{
+                  height: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '24px',
+                }}
+              >
+                <NoAssigmentsImg viewBox="0 0 128 128" />
+                <Stack spacing="8px">
+                  <Typography className="h2">
+                    {t('tr_noAssignmentsYet')}
+                  </Typography>
+                  <Typography
+                    color="var(--grey-400)"
+                    sx={{
+                      maxWidth: '350px',
+                    }}
+                  >
+                    {t('tr_noAssignmentsYetDesc')}
+                  </Typography>
+                </Stack>
+              </Box>
+            )}
+
             <Stack spacing={2.3}>
               {personAssignments.map((month) => (
                 <MonthContainer key={month.month} monthData={month} />

diff --git a/src/locales/en/congregation.json b/src/locales/en/congregation.json
@@ -29,6 +29,7 @@
   "tr_ministerialServants": "Ministerial servants",
   "tr_studentAssignments": "Student assignments",
   "tr_noAssignmentsYet": "No assignments yet",
+  "tr_noAssignmentsYetDesc": "You don’t have any upcoming assignments, or none that match your current display filter.",
   "tr_withTerritory": "With territory",
   "tr_withoutTerritory": "Without territory",
   "tr_overdue": "Overdue",