updated review UI to look like the wireframe

View Controllers/DetailsViewController.m

@@ -19,6 +19,7 @@
 #import <NYTPhotoViewer/NYTPhotosViewController.h>
 #import "HCSStarRatingView.h"
 #import "ReviewCell.h"
+#import "UIStylesHelper.h"
 
 @interface DetailsViewController () <GMSMapViewDelegate, UICollectionViewDelegate, UICollectionViewDataSource, PhotoCellDelegate, NYTPhotosViewControllerDelegate, UITableViewDelegate, UITableViewDataSource>
 // Outlet Definitions //
@@ -37,6 +38,11 @@ @interface DetailsViewController () <GMSMapViewDelegate, UICollectionViewDelegat
 @property (weak, nonatomic) IBOutlet UITextView *reviewTextView;
 @property (weak, nonatomic) IBOutlet UITableView *tableView;
 @property (weak, nonatomic) IBOutlet UIView *overallRatingView;
+@property (weak, nonatomic) IBOutlet UIView *composeRatingView;
+@property (weak, nonatomic) IBOutlet UIView *submitButtonView;
+@property (weak, nonatomic) IBOutlet UIButton *submitButton;
+@property (weak, nonatomic) IBOutlet UILabel *overallRatingLabel;
+@property (weak, nonatomic) IBOutlet UILabel *ratingsCountLabel;
 
 // Instance Properties //
 @property (strong, nonatomic) GMSPlace *place;
