430 - Design review for first public TestFlight Part2 (#496)

* 430 - Design review for first public TestFlight Part2

---------

Co-authored-by: Doug <douglase@element.io>

ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift

@@ -76,6 +76,7 @@ struct HomeScreen: View {
                 userMenuButton
             }
         }
+        .background(Color.element.background)
     }
 
     @ViewBuilder
@@ -83,15 +84,15 @@ struct HomeScreen: View {
         Menu {
             Section {
                 Button(action: settings) {
-                    Label(ElementL10n.settingsUserSettings, systemImage: "gearshape")
+                    Label(ElementL10n.settings, systemImage: "gearshape")
                 }
             }
             Section {
                 Button(action: inviteFriends) {
-                    Label(ElementL10n.inviteFriends, systemImage: "square.and.arrow.up")
+                    Label(ElementL10n.actionInvite, systemImage: "square.and.arrow.up")
                 }
                 Button(action: feedback) {
-                    Label(ElementL10n.feedback, systemImage: "questionmark.circle")
+                    Label(ElementL10n.bugReportScreenTitle, systemImage: "questionmark.circle")
                 }
             }
             Section {
@@ -122,31 +123,35 @@ struct HomeScreen: View {
     
     private var sessionVerificationBanner: some View {
         VStack(alignment: .leading, spacing: 16) {
-            VStack(alignment: .leading, spacing: 2) {
-                Text(ElementL10n.sessionVerificationBannerTitle)
-                    .font(.element.subheadlineBold)
-                    .foregroundColor(.element.systemPrimaryLabel)
+            VStack(alignment: .leading, spacing: 4) {
+                HStack(spacing: 16) {
+                    Text(ElementL10n.sessionVerificationBannerTitle)
+                        .font(.element.headline)
+                        .foregroundColor(.element.systemPrimaryLabel)
+                    
+                    Spacer()
+                    
+                    Button {
+                        context.send(viewAction: .skipSessionVerification)
+                    } label: {
+                        Image(systemName: "xmark")
+                            .foregroundColor(.element.secondaryContent)
+                            .frame(width: 12, height: 12)
+                    }
+                }
                 Text(ElementL10n.sessionVerificationBannerMessage)
-                    .font(.element.footnote)
-                    .foregroundColor(.element.systemSecondaryLabel)
+                    .font(.element.subheadline)
+                    .foregroundColor(.element.secondaryContent)
             }
             
-            HStack(spacing: 16) {
-                Button(ElementL10n.actionSkip) {
-                    context.send(viewAction: .skipSessionVerification)
-                }
-                .frame(maxWidth: .infinity)
-                .buttonStyle(.elementCapsule)
-                
-                Button(ElementL10n.continue) {
-                    context.send(viewAction: .verifySession)
-                }
-                .frame(maxWidth: .infinity)
-                .buttonStyle(.elementCapsuleProminent)
+            Button(ElementL10n.continue) {
+                context.send(viewAction: .verifySession)
             }
+            .frame(maxWidth: .infinity)
+            .buttonStyle(.elementCapsuleProminent)
         }
         .padding(16)
-        .background(Color.element.systemSecondaryBackground)
+        .background(Color.element.system)
         .cornerRadius(14)
         .padding(.horizontal, 16)
     }

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift

@@ -34,11 +34,17 @@ struct HomeScreenRoomCell: View {
                     footer
                 }
             }
-            .frame(minHeight: 64.0)
+            .frame(minHeight: 84.0)
             .accessibilityElement(children: .combine)
         }
         .buttonStyle(HomeScreenRoomCellButtonStyle())
         .accessibilityIdentifier("roomName:\(room.name)")
+        .overlay(alignment: .bottom) {
+            Divider()
+                .frame(height: 0.5)
+                .background(Color.element.quinaryContent)
+                .padding(.leading, 84)
+        }
     }
     
     @ViewBuilder
@@ -53,17 +59,17 @@ struct HomeScreenRoomCell: View {
     
     @ViewBuilder
     var header: some View {
-        HStack(alignment: .firstTextBaseline) {
+        HStack(alignment: .top, spacing: 16) {
             Text(room.name)
-                .font(.element.callout.bold())
+                .font(.element.headline)
                 .foregroundColor(.element.primaryContent)
                 .lineLimit(1)
                 .frame(maxWidth: .infinity, alignment: .leading)
             
             if let timestamp = room.timestamp {
                 Text(timestamp)
-                    .font(.element.caption1)
-                    .foregroundColor(.element.secondaryContent)
+                    .font(.element.footnote)
+                    .foregroundColor(room.hasUnreads ? .element.brand : .element.tertiaryContent)
                     .id(timestamp)
                     .transition(.opacity.animation(.elementDefault))
             }
@@ -91,9 +97,15 @@ struct HomeScreenRoomCell: View {
             if room.hasUnreads {
                 Rectangle()
                     .frame(width: 12, height: 12)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.element.brand)
                     .clipShape(Circle())
                     .transition(.opacity.animation(.elementDefault))
+                    .padding(.leading, 12)
+            } else {
+                // Force extra padding between last message text and the right border of the screen if there is no unread dot
+                Rectangle()
+                    .fill(Color.clear)
+                    .frame(width: 12, height: 12)
             }
         }
         .animation(.elementDefault, value: room)
@@ -111,18 +123,16 @@ struct HomeScreenRoomCellButtonStyle: ButtonStyle {
 private extension View {
     func lastMessageFormatting() -> some View {
         font(.element.subheadline)
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.element.tertiaryContent)
             .lineLimit(2)
             .multilineTextAlignment(.leading)
-            .padding(.top, 2)
     }
     
     // To be used to indicate the selected room too
     func roomCellBackground(_ background: Color) -> some View {
         padding(.horizontal, 8)
-            .padding(.vertical, 6)
-            .background { background.clipShape(RoundedRectangle(cornerRadius: 12)) }
             .padding(.horizontal, 8)
+            .background { background }
     }
 }