betcard component finished

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

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

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

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

Sources/allin/allin/ContentView.swift

@@ -9,12 +9,14 @@ import SwiftUI
 
 struct ContentView: View {
     var body: some View {
-        VStack(alignment: .center) {
+        VStack(alignment: .center, spacing: 0) {
             TopBarView()
-            TrendingBetCard()}
+            ScrollView{
-        .edgesIgnoringSafeArea(.top)
+                TrendingBetCard().padding(.top, 20)
+            }.background(AllinColor.backgroundWhite)
+            }
+        .edgesIgnoringSafeArea([.bottom])
         .frame(alignment: .top)
-        
     }
 }
 

Sources/allin/allin/Extensions/Extensions.swift

@@ -33,3 +33,25 @@ struct RoundedCorner: Shape {
         return Path(path.cgPath)
     }
 }
+
+extension View {
+    func border(width: CGFloat, edges: [Edge], color: Color) -> some View {
+        overlay(EdgeBorder(width: width, edges: edges).foregroundColor(color))
+    }
+}
+
+struct EdgeBorder: Shape {
+    var width: CGFloat
+    var edges: [Edge]
+
+    func path(in rect: CGRect) -> Path {
+        edges.map { edge -> Path in
+            switch edge {
+            case .top: return Path(.init(x: rect.minX, y: rect.minY, width: rect.width, height: width))
+            case .bottom: return Path(.init(x: rect.minX, y: rect.maxY - width, width: rect.width, height: width))
+            case .leading: return Path(.init(x: rect.minX, y: rect.minY, width: width, height: rect.height))
+            case .trailing: return Path(.init(x: rect.maxX - width, y: rect.minY, width: width, height: rect.height))
+            }
+        }.reduce(into: Path()) { $0.addPath($1) }
+    }
+}

Sources/allin/allin/Ressources/Colors.swift

@@ -12,4 +12,11 @@ struct AllinColor {
     static let darkGray = Color("DarkGray")
     static let darkerGray = Color("DarkerGray")
     static let pinkAccentText = Color("PinkAccentText")
+    static let backgroundWhite = Color("BackgroundWhite")
+    static let blueAccent = Color("BlueAccent")
+    static let gradiantCard = LinearGradient(
+        gradient: Gradient(colors: [AllinColor.pinkAccentText, AllinColor.blueAccent]),
+        startPoint: .bottomLeading,
+        endPoint: .topTrailing
+    )
 }

Sources/allin/allin/Views/GradiantCard.swift

@@ -0,0 +1,28 @@
+//
+//  GradiantCard.swift
+//  AllIn
+//
+//  Created by étudiant on 21/09/2023.
+//
+
+import SwiftUI
+
+struct GradiantCard: View{
+    var body: some View {
+        Rectangle()
+            .stroke(
+                LinearGradient(
+                    gradient: AllinColor.gradiantCard,
+                    startPoint: .topLeading,
+                    endPoint: .bottomTrailing
+                ),
+                lineWidth: 5
+            )
+    }
+}
+
+struct GradiantCard_Previews: PreviewProvider {
+    static var previews: some View {
+        GradiantCard()
+    }
+}

Sources/allin/allin/Views/TopBarView.swift

