Breaks: unread indicators and date headers.

Signal/src/ViewControllers/ConversationView/Cells/OWSMessageCell.m

@@ -22,6 +22,8 @@ NS_ASSUME_NONNULL_BEGIN
 // * footerView (below message)
 
 @property (nonatomic) OWSMessageBubbleView *messageBubbleView;
+@property (nonatomic) UIView *dateHeaderView;
+@property (nonatomic) UIView *dateStrokeView;
 @property (nonatomic) UILabel *dateHeaderLabel;
 @property (nonatomic) AvatarImageView *avatarView;
 
@@ -55,11 +57,24 @@ NS_ASSUME_NONNULL_BEGIN
     self.messageBubbleView = [OWSMessageBubbleView new];
     [self.contentView addSubview:self.messageBubbleView];
 
+    self.dateHeaderView = [UIView new];
+
+    self.dateStrokeView = [UIView new];
+    self.dateStrokeView.backgroundColor = [UIColor lightGrayColor];
+    [self.dateHeaderView addSubview:self.dateStrokeView];
+
     self.dateHeaderLabel = [UILabel new];
     self.dateHeaderLabel.font = self.dateHeaderDateFont;
     self.dateHeaderLabel.textAlignment = NSTextAlignmentCenter;
     self.dateHeaderLabel.textColor = [UIColor lightGrayColor];
-    [self.contentView addSubview:self.dateHeaderLabel];
+    [self.dateHeaderView addSubview:self.dateHeaderLabel];
+
+    [self.dateStrokeView autoPinWidthToSuperview];
+    [self.dateStrokeView autoSetDimension:ALDimensionHeight toSize:1.f];
+    [self.dateHeaderLabel autoPinWidthToSuperview];
+    [self.dateHeaderLabel autoVCenterInSuperview];
+    // TODO: offset.
+    [self.dateStrokeView autoPinEdge:ALEdgeBottom toEdge:ALEdgeTop ofView:self.dateHeaderLabel withOffset:0.f];
 
     self.avatarView = [[AvatarImageView alloc] init];
     [self.contentView addSubview:self.avatarView];
@@ -67,10 +82,8 @@ NS_ASSUME_NONNULL_BEGIN
     [self.avatarView autoSetDimension:ALDimensionHeight toSize:self.avatarSize];
 
     // Hide these views by default.
-    self.dateHeaderLabel.hidden = YES;
     self.avatarView.hidden = YES;
 
-    [self.messageBubbleView autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.dateHeaderLabel];
     [self.messageBubbleView autoPinBottomToSuperviewMarginWithInset:0];
 
     self.contentView.userInteractionEnabled = YES;
@@ -244,20 +257,19 @@ NS_ASSUME_NONNULL_BEGIN
                                          referenceView:self];
 
         self.dateHeaderLabel.attributedText = attributedText;
-        self.dateHeaderLabel.hidden = NO;
 
+        [self.contentView addSubview:self.dateHeaderView];
         [self.viewConstraints addObjectsFromArray:@[
-            // TODO: Are data headers symmetric or are they asymmetric? gutters are asymmetric?
-            [self.dateHeaderLabel autoPinLeadingToSuperviewMarginWithInset:self.conversationStyle.gutterLeading],
-            [self.dateHeaderLabel autoPinTrailingToSuperviewMarginWithInset:self.conversationStyle.gutterTrailing],
-            [self.dateHeaderLabel autoPinEdgeToSuperviewEdge:ALEdgeTop],
-            [self.dateHeaderLabel autoSetDimension:ALDimensionHeight toSize:self.dateHeaderHeight],
+            [self.dateHeaderView autoPinLeadingToSuperviewMarginWithInset:self.conversationStyle.gutterLeading],
+            [self.dateHeaderView autoPinTrailingToSuperviewMarginWithInset:self.conversationStyle.gutterTrailing],
+            [self.dateHeaderView autoPinEdgeToSuperviewEdge:ALEdgeTop],
+            [self.dateHeaderView autoSetDimension:ALDimensionHeight toSize:self.dateHeaderHeight],
+
+            [self.messageBubbleView autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.dateHeaderView],
         ]];
     } else {
-        self.dateHeaderLabel.hidden = YES;
         [self.viewConstraints addObjectsFromArray:@[
-            [self.dateHeaderLabel autoSetDimension:ALDimensionHeight toSize:0],
-            [self.dateHeaderLabel autoPinEdgeToSuperviewEdge:ALEdgeTop],
+            [self.messageBubbleView autoPinEdgeToSuperviewEdge:ALEdgeTop],
         ]];
     }
 }
