Added theme variants to both narrow and full size

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

@@ -3,6 +3,7 @@ import { css } from "office-ui-fabric-react/lib/Utilities";
 import * as React from "react";
 import styles from "./DateBox.module.scss";
 import { DateBoxSize, IDateBoxProps } from ".";
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
 /**
  * Shows a date in a SharePoint-looking date
@@ -25,31 +26,66 @@ export class DateBox extends React.Component<IDateBoxProps, {}> {
     }
   }
 
+  /**
+   * Renders an event that happens in a single day
+   * @param startMoment
+   */
   private _renderSingleDay(startMoment: moment.Moment): JSX.Element {
-    const { className, size } = this.props;
+    const { className, size, themeVariant } = this.props;
+
     return (
       <div className={css(styles.box,
         styles.boxIsSingleDay,
         (size === DateBoxSize.Small ? styles.boxIsSmall : styles.boxIsMedium), className)}
-        data-automation-id="singleDayDayContainer">
+        style={
+          themeVariant &&
+          {
+            backgroundColor: themeVariant.palette["primaryBackground"],
+            borderColor: themeVariant.semanticColors.bodyDivider
+          }}>
         <div className={styles.month}
-          data-automation-id="singleDayMonthContainer">{startMoment.format("MMM").toUpperCase()}</div>
+          style={
+            themeVariant &&
+            { color: themeVariant.semanticColors.bodyText }}>{startMoment.format("MMM").toUpperCase()}</div>
         <div className={styles.day}
-          data-automation-id="singleDayDayContainer">{startMoment.format("D")}</div>
+          style={
+            themeVariant &&
+            { color: themeVariant.semanticColors.bodyText }}>{startMoment.format("D")}</div>
       </div>);
   }
 
+  /**
+   * Renders an event that spans over multiple days
+   * @param startMoment
+   * @param endMoment
+   */
   private _renderMultiDay(startMoment: moment.Moment, endMoment: moment.Moment): JSX.Element {
-    const { className, size } = this.props;
+    const { className, size, themeVariant } = this.props;
     return (
       <div
         className={css(styles.box,
           styles.boxIsSingleDay,
           (size === DateBoxSize.Small ? styles.boxIsSmall : styles.boxIsMedium), className)}
-        data-automation-id="multipleDayBox">
-        <div className={styles.date} data-automation-id="multipleDayStartDateContainer">{startMoment.format("MMM D").toUpperCase()}</div>
-        <hr className={styles.separator} />
-        <div className={styles.date} data-automation-id="multipleDayEndDateContainer">{endMoment.format("MMM D").toUpperCase()}</div>
+        style={
+          themeVariant &&
+          {
+            backgroundColor: themeVariant.palette["primaryBackground"],
+            borderColor: themeVariant.semanticColors.bodyDivider
+          }}>
+
+        <div className={styles.date} style={
+          themeVariant &&
+          { color: themeVariant.semanticColors.bodyText }}>{startMoment.format("MMM D").toUpperCase()}</div>
+        <hr className={styles.separator}
+          style={
+            themeVariant &&
+            {
+              borderColor: themeVariant.semanticColors.bodyText
+            }}
+        />
+        <div className={styles.date} style={
+          themeVariant &&
+          { color: themeVariant.semanticColors.bodyText }}>{endMoment.format("MMM D").toUpperCase()}</div>
       </div>);
   }
 }

samples/react-calendar-feed/src/shared/components/DateBox/IDateBoxProps.ts

@@ -1,9 +1,11 @@
 import { DateBoxSize } from "./DateBoxSize";
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
 export interface IDateBoxProps {
     startDate: Date;
     endDate: Date;
     className?: string;
     size: DateBoxSize;
+    themeVariant?: IReadonlyTheme;
 }
 

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

@@ -113,7 +113,7 @@
     align-items: center;
     -webkit-font-smoothing: antialiased;
     //background-color: $ms-color-white;
-    border: 1px solid #eaeaea;
+    border: 1px solid $ms-color-neutralLight;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     max-width: 320px;
@@ -163,7 +163,7 @@
 
 .category,
 .location {
-  color:$ms-color-neutralSecondary;
+  color: $ms-color-neutralSecondary;
 }
 
 .category,

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

@@ -24,8 +24,12 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
     }
   }
 