@@ -12,29 +12,27 @@ struct TopBarView: View {
         let TopBarColorPink = Color(red: 249/255, green: 81/255, blue: 168/255)
         let TopBarColorBlue = Color(red: 25/255, green: 159/255, blue: 238/255)
         let TopBarColorPurple = Color(red: 170/255, green: 126/255, blue: 243/255)
-        GeometryReader { geometry in
+        ZStack{
-            ZStack() {
+                HStack{
-                HStack(){
                     Image("menu")
                         .resizable()
                         .frame(width: 26,height: 15)
-                        .padding(.leading, 30)
                     Spacer()
-                    
                     CoinCounterView()
                         
                 }
-                .frame(width: geometry.size.width,alignment: .trailing)
+                .frame(alignment: .top)
+                .padding(.leading, 20)
                 Image("Icon")
                     .resizable()
                     .frame(width: 40, height: 40, alignment: .bottom)
-                    .padding(.all, 22)
                 
             }
-            .frame(width: geometry.size.width, height: 120, alignment: .bottom)
+            .padding([.bottom], 20)
+            .padding([.top], 10)
             .background(LinearGradient(gradient:
                        Gradient(colors:[TopBarColorPink,TopBarColorPurple,TopBarColorBlue]),
                                        startPoint: .bottomLeading, endPoint: .topTrailing))
     }
+        
     }
-}

Sources/allin/allin/Views/TrendingBetCard.swift

@@ -7,48 +7,77 @@
 
 import SwiftUI
 
+// Define a custom view modifier for text styling
+struct BetText: ViewModifier {
+    var weight: Font.Weight
+    var color: Color
+    var size: CGFloat
+    
+    func body(content: Content) -> some View {
+        content
+            .fontWeight(weight)
+            .foregroundColor(color)
+            .font(.system(size: size))
+    }
+}
+
+extension View {
+    func betTextStyle(weight: Font.Weight, color: Color, size: CGFloat) -> some View {
+        self.modifier(BetText(weight: weight, color: color, size: size))
+    }
+}
+
 struct TrendingBetCard: View {
     var body: some View {
-        VStack(alignment: .leading){
+        VStack(alignment: .leading) {
-            HStack{
+            HStack {
                 Image("Trending")
                     .resizable()
                     .frame(width: 15, height: 15, alignment: .leading)
+                
                 Text("Populaire")
-                    .fontWeight(.medium)
+                    .betTextStyle(weight: .medium, color: AllinColor.pinkAccentText, size: 17)
-                    .foregroundColor(AllinColor.pinkAccentText)
+            }
-            }.padding([.leading,.top],10)
+            .padding([.leading, .top], 10)
+            
             Text("Emre va réussir son TP de CI/CD mercredi?")
                 .frame(height: 47)
-                .fontWeight(.heavy)
+                .betTextStyle(weight: .heavy, color: .white, size: 17)
-                .foregroundColor(Color.white)
                 .multilineTextAlignment(.leading)
-                .padding([.leading,.trailing],33)
+                .padding([.leading, .trailing], 33)
-                .font(.system(size: 17))
+            
             Spacer()
-            GeometryReader { geometry in HStack(alignment: .center,spacing: 0){
+            
+            GeometryReader { geometry in
+                HStack(alignment: .center, spacing: 0) {
                     Text("12")
-                    .fontWeight(.bold)
+                        .betTextStyle(weight: .bold, color: AllinColor.pinkAccentText, size: 14)
-                    .foregroundColor(AllinColor.pinkAccentText)
+                    
-                    .font(.system(size: 14))
                     Text("joueurs")
-                    .fontWeight(.regular)
+                        .betTextStyle(weight: .regular, color: .white, size: 14)
-                    .foregroundColor(Color.white).padding([.leading],2)
+                        .padding([.leading], 2)
-                    .font(.system(size: 14))
+                    
                     Text("2.35k")
-                    .fontWeight(.bold)
+                        .betTextStyle(weight: .bold, color: AllinColor.pinkAccentText, size: 14)
-                    .foregroundColor(AllinColor.pinkAccentText)
+                        .padding([.leading], 10)
-                    .padding([.leading],10)
-                    .font(.system(size: 14))
-                Text("points misés")
-                    .fontWeight(.regular)
-                    .foregroundColor(Color.white).padding([.leading],2)
-                    .font(.system(size: 14))
-            }.padding([.leading,.bottom,.trailing],5).frame( width: geometry.size.width,height:geometry.size.height, alignment: .bottom)}
                     
+                    Text("points misés")
+                        .betTextStyle(weight: .regular, color: .white, size: 14)
+                        .padding([.leading], 2)
+                }
+                .padding([.leading, .bottom, .trailing], 10)
+                .frame(width: geometry.size.width, height: geometry.size.height, alignment: .bottom)
+            }
+        }
+        .frame(height: 127, alignment: .topLeading)
+        .background(AllinColor.darkerGray)
         
-        }.frame(width: 344, height: 127, alignment: .topLeading).background(AllinColor.darkerGray)
+        .overlay(
-            .clipShape(RoundedRectangle(cornerRadius: 17, style: .continuous))
+            RoundedRectangle(cornerRadius: 20, style: .continuous)
+                .stroke(AllinColor.gradiantCard, lineWidth: 5)
+        )
+        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
+        .padding([.leading, .trailing], 20)
     }
 }