change ui/ux select player

DouShouQi_App/DouShouQi_App/Components/Player/ShowAllPlayer.swift

@@ -11,15 +11,18 @@ struct ShowAllPlayer: View {
     @State private var isShowingSheet = false
     @Binding var currentShowingSheet: Bool
     
-    @ObservedObject var currentPlayer:PlayerVM
-    
-    @ObservedObject var otherPlayer:PlayerVM
-    
+    @ObservedObject var currentPlayer: PlayerVM
+    @ObservedObject var otherPlayer: PlayerVM
     @ObservedObject var playersVM: PlayersVM
 
     var body: some View {
-        VStack(alignment: .leading) {
-            Text("Choose a player :")
+        VStack(alignment: .leading, spacing: 20) {
+            Text("Choose a player:")
+                .font(.title2)
+                .fontWeight(.bold)
+                .padding(.leading)
+                .padding(.top, 20)
+
             List {
                 ForEach($playersVM.players, id: \.self) { playerVM in
                     if otherPlayer.player.name != playerVM.player.wrappedValue.name {
@@ -35,34 +38,50 @@ struct ShowAllPlayer: View {
                                 Image(systemName: "person.fill")
                                     .resizable()
                                     .frame(width: 30, height: 30)
+                                    .foregroundColor(.blue)
+                                    .padding(.trailing, 10)
                                 Text(playerVM.player.name.wrappedValue)
+                                    .font(.headline)
+                                    .foregroundColor(.primary)
+                                Spacer()
+                                if currentPlayer.player.name == playerVM.player.wrappedValue.name {
+                                    Image(systemName: "checkmark.circle.fill")
+                                        .foregroundColor(.green)
+                                }
                             }
                             .padding()
-                            .background(Color.blue)
-                            .foregroundColor(.white)
+                            .background(Color(.systemGray6))
                             .cornerRadius(10)
-                            .shadow(radius: 3)
+                            .shadow(radius: 2)
                         }
                     }
                 }
             }
+            .listStyle(InsetGroupedListStyle())
+
             Button(action: {
                 self.isShowingSheet = true
             }) {
-                Text("Add a player")
-                    .font(.headline)
-                    .foregroundColor(.white)
-                    .padding()
-                    .frame(maxWidth: .infinity)
-                    .background(Color.red)
-                    .cornerRadius(10)
-                    .padding(.horizontal)
+                HStack {
+                    Image(systemName: "plus.circle.fill")
+                        .foregroundColor(.white)
+                    Text("Add a player")
+                        .font(.headline)
+                        .foregroundColor(.white)
+                }
+                .padding()
+                .frame(maxWidth: .infinity)
+                .background(Color.red)
+                .cornerRadius(10)
+                .padding(.horizontal)
             }
-            .padding(.bottom)
+            .padding(.bottom, 20)
             .sheet(isPresented: $isShowingSheet) {
                 AddPlayerView(isPresented: $isShowingSheet, playersVM: playersVM)
             }
         }
+        .background(Color(.systemGroupedBackground))
+        .edgesIgnoringSafeArea(.all)
     }
 }