Fixed hover color on pagination

samples/react-calendar-feed/src/shared/components/Pagination/IPagingProps.ts

@@ -1,4 +1,4 @@
-export interface IPagingProps {
+export interface IPaginationProps {
     currentPage: number;
     totalItems: number;
     itemsCountPerPage: number;

samples/react-calendar-feed/src/shared/components/Pagination/Pagination.module.scss

@@ -0,0 +1,66 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+
+.Pagination {
+  width: 100%;
+  min-width: 240px;
+  text-align: center;
+  margin: 0;
+  padding: 2px 0;
+  border: 1px solid transparent;
+  position: relative;
+  .next,
+  .prev {
+    margin: 0;
+    display: inline-block;
+    border: none;
+  }
+
+  button {
+    font-size: 14px;
+    font-weight: 400;
+    padding: 8px 4px;
+    margin: 0 8px;
+    cursor: pointer;
+    cursor: hand;
+    position: relative;
+    height: 32px !important;
+    display: none;
+    outline: 0;
+
+    &:hover, &:active {
+      color: "[theme:buttonTextCheckedHovered, default: #000]"
+    }
+  }
+
+  &.noPageNum {
+    text-align: left;
+
+    .next {
+      float: right;
+    }
+  }
+}
+
+
+
+
+
+// .Pagination .next,
+// .Pagination .prev {
+//   margin: 0;
+//   display: inline-block;
+//   border: none;
+// }
+
+// .Pagination button {
+//   font-size: 14px;
+//   font-weight: 400;
+//   padding: 8px 4px;
+//   margin: 0 8px;
+//   cursor: pointer;
+//   cursor: hand;
+//   position: relative;
+//   height: 32px !important;
+//   display: none;
+//   outline: 0;
+// }

samples/react-calendar-feed/src/shared/components/Pagination/Pagination.tsx

@@ -2,15 +2,15 @@ import { ActionButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
 import { Icon } from "office-ui-fabric-react/lib/Icon";
 import { css } from "office-ui-fabric-react/lib/Utilities";
 import * as React from "react";
-import { IPagingProps } from ".";
+import { IPaginationProps } from ".";
-import styles from "./Paging.module.scss";
+import styles from "./Pagination.module.scss";
 import * as strings from "CalendarFeedSummaryWebPartStrings";
 
 /**
  * A custom pagination control designed to look & feel like Office UI Fabric
  */
-export class Paging extends React.Component<IPagingProps, {}> {
+export class Pagination extends React.Component<IPaginationProps, {}> {
-    public render(): React.ReactElement<IPagingProps> {
+    public render(): React.ReactElement<IPaginationProps> {
 
         const { currentPage } = this.props;
 
@@ -18,16 +18,16 @@ export class Paging extends React.Component<IPagingProps, {}> {
         const numberOfPages: number = this._getNumberOfPages();
 
         // we disable the previous button if we're on page 1
-        const prevDisabled: boolean = currentPage < 1;
+        const prevDisabled: boolean = currentPage <= 1;
 
         // we disable the next button if we're on the last page
         const nextDisabled: boolean = currentPage >= numberOfPages;
 
         return (
-            <div className={css(styles.Paging, this.props.showPageNum ? null : styles.noPageNum)}>
+            <div className={css(styles.Pagination, this.props.showPageNum ? null : styles.noPageNum)}>
                 <ActionButton className={styles.prev}
                     data-automation-id="previousPage"
-                    onRenderIcon={(props: IButtonProps) => {
+                    onRenderIcon={(_props: IButtonProps) => {
                         // we use the render custom icon method to render the icon consistently with the right icon
                         return (
                             <Icon iconName="ChevronLeft" />

samples/react-calendar-feed/src/shared/components/Pagination/index.ts

@@ -1,2 +1,2 @@
-export * from "./Paging";
+export * from "./Pagination";
 export * from "./IPagingProps";

samples/react-calendar-feed/src/shared/components/Paging/Paging.module.scss

@@ -1,59 +0,0 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
-
-.Paging {
-  width: 100%;
-  min-width: 240px;
-  text-align: center;
-  margin: 0;
-  padding: 2px 0;
-  border: 1px solid transparent;
-  position: relative;
-}
-
-.Paging .next,
-.Paging .prev {
-  margin: 0;
-  display: inline-block;
-  border: none;
-}
-
-.Paging button {
-  font-size: 14px;
-  font-weight: 400;
-  padding: 8px 4px;
-  margin: 0 8px;
-  cursor: pointer;
-  cursor: hand;
-  position: relative;
-  height: 32px!important;
-  display: none;
-  outline: 0;
-}
-
-.Paging.noPageNum {
-  text-align: left;
-}
-
-.noPageNum .next {
-  float: right;
-}
-
-.Paging .next,
-.Paging .prev {
-  margin: 0;
-  display: inline-block;
-  border: none;
-}
-
-.Paging button {
-  font-size: 14px;
-  font-weight: 400;
-  padding: 8px 4px;
-  margin: 0 8px;
-  cursor: pointer;
-  cursor: hand;
-  position: relative;
-  height: 32px!important;
-  display: none;
-  outline: 0;
-}

samples/react-calendar-feed/src/webparts/calendarFeedSummary/components/CalendarFeedSummary.tsx

@@ -6,7 +6,7 @@ import * as moment from "moment";
 import { FocusZone, FocusZoneDirection, List, Spinner, css } from "office-ui-fabric-react";
 import * as React from "react";
 import { EventCard } from "../../../shared/components/EventCard";
-import { Paging } from "../../../shared/components/Paging";
+import { Pagination } from "../../../shared/components/Pagination";
 import { CalendarServiceProviderType, ICalendarEvent, ICalendarService } from "../../../shared/services/CalendarService";
 import styles from "./CalendarFeedSummary.module.scss";
 import { ICalendarFeedSummaryProps, ICalendarFeedSummaryState, IFeedCache } from "./CalendarFeedSummary.types";
@@ -268,7 +268,7 @@ export default class CalendarFeedSummary extends React.Component<ICalendarFeedSu
              />
         )} />
       {usePaging &&
-        <Paging
+        <Pagination
           showPageNum={false}
           currentPage={currentPage}
           itemsCountPerPage={maxEvents}