Skip to content

Commit

Permalink
Merge pull request #420 from PermanentOrg/feature/VSP-1384-Welcome-Sc…
Browse files Browse the repository at this point in the history
…reen-iPad

VSP-1384 [IOS][Tablet] Welcome screen
  • Loading branch information
luciancerbu-vsp authored Mar 13, 2024
2 parents 07fb5eb + 2fc4dc1 commit e0c6c01
Show file tree
Hide file tree
Showing 9 changed files with 215 additions and 16 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/deployStaging.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ name: Deploy Firebase Beta
on:
workflow_dispatch:
push:
branches: [ "main" ]
branches: [ "main", "feature/Onboarding-Redesign" ]

jobs:
build:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,19 @@ struct RoundButtonRightImageView: View {
ZStack {
Color(.white)
HStack() {
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.blue700)
if Constants.Design.isPhone {
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.blue700)
.lineLimit(1)
.minimumScaleFactor(0.8)
} else {
Text(text)
.textStyle(UsualRegularMediumTextStyle())
.foregroundColor(.blue700)
.lineLimit(1)
.minimumScaleFactor(0.8)
}
Spacer()
if isLoading {
ProgressView()
Expand All @@ -47,9 +57,19 @@ struct RoundButtonRightImageView: View {
if type == .noColor {
ZStack {
HStack() {
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.white)
if Constants.Design.isPhone {
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.white)
.lineLimit(1)
.minimumScaleFactor(0.8)
} else {
Text(text)
.textStyle(UsualRegularMediumTextStyle())
.foregroundColor(.white)
.lineLimit(1)
.minimumScaleFactor(0.8)
}
Spacer()
if isLoading {
ProgressView()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,17 @@ struct SmallRoundButtonImageView: View {
.frame(width: 24, height: 24, alignment: .center)
.accentColor(.blue700)
}
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.blue700)
if Constants.Design.isPhone {
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.blue700)
.lineLimit(1)
} else {
Text(text)
.textStyle(UsualRegularMediumTextStyle())
.foregroundColor(.blue700)
.lineLimit(1)
}
if imagePlace == .onRight {
if isLoading {
ProgressView()
Expand All @@ -63,9 +71,19 @@ struct SmallRoundButtonImageView: View {
.frame(width: 24, height: 24, alignment: .center)
.accentColor(.white)
}
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.white)
if Constants.Design.isPhone {
Text(text)
.textStyle(UsualSmallXMediumTextStyle())
.foregroundColor(.white)
.lineLimit(1)
.minimumScaleFactor(0.8)
} else {
Text(text)
.textStyle(UsualRegularMediumTextStyle())
.foregroundColor(.white)
.lineLimit(1)
.minimumScaleFactor(0.8)
}
if imagePlace == .onRight {
if isLoading {
ProgressView()
Expand Down
49 changes: 49 additions & 0 deletions Permanent/Common/ViewModifiers/TextViewModifiers.swift
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ fileprivate enum FontSize: CGFloat {
case medium = 18.0
case large = 20.0
case xLarge = 32.0
case xxLarge = 56.0
}

enum FontType {
Expand All @@ -52,6 +53,14 @@ struct UsualXLargeLightTextStyle: ViewModifier {
}
}

struct UsualXXLargeLightTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.usualLight.rawValue,
size: FontSize.xxLarge.rawValue,
relativeTo: .largeTitle))
}
}

struct UsualXLargeBoldTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.usualBold.rawValue,
Expand All @@ -60,6 +69,14 @@ struct UsualXLargeBoldTextStyle: ViewModifier {
}
}

struct UsualXXLargeBoldTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.usualBold.rawValue,
size: FontSize.xxLarge.rawValue,
relativeTo: .largeTitle))
}
}

struct SmallXXXXXSemiBoldTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.openSansSemiBold.rawValue,
Expand Down Expand Up @@ -229,6 +246,38 @@ struct RegularTextStyle: ViewModifier {
}
}

struct UsualRegularTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.usualRegular.rawValue,
size: FontSize.regular.rawValue,
relativeTo: .largeTitle))
}
}

struct UsualRegularMediumTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.usualMedium.rawValue,
size: FontSize.regular.rawValue,
relativeTo: .largeTitle))
}
}

struct UsualLightRegularTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.usualLight.rawValue,
size: FontSize.regular.rawValue,
relativeTo: .largeTitle))
}
}

struct UsualXXLargeRegularTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.usualRegular.rawValue,
size: FontSize.xxLarge.rawValue,
relativeTo: .largeTitle))
}
}

