Merge branch 'change-date-format' into 'develop'

Change date format globally to use 12-hr format

See merge request soapbox-pub/soapbox!1836

app/soapbox/components/announcements/announcement.tsx

@@ -34,22 +34,23 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, remo
         <Text theme='muted'>
           <FormattedDate
             value={startsAt}
-            hour12={false}
+            hour12
             year={(skipYear || startsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
             month='short'
             day='2-digit'
-            hour={skipTime ? undefined : '2-digit'} minute={skipTime ? undefined : '2-digit'}
+            hour={skipTime ? undefined : 'numeric'}
+            minute={skipTime ? undefined : '2-digit'}
           />
           {' '}
           -
           {' '}
           <FormattedDate
             value={endsAt}
-            hour12={false}
+            hour12
             year={(skipYear || endsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
             month={skipEndDate ? undefined : 'short'}
             day={skipEndDate ? undefined : '2-digit'}
-            hour={skipTime ? undefined : '2-digit'}
+            hour={skipTime ? undefined : 'numeric'}
             minute={skipTime ? undefined : '2-digit'}
           />
         </Text>

app/soapbox/components/relative-timestamp.tsx

@@ -17,11 +17,11 @@ const messages = defineMessages({
 });
 
 const dateFormatOptions: FormatDateOptions = {
-  hour12: false,
+  hour12: true,
   year: 'numeric',
   month: 'short',
   day: '2-digit',
-  hour: '2-digit',
+  hour: 'numeric',
   minute: '2-digit',
 };
 

app/soapbox/features/admin/moderation_log.tsx

@@ -62,11 +62,11 @@ const ModerationLog = () => {
             <div className='logentry__timestamp'>
               <FormattedDate
                 value={new Date(item.time * 1000)}
-                hour12={false}
+                hour12
                 year='numeric'
                 month='short'
                 day='2-digit'
-                hour='2-digit'
+                hour='numeric'
                 minute='2-digit'
               />
             </div>

app/soapbox/features/auth_token_list/index.tsx

@@ -31,11 +31,11 @@ const AuthToken: React.FC<IAuthToken> = ({ token }) => {
           <Text size='sm' theme='muted'>
             <FormattedDate
               value={new Date(token.valid_until)}
-              hour12={false}
+              hour12
               year='numeric'
               month='short'
               day='2-digit'
-              hour='2-digit'
+              hour='numeric'
               minute='2-digit'
             />
           </Text>

app/soapbox/features/status/components/detailed-status.tsx

@@ -108,7 +108,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             <span>
               <a href={actualStatus.url} target='_blank' rel='noopener' className='hover:underline'>
                 <Text tag='span' theme='muted' size='sm'>
-                  <FormattedDate value={new Date(actualStatus.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+                  <FormattedDate value={new Date(actualStatus.created_at)} hour12 year='numeric' month='short' day='2-digit' hour='numeric' minute='2-digit' />
                 </Text>
               </a>
 
@@ -122,7 +122,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
                     tabIndex={0}
                   >
                     <Text tag='span' theme='muted' size='sm'>
-                      <FormattedMessage id='actualStatus.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} />
+                      <FormattedMessage id='actualStatus.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: true, month: 'short', day: '2-digit', hour: 'numeric', minute: '2-digit' }) }} />
                     </Text>
                   </div>
                 </>

app/soapbox/features/ui/components/compare_history_modal.tsx

@@ -79,7 +79,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
               )}
 
               <Text align='right' tag='span' theme='muted' size='sm'>
-                <FormattedDate value={new Date(version.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+                <FormattedDate value={new Date(version.created_at)} hour12 year='numeric' month='short' day='2-digit' hour='numeric' minute='2-digit' />
               </Text>
             </div>
           );

app/soapbox/features/ui/components/profile_fields_panel.tsx

@@ -22,8 +22,8 @@ const dateFormatOptions: FormatDateOptions = {
   month: 'short',
   day: 'numeric',
   year: 'numeric',
-  hour12: false,
+  hour12: true,
-  hour: '2-digit',
+  hour: 'numeric',
   minute: '2-digit',
 };