[ios] RELAND Creates SigninPromoView UIRefresh styling.

====
Original CL: crrev.com/c/1107216
- Updates SigninPromoView to support a new UI Layout based on UIRefresh Phase 1 flag and a new
flag received on init.

Screenshots:
https://drive.google.com/open?id=1FnR436FEX9_3GwFbIIrJsQ8qHZOdqJpl
https://drive.google.com/open?id=1__aPHb1ye3WkiHKHJp9kIyJ6hhABq1Y6
https://drive.google.com/open?id=1ibjz3nnXHBrO_akJm4e9tgghpD85f3u0
https://drive.google.com/open?id=1dCVkiMW1IMQjWkxcegVxi8r1PLh5ZCqM
====

Updates:
There were some issues when moving the UI setup from self, which I had tried to fix on the original
CL. I've now moved the UI setup to self, this means that some call to self will remain.

Bug: 805188
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: I4eab7b1b4388e1e4f41b0b9861ef44057d99aab7
Reviewed-on: https://chromium-review.googlesource.com/1118912Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Commit-Queue: Sergio Collazos <sczs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#571922}

ios/chrome/browser/ui/authentication/BUILD.gn

@@ -146,6 +146,7 @@ source_set("unit_tests") {
     "//ios/chrome/browser/signin",
     "//ios/chrome/browser/signin:test_support",
     "//ios/chrome/browser/sync",
+    "//ios/chrome/browser/ui:feature_flags",
     "//ios/chrome/browser/ui/colors",
     "//ios/chrome/browser/ui/commands",
     "//ios/chrome/browser/ui/signin_interaction/public",

ios/chrome/browser/ui/authentication/signin_promo_item.mm

@@ -48,7 +48,9 @@
   self = [super initWithFrame:frame];
   if (self) {
     UIView* contentView = self.contentView;
-    _signinPromoView = [[SigninPromoView alloc] initWithFrame:self.bounds];
+    _signinPromoView =
+        [[SigninPromoView alloc] initWithFrame:self.bounds
+                                         style:SigninPromoViewUILegacy];
     _signinPromoView.translatesAutoresizingMaskIntoConstraints = NO;
     [contentView addSubview:_signinPromoView];
     AddSameConstraints(_signinPromoView, contentView);

ios/chrome/browser/ui/authentication/signin_promo_view.h

@@ -12,6 +12,15 @@
 @class MDCFlatButton;
 @protocol SigninPromoViewDelegate;
 
+typedef NS_ENUM(NSInteger, SigninPromoViewUI) {
+  // The legacy SigninPromoViewUI style.
+  SigninPromoViewUILegacy,
+  // The SigninPromoViewRefreshUI style. In order for this value to take effect
+  // the UIRefreshPhase1 flag also needs to be enabled. Otherwise
+  // SigninPromoViewUILegacy style will still be used.
+  SigninPromoViewUIRefresh,
+};
+
 typedef NS_ENUM(NSInteger, SigninPromoViewMode) {
   // No identity available on the device.
   SigninPromoViewModeColdState,
@@ -43,8 +52,8 @@ extern NSString* const kSigninPromoCloseButtonId;
 @property(nonatomic) SigninPromoViewMode mode;
 @property(nonatomic, readonly) UIImageView* imageView;
 @property(nonatomic, readonly) UILabel* textLabel;
-@property(nonatomic, readonly) MDCFlatButton* primaryButton;
-@property(nonatomic, readonly) MDCFlatButton* secondaryButton;
+@property(nonatomic, readonly) UIButton* primaryButton;
+@property(nonatomic, readonly) UIButton* secondaryButton;
 // Hidden by default.
 @property(nonatomic, readonly) UIButton* closeButton;
 
@@ -53,6 +62,14 @@ extern NSString* const kSigninPromoCloseButtonId;
 // |textLabel|.
 @property(nonatomic, readonly) CGFloat horizontalPadding;
 
+// Designated initializer. |signinPromoViewUI| sets the style for the
+// SigninPromoView to legacy or refreshed. This same view is used on Collections
+// and Settings, while the Collections UI will be refreshed soon, we still need
+// to support the legacy UI for settings.
+- (instancetype)initWithFrame:(CGRect)frame
+                        style:(SigninPromoViewUI)signinPromoViewUI
+    NS_DESIGNATED_INITIALIZER;
+- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
 - (instancetype)initWithCoder:(NSCoder*)aDecoder NS_UNAVAILABLE;
 
 // Sets the image in |imageView|. This method will add a circular background

ios/chrome/browser/ui/authentication/signin_promo_view.mm

@@ -5,8 +5,10 @@
 #import "ios/chrome/browser/ui/authentication/signin_promo_view.h"
 
 #include "base/logging.h"
+#include "base/mac/foundation_util.h"
 #import "ios/chrome/browser/ui/authentication/signin_promo_view_delegate.h"
 #import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.h"
+#include "ios/chrome/browser/ui/ui_util.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
 #include "ios/chrome/grit/ios_chromium_strings.h"
@@ -22,12 +24,12 @@
 namespace {
 // Horizontal padding for label and buttons.
 const CGFloat kHorizontalPadding = 40;
-// Vertical padding for the image and the label.
-const CGFloat kStackViewVerticalSpacing = 14;
+// Spacing within stackView.
+const CGFloat kLegacySubViewVerticalSpacing = 14;
 // StackView vertical padding.
-const CGFloat kStackViewVerticalPadding = 20.0;
+const CGFloat kLegacyStackViewVerticalPadding = 20.0;
 // StackView horizontal padding.
-const CGFloat kStackViewHorizontalPadding = 15.0;
+const CGFloat kLegacyStackViewHorizontalPadding = 15.0;
 // Vertical padding for buttons.
 const CGFloat kButtonVerticalPadding = 10;
 // Image size for warm state.
@@ -36,6 +38,30 @@ const CGFloat kProfileImageFixedSize = 48;
 const CGFloat kCloseButtonSize = 24;
 // Padding for the close button.
 const CGFloat kCloseButtonPadding = 8;
+
+// UI Refresh Constants:
+// Text label gray color.
+const CGFloat kGrayHexColor = 0x6d6d72;
+// Action button blue background color.
+const CGFloat kBlueHexColor = 0x1A73E8;
+// Vertical spacing between stackView and cell contentView.
+const CGFloat kStackViewVerticalPadding = 11.0;
+// Horizontal spacing between stackView and cell contentView.
+const CGFloat kStackViewHorizontalPadding = 16.0;
+// Spacing within stackView.
+const CGFloat kStackViewSubViewSpacing = 13.0;
+// Horizontal Inset between button contents and edge.
+const CGFloat kButtonTitleHorizontalContentInset = 40.0;
+// Vertical Inset between button contents and edge.
+const CGFloat kButtonTitleVerticalContentInset = 8.0;
+// Button corner radius.
+const CGFloat kButtonCornerRadius = 8;
+// Trailing margin for the close button.
+const CGFloat kCloseButtonTrailingMargin = 5;
+// Size for the close button width and height.
+const CGFloat kCloseButtonWidthHeight = 24;
+// Size for the imageView width and height.
+const CGFloat kImageViewWidthHeight = 32;
 }
 
 NSString* const kSigninPromoViewId = @"kSigninPromoViewId";
@@ -44,6 +70,16 @@ NSString* const kSigninPromoSecondaryButtonId =
     @"kSigninPromoSecondaryButtonId";
 NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
 
+@interface SigninPromoView ()
+// Re-declare as readwrite.
+@property(nonatomic, readwrite) UIImageView* imageView;
+@property(nonatomic, readwrite) UILabel* textLabel;
+@property(nonatomic, readwrite) UIButton* primaryButton;
+@property(nonatomic, readwrite) UIButton* secondaryButton;
+@property(nonatomic, readwrite) UIButton* closeButton;
+@property(nonatomic, assign) BOOL loadRefreshUI;
+@end
+
 @implementation SigninPromoView {
   signin_metrics::AccessPoint _accessPoint;
 }
@@ -55,18 +91,22 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
 @synthesize primaryButton = _primaryButton;
 @synthesize secondaryButton = _secondaryButton;
 @synthesize closeButton = _closeButton;
+@synthesize loadRefreshUI = _loadRefreshUI;
 
-- (instancetype)initWithFrame:(CGRect)frame {
+- (instancetype)initWithFrame:(CGRect)frame
+                        style:(SigninPromoViewUI)signinPromoViewUI {
   self = [super initWithFrame:frame];
   if (self) {
+    _loadRefreshUI = (IsUIRefreshPhase1Enabled() &&
+                      signinPromoViewUI == SigninPromoViewUIRefresh);
+
     // Set the whole element as accessible to take advantage of the
     // accessibilityCustomActions.
     self.isAccessibilityElement = YES;
     self.accessibilityIdentifier = kSigninPromoViewId;
 
     // Create and setup imageview that will hold the browser icon or user
-    // profile
-    // image.
+    // profile image.
     _imageView = [[UIImageView alloc] init];
     _imageView.translatesAutoresizingMaskIntoConstraints = NO;
     _imageView.layer.masksToBounds = YES;
@@ -77,36 +117,76 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
     _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
     _textLabel.numberOfLines = 0;
     _textLabel.textAlignment = NSTextAlignmentCenter;
-    _textLabel.font = [MDCTypography buttonFont];
-    _textLabel.textColor = [[MDCPalette greyPalette] tint900];
+    if (_loadRefreshUI) {
+      _textLabel.lineBreakMode = NSLineBreakByWordWrapping;
+      _textLabel.font =
+          [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
+      _textLabel.textColor = UIColorFromRGB(kGrayHexColor);
+    } else {
+      _textLabel.font = [MDCTypography buttonFont];
+      _textLabel.textColor = [[MDCPalette greyPalette] tint900];
+    }
 
     // Create and setup primary button.
-    _primaryButton = [[MDCFlatButton alloc] init];
+    UIButton* primaryButton;
+    UIEdgeInsets primaryButtonInsets;
+    if (_loadRefreshUI) {
+      primaryButton = [[UIButton alloc] init];
+      primaryButton.backgroundColor = UIColorFromRGB(kBlueHexColor);
+      [primaryButton.titleLabel
+          setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleHeadline]];
+      primaryButton.layer.cornerRadius = kButtonCornerRadius;
+      primaryButton.clipsToBounds = YES;
+      primaryButtonInsets = UIEdgeInsetsMake(
+          kButtonTitleVerticalContentInset, kButtonTitleHorizontalContentInset,
+          kButtonTitleVerticalContentInset, kButtonTitleHorizontalContentInset);
+    } else {
+      primaryButton = [[MDCFlatButton alloc] init];
+      MDCFlatButton* materialButton =
+          base::mac::ObjCCastStrict<MDCFlatButton>(primaryButton);
+      [materialButton setBackgroundColor:[[MDCPalette cr_bluePalette] tint500]
+                                forState:UIControlStateNormal];
+      materialButton.inkColor = [UIColor colorWithWhite:1 alpha:0.2];
+      primaryButtonInsets =
+          UIEdgeInsetsMake(kButtonVerticalPadding, kHorizontalPadding,
+                           kButtonVerticalPadding, kHorizontalPadding);
+    }
+    _primaryButton = primaryButton;
+    DCHECK(_primaryButton);
+    _primaryButton.accessibilityIdentifier = kSigninPromoPrimaryButtonId;
     [_primaryButton setTitleColor:[UIColor whiteColor]
                          forState:UIControlStateNormal];
     _primaryButton.translatesAutoresizingMaskIntoConstraints = NO;
     _primaryButton.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;
-    _primaryButton.accessibilityIdentifier = kSigninPromoPrimaryButtonId;
     [_primaryButton addTarget:self
                        action:@selector(onPrimaryButtonAction:)
              forControlEvents:UIControlEventTouchUpInside];
-    [_primaryButton setBackgroundColor:[[MDCPalette cr_bluePalette] tint500]
-                              forState:UIControlStateNormal];
-    _primaryButton.inkColor = [UIColor colorWithWhite:1 alpha:0.2];
-    _primaryButton.contentEdgeInsets =
-        UIEdgeInsetsMake(kButtonVerticalPadding, kHorizontalPadding * 2,
-                         kButtonVerticalPadding, kHorizontalPadding * 2);
+    _primaryButton.contentEdgeInsets = primaryButtonInsets;
 
     // Create and setup seconday button.
-    _secondaryButton = [[MDCFlatButton alloc] init];
+    UIButton* secondaryButton;
+    if (_loadRefreshUI) {
+      secondaryButton = [[UIButton alloc] init];
+      [secondaryButton.titleLabel
+          setFont:[UIFont
+                      preferredFontForTextStyle:UIFontTextStyleSubheadline]];
+      [secondaryButton setTitleColor:UIColorFromRGB(kBlueHexColor)
+                            forState:UIControlStateNormal];
+    } else {
+      secondaryButton = [[MDCFlatButton alloc] init];
+      MDCFlatButton* materialButton =
+          base::mac::ObjCCastStrict<MDCFlatButton>(secondaryButton);
+      materialButton.uppercaseTitle = NO;
+      [materialButton setTitleColor:[[MDCPalette cr_bluePalette] tint500]
+                           forState:UIControlStateNormal];
+    }
+    _secondaryButton = secondaryButton;
+    DCHECK(_secondaryButton);
     _secondaryButton.translatesAutoresizingMaskIntoConstraints = NO;
     _secondaryButton.accessibilityIdentifier = kSigninPromoSecondaryButtonId;
     [_secondaryButton addTarget:self
                          action:@selector(onSecondaryButtonAction:)
                forControlEvents:UIControlEventTouchUpInside];
-    [_secondaryButton setTitleColor:[[MDCPalette cr_bluePalette] tint500]
-                           forState:UIControlStateNormal];
-    _secondaryButton.uppercaseTitle = NO;
 
     // Vertical stackView containing all previous view.
     UIStackView* verticalStackView =
@@ -115,8 +195,9 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
         ]];
     verticalStackView.alignment = UIStackViewAlignmentCenter;
     verticalStackView.axis = UILayoutConstraintAxisVertical;
-    verticalStackView.spacing = kStackViewVerticalSpacing;
     verticalStackView.translatesAutoresizingMaskIntoConstraints = NO;
+    verticalStackView.spacing = _loadRefreshUI ? kStackViewSubViewSpacing
+                                               : kLegacySubViewVerticalSpacing;
     [self addSubview:verticalStackView];
 
     // Create close button and adds it directly to self.
@@ -131,31 +212,66 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
     _closeButton.hidden = YES;
     [self addSubview:_closeButton];
 
-    [NSLayoutConstraint activateConstraints:@[
-      // Add constraints for the stackView.
-      [verticalStackView.leadingAnchor
-          constraintEqualToAnchor:self.leadingAnchor
-                         constant:kStackViewHorizontalPadding],
-      [verticalStackView.trailingAnchor
-          constraintEqualToAnchor:self.trailingAnchor
-                         constant:-kStackViewHorizontalPadding],
-      [verticalStackView.topAnchor
-          constraintEqualToAnchor:self.topAnchor
-                         constant:kStackViewVerticalPadding],
-      [verticalStackView.bottomAnchor
-          constraintEqualToAnchor:self.bottomAnchor
-                         constant:-kStackViewVerticalPadding],
-      // Close button constraints.
-      [self.closeButton.topAnchor constraintEqualToAnchor:self.topAnchor
-                                                 constant:kCloseButtonPadding],
-      [self.closeButton.trailingAnchor
-          constraintEqualToAnchor:self.trailingAnchor
-                         constant:-kCloseButtonPadding],
-      [self.closeButton.heightAnchor
-          constraintEqualToConstant:kCloseButtonSize],
-      [self.closeButton.widthAnchor constraintEqualToConstant:kCloseButtonSize],
-    ]];
-
+    // Add legacys or UIRefresh constraints for the stackView.
+    if (_loadRefreshUI) {
+      [NSLayoutConstraint activateConstraints:@[
+        [verticalStackView.leadingAnchor
+            constraintEqualToAnchor:self.leadingAnchor
+                           constant:kStackViewHorizontalPadding],
+        [verticalStackView.trailingAnchor
+            constraintEqualToAnchor:self.trailingAnchor
+                           constant:-kStackViewHorizontalPadding],
+        [verticalStackView.topAnchor
+            constraintEqualToAnchor:self.topAnchor
+                           constant:kStackViewVerticalPadding],
+        [verticalStackView.bottomAnchor
+            constraintEqualToAnchor:self.bottomAnchor
+                           constant:-kStackViewVerticalPadding],
+        [_imageView.heightAnchor
+            constraintEqualToConstant:kImageViewWidthHeight],
+        [_imageView.widthAnchor
+            constraintEqualToConstant:kImageViewWidthHeight],
+        // Close button constraints.
+        [_closeButton.topAnchor constraintEqualToAnchor:self.topAnchor],
+        [_closeButton.trailingAnchor
+            constraintEqualToAnchor:self.trailingAnchor
+                           constant:kCloseButtonTrailingMargin],
+        [_closeButton.heightAnchor
+            constraintEqualToConstant:kCloseButtonWidthHeight],
+        [_closeButton.widthAnchor
+            constraintEqualToConstant:kCloseButtonWidthHeight],
+      ]];
+    } else {
+      [NSLayoutConstraint activateConstraints:@[
+        [verticalStackView.leadingAnchor
+            constraintEqualToAnchor:self.leadingAnchor
+                           constant:kLegacyStackViewHorizontalPadding],
+        [verticalStackView.trailingAnchor
+            constraintEqualToAnchor:self.trailingAnchor
+                           constant:-kLegacyStackViewHorizontalPadding],
+        [verticalStackView.topAnchor
+            constraintEqualToAnchor:self.topAnchor
+                           constant:kLegacyStackViewVerticalPadding],
+        [verticalStackView.bottomAnchor
+            constraintEqualToAnchor:self.bottomAnchor
+                           constant:-kLegacyStackViewVerticalPadding],
+        // Close button constraints.
+        [_closeButton.topAnchor constraintEqualToAnchor:self.topAnchor
+                                               constant:kCloseButtonPadding],
+        [_closeButton.trailingAnchor
+            constraintEqualToAnchor:self.trailingAnchor
+                           constant:-kCloseButtonPadding],
+        [_closeButton.heightAnchor constraintEqualToConstant:kCloseButtonSize],
+        [_closeButton.widthAnchor constraintEqualToConstant:kCloseButtonSize],
+        [_primaryButton.leadingAnchor
+            constraintEqualToAnchor:verticalStackView.leadingAnchor
+                           constant:kStackViewHorizontalPadding],
+        [_primaryButton.trailingAnchor
+            constraintEqualToAnchor:verticalStackView.trailingAnchor
+                           constant:-kStackViewHorizontalPadding],
+      ]];
+    }
+    // Default mode.
     _mode = SigninPromoViewModeColdState;
     [self activateColdMode];
   }
@@ -205,19 +321,20 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
 
 - (void)setProfileImage:(UIImage*)image {
   DCHECK_EQ(SigninPromoViewModeWarmState, _mode);
-  _imageView.image = CircularImageFromImage(image, kProfileImageFixedSize);
+  self.imageView.image = CircularImageFromImage(image, kProfileImageFixedSize);
 }
 
 - (void)accessibilityPrimaryAction:(id)unused {
-  [_primaryButton sendActionsForControlEvents:UIControlEventTouchUpInside];
+  [self.primaryButton sendActionsForControlEvents:UIControlEventTouchUpInside];
 }
 
 - (void)accessibilitySecondaryAction:(id)unused {
-  [_secondaryButton sendActionsForControlEvents:UIControlEventTouchUpInside];
+  [self.secondaryButton
+      sendActionsForControlEvents:UIControlEventTouchUpInside];
 }
 
 - (void)accessibilityCloseAction:(id)unused {
-  [_closeButton sendActionsForControlEvents:UIControlEventTouchUpInside];
+  [self.closeButton sendActionsForControlEvents:UIControlEventTouchUpInside];
 }
 
 - (CGFloat)horizontalPadding {
@@ -249,7 +366,7 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
   NSMutableArray* actions = [NSMutableArray array];
 
   NSString* primaryActionName =
-      [_primaryButton titleForState:UIControlStateNormal];
+      [self.primaryButton titleForState:UIControlStateNormal];
   UIAccessibilityCustomAction* primaryCustomAction =
       [[UIAccessibilityCustomAction alloc]
           initWithName:primaryActionName
@@ -259,7 +376,7 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
 
   if (_mode == SigninPromoViewModeWarmState) {
     NSString* secondaryActionName =
-        [_secondaryButton titleForState:UIControlStateNormal];
+        [self.secondaryButton titleForState:UIControlStateNormal];
     UIAccessibilityCustomAction* secondaryCustomAction =
         [[UIAccessibilityCustomAction alloc]
             initWithName:secondaryActionName
@@ -268,7 +385,7 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
     [actions addObject:secondaryCustomAction];
   }
 
-  if (!_closeButton.hidden) {
+  if (!self.closeButton.hidden) {
     NSString* closeActionName =
         l10n_util::GetNSString(IDS_IOS_SIGNIN_PROMO_CLOSE_ACCESSIBILITY);
     UIAccessibilityCustomAction* closeCustomAction =
@@ -283,7 +400,7 @@ NSString* const kSigninPromoCloseButtonId = @"kSigninPromoCloseButtonId";
 }
 
 - (NSString*)accessibilityLabel {
-  return _textLabel.text;
+  return self.textLabel.text;
 }
 
 @end

ios/chrome/browser/ui/authentication/signin_promo_view_unittest.mm

@@ -4,6 +4,8 @@
 
 #import "ios/chrome/browser/ui/authentication/signin_promo_view.h"
 
+#include "base/test/scoped_feature_list.h"
+#include "ios/chrome/browser/ui/ui_feature_flags.h"
 #import "ios/third_party/material_components_ios/src/components/Buttons/src/MaterialButtons.h"
 #include "testing/platform_test.h"
 #include "third_party/ocmock/gtest_support.h"
@@ -14,10 +16,15 @@
 
 using SigninPromoViewTest = PlatformTest;
 
-TEST_F(SigninPromoViewTest, ChromiumLogoImage) {
+TEST_F(SigninPromoViewTest, ChromiumLogoImageLegacy) {
+  base::test::ScopedFeatureList scoped_feature_list;
+  scoped_feature_list.InitAndDisableFeature(kUIRefreshPhase1);
+  UIWindow* currentWindow = [[UIApplication sharedApplication] keyWindow];
   SigninPromoView* view =
-      [[SigninPromoView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
+      [[SigninPromoView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)
+                                       style:SigninPromoViewUILegacy];
   view.mode = SigninPromoViewModeColdState;
+  [currentWindow.rootViewController.view addSubview:view];
   UIImage* chromiumLogo = view.imageView.image;
   EXPECT_NE(nil, chromiumLogo);
   view.mode = SigninPromoViewModeWarmState;
@@ -31,10 +38,51 @@ TEST_F(SigninPromoViewTest, ChromiumLogoImage) {
   EXPECT_NE(customImage, view.imageView.image);
 }
 
-TEST_F(SigninPromoViewTest, SecondaryButtonVisibility) {
+TEST_F(SigninPromoViewTest, ChromiumLogoImageUIRefresh) {
+  base::test::ScopedFeatureList scoped_feature_list;
+  scoped_feature_list.InitAndEnableFeature(kUIRefreshPhase1);
+  UIWindow* currentWindow = [[UIApplication sharedApplication] keyWindow];
   SigninPromoView* view =
-      [[SigninPromoView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
+      [[SigninPromoView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)
+                                       style:SigninPromoViewUIRefresh];
   view.mode = SigninPromoViewModeColdState;
+  [currentWindow.rootViewController.view addSubview:view];
+  UIImage* chromiumLogo = view.imageView.image;
+  EXPECT_NE(nil, chromiumLogo);
+  view.mode = SigninPromoViewModeWarmState;
+  UIImage* customImage = [[UIImage alloc] init];
+  [view setProfileImage:customImage];
+  EXPECT_NE(nil, view.imageView.image);
+  // The image should has been changed from the logo.
+  EXPECT_NE(chromiumLogo, view.imageView.image);
+  // The image should be different than the one set, since a circular background
+  // should have been added.
+  EXPECT_NE(customImage, view.imageView.image);
+}
+
+TEST_F(SigninPromoViewTest, SecondaryButtonVisibilityLegacy) {
+  base::test::ScopedFeatureList scoped_feature_list;
+  scoped_feature_list.InitAndDisableFeature(kUIRefreshPhase1);
+  UIWindow* currentWindow = [[UIApplication sharedApplication] keyWindow];
+  SigninPromoView* view =
+      [[SigninPromoView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)
+                                       style:SigninPromoViewUILegacy];
+  view.mode = SigninPromoViewModeColdState;
+  [currentWindow.rootViewController.view addSubview:view];
+  EXPECT_TRUE(view.secondaryButton.hidden);
+  view.mode = SigninPromoViewModeWarmState;
+  EXPECT_FALSE(view.secondaryButton.hidden);
+}
+
+TEST_F(SigninPromoViewTest, SecondaryButtonVisibilityUIRefresh) {
+  base::test::ScopedFeatureList scoped_feature_list;
+  scoped_feature_list.InitAndEnableFeature(kUIRefreshPhase1);
+  UIWindow* currentWindow = [[UIApplication sharedApplication] keyWindow];
+  SigninPromoView* view =
+      [[SigninPromoView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)
+                                       style:SigninPromoViewUIRefresh];
+  view.mode = SigninPromoViewModeColdState;
+  [currentWindow.rootViewController.view addSubview:view];
   EXPECT_TRUE(view.secondaryButton.hidden);
   view.mode = SigninPromoViewModeWarmState;
   EXPECT_FALSE(view.secondaryButton.hidden);

ios/chrome/browser/ui/bookmarks/cells/bookmark_home_promo_item.mm

@@ -8,6 +8,10 @@
 #import "ios/chrome/browser/ui/authentication/signin_promo_view_configurator.h"
 #import "ios/chrome/browser/ui/authentication/signin_promo_view_mediator.h"
 #import "ios/chrome/browser/ui/bookmarks/cells/bookmark_table_signin_promo_cell.h"
+#import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
+#include "ios/chrome/browser/ui/ui_util.h"
+#include "ios/chrome/grit/ios_chromium_strings.h"
+#include "ui/base/l10n/l10n_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
@@ -28,8 +32,23 @@
   [super configureCell:cell withStyler:styler];
   BookmarkTableSigninPromoCell* signinPromoCell =
       base::mac::ObjCCastStrict<BookmarkTableSigninPromoCell>(cell);
-  SigninPromoViewMediator* mediator = self.delegate.signinPromoViewMediator;
 
+  // Basic UI configuration
+  signinPromoCell.signinPromoView.textLabel.text =
+      l10n_util::GetNSString(IDS_IOS_SIGNIN_PROMO_BOOKMARKS);
+  if (IsUIRefreshPhase1Enabled()) {
+    signinPromoCell.signinPromoView.backgroundColor =
+        styler.tableViewBackgroundColor;
+  } else {
+    signinPromoCell.signinPromoView.backgroundColor = [UIColor whiteColor];
+    signinPromoCell.signinPromoView.layer.borderColor =
+        [UIColor colorWithWhite:0.0 alpha:0.08].CGColor;
+    signinPromoCell.signinPromoView.layer.borderWidth = 1.0f;
+  }
+
+  // Use the mediator to configure the rest of the Cell based on the current
+  // signin state.
+  SigninPromoViewMediator* mediator = self.delegate.signinPromoViewMediator;
   signinPromoCell.signinPromoView.delegate = mediator;
   [[mediator createConfigurator]
       configureSigninPromoView:signinPromoCell.signinPromoView];

ios/chrome/browser/ui/bookmarks/cells/bookmark_table_signin_promo_cell.mm

@@ -5,10 +5,7 @@
 #import "ios/chrome/browser/ui/bookmarks/cells/bookmark_table_signin_promo_cell.h"
 
 #import "ios/chrome/browser/ui/authentication/signin_promo_view.h"
-#include "ios/chrome/browser/ui/ui_util.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
-#include "ios/chrome/grit/ios_chromium_strings.h"
-#include "ui/base/l10n/l10n_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
@@ -38,12 +35,11 @@ const NSInteger kSigninPromoMargin = 8;
   self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
   if (self) {
     UIView* contentView = self.contentView;
-    _signinPromoView = [[SigninPromoView alloc] initWithFrame:self.bounds];
+    _signinPromoView =
+        [[SigninPromoView alloc] initWithFrame:self.bounds
+                                         style:SigninPromoViewUIRefresh];
     _signinPromoView.translatesAutoresizingMaskIntoConstraints = NO;
     [contentView addSubview:_signinPromoView];
-    _signinPromoView.layer.borderColor =
-        [UIColor colorWithWhite:0.0 alpha:0.08].CGColor;
-    _signinPromoView.layer.borderWidth = 1.0f;
     NSArray* visualConstraints = @[
       @"V:|-(margin)-[signin_promo_view]-(margin)-|",
       @"H:|-(margin)-[signin_promo_view]-(margin)-|",
@@ -51,9 +47,6 @@ const NSInteger kSigninPromoMargin = 8;
     NSDictionary* views = @{@"signin_promo_view" : _signinPromoView};
     NSDictionary* metrics = @{ @"margin" : @(kSigninPromoMargin) };
     ApplyVisualConstraintsWithMetrics(visualConstraints, views, metrics);
-    _signinPromoView.backgroundColor = [UIColor whiteColor];
-    _signinPromoView.textLabel.text =
-        l10n_util::GetNSString(IDS_IOS_SIGNIN_PROMO_BOOKMARKS);
   }
   return self;
 }

ios/chrome/browser/ui/ntp/recent_tabs/legacy_recent_tabs_table_view_controller.mm

@@ -792,7 +792,8 @@ enum CellType {
       }
       contentViewTopMargin = kSigninPromoViewTopMargin;
       SigninPromoView* signinPromoView =
-          [[SigninPromoView alloc] initWithFrame:CGRectZero];
+          [[SigninPromoView alloc] initWithFrame:CGRectZero
+                                           style:SigninPromoViewUILegacy];
       signinPromoView.delegate = _signinPromoViewMediator;
       signinPromoView.textLabel.text =
           l10n_util::GetNSString(IDS_IOS_SIGNIN_PROMO_RECENT_TABS);

ios/chrome/browser/ui/tab_switcher/tab_switcher_panel_overlay_view.mm

@@ -230,7 +230,9 @@ const CGFloat kSubtitleMinimunLineHeight = 24.0;
 - (void)createSigninPromoViewIfNeeded {
   if (_signinPromoView)
     return;
-  _signinPromoView = [[SigninPromoView alloc] initWithFrame:CGRectZero];
+  _signinPromoView =
+      [[SigninPromoView alloc] initWithFrame:CGRectZero
+                                       style:SigninPromoViewUILegacy];
   _signinPromoView.translatesAutoresizingMaskIntoConstraints = NO;
   _signinPromoView.textLabel.text =
       l10n_util::GetNSString(IDS_IOS_SIGNIN_PROMO_RECENT_TABS);

ios/chrome/browser/ui/table_view/cells/table_view_signin_promo_item.mm

@@ -58,7 +58,8 @@ const CGFloat kMargin = 16;
   self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
   if (self) {
     SigninPromoView* signinPromoView =
-        [[SigninPromoView alloc] initWithFrame:CGRectZero];
+        [[SigninPromoView alloc] initWithFrame:CGRectZero
+                                         style:SigninPromoViewUIRefresh];
     self.signinPromoView = signinPromoView;
     self.signinPromoView.translatesAutoresizingMaskIntoConstraints = NO;
     [self.contentView addSubview:self.signinPromoView];