diff --git a/Sources/allin/allin/Assets.xcassets/BackgroundWhite.colorset/Contents.json b/Sources/allin/allin/Assets.xcassets/BackgroundWhite.colorset/Contents.json new file mode 100644 index 0000000..79a05ce --- /dev/null +++ b/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 + } +} diff --git a/Sources/allin/allin/Assets.xcassets/BlueAccent.colorset/Contents.json b/Sources/allin/allin/Assets.xcassets/BlueAccent.colorset/Contents.json new file mode 100644 index 0000000..90e4dc1 --- /dev/null +++ b/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 + } +} diff --git a/Sources/allin/allin/ContentView.swift b/Sources/allin/allin/ContentView.swift index 298dbcb..a499954 100644 --- a/Sources/allin/allin/ContentView.swift +++ b/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()} - .edgesIgnoringSafeArea(.top) + ScrollView{ + TrendingBetCard().padding(.top, 20) + }.background(AllinColor.backgroundWhite) + } + .edgesIgnoringSafeArea([.bottom]) .frame(alignment: .top) - } } diff --git a/Sources/allin/allin/Extensions/Extensions.swift b/Sources/allin/allin/Extensions/Extensions.swift index 88b2f39..59104cb 100644 --- a/Sources/allin/allin/Extensions/Extensions.swift +++ b/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) } + } +} diff --git a/Sources/allin/allin/Ressources/Colors.swift b/Sources/allin/allin/Ressources/Colors.swift index d0130c0..3a797ec 100644 --- a/Sources/allin/allin/Ressources/Colors.swift +++ b/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 + ) } diff --git a/Sources/allin/allin/Views/GradiantCard.swift b/Sources/allin/allin/Views/GradiantCard.swift new file mode 100644 index 0000000..00bfa95 --- /dev/null +++ b/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() + } +} diff --git a/Sources/allin/allin/Views/TopBarView.swift b/Sources/allin/allin/Views/TopBarView.swift index 2c22980..ac8f697 100644 --- a/Sources/allin/allin/Views/TopBarView.swift +++ b/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() { - HStack(){ + ZStack{ + 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)) - } } -} + + } diff --git a/Sources/allin/allin/Views/TrendingBetCard.swift b/Sources/allin/allin/Views/TrendingBetCard.swift index aa610b2..c1921c3 100644 --- a/Sources/allin/allin/Views/TrendingBetCard.swift +++ b/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){ - HStack{ + VStack(alignment: .leading) { + HStack { Image("Trending") .resizable() .frame(width: 15, height: 15, alignment: .leading) + Text("Populaire") - .fontWeight(.medium) - .foregroundColor(AllinColor.pinkAccentText) - }.padding([.leading,.top],10) + .betTextStyle(weight: .medium, color: AllinColor.pinkAccentText, size: 17) + } + .padding([.leading, .top], 10) + Text("Emre va réussir son TP de CI/CD mercredi?") .frame(height: 47) - .fontWeight(.heavy) - .foregroundColor(Color.white) + .betTextStyle(weight: .heavy, color: .white, size: 17) .multilineTextAlignment(.leading) - .padding([.leading,.trailing],33) - .font(.system(size: 17)) - Spacer() - GeometryReader { geometry in HStack(alignment: .center,spacing: 0){ - Text("12") - .fontWeight(.bold) - .foregroundColor(AllinColor.pinkAccentText) - .font(.system(size: 14)) - Text("joueurs") - .fontWeight(.regular) - .foregroundColor(Color.white).padding([.leading],2) - .font(.system(size: 14)) - Text("2.35k") - .fontWeight(.bold) - .foregroundColor(AllinColor.pinkAccentText) - .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)} + .padding([.leading, .trailing], 33) + Spacer() - }.frame(width: 344, height: 127, alignment: .topLeading).background(AllinColor.darkerGray) - .clipShape(RoundedRectangle(cornerRadius: 17, style: .continuous)) + GeometryReader { geometry in + HStack(alignment: .center, spacing: 0) { + Text("12") + .betTextStyle(weight: .bold, color: AllinColor.pinkAccentText, size: 14) + + Text("joueurs") + .betTextStyle(weight: .regular, color: .white, size: 14) + .padding([.leading], 2) + + Text("2.35k") + .betTextStyle(weight: .bold, color: AllinColor.pinkAccentText, size: 14) + .padding([.leading], 10) + + 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) + + .overlay( + RoundedRectangle(cornerRadius: 20, style: .continuous) + .stroke(AllinColor.gradiantCard, lineWidth: 5) + ) + .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous)) + .padding([.leading, .trailing], 20) } }