dark and light mode and scroll choice component on main page

Sources/allin/allin.xcodeproj/project.pbxproj

@@ -19,6 +19,7 @@
 		EC2C1EEB2AC08BE80091D57C /* BetCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC2C1EEA2AC08BE80091D57C /* BetCard.swift */; };
 		EC2C1EED2AC093820091D57C /* TextCapsule.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC2C1EEC2AC093820091D57C /* TextCapsule.swift */; };
 		EC2C1EEF2AC098D30091D57C /* UsersPreview.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC2C1EEE2AC098D30091D57C /* UsersPreview.swift */; };
+		EC3737E42AC2F5FB00E6BDB5 /* ChoiceCapsule.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC3737E32AC2F5FB00E6BDB5 /* ChoiceCapsule.swift */; };
 		EC46D7DD2ABCCC270030AC04 /* MenuView.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC46D7DC2ABCCC270030AC04 /* MenuView.swift */; };
 		EC46D7DF2ABCE0A20030AC04 /* ParameterMenuView.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC46D7DE2ABCE0A20030AC04 /* ParameterMenuView.swift */; };
 		EC50BF962ABF4D3300197685 /* SplashScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC50BF952ABF4D3300197685 /* SplashScreen.swift */; };
@@ -63,6 +64,7 @@
 		EC2C1EEA2AC08BE80091D57C /* BetCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = BetCard.swift; path = allin/Views/BetCard.swift; sourceTree = SOURCE_ROOT; };
 		EC2C1EEC2AC093820091D57C /* TextCapsule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = TextCapsule.swift; path = allin/Views/TextCapsule.swift; sourceTree = SOURCE_ROOT; };
 		EC2C1EEE2AC098D30091D57C /* UsersPreview.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = UsersPreview.swift; path = allin/Views/UsersPreview.swift; sourceTree = SOURCE_ROOT; };
+		EC3737E32AC2F5FB00E6BDB5 /* ChoiceCapsule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = ChoiceCapsule.swift; path = allin/Views/ChoiceCapsule.swift; sourceTree = SOURCE_ROOT; };
 		EC46D7DC2ABCCC270030AC04 /* MenuView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = MenuView.swift; path = allin/Views/MenuView.swift; sourceTree = SOURCE_ROOT; };
 		EC46D7DE2ABCE0A20030AC04 /* ParameterMenuView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = ParameterMenuView.swift; path = allin/Views/ParameterMenuView.swift; sourceTree = SOURCE_ROOT; };
 		EC50BF952ABF4D3300197685 /* SplashScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = SplashScreen.swift; path = allin/Screens/SplashScreen.swift; sourceTree = SOURCE_ROOT; };
@@ -109,6 +111,7 @@
 				EC2C1EEA2AC08BE80091D57C /* BetCard.swift */,
 				EC2C1EEC2AC093820091D57C /* TextCapsule.swift */,
 				EC2C1EEE2AC098D30091D57C /* UsersPreview.swift */,
+				EC3737E32AC2F5FB00E6BDB5 /* ChoiceCapsule.swift */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -344,6 +347,7 @@
 				EC87FCD92ABBA60900363986 /* Colors.swift in Sources */,
 				D98C4D662AB9D017007A6B4D /* ContentView.swift in Sources */,
 				D92EC57C2ABADA2800CCD30E /* CoinCounterView.swift in Sources */,
+				EC3737E42AC2F5FB00E6BDB5 /* ChoiceCapsule.swift in Sources */,
 				EC2C1EED2AC093820091D57C /* TextCapsule.swift in Sources */,
 				D98C4D8E2AB9D440007A6B4D /* TopBarView.swift in Sources */,
 				EC50BF962ABF4D3300197685 /* SplashScreen.swift in Sources */,

Sources/allin/allin/Assets.xcassets/BackgroundWhite.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "display-p3",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x26",
+          "blue" : "0x1C",
-          "green" : "0x24",
+          "green" : "0x1C",
-          "red" : "0x25"
+          "red" : "0x1C"
         }
       },
       "idiom" : "universal"

Sources/allin/allin/Assets.xcassets/BetCardBackground.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xFF",
+          "red" : "0xFF"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x26",
+          "green" : "0x26",
+          "red" : "0x26"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/allin/allin/Assets.xcassets/BetTitle.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xFF",
+          "red" : "0xFF"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xFF",
+          "red" : "0xFF"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/allin/allin/Assets.xcassets/CapsuleGray.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xF9",
+          "blue" : "0xF7",
-          "green" : "0xF9",
+          "green" : "0xF7",
-          "red" : "0xF9"
+          "red" : "0xF7"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xF9",
+          "blue" : "0x2A",
-          "green" : "0xF9",
+          "green" : "0x2A",
-          "red" : "0xF9"
+          "red" : "0x2A"
         }
       },
       "idiom" : "universal"

Sources/allin/allin/Assets.xcassets/DelimiterGray.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xEB",
+          "blue" : "0x39",
-          "green" : "0xEB",
+          "green" : "0x39",
-          "red" : "0xEB"
+          "red" : "0x39"
         }
       },
       "idiom" : "universal"

Sources/allin/allin/Assets.xcassets/LightGray_200.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xEB",
+          "green" : "0xEB",
+          "red" : "0xEB"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "display-p3",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x39",
+          "green" : "0x39",
+          "red" : "0x39"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/allin/allin/Assets.xcassets/TrendingBetCardBackground.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x2A",
+          "green" : "0x2A",
+          "red" : "0x2A"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x2A",
+          "green" : "0x2A",
+          "red" : "0x2A"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/allin/allin/Ressources/Colors.swift

