Zara replica - Part 1

Getting started & Login Screen

Extensions

import SwiftUI

extension Color {
static var background = Color("background")
static var text = Color("text")
}
import SwiftUI

extension View {
func thinFont() -> some View {
self.font(.system(size: 20, weight: Font.Weight.thin, design: Font.Design.default))
}

func lightFont() -> some View {
self.font(.system(size: 12, weight: Font.Weight.light, design: Font.Design.default))
}

func boldFont() -> some View {
self.font(.system(size: 15, weight: Font.Weight.bold, design: Font.Design.default))
}

func textColor() -> some View {
self.foregroundColor(.text)
}

func reverseTextColor() -> some View {
self.foregroundColor(.background)
}

func bgColor() -> some View {
self.background(Color.background)
}

func reverseBgColor() -> some View {
self.background(Color.text)
}
}

Buttons

import SwiftUI

struct CloseButton: View {

var onDismiss = {}

var body: some View {
Button(action: onDismiss, label: {
Image(systemName: "xmark")
.thinFont()
.textColor()
})
}
}

struct CloseButton_Previews: PreviewProvider {
static var previews: some View {
CloseButton()
}
}
Preview
struct BorderedButton: View {
var text: String
var action = {}

var body: some View {
Button(action: action, label: {
Text(text)
.boldFont()
.textColor()
.padding(.horizontal, 30)
.padding(.vertical, 10)
.border(Color.text, width: 1)
})
}
}
struct BorderedButton_Previews: PreviewProvider {
static var previews: some View {
BorderedButton(text: "ADD")
}
}
Preview
struct IconButton: View {
var icon: String
var action = {}

var body: some View {
Button(action: action, label: {
Image(systemName: icon)
.lightFont()
.textColor()
})
}
}
struct IconButton_Previews: PreviewProvider {
static var previews: some View {
IconButton(icon: "square.and.arrow.up")
}
}
Preview
import SwiftUIstruct FilledButton: View {
var text: String
var action = {}

var body: some View {
Button(action: action, label: {
Text(text)
.boldFont()
.reverseTextColor()
.padding(.horizontal, 30)
.padding(.vertical, 10)

})
}
}
struct FilledButton_Previews: PreviewProvider {
static var previews: some View {
FilledButton(text: "LOG IN")
.reverseBgColor()
}
}
import SwiftUIstruct NakedButton: View {
var text: String
var alignment: Alignment = .center
var action = {}

var body: some View {
Button(action: action, label: {
Text(text)
.lightFont()
.textColor()
.padding(.vertical, 10)
.frame(maxWidth: .infinity, alignment: alignment)
})
}
}
struct NakedButton_Previews: PreviewProvider {
static var previews: some View {
NakedButton(text: "Have you forgotten your password?")
}
}
import SwiftUI

struct LargeNakedButton: View {
var text: String
var action = {}

var body: some View {
Button(action: action, label: {
Text(text)
.font(.system(size: 30, weight: Font.Weight.black, design: Font.Design.default))
.foregroundColor(.text)
.frame(maxWidth: .infinity, alignment: .leading)
})
}
}

struct LargeNakedButton_Previews: PreviewProvider {
static var previews: some View {
LargeNakedButton(text: "MY INFORMATION")
}
}

Login Screen

struct LoginScreen: View {

var onDismiss = {}

@State private var email = ""
@State private var password = ""


var body: some View {
// 1
VStack{
// 2
HStack {
CloseButton(action: onDismiss)
Spacer()
}

Spacer()

// 3
VStack(spacing: 20) {
VStack {
TextField("Email", text: self.$email)
Divider()
}

VStack {
SecureField("Password", text: self.$email)
Divider()
}

FilledButton(text: "LOG IN", action: onDismiss)
.frame(maxWidth: .infinity)
.reverseBgColor()

NakedButton(text: "Have you forgotten your password?")
}
Spacer()

// 4
VStack{
BorderedButton(text: "CHAT", action: {})
NakedButton(text: "Don't have an account? Register")
}
}.padding()
}
}
struct LoginScreen_Previews: PreviewProvider {
static var previews: some View {
LoginScreen()
}
}

Building real world apps.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store