Added formatMessage wrapper. Updated messages.

components/common/Pager.js

@@ -19,18 +19,22 @@ export function Pager({ page, pageSize, count, onPageChange }) {
     }
   };
 
+  if (maxPage === 1) {
+    return null;
+  }
+
   return (
     <Flexbox justifyContent="center" className={styles.container}>
       <Button onClick={() => handlePageChange(-1)} disabled={firstPage}>
-        <Icon size="lg" className={styles.icon} rotate={90}>
+        <Icon rotate={90}>
           <Icons.ChevronDown />
         </Icon>
       </Button>
       <Flexbox alignItems="center" className={styles.text}>
-        {formatMessage(labels.pageOf, { x: page, y: maxPage })}
+        {formatMessage(labels.pageOf, { current: page, total: maxPage })}
       </Flexbox>
       <Button onClick={() => handlePageChange(1)} disabled={lastPage}>
-        <Icon size="lg" className={styles.icon} rotate={270}>
+        <Icon rotate={270}>
           <Icons.ChevronDown />
         </Icon>
       </Button>

components/common/Pager.module.css

@@ -3,5 +3,5 @@
 }
 
 .text {
-  margin: 0 10px;
+  margin: 0 16px;
 }

components/input/MonthSelect.js

@@ -21,8 +21,9 @@ export function MonthSelect({ date = new Date(), onChange }) {
   const year = date.getFullYear();
   const ref = useRef();
 
-  const handleChange = date => {
+  const handleChange = (close, date) => {
     onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
+    close();
   };
 
   return (
@@ -36,11 +37,13 @@ export function MonthSelect({ date = new Date(), onChange }) {
             </Icon>
           </Button>
           <Popup className={styles.popup} alignment="start">
-            <CalendarMonthSelect
-              date={date}
-              locale={getDateLocale(locale)}
-              onSelect={handleChange}
-            />
+            {close => (
+              <CalendarMonthSelect
+                date={date}
+                locale={getDateLocale(locale)}
+                onSelect={handleChange.bind(null, close)}
+              />
+            )}
           </Popup>
         </PopupTrigger>
         <PopupTrigger>
@@ -51,11 +54,13 @@ export function MonthSelect({ date = new Date(), onChange }) {
             </Icon>
           </Button>
           <Popup className={styles.popup} alignment="start">
-            <CalendarYearSelect
-              date={date}
-              locale={getDateLocale(locale)}
-              onSelect={handleChange}
-            />
+            {close => (
+              <CalendarYearSelect
+                date={date}
+                locale={getDateLocale(locale)}
+                onSelect={handleChange.bind(null, close)}
+              />
+            )}
           </Popup>
         </PopupTrigger>
       </div>

components/messages.js

@@ -21,8 +21,8 @@ export const labels = defineMessages({
   details: { id: 'label.details', defaultMessage: 'Details' },
   website: { id: 'label.website', defaultMessage: 'Website' },
   websites: { id: 'label.websites', defaultMessage: 'Websites' },
-  myWebsites: { id: 'label.my-websites', defaultMessage: 'My Websites' },
-  teamWebsites: { id: 'label.team-websites', defaultMessage: 'Team Websites' },
+  myWebsites: { id: 'label.my-websites', defaultMessage: 'My websites' },
+  teamWebsites: { id: 'label.team-websites', defaultMessage: 'Team websites' },
   created: { id: 'label.created', defaultMessage: 'Created' },
   edit: { id: 'label.edit', defaultMessage: 'Edit' },
   name: { id: 'label.name', defaultMessage: 'Name' },
@@ -30,7 +30,7 @@ export const labels = defineMessages({
   accessCode: { id: 'label.access-code', defaultMessage: 'Access code' },
   teamId: { id: 'label.team-id', defaultMessage: 'Team ID' },
   team: { id: 'label.team', defaultMessage: 'Team' },
-  teamName: { id: 'label.team-name', defaultMessage: 'Team Name' },
+  teamName: { id: 'label.team-name', defaultMessage: 'Team name' },
   regenerate: { id: 'label.regenerate', defaultMessage: 'Regenerate' },
   remove: { id: 'label.remove', defaultMessage: 'Remove' },
   join: { id: 'label.join', defaultMessage: 'Join' },
@@ -177,6 +177,7 @@ export const labels = defineMessages({
   pageTitle: { id: 'label.pageTitle', defaultMessage: 'Page title' },
   day: { id: 'label.day', defaultMessage: 'Day' },
   date: { id: 'label.date', defaultMessage: 'Date' },
+  pageOf: { id: 'label.page-of', defaultMessage: 'Page {current} of {total}' },
 });
 
 export const messages = defineMessages({