Voice Memos Fixes (#316)

Author: stephencelis

Examples/VoiceMemos/VoiceMemos/VoiceMemo.swift

@@ -120,7 +120,7 @@ struct VoiceMemoView: View {
       ZStack(alignment: .leading) {
         if self.viewStore.mode.isPlaying {
           Rectangle()
-            .foregroundColor(Color(white: 0.9))
+            .foregroundColor(Color(.systemGray5))
             .frame(width: proxy.size.width * CGFloat(self.viewStore.mode.progress ?? 0))
             .animation(.linear(duration: 0.5))
         }
@@ -137,19 +137,20 @@ struct VoiceMemoView: View {
           dateComponentsFormatter.string(from: self.currentTime).map {
             Text($0)
               .font(Font.footnote.monospacedDigit())
-              .foregroundColor(.gray)
+              .foregroundColor(Color(.systemGray))
           }
 
           Button(action: { self.viewStore.send(.playButtonTapped) }) {
             Image(systemName: self.viewStore.mode.isPlaying ? "stop.circle" : "play.circle")
               .font(Font.system(size: 22))
           }
         }
+        .frame(maxHeight: .infinity, alignment: .center)
         .padding([.leading, .trailing])
       }
     }
     .buttonStyle(BorderlessButtonStyle())
-    .listRowBackground(self.viewStore.mode.isPlaying ? Color(white: 0.97) : .clear)
+    .listRowBackground(self.viewStore.mode.isPlaying ? Color(.systemGray6) : .clear)
     .listRowInsets(EdgeInsets())
   }
 

Examples/VoiceMemos/VoiceMemos/VoiceMemos.swift

@@ -207,14 +207,19 @@ struct VoiceMemosView: View {
           VStack {
             ZStack {
               Circle()
-                .foregroundColor(.black)
+                .foregroundColor(Color(.label))
                 .frame(width: 74, height: 74)
 
-              Button(action: { viewStore.send(.recordButtonTapped) }) {
+              Button(
+                action: {
+                  withAnimation(.spring()) {
+                    viewStore.send(.recordButtonTapped)
+                  }
+                }
+              ) {
                 RoundedRectangle(cornerRadius: viewStore.currentRecording != nil ? 4 : 35)
-                  .foregroundColor(.red)
+                  .foregroundColor(Color(.systemRed))
                   .padding(viewStore.currentRecording != nil ? 17 : 2)
-                  .animation(.spring())
               }
               .frame(width: 70, height: 70)
 
@@ -234,13 +239,12 @@ struct VoiceMemosView: View {
                 Text($0)
                   .font(Font.body.monospacedDigit().bold())
                   .foregroundColor(.white)
-                  .colorMultiply(Int(duration).isMultiple(of: 2) ? .red : .black)
+                  .colorMultiply(Color(Int(duration).isMultiple(of: 2) ? .systemRed : .label))
                   .animation(.easeInOut(duration: 0.5))
               }
             }
           }
           .padding()
-          .animation(Animation.easeInOut(duration: 0.3))
         }
         .alert(
           self.store.scope(state: { $0.alert }),
@@ -293,5 +297,6 @@ struct VoiceMemos_Previews: PreviewProvider {
         )
       )
     )
+    .environment(\.colorScheme, .dark)
   }
 }