make timestamp a styled-component too

stylesheets/_modules.scss

@@ -396,14 +396,6 @@
   }
 }
 
-.module-message__metadata__date {
-  font-size: 11px;
-  line-height: 16px;
-  letter-spacing: 0.3px;
-  text-transform: uppercase;
-  user-select: none;
-}
-
 .module-message__author-avatar {
   flex-direction: column-reverse;
   display: inline-flex;
@@ -1325,23 +1317,6 @@
   font-weight: 300;
 }
 
-.module-conversation-list-item__header__timestamp {
-  flex-shrink: 0;
-  margin-inline-start: 6px;
-
-  font-size: 11px;
-  line-height: 16px;
-  letter-spacing: 0.3px;
-
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  text-transform: uppercase;
-
-  color: $color-gray-25;
-}
-
 .module-conversation-list-item__header__date--has-unread {
   font-weight: 300;
   color: $color-gray-05;

stylesheets/_theme_dark.scss

@@ -445,10 +445,6 @@
     color: $color-gray-05;
   }
 
-  .module-conversation-list-item__header__timestamp {
-    color: $color-gray-25;
-  }
-
   .module-conversation-list-item__header__date--has-unread {
     color: $color-gray-05;
   }

ts/components/ConversationListItem.tsx

@@ -153,7 +153,8 @@ class ConversationListItem extends React.PureComponent<Props> {
               <Timestamp
                 timestamp={lastUpdated}
                 extended={false}
-                module="module-conversation-list-item__header__timestamp"
+                isConversationListItem={true}
+                theme={this.props.theme}
               />
             }
           </div>

ts/components/MessageSearchResult.tsx

@@ -7,6 +7,7 @@ import { Timestamp } from './conversation/Timestamp';
 import { ContactName } from './conversation/ContactName';
 
 import { LocalizerType } from '../types/Util';
+import { DefaultTheme, withTheme } from 'styled-components';
 
 export type MessageSearchResultProps = {
   id: string;
@@ -35,14 +36,14 @@ export type MessageSearchResultProps = {
 
 type PropsHousekeeping = {
   isSelected?: boolean;
-
+  theme: DefaultTheme;
   i18n: LocalizerType;
   onClick: (conversationId: string, messageId?: string) => void;
 };
 
 type Props = MessageSearchResultProps & PropsHousekeeping;
 
-export class MessageSearchResult extends React.PureComponent<Props> {
+class MessageSearchResultInner extends React.PureComponent<Props> {
   public renderFromName() {
     const { from, i18n, to } = this.props;
 
@@ -150,7 +151,7 @@ export class MessageSearchResult extends React.PureComponent<Props> {
           <div className="module-message-search-result__header">
             {this.renderFrom()}
             <div className="module-message-search-result__header__timestamp">
-              <Timestamp timestamp={receivedAt} />
+              <Timestamp timestamp={receivedAt} theme={this.props.theme} />
             </div>
           </div>
           <div className="module-message-search-result__body">
@@ -161,3 +162,5 @@ export class MessageSearchResult extends React.PureComponent<Props> {
     );
   }
 }
+
+export const MessageSearchResult = withTheme(MessageSearchResultInner);

ts/components/conversation/Timestamp.tsx

@@ -4,16 +4,46 @@ import moment from 'moment';
 
 import { formatRelativeTime } from '../../util/formatRelativeTime';
 import { useInterval } from '../../hooks/useInterval';
+import styled, { DefaultTheme } from 'styled-components';
+import { OpacityMetadataComponent } from './message/MessageMetadata';
 
 type Props = {
   timestamp?: number;
   extended?: boolean;
   module?: string;
   withImageNoCaption?: boolean;
+  isConversationListItem?: boolean;
+  theme: DefaultTheme;
 };
 
 const UPDATE_FREQUENCY = 60 * 1000;
 
+const TimestampContainerListItem = styled(props => (
+  <OpacityMetadataComponent {...props} />
+))<{ color: string }>`
+  flex-shrink: 0;
+  margin-inline-start: 6px;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.3px;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  color: ${props => props.theme.colors.textColor};
+`;
+
+const TimestampContainerNotListItem = styled(props => (
+  <OpacityMetadataComponent {...props} />
+))<{ color: string }>`
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  user-select: none;
+  color: ${props => props.timestampColor};
+`;
+
 export const Timestamp = (props: Props) => {
   const [lastUpdated, setLastUpdated] = useState(Date.now());
   // this is kind of a hack, but we use lastUpdated just to trigger a refresh.
@@ -50,15 +80,23 @@ export const Timestamp = (props: Props) => {
     dateString = dateString.replace('minutes', 'mins').replace('minute', 'min');
   }
 
+  const timestampColor = withImageNoCaption
+    ? 'white'
+    : props.theme.colors.textColor;
+  const title = moment(timestamp).format('llll');
+  if (props.isConversationListItem) {
+    return (
+      <TimestampContainerListItem timestampColor={timestampColor} title={title}>
+        {dateString}
+      </TimestampContainerListItem>
+    );
+  }
   return (
-    <span
-      className={classNames(
-        moduleName,
-        withImageNoCaption ? `${moduleName}--with-image-no-caption` : null
-      )}
-      title={moment(timestamp).format('llll')}
+    <TimestampContainerNotListItem
+      timestampColor={timestampColor}
+      title={title}
     >
       {dateString}
-    </span>
+    </TimestampContainerNotListItem>
   );
 };

ts/components/conversation/message/MessageMetadata.tsx

@@ -102,7 +102,8 @@ export const MessageMetadata = (props: Props) => {
           timestamp={serverTimestamp || timestamp}
           extended={true}
           withImageNoCaption={withImageNoCaption}
-          module="module-message__metadata__date"
+          isConversationListItem={false}
+          theme={theme}
         />
       )}
       <MetadataBadges