Media Gallery: Support for dark theme

ts/components/Lightbox.tsx

@@ -5,13 +5,24 @@ import React from 'react';
 import classNames from 'classnames';
 import is from '@sindresorhus/is';
 
-import * as Colors from './styles/Colors';
 import * as GoogleChrome from '../util/GoogleChrome';
 import * as MIME from '../types/MIME';
-import { colorSVG } from '../styles/colorSVG';
 
 import { Localizer } from '../types/Util';
 
+const Colors = {
+  TEXT_SECONDARY: '#bbb',
+  ICON_SECONDARY: '#ccc',
+};
+
+const colorSVG = (url: string, color: string) => {
+  return {
+    WebkitMask: `url(${url}) no-repeat center`,
+    WebkitMaskSize: '100%',
+    backgroundColor: color,
+  };
+};
+
 interface Props {
   close: () => void;
   contentType: MIME.MIMEType | undefined;

ts/components/conversation/media-gallery/AttachmentSection.tsx

@@ -6,27 +6,10 @@ import { ItemClickEvent } from './types/ItemClickEvent';
 import { MediaGridItem } from './MediaGridItem';
 import { Message } from './types/Message';
 import { missingCaseError } from '../../../util/missingCaseError';
-
-const styles = {
-  container: {
-    width: '100%',
-  },
-  header: {
-    fontSize: 14,
-    fontWeight: 'normal',
-    lineHeight: '28px',
-  } as React.CSSProperties,
-  itemContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-  } as React.CSSProperties,
-};
+import { Localizer } from '../../../types/Util';
 
 interface Props {
-  i18n: (value: string) => string;
+  i18n: Localizer;
   header?: string;
   type: AttachmentType;
   messages: Array<Message>;
@@ -38,9 +21,11 @@ export class AttachmentSection extends React.Component<Props> {
     const { header } = this.props;
 
     return (
-      <div style={styles.container}>
-        <h2 style={styles.header}>{header}</h2>
-        <div style={styles.itemContainer}>{this.renderItems()}</div>
+      <div className="module-attachment-section">
+        <h2 className="module-attachment-section__header">{header}</h2>
+        <div className="module-attachment-section__items">
+          {this.renderItems()}
+        </div>
       </div>
     );
   }
@@ -61,6 +46,7 @@ export class AttachmentSection extends React.Component<Props> {
               key={message.id}
               message={message}
               onClick={onClick}
+              i18n={i18n}
             />
           );
         case 'documents':
@@ -69,7 +55,6 @@ export class AttachmentSection extends React.Component<Props> {
               key={message.id}
               fileName={firstAttachment.fileName}
               fileSize={firstAttachment.size}
-              i18n={i18n}
               shouldShowSeparator={shouldShowSeparator}
               onClick={onClick}
               timestamp={message.received_at}

ts/components/conversation/media-gallery/DocumentListItem.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import moment from 'moment';
 // tslint:disable-next-line:match-default-export-name
 import formatFileSize from 'filesize';
 
-import { Localizer } from '../../../types/Util';
-
 interface Props {
   // Required
-  i18n: Localizer;
   timestamp: number;
 
   // Optional
@@ -18,49 +16,6 @@ interface Props {
   shouldShowSeparator?: boolean;
 }
 
-const styles = {
-  container: {
-    width: '100%',
-    height: 72,
-  },
-  containerSeparator: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#ccc',
-    borderBottomStyle: 'solid',
-  },
-  itemContainer: {
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    alignItems: 'center',
-    height: '100%',
-  } as React.CSSProperties,
-  itemMetadata: {
-    display: 'inline-flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    flexShrink: 0,
-    marginLeft: 8,
-    marginRight: 8,
-  } as React.CSSProperties,
-  itemDate: {
-    display: 'inline-block',
-    flexShrink: 0,
-  },
-  itemIcon: {
-    flexShrink: 0,
-  },
-  itemFileName: {
-    fontWeight: 'bold',
-  } as React.CSSProperties,
-  itemFileSize: {
-    display: 'inline-block',
-    marginTop: 8,
-    fontSize: '80%',
-  },
-};
-
 export class DocumentListItem extends React.Component<Props> {
   public static defaultProps: Partial<Props> = {
     shouldShowSeparator: true,
@@ -71,10 +26,12 @@ export class DocumentListItem extends React.Component<Props> {
 
     return (
       <div
-        style={{
-          ...styles.container,
-          ...(shouldShowSeparator ? styles.containerSeparator : {}),
-        }}
+        className={classNames(
+          'module-document-list-item',
+          shouldShowSeparator
+            ? 'module-document-list-item--with-separator'
+            : null
+        )}
       >
         {this.renderContent()}
       </div>
@@ -82,28 +39,24 @@ export class DocumentListItem extends React.Component<Props> {
   }
 
   private renderContent() {
-    const { fileName, fileSize, timestamp, i18n } = this.props;
+    const { fileName, fileSize, timestamp } = this.props;
 
     return (
       <div
-        style={styles.itemContainer}
+        className="module-document-list-item__content"
         role="button"
         onClick={this.props.onClick}
       >
-        <img
-          alt={i18n('fileIconAlt')}
-          src="images/file.svg"
-          width="48"
-          height="48"
-          style={styles.itemIcon}
-        />
-        <div style={styles.itemMetadata}>
-          <span style={styles.itemFileName}>{fileName}</span>
-          <span style={styles.itemFileSize}>
+        <div className="module-document-list-item__icon" />
+        <div className="module-document-list-item__metadata">
+          <span className="module-document-list-item__file-name">
+            {fileName}
+          </span>
+          <span className="module-document-list-item__file-size">
             {typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
           </span>
         </div>
-        <div style={styles.itemDate}>
+        <div className="module-document-list-item__date">
           {moment(timestamp).format('ddd, MMM D, Y')}
         </div>
       </div>

ts/components/conversation/media-gallery/EmptyState.tsx

@@ -3,28 +3,14 @@
  */
 import React from 'react';
 
-import * as Colors from '../../styles/Colors';
-
 interface Props {
   label: string;
 }
 
-const styles = {
-  container: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexGrow: 1,
-
-    fontSize: 28,
-    color: Colors.TEXT_SECONDARY,
-  } as React.CSSProperties,
-};
-
 export class EmptyState extends React.Component<Props> {
   public render() {
     const { label } = this.props;
 
-    return <div style={styles.container}>{label}</div>;
+    return <div className="module-empty-state">{label}</div>;
   }
 }

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import moment from 'moment';
 
@@ -9,10 +10,11 @@ import { groupMessagesByDate } from './groupMessagesByDate';
 import { ItemClickEvent } from './types/ItemClickEvent';
 import { Message } from './types/Message';
 import { missingCaseError } from '../../../util/missingCaseError';
+import { Localizer } from '../../../types/Util';
 
 interface Props {
   documents: Array<Message>;
-  i18n: (key: string, values?: Array<string>) => string;
+  i18n: Localizer;
   media: Array<Message>;
   onItemClick?: (event: ItemClickEvent) => void;
 }
@@ -22,49 +24,6 @@ interface State {
 }
 
 const MONTH_FORMAT = 'MMMM YYYY';
-const COLOR_GRAY = '#f3f3f3';
-
-const tabStyle = {
-  width: '100%',
-  backgroundColor: COLOR_GRAY,
-  padding: 20,
-  textAlign: 'center',
-};
-
-const styles = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    width: '100%',
-    height: '100%',
-  } as React.CSSProperties,
-  tabContainer: {
-    display: 'flex',
-    flexGrow: 0,
-    flexShrink: 0,
-    cursor: 'pointer',
-    width: '100%',
-  },
-  tab: {
-    default: tabStyle,
-    active: {
-      ...tabStyle,
-      borderBottom: '2px solid #08f',
-    },
-  },
-  contentContainer: {
-    display: 'flex',
-    flexGrow: 1,
-    overflowY: 'auto',
-    padding: 20,
-  } as React.CSSProperties,
-  sectionContainer: {
-    display: 'flex',
-    flexGrow: 1,
-    flexDirection: 'column',
-  } as React.CSSProperties,
-};
 
 interface TabSelectEvent {
   type: AttachmentType;
@@ -89,7 +48,10 @@ const Tab = ({
 
   return (
     <div
-      style={isSelected ? styles.tab.active : styles.tab.default}
+      className={classNames(
+        'module-media-gallery__tab',
+        isSelected ? 'module-media-gallery__tab--active' : null
+      )}
       onClick={handleClick}
       role="tab"
     >
@@ -107,8 +69,8 @@ export class MediaGallery extends React.Component<Props, State> {
     const { selectedTab } = this.state;
 
     return (
-      <div style={styles.container}>
-        <div style={styles.tabContainer}>
+      <div className="module-media-gallery">
+        <div className="module-media-gallery__tab-container">
           <Tab
             label="Media"
             type="media"
@@ -122,7 +84,9 @@ export class MediaGallery extends React.Component<Props, State> {
             onSelect={this.handleTabSelect}
           />
         </div>
-        <div style={styles.contentContainer}>{this.renderSections()}</div>
+        <div className="module-media-gallery__content">
+          {this.renderSections()}
+        </div>
       </div>
     );
   }
@@ -176,6 +140,6 @@ export class MediaGallery extends React.Component<Props, State> {
       );
     });
 
-    return <div style={styles.sectionContainer}>{sections}</div>;
+    return <div className="module-media-gallery__sections">{sections}</div>;
   }
 }

ts/components/conversation/media-gallery/MediaGridItem.tsx

@@ -1,52 +1,38 @@
 import React from 'react';
 
 import { Message } from './types/Message';
+import { Localizer } from '../../../types/Util';
 
 interface Props {
   message: Message;
   onClick?: () => void;
+  i18n: Localizer;
 }
 
-const size = {
-  width: 94,
-  height: 94,
-};
-const styles = {
-  container: {
-    ...size,
-    cursor: 'pointer',
-    backgroundColor: '#f3f3f3',
-    marginRight: 4,
-    marginBottom: 4,
-  },
-  image: {
-    ...size,
-    backgroundSize: 'cover',
-  },
-};
-
 export class MediaGridItem extends React.Component<Props> {
   public renderContent() {
-    const { message } = this.props;
+    const { message, i18n } = this.props;
 
     if (!message.objectURL) {
       return null;
     }
 
     return (
-      <div
-        style={{
-          ...styles.container,
-          ...styles.image,
-          backgroundImage: `url("${message.objectURL}")`,
-        }}
+      <img
+        alt={i18n('lightboxImageAlt')}
+        className="module-media-grid-item__image"
+        src={message.objectURL}
       />
     );
   }
 
   public render() {
     return (
-      <div style={styles.container} role="button" onClick={this.props.onClick}>
+      <div
+        className="module-media-grid-item"
+        role="button"
+        onClick={this.props.onClick}
+      >
         {this.renderContent()}
       </div>
     );

ts/components/styles/Colors.ts

@@ -1,5 +0,0 @@
-/**
- * @prettier
- */
-export const TEXT_SECONDARY = '#bbb';
-export const ICON_SECONDARY = '#ccc';