@@ -27,6 +27,9 @@ struct AllinColor {
     static let PrimaryTextColor = Color("PrimaryTextColor")
     static let DelimiterGray = Color("DelimiterGray")
     static let CapsuleGray = Color("CapsuleGray")
+    static let LightGray_200 = Color("LightGray_200")
+    static let TrendingBetCardBackground = Color("TrendingBetCardBackground")
+    static let BetCardBackground = Color("BetCardBackground")
 
 
     static let gradiantCard = LinearGradient(
@@ -34,4 +37,9 @@ struct AllinColor {
         startPoint: .bottomLeading,
         endPoint: .topTrailing
     )
+    static let fadeInGradiantCard = LinearGradient(
+        gradient: Gradient(colors: [AllinColor.backgroundWhite.opacity(0), AllinColor.backgroundWhite.opacity(0.9),AllinColor.backgroundWhite]),
+        startPoint: .bottom,
+        endPoint: .top
+    )
 }

Sources/allin/allin/Screens/HomeScreen.swift

@@ -14,10 +14,38 @@ struct Home: View {
     var body: some View {
         VStack(alignment: .center, spacing: 0) {
             TopBarView(showMenu: self.$showMenu)
-            ScrollView{
+            ScrollView(showsIndicators: false){
-                TrendingBetCard().padding(.top,25)
+                LazyVStack(alignment: .leading, spacing: 0, pinnedViews: [.sectionHeaders]) {
+                    
+                    TrendingBetCard().padding(.top,25).padding([.leading,.trailing],25)
+                    
+                    Section {
+                        VStack(spacing: 20){
+                            BetCard()
+                            BetCard()
                             BetCard()
                         }.padding([.leading,.trailing],25)
+                    } header: {
+                        ZStack{
+                            AllinColor.fadeInGradiantCard
+                            ScrollView(.horizontal,showsIndicators: false){
+                                HStack{
+                                    ChoiceCapsule()
+                                    ChoiceCapsule()
+                                    ChoiceCapsule()
+                                    ChoiceCapsule()
+                                    ChoiceCapsule()
+                                    ChoiceCapsule()
+                                    ChoiceCapsule()
+                                }.padding(.leading,25).padding([.top,.bottom],15)
+                                
+                            }
+                        }
+                        
+                    }
+                    
+                }
+            }
             
             Spacer()
         }

Sources/allin/allin/Views/BetCard.swift

@@ -27,7 +27,7 @@ struct BetCard: View {
                 }
             }.frame(width: .infinity).padding(.all,15)
                 
-                .background(.white).cornerRadius(20, corners: [.topLeft,.topRight]).padding(.bottom,0)
+                .background(AllinColor.BetCardBackground).cornerRadius(20, corners: [.topLeft,.topRight]).padding(.bottom,0)
             VStack(alignment: .leading,spacing: 2){
                 HStack{
                     Spacer()
@@ -55,8 +55,13 @@ struct BetCard: View {
                             )
                         }
                     }
-                .accentColor(.white)
+                
-                .buttonStyle(.borderedProminent).padding([.top],5)
+                .accentColor(AllinColor.BetCardBackground)
+                .buttonStyle(.borderedProminent).cornerRadius(4.0)
+                .overlay(
+                    RoundedRectangle(cornerRadius: 12).stroke(AllinColor.DelimiterGray , lineWidth: 1)
+                ).padding([.top],5)
+                
             }.frame(width: .infinity).padding(.all,8)
                 
                 .background(AllinColor.CapsuleGray).cornerRadius(20, corners: [.bottomLeft,.bottomRight]).padding(.bottom,0).border(width: 1, edges: [.top], color: AllinColor.DelimiterGray)

Sources/allin/allin/Views/ChoiceCapsule.swift

@@ -0,0 +1,35 @@
+//
+//  ChoiceCapsule.swift
+//  AllIn
+//
+//  Created by étudiant on 26/09/2023.
+//
+
+import SwiftUI
+
+struct ChoiceCapsule: View {
+    @State var buttonPressed = false
+    var body: some View {
+        Group {
+            if(buttonPressed){
+                Text("En cours").font(.system(size: 15)).foregroundColor(.white).fontWeight(.semibold).padding([.leading,.trailing],13.8).padding([.top,.bottom], 7).background(AllinColor.PrimaryTextColor).clipShape(Capsule()
+                )
+            }else{
+                Text("En cours").font(.system(size: 15)).foregroundColor(AllinColor.lightGray).fontWeight(.regular).padding([.leading,.trailing],15).padding([.top,.bottom], 7).background(AllinColor.CapsuleGray).clipShape(Capsule()).overlay( /// apply a rounded border
+                    RoundedRectangle(cornerRadius: 20)
+                        .stroke(AllinColor.LightGray_200, lineWidth: 1)
+                )
+            }
+        }
+        .onTapGesture() {
+            buttonPressed.toggle()
+        }
+        
+    }
+}
+
+struct ChoiceCapsule_Previews: PreviewProvider {
+    static var previews: some View {
+        ChoiceCapsule()
+    }
+}

Sources/allin/allin/Views/TrendingBetCard.swift

@@ -70,7 +70,7 @@ struct TrendingBetCard: View {
             }
         }
         .frame(height: 127, alignment: .topLeading)
-        .background(AllinColor.darkerGray)
+        .background(AllinColor.TrendingBetCardBackground)
         .overlay(
             RoundedRectangle(cornerRadius: 20, style: .continuous)
                 .stroke(AllinColor.gradiantCard, lineWidth: 5)