background fix

gistfile1.txt

struct PastCompetitionInfoView: View {
    let store: Store<PastCompetitionInfoState, PastCompetitionInfoAction>
    var body: some View {
        WithViewStore(self.store) { viewStore in
            ZStack {
                Color.black.ignoresSafeArea()
                VStack {
                    VStack(spacing: 20) {
                        Group {
                            Text("Booking #")
                            +
                            Text(viewStore.state.futureCompetition.orderNumber)
                        }
                        .foregroundColor(.white)
                        .frame(maxWidth: .infinity)
                        .overlay(
                            Image(systemName: "chevron.left")
                                .foregroundColor(.redLoginButton),
                            alignment: .leading
                        )
                        .onTapGesture(perform: {
                            viewStore.send(.close)
                        })
                        .padding(.leading)
                        ScrollView(.vertical, showsIndicators: false) {
                            HStack {
                                Group {
                                    Text("20 apr 2021 ".uppercased()).bold()
                                        .foregroundColor(.white)
                                    +
                                    Text("at ")
                                        .foregroundColor(.gray)
                                    +
                                    Text("13:00".uppercased()).bold()
                                        .foregroundColor(.white)
                                }
                                .padding(2)
                                .padding(.horizontal, 2)
                                .background(
                                    Color(hex: "#393939")
                                )
                                Group {
                                    HStack {
                                        Text("15")
                                            .foregroundColor(.white)
                                        +
                                        Text("h : ")
                                            .foregroundColor(.gray)
                                        +
                                        Text("13")
                                            .foregroundColor(.white)
                                        +
                                        Text("m : ")
                                            .foregroundColor(.gray)
                                        +
                                        Text("00")
                                            .foregroundColor(.white)
                                        +
                                        Text("s")
                                            .foregroundColor(.gray)
                                    }
                                    .padding(2)
                                    .background(
                                        Rectangle()
                                            .stroke()
                                            .fill(.red)
                                    )
                                }
                            }
                            .frame(maxWidth: .infinity)
                            .padding(.horizontal, 24)
                            HStack {
                                Image("keyIcon")
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 25, height: 25)
                                Text("Terminal Code ".uppercased())
                                    .foregroundColor(.gray).bold()
                                    .font(.footnote)
                                
                                Text("135945816")
                                    .foregroundColor(.white).bold()
                                Rectangle()
                                    .fill(.gray)
                                    .frame(width: 1, height: 38)
                                Image("descriptionButton")
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 21, height: 21)
                                    .padding(.leading, 2)
                            }
                            .padding(.horizontal, 9)
                            .padding(7)
                            .background(
                                RoundedRectangle(cornerRadius: 8)
                                    .fill(.black)
                            )
                            .frame(maxWidth: .infinity)
                            .padding(.horizontal, 24)
                            HStack {
                                Image("competition_logo")
                                    .resizable()
                                    .scaledToFit()
                                    .overlay(
                                        Circle()
                                            .stroke(Color.white, lineWidth: 2)
                                    )
                                
                                    .frame(width: 30, height: 30)
                                Text(viewStore.state.futureCompetition.competitonName)
                                    .font(.body)
                                    .foregroundColor(.white).bold()
                                    .minimumScaleFactor(0.4)
                            }
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding(.horizontal, 30)
                            HStack {
                                Image("futureBookingCar2")
                                    .resizable()
                                    .clipShape(RoundedRectangle(cornerRadius: 13))
                                    .frame(
                                        width: UIScreen.main.bounds.width * 0.533333,
                                        height: UIScreen.main.bounds.height * 0.152709
                                    )
                                    .overlay(
                                        Image("track"),
                                        alignment: .leading
                                    )
                                VStack {
                                    HStack(spacing: 6) {
                                        Image("global")
                                        Text("Global")
                                            .foregroundColor(.white)
                                            .font(.caption)
                                    }
                                    .frame(maxWidth: 90, alignment: .leading)
                                    HStack(spacing: 6) {
                                        Image("multiplayer")
                                        Text("Multiplayer")
                                            .foregroundColor(.white)
                                            .font(.caption)
                                    }
                                    .frame(maxWidth: 90, alignment: .leading)
                                    HStack(spacing: 6) {
                                        Image("duration")
                                        Text("1:30:00")
                                            .foregroundColor(.white)
                                            .font(.caption)
                                    }
                                    .frame(maxWidth: 90, alignment: .leading)
                                }
                            }
                            .padding(.trailing, 5)
                            .padding(4)
                            .background(
                                RoundedRectangle(cornerRadius: 13)
                                    .fill(Color(hex: "#393939").opacity(0.5))
                            )
                            .frame(maxWidth: .infinity)
                            .padding(.horizontal, 24)
                            HStack {
                                Image("locationIconImage")
                                    .frame(width: 20, height: 20)
                                VStack(alignment: .leading) {
                                    Text("Location:")
                                        .font(.footnote)
                                        .foregroundColor(.gray)
                                    Text("RaceRoom Cafê Nürburgring".uppercased())
                                        .foregroundColor(.white)
                                        .font(.body)
                                }
                            }
                            .padding()
                            .background(
                                RoundedRectangle(cornerRadius: 14)
                                    .fill(.black)
                            )
                            .padding(.horizontal, 13)
                            .padding(.bottom, 24)
                            HStack(spacing: 0){
                                Text("TOTAL")
                                    .foregroundColor(.white).bold()
                                    .padding(.trailing, 5)
                                Text("AMOUNT")
                                    .foregroundColor(.white)
                                    .padding(.trailing, 10)
                                Text("$")
                                    .foregroundColor(.white).bold()
                                Text("100")
                                    .foregroundColor(.redLoginButton).bold()
                                Spacer()
                                Image("invoiceIcon")
                                    .padding(.vertical, 5)
                                    .padding(.horizontal, 30)
                                    .background(
                                        RoundedRectangle(cornerRadius: 24)
                                    )
                            }
                            .frame(maxWidth: .infinity)
                            .padding(.horizontal, 24)
                        }
                    }
                    .background(
                        RoundedCorner(radius: 24, corners: [.bottomLeft, .bottomRight])
                            .fill(Color("grayHeader"))
                            .ignoresSafeArea(.all, edges: .top)
                    )
                    VStack{
                        Text("Your Booked simulators".uppercased())
                            .foregroundColor(.gray)
                        HStack(spacing: 50){
                            HStack(spacing: 10){
                                Image("duration")
                                Text("20")
                                    .foregroundColor(.redLoginButton)
                                Text("min".uppercased())
                                    .foregroundColor(.white).opacity(0.7)
                            }
                            
                            HStack{
                                Image("duration")
                                Text("20")
                                    .foregroundColor(.redLoginButton)
                                Text("min".uppercased())
                                    .foregroundColor(.white)
                            }
                        }
                    }
                }
            }
        }
    }
}