struct RegularSemiBoldTextStyle: ViewModifier {
func body(content: Content) -> some View {
content.font(.custom(FontName.openSansSemiBold.rawValue,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,20 @@
import SwiftUI

struct OnboardingCreateFirstArchiveView: View {
@State var archiveType: String = "Personal"

var backButton: (() -> Void)
var nextButton: (() -> Void)

var body: some View {
if Constants.Design.isPhone {
iPhoneBody
} else {
iPadBody
}
}

var iPhoneBody: some View {
ZStack(alignment: .bottom) {
VStack {
VStack(alignment: .leading) {
Expand Down Expand Up @@ -41,4 +51,38 @@ struct OnboardingCreateFirstArchiveView: View {
}
}
}
var iPadBody: some View {
HStack(alignment: .top, spacing: 64) {
VStack(alignment: .leading) {
Text("Create your")
.textStyle(UsualXXLargeLightTextStyle())
.foregroundColor(.white)
HStack(spacing: 0) {
Text("first ")
.textStyle(UsualXXLargeLightTextStyle())
.foregroundColor(.white)
Text("Archive")
.textStyle(UsualXXLargeBoldTextStyle())
.foregroundColor(.white)
Spacer()
}
Spacer()
}
ZStack(alignment: .bottom) {
VStack {
Text("With my first archive, I plan to capture and preserve material about…")
.textStyle(UsualRegularTextStyle())
.foregroundColor(.blue25)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.lineSpacing(8.0)
Spacer()
}
HStack(spacing: 16) {
SmallRoundButtonImageView(type: .noColor, imagePlace: .onLeft, text: "Back", image: Image(.backArrowOnboarding), action: backButton)
.frame(width: 120)
RoundButtonRightImageView(text: "Let’s create a \(archiveType) archive", action: nextButton)
}
}
}
}
}
4 changes: 2 additions & 2 deletions Permanent/Modules/Onboarding/Views/OnboardingView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ struct OnboardingView: View {
Spacer()
}
}
.padding(.horizontal, 32)
.padding(.top, 70)
.padding(.horizontal, Constants.Design.isPhone ? 32 : 64)
.padding(.top, Constants.Design.isPhone ? 70 : 48)
.padding(.bottom, 40)
}
.ignoresSafeArea()
Expand Down
52 changes: 51 additions & 1 deletion Permanent/Modules/Onboarding/Views/OnboardingWelcomeView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,17 @@ import SwiftUI
struct OnboardingWelcomeView: View {
var fullName: String = ""
var buttonAction: (() -> Void)
let welcomeMessage: String = "We’re so glad you’re here!\n\nAt Permanent, it is our mission to provide a safe and secure place to store, preserve, and share the digital legacy of all people, whether that's for you or for your friends, family, interests or organizations.\n\nWe know that starting this journey can sometimes be overwhelming, but don’t worry. We’re here to help you every step of the way."

var body: some View {
if Constants.Design.isPhone {
iPhoneBody
} else {
iPadBody
}
}

var iPhoneBody: some View {
ZStack(alignment: .bottom) {
VStack(alignment: .leading, spacing: 24) {
VStack(alignment: .leading) {
Expand All @@ -33,7 +42,7 @@ struct OnboardingWelcomeView: View {
.textStyle(UsualXLargeLightTextStyle())
.foregroundColor(.white)
}
Text("We’re so glad you’re here!\n\nAt Permanent, it is our mission to provide a safe and secure place to store, preserve, and share the digital legacy of all people, whether that's for you or for your friends, family, interests or organizations.\n\nWe know that starting this journey can sometimes be overwhelming, but don’t worry. We’re here to help you every step of the way.")
Text("\(welcomeMessage)")
.textStyle(UsualSmallXRegularTextStyle())
.foregroundColor(.blue25)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
Expand All @@ -42,4 +51,45 @@ struct OnboardingWelcomeView: View {
RoundButtonRightImageView(text: "Get started", action: buttonAction)
}
}
var iPadBody: some View {
HStack(alignment: .top, spacing: 64) {
VStack(alignment: .leading) {
HStack(spacing: 0) {
Text("Hello, ")
.textStyle(UsualXXLargeLightTextStyle())
.foregroundColor(.white)
Text("\(fullName)")
.textStyle(UsualXXLargeBoldTextStyle())
.foregroundColor(.white)
.lineLimit(1)
.minimumScaleFactor(0.8)
Text(".")
.textStyle(UsualXXLargeLightTextStyle())
.foregroundColor(.white)
Spacer()
}
Text("Welcome")
.textStyle(UsualXXLargeLightTextStyle())
.foregroundColor(.white)
Text("to Permanent!")
.textStyle(UsualXXLargeLightTextStyle())
.foregroundColor(.white)
}
ZStack(alignment: .bottom) {
VStack {
Text("\(welcomeMessage)")
.textStyle(UsualRegularTextStyle())
.foregroundColor(.blue25)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.lineSpacing(8.0)
Spacer()
}
HStack {
Spacer()
RoundButtonRightImageView(text: "Get started", action: buttonAction)
.frame(width: 170)
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"images" : [
{
"filename" : "backArrowOnboarding.svg",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
},
"properties" : {
"template-rendering-intent" : "template"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e0c6c01

Please sign in to comment.