im trying to create a clickable text which links to new page, all good but im having issues with the placement of the back button one new page has opened.
the back button is placing at the top but then pushing the rest of the content down, how can i prevent it from pushing the content down but overlay over the top of it?
in the second image with the back button the rest of the content is dropped a lot more because of the button
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
Color("background").ignoresSafeArea()
VStack {
VStack (spacing: 36) {
VStack (spacing: 12) {
Image("Logo")
VStack (spacing: 4) {
Text("Welcome Back ")
.font(.largeTitle)
.fontWeight(.medium)
Text("Glad to have you back! Please log in here")
.foregroundColor(Color("secondaryLabel"))
}
}
VStack (spacing: 16) {
AuthTextFieldView(title: "Email",
placeholder: "[email protected]")
AuthTextFieldView(title: "Password",
placeholder: "••••••••••")
}
VStack (alignment: .leading, spacing: 24) {
Text("Forgotten Password")
.foregroundColor(Color("secondaryLabel"))
Button(action: {
}, label: {
Text("Log in")
.font(.headline)
.fontWeight(.medium)
.foregroundColor(.white)
})
.padding(.all, 10.0)
.frame(maxWidth: .infinity)
.background(.blue)
.cornerRadius(8)
}
VStack (spacing: 24) {
LabelledDivider(label: "Or login with")
HStack (spacing:24) {
Button(action: {
}, label: {
HStack (spacing: 16) {
Image("google")
.resizable()
.frame(width: 24.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/24.0)
Text("Google")
.font(.headline)
.fontWeight(.medium)
.foregroundColor(.secondary)
}
})
.padding(.all, 10.0)
.frame(maxWidth: .infinity)
.background(Color(UIColor.systemGray5))
.cornerRadius(8)
Button(action: {
}, label: {
HStack (spacing: 16) {
Image("discord")
.resizable()
.frame(width: 24.0, height: 18.19)
Text("Discord")
.font(.headline)
.fontWeight(.medium)
.foregroundColor(.white)
}
})
.padding(.all, 10.0)
.frame(maxWidth: .infinity)
.background(Color("discord"))
.cornerRadius(8)
}
}
}
Spacer()
HStack {
Text("Dont have an account?")
.foregroundColor(Color("secondaryLabel"))
NavigationLink {
SignUpView()
} label: {
Text("Register")
.foregroundColor(Color.blue)
}
}
}
.padding(24)
}
}
}
}
struct SignUpView: View {
var body: some View {
ZStack {
Color("background").ignoresSafeArea()
VStack {
VStack (spacing: 36) {
VStack (spacing: 12) {
Image("Logo")
VStack (spacing: 4) {
Text("Welcome to Squirlz")
.font(.largeTitle)
.fontWeight(.medium)
Text("To begin, let's set up your account")
.foregroundColor(Color("secondaryLabel"))
}
}
VStack (spacing: 16) {
AuthTextFieldView(title: "Email",
placeholder: "[email protected]")
AuthTextFieldView(title: "Password",
placeholder: "••••••••••")
AuthTextFieldView(title: "Confirm Password",
placeholder: "••••••••••")
}
VStack (alignment: .leading, spacing: 24) {
Button(action: {
}, label: {
Text("Register")
.font(.headline)
.fontWeight(.medium)
.foregroundColor(.white)
})
.padding(/*@START_MENU_TOKEN@*/.all, 10.0/*@END_MENU_TOKEN@*/)
.frame(maxWidth: .infinity)
.background(.blue)
.cornerRadius(8)
}
VStack (spacing: 24) {
LabelledDivider(label: "Or register with")
HStack (spacing:24) {
Button(action: {
}, label: {
HStack (spacing: 16) {
Image("google")
.resizable()
.frame(width: /*@START_MENU_TOKEN@*/24.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/24.0/*@END_MENU_TOKEN@*/)
Text("Google")
.font(.headline)
.fontWeight(.medium)
.foregroundColor(.secondary)
}
})
.padding(/*@START_MENU_TOKEN@*/.all, 10.0/*@END_MENU_TOKEN@*/)
.frame(maxWidth: .infinity)
.background(Color(UIColor.systemGray5))
.cornerRadius(8)
Button(action: {
}, label: {
HStack (spacing: 16) {
Image("discord")
.resizable()
.frame(width: /*@START_MENU_TOKEN@*/24.0/*@END_MENU_TOKEN@*/, height: 18.19)
Text("Discord")
.font(.headline)
.fontWeight(.medium)
.foregroundColor(.white)
}
})
.padding(/*@START_MENU_TOKEN@*/.all, 10.0/*@END_MENU_TOKEN@*/)
.frame(maxWidth: .infinity)
.background(Color("discord"))
.cornerRadius(8)
}
}
}
Spacer()
VStack {
HStack {
Text("By registering you agree to our")
.font(.footnote)
.foregroundColor(Color("secondaryLabel"))
Text("Terms of Service")
.font(.footnote)
.foregroundColor(.blue)
}
HStack {
Text("and")
.font(.footnote)
.foregroundColor(Color("secondaryLabel"))
Text("Privacy Policy")
.font(.footnote)
.foregroundColor(.blue)
}
}
}
.padding(24)
}
}
}