@@ -365,11 +377,17 @@ NS_ASSUME_NONNULL_BEGIN
     return cellSize;
 }
 
+- (CGFloat)dateHeaderVSpacing
+{
+    return 24.f;
+}
+
 - (CGFloat)dateHeaderHeight
 {
     if (self.viewItem.shouldShowDate) {
         // Add 5pt spacing above and below the date header.
-        return (CGFloat)ceil(MAX(self.dateHeaderDateFont.lineHeight, self.dateHeaderTimeFont.lineHeight) + 10.f);
+        CGFloat textHeight = MAX(self.dateHeaderDateFont.capHeight, self.dateHeaderTimeFont.capHeight);
+        return (CGFloat)ceil(textHeight + self.dateHeaderVSpacing * 2);
     } else {
         return 0.f;
     }
@@ -387,8 +405,8 @@ NS_ASSUME_NONNULL_BEGIN
     [self.messageBubbleView prepareForReuse];
     [self.messageBubbleView unloadContent];
 
-    self.dateHeaderLabel.text = nil;
-    self.dateHeaderLabel.hidden = YES;
+    [self.dateHeaderView removeFromSuperview];
+
     self.avatarView.image = nil;
     self.avatarView.hidden = YES;
 

Signal/src/ViewControllers/ConversationView/Cells/OWSUnreadIndicatorCell.m

@@ -45,12 +45,12 @@ NS_ASSUME_NONNULL_BEGIN
 
     self.strokeView = [UIView new];
     // TODO: color.
-    self.strokeView.backgroundColor = [UIColor colorWithRGBHex:0xf6eee3];
+    self.strokeView.backgroundColor = [UIColor blackColor];
     [self.contentView addSubview:self.strokeView];
 
     self.titleLabel = [UILabel new];
     // TODO: color.
-    self.titleLabel.textColor = [UIColor colorWithRGBHex:0x403e3b];
+    self.titleLabel.textColor = [UIColor blackColor];
     self.titleLabel.textAlignment = NSTextAlignmentCenter;
     [self.contentView addSubview:self.titleLabel];
 
@@ -62,7 +62,7 @@ NS_ASSUME_NONNULL_BEGIN
     // Update cell to reflect changes in dynamic text.
     //
     // TODO: Font size.
-    self.titleLabel.font = UIFont.ows_dynamicTypeSubheadlineFont;
+    self.titleLabel.font = UIFont.ows_dynamicTypeCaption1Font.ows_bold;
 }
 
 + (NSString *)cellReuseIdentifier

Signal/translations/en.lproj/Localizable.strings

@@ -1257,7 +1257,7 @@
 "MESSAGES_VIEW_TITLE_SUBTITLE" = "Tap here for settings";
 
 /* Indicator that separates read from unread messages. */
-"MESSAGES_VIEW_UNREAD_INDICATOR" = "Unread Messages";
+"MESSAGES_VIEW_UNREAD_INDICATOR" = "New Messages";
 
 /* Messages that indicates that there are more unseen messages including safety number changes that be revealed by tapping the 'load earlier messages' button. Embeds {{the name of the 'load earlier messages' button}}. */
 "MESSAGES_VIEW_UNREAD_INDICATOR_HAS_MORE_UNSEEN_MESSAGES_AND_SAFETY_NUMBER_CHANGES_FORMAT" = "There are more unread messages (including safety number changes) above. Tap \"%@\" to see them.";