+  /**
+   * Renders a full width cell
+   */
   private _renderNormalCell(): JSX.Element {
 
+    const { themeVariant } = this.props;
     const { start,
       end,
       allDay,
@@ -42,6 +46,7 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
       <div>
         <div
           className={css(styles.cardWrapper)}
+          style={themeVariant && { backgroundColor: themeVariant.semanticColors.bodyBackground }}
           data-is-focusable={true}
           data-is-focus-item={true}
           role="listitem"
@@ -52,6 +57,7 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
             className={css(styles.root, !isEditMode && styles.rootIsActionable, styles.normalCard)}
             type={DocumentCardType.normal}
             onClickHref={isEditMode ? null : url}
+            style={themeVariant && { borderColor: themeVariant.semanticColors.bodyDivider }}
           >
             <FocusZone>
               <div className={styles.dateBoxContainer} style={{ height: 160 }}>
@@ -60,15 +66,17 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
                   startDate={start}
                   endDate={end}
                   size={DateBoxSize.Medium}
+                  themeVariant={themeVariant}
                 />
               </div>
               <div className={styles.detailsContainer}>
-                <div className={styles.category}>{category}</div>
-                <div className={styles.title}>{title}</div>
-                <div className={styles.datetime}>{dateString}</div>
-                <div className={styles.location}>{location}</div>
+                <div className={styles.category} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext}}>{category}</div>
+                <div className={styles.title} style={themeVariant && { color: themeVariant.semanticColors.bodyText}}>{title}</div>
+                <div className={styles.datetime} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext}}>{dateString}</div>
+                <div className={styles.location} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext}}>{location}</div>
                 <ActionButton
                   className={styles.addToMyCalendar}
+                  style={themeVariant && { color: themeVariant.semanticColors.bodyText}}
                   iconProps={{ iconName: "AddEvent" }}
                   ariaLabel={strings.AddToCalendarAriaLabel}
                   onClick={this._onAddToMyCalendar}
@@ -83,34 +91,31 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
     );
   }
 
+  /**
+   * Renders a narrow event card cell
+   */
   private _renderNarrowCell(): JSX.Element {
 
+    // Get the cell information
     const { start,
       end,
       allDay,
       title,
       url,
-      // category,
-      // location
     } = this.props.event;
+
+    const { themeVariant } = this.props;
+
+    // Calculate the date and string format
     const eventDate: moment.Moment = moment(start);
     const dateString: string = allDay ? eventDate.format(strings.AllDayDateFormat) : eventDate.format(strings.LocalizedTimeFormat);
 
-    let customStyle: React.CSSProperties = {};
-    if (this.props.themeVariant) {
-      const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
-      console.log("Semantic colors", semanticColors);
-      if (semanticColors && semanticColors.bodyBackground) {
-        customStyle = { backgroundColor: semanticColors.bodyBackground };
-      }
-      console.log("Custom style", semanticColors);
-    }
-
+    // Define theme variant styles if themevariant was passed
     return (
       <div>
         <div
           className={css(styles.cardWrapper, styles.compactCard, styles.root, styles.rootIsCompact)}
-          style={customStyle}
+          style={themeVariant && { backgroundColor: themeVariant.semanticColors.bodyBackground }}
           data-is-focusable={true}
           data-is-focus-item={true}
           role="listitem"
@@ -119,7 +124,7 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
           <DocumentCard
             className={css(styles.root, styles.rootIsActionable, styles.rootIsCompact)}
             type={DocumentCardType.compact}
-            style={customStyle}
+            style={themeVariant && { backgroundColor: themeVariant.semanticColors.bodyBackground }}
             onClickHref={url}
           >
             <div>
@@ -128,11 +133,12 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
                 startDate={start}
                 endDate={end}
                 size={DateBoxSize.Small}
+                themeVariant={themeVariant}
               />
             </div>
             <div>
-              <div className={styles.title}>{title}</div>
-              <div className={styles.datetime}>{dateString}</div>
+              <div className={styles.title} style={themeVariant && { color: themeVariant.semanticColors.bodyText}}>{title}</div>
+              <div className={styles.datetime} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext}}>{dateString}</div>
             </div>
           </DocumentCard>
         </div>
@@ -140,6 +146,9 @@ export class EventCard extends React.Component<IEventCardProps, {}> {
     );
   }
 
+  /**
+   * Handle adding to calendar
+   */
   private _onAddToMyCalendar = (): void => {
     const { event } = this.props;
 

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

@@ -96,7 +96,7 @@
       border-color: "[theme:themeDark, default: #005a9e]";
 
       &:hover {
-        background-color: "[theme:themeDarker, default: #004578]";
+        opacity: 1;
       }
     }
   }

samples/react-calendar-feed/src/shared/components/filmstripLayout/IFilmstripLayoutProps.ts

@@ -1,5 +0,0 @@
-
-export interface IFilmstripLayoutProps {
-  ariaLabel?: string;
-  clientWidth: number;
- }

samples/react-calendar-feed/src/shared/components/filmstripLayout/IFilmstripLayoutState.ts

@@ -1,4 +0,0 @@
-
-export interface IFilmstripLayoutState {
-  numSlides: number;
- }

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

@@ -1,2 +1 @@
 export * from "./FilmstripLayout";
-export * from "./IFilmstripLayoutProps";

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

@@ -304,7 +304,9 @@ export default class CalendarFeedSummary extends React.Component<ICalendarFeedSu
                 key={`eventCard${index}`}
                 isEditMode={isEditMode}
                 event={event}
-                isNarrow={false} />);
+                isNarrow={false}
+                themeVariant={this.props.themeVariant} />
+                );
             })}
           </FilmstripLayout>
         </div>