@@ -314,11 +320,21 @@ - (void)didTapPhoto:(Photo *)photo {
 #pragma mark - Reviews
 
 - (void) initWriteReview {
-    HCSStarRatingView *ratingView = [[HCSStarRatingView alloc] initWithFrame:CGRectMake(72, 32, 100, 25)];
+    HCSStarRatingView *ratingView = [[HCSStarRatingView alloc] initWithFrame:CGRectMake(0, 0, 95, 13)];
     ratingView.minimumValue = 0;
     ratingView.maximumValue = 5;
+    ratingView.starBorderWidth= 0;
+    ratingView.filledStarImage = [UIImage imageNamed:@"star_filled"] ;
+    ratingView.emptyStarImage = [UIImage imageNamed:@"star_unfilled"];
     [ratingView addTarget:self action:@selector(didChangeRating:) forControlEvents:UIControlEventValueChanged];
-    [self.composeView addSubview:ratingView];
+    [self.composeRatingView addSubview:ratingView];
+
+    self.reviewTextView.layer.cornerRadius = 8;
+    self.reviewTextView.layer.borderColor = [UIColor colorNamed:@"VTR_Borders"].CGColor;
+    self.reviewTextView.layer.borderWidth = 1;
+
+    [UIStylesHelper addRoundedCornersToView:self.submitButton];
+    [UIStylesHelper addShadowToView:self.submitButton withOffset:CGSizeMake(0, 1) withRadius:2 withOpacity:0.16];
 }
 
 - (void) initShowReviews {
@@ -354,6 +370,7 @@ - (void) fetchReviews {
         [Relationships retrieveFollowingWithId:relationships.objectId WithCompletion:^(NSArray * _Nullable following) {
             NSLog(@"Fetched all following");
             [self.parsePlace retrieveReviewsFromFollowing:following withCompletion:^(NSArray<Review *> *reviews) {
+                NSLog(@"Fetched all reviews");
                 self.reviews = reviews;
                 [self reloadAndUpdateRating];
             }];
@@ -387,11 +404,24 @@ - (void) updatePlaceRating {
     {
         [view removeFromSuperview];
     }
-    HCSStarRatingView *ratingView = [[HCSStarRatingView alloc] initWithFrame:CGRectMake(0, 0, 80, 20)];
+    HCSStarRatingView *ratingView = [[HCSStarRatingView alloc] initWithFrame:CGRectMake(0, 0, 95, 13)];
+    ratingView.minimumValue = 0;
+    ratingView.maximumValue = 5;
+    ratingView.starBorderWidth= 0;
+    ratingView.filledStarImage = [UIImage imageNamed:@"star_filled"] ;
+    ratingView.emptyStarImage = [UIImage imageNamed:@"star_unfilled"];
     ratingView.value = (CGFloat) self.overallRating;
     ratingView.allowsHalfStars = YES;
     [ratingView setEnabled:NO];
     [self.overallRatingView addSubview:ratingView];
+    NSNumber *ratingNumber = [NSNumber numberWithDouble:self.overallRating];
+
+    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
+    formatter.roundingIncrement = [NSNumber numberWithDouble:0.01];
+    formatter.numberStyle = NSNumberFormatterDecimalStyle;
+    [self.overallRatingLabel setText:[NSString stringWithFormat:@"%@ stars",[formatter stringFromNumber:ratingNumber]]];
+
+    [self.ratingsCountLabel setText:[NSString stringWithFormat:@"%lu ratings",self.reviews.count]];
 }
 
 @end

Views/HCSStarRatingView.m

@@ -208,7 +208,6 @@ - (void)setEnabled:(BOOL)enabled
 
 - (void)_updateAppearanceForState:(BOOL)enabled
 {
-    self.alpha = enabled ? 1.f : .5f;
 }
 
 #pragma mark - Image Drawing
@@ -302,7 +301,7 @@ - (void)drawRect:(CGRect)rect {
 
     CGFloat availableWidth = rect.size.width - (_spacing * (_maximumValue - 1)) - 2;
     CGFloat cellWidth = (availableWidth / _maximumValue);
-    CGFloat starSide = (cellWidth <= rect.size.height) ? cellWidth : rect.size.height;
+    CGFloat starSide = (cellWidth <= rect.size.height) ? cellWidth : rect.size.height+1;
     starSide = (self.shouldUseImages) ? starSide : (starSide - _starBorderWidth);
 
     for (int idx = 0; idx < _maximumValue; idx++) {
@@ -425,7 +424,7 @@ - (BOOL)canBecomeFirstResponder {
 
 - (CGSize)intrinsicContentSize {
     CGFloat height = 44.f;
-    return CGSizeMake(_maximumValue * height + (_maximumValue-1) * _spacing, height);
+    return CGSizeMake(_maximumValue * (height) + (_maximumValue-1) * _spacing, height+1);
 }
 
 #pragma mark - Accessibility

Views/ReviewCell.h

@@ -14,6 +14,7 @@
 @property (weak, nonatomic) IBOutlet UILabel *name;
 @property (weak, nonatomic) IBOutlet UIView *rateView;
 @property (weak, nonatomic) IBOutlet UILabel *content;
+@property (weak, nonatomic) IBOutlet UILabel *dateLabel;
 @property (strong, nonatomic) Review *review;
 
 - (void)configureCell;

Views/ReviewCell.m

@@ -10,6 +10,8 @@
 #import "ParseImageHelper.h"
 #import "PFUser+ExtendedUser.h"
 #import "HCSStarRatingView.h"
+#import "UIStylesHelper.h"
+#import "DateTools.h"
 
 @implementation ReviewCell
 
@@ -26,10 +28,19 @@ - (void) configureCell {
         {
             [view removeFromSuperview];
         }
-        HCSStarRatingView *ratingView = [[HCSStarRatingView alloc] initWithFrame:CGRectMake(0, 0, 80, 20)];
+        HCSStarRatingView *ratingView = [[HCSStarRatingView alloc] initWithFrame:CGRectMake(0, 0, 95, 13)];
+        ratingView.minimumValue = 0;
+        ratingView.maximumValue = 5;
+        ratingView.starBorderWidth= 0;
+        ratingView.filledStarImage = [UIImage imageNamed:@"star_filled"] ;
+        ratingView.emptyStarImage = [UIImage imageNamed:@"star_unfilled"];
         ratingView.value = (CGFloat) self.review.rating;
         [ratingView setEnabled:NO];
         [self.rateView addSubview:ratingView];
+
+        [UIStylesHelper addRoundedCornersToView:self.profilePicture];
+
+        self.dateLabel.text = self.review.createdAt.timeAgoSinceNow;
     }
 }
 

social-maps/Assets.xcassets/star_filled.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "star_filled.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "star_filled@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "star_filled@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

social-maps/Assets.xcassets/star_unfilled.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "star_unfilled.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "star_unfilled@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "star_unfilled@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}