more intuitive help button

nirvana-ios/Services/AuthSessionStore.swift

@@ -34,7 +34,7 @@ final class AuthSessionStore: ObservableObject, SessionStore {
     
     // TODO: figure out which ones to publish
     @Published var friendsArr: [User] = []
-    var messagesArr: [Message] = []
+    @Published var messagesArr: [Message] = []
     
     // transformed data for the views
     @Published var friendMessagesDict: [String: [Message]] = [:]

nirvana-ios/Views/InnerCircle/CircleNavigationView.swift

@@ -82,6 +82,7 @@ struct CircleNavigationView: View {
                         .frame(width: 40, height: 40)
                         .clipShape(Circle())
                         .padding(5)
+                        .shadow(radius: 10)
                 }
             }
             

nirvana-ios/Views/InnerCircle/InnerCircleView.swift

@@ -108,7 +108,8 @@ struct InnerCircleView: View {
             CircleFooterView(selectedFriendIndex: self.$selectedFriendIndex)
             
             // helper for new users
-            if self.authSessionStore.friendsArr.count <= 1 {
+            // TODO: make it back to 1 instead of 10...testing
+            if self.authSessionStore.friendsArr.count == 1 && self.selectedFriendIndex == nil { // don't show if bottom metadata showing
                 ZStack(alignment: .bottomTrailing) {
                     Color.clear
 
@@ -117,16 +118,18 @@ struct InnerCircleView: View {
                         self.alertText = "👆🏼It's simple!"
                         self.alertSubtext = "Press and hold to send a message. \n Tap to listen!"
                     } label: {
-                        Label("help!", systemImage: "questionmark.circle")
-                            .font(.title2)
+                        Label("help!🙉", systemImage: "questionmark.circle")
+                            .font(.caption)
                             .foregroundColor(NirvanaColor.teal)
-                            .padding()
+                            .padding(10)
                             .background(.ultraThinMaterial)
                             .shadow(radius: 10)
-                            .clipShape(Circle())
-                            .labelStyle(.iconOnly)
+                            .labelStyle(.titleOnly)
+                            .clipShape(Capsule())
                     }
+                    .padding()
                 }
+                .transition(.slide)
             }
         }
         .alert(self.alertText, isPresented: self.$alertActive) {