style(InstanceAdminPanel): formatting fixes

- fix announcements formatting when there are no announcements
- add margin to user invitations

Author: adi-herwana-nus

client/app/bundles/system/admin/instance/instance/components/forms/IndividualInvitation.tsx

@@ -102,7 +102,10 @@ const IndividualInvitation: FC<Props> = (props) => {
     <Box key={index} className="flex items-center justify-start">
       {renderInvitationBody}
       <Tooltip title={intl.formatMessage(translations.removeInvitation)}>
-        <IconButton onClick={(): void => fieldsConfig.remove(index)}>
+        <IconButton
+          className="p-3"
+          onClick={(): void => fieldsConfig.remove(index)}
+        >
           <Close />
         </IconButton>
       </Tooltip>

client/app/bundles/system/admin/instance/instance/components/forms/IndividualInviteForm.tsx

@@ -115,6 +115,7 @@ const IndividualInviteForm: FC<Props> = (props) => {
 
   return (
     <form
+      className="pl-6 pr-3"
       encType="multipart/form-data"
       id="invite-users-individual-form"
       noValidate

client/app/bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex.tsx

@@ -34,7 +34,7 @@ const translations = defineMessages({
   },
   noAnnouncements: {
     id: 'system.admin.instance.instance.InstanceAnnouncementsIndex.noAnnouncement',
-    defaultMessage: 'There is no announcement',
+    defaultMessage: 'There are no announcements',
   },
 });
 
@@ -60,14 +60,15 @@ const InstanceAnnouncementsIndex: FC<Props> = (props) => {
   return (
     <Page>
       {announcementPermission && (
-        <AddButton
-          className="float-right"
-          fixed
-          id="new-announcement-button"
-          onClick={(): void => setIsOpen(true)}
-        >
-          {intl.formatMessage(translations.newAnnouncement)}
-        </AddButton>
+        <div className="w-full flex justify-end">
+          <AddButton
+            fixed
+            id="new-announcement-button"
+            onClick={(): void => setIsOpen(true)}
+          >
+            {intl.formatMessage(translations.newAnnouncement)}
+          </AddButton>
+        </div>
       )}
 
       {announcements.length === 0 ? (

client/locales/en.json

@@ -7783,7 +7783,7 @@
     "defaultMessage": "New Announcement"
   },
   "system.admin.instance.instance.InstanceAnnouncementsIndex.noAnnouncement": {
-    "defaultMessage": "There is no announcement"
+    "defaultMessage": "There are no announcements"
   },
   "system.admin.instance.instance.InstanceComponentsForm.fetchComponentsFailure": {
     "defaultMessage": "Failed to fetch component settings."