Fix layout inconsistencies in ChatView

This PR focuses on improving chat view layout as it is defined in design Mainly it focuses on the spacing between tableview cells, but also improves the design of GVA components. MOB-2587
salemove · Aug 28, 2023 · af132e2 · af132e2
1 parent 56c0e33
commit af132e2
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/GliaWidgets/Sources/Theme/Theme+Gva.swift b/GliaWidgets/Sources/Theme/Theme+Gva.swift
@@ -9,7 +9,7 @@ extension Theme {
                 text: .init(
                     color: UIColor.black.hex,
                     font: font.bodyText,
-                    textStyle: .body,
+                    textStyle: .headline,
                     accessibility: .init(isFontScalingEnabled: true)
                 ),
                 background: .init(
@@ -58,7 +58,7 @@ extension Theme {
                 borderWidth: 0
             ),
             title: .init(
-                font: font.bodyText,
+                font: font.mediumSubtitle1,
                 textColor: .black,
                 textStyle: .body
             ),

diff --git a/GliaWidgets/Sources/View/Chat/GVA/GvaResponseTextView.swift b/GliaWidgets/Sources/View/Chat/GVA/GvaResponseTextView.swift
@@ -27,7 +27,7 @@ final class GvaResponseTextView: ChatMessageView {
     private let viewStyle: Theme.OperatorMessageStyle
     private var operatorImageView: UserImageView?
     private let operatorImageViewContainer = UIView().makeView()
-    private let imageViewInsets = UIEdgeInsets(top: 4, left: 8, bottom: 2, right: 60)
+    private let imageViewInsets = UIEdgeInsets(top: 8, left: 8, bottom: 2, right: 60)
     private let operatorImageViewSize: CGFloat = 28
     private let environment: Environment
 
@@ -69,7 +69,7 @@ final class GvaResponseTextView: ChatMessageView {
         var constraints = [NSLayoutConstraint](); defer { constraints.activate() }
         constraints += operatorImageViewContainer.match(value: operatorImageViewSize)
         constraints += operatorImageViewContainer.leadingAnchor.constraint(equalTo: leadingAnchor, constant: imageViewInsets.left)
-        constraints += operatorImageViewContainer.bottomAnchor.constraint(equalTo: bottomAnchor)
+        constraints += operatorImageViewContainer.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -imageViewInsets.top)
         constraints += operatorImageViewContainer.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: imageViewInsets.top)
 
         addSubview(contentViews)
@@ -78,7 +78,7 @@ final class GvaResponseTextView: ChatMessageView {
         constraints += contentViews.topAnchor.constraint(equalTo: topAnchor, constant: imageViewInsets.top)
         constraints += contentViews.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -imageViewInsets.right)
 
-        constraints += contentViews.bottomAnchor.constraint(equalTo: bottomAnchor)
+        constraints += contentViews.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -imageViewInsets.top)
     }
 }
 

diff --git a/GliaWidgets/Sources/View/Chat/Message/OperatorChatMessageView.swift b/GliaWidgets/Sources/View/Chat/Message/OperatorChatMessageView.swift
@@ -27,7 +27,7 @@ class OperatorChatMessageView: ChatMessageView {
     private let viewStyle: Theme.OperatorMessageStyle
     private var operatorImageView: UserImageView?
     private var operatorImageViewContainer = UIView().makeView()
-    private let imageViewInsets = UIEdgeInsets(top: 2, left: 10, bottom: 2, right: 60)
+    private let imageViewInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 60)
     private let operatorImageViewSize: CGFloat = 28
     private let environment: Environment
 

diff --git a/GliaWidgets/Sources/View/Chat/Message/VisitorChatMessageView.swift b/GliaWidgets/Sources/View/Chat/Message/VisitorChatMessageView.swift
@@ -7,7 +7,7 @@ class VisitorChatMessageView: ChatMessageView {
     }
 
     private let statusLabel = UILabel().makeView()
-    private let contentInsets = UIEdgeInsets(top: 2, left: 88, bottom: 2, right: 16)
+    private let contentInsets = UIEdgeInsets(top: 8, left: 88, bottom: 8, right: 16)
 
     init(
         with style: Theme.VisitorMessageStyle,