Response to comments
All updates and fixes related to the comments
This commit is contained in:
parent
64146e2ac5
commit
3e0addd99e
|
@ -5,9 +5,9 @@
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "1.000",
|
"alpha" : "1.000",
|
||||||
"blue" : "0xD1",
|
"blue" : "0.820",
|
||||||
"green" : "0xB8",
|
"green" : "0.722",
|
||||||
"red" : "0xA1"
|
"red" : "0.631"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"idiom" : "universal"
|
"idiom" : "universal"
|
||||||
|
@ -23,9 +23,9 @@
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "1.000",
|
"alpha" : "1.000",
|
||||||
"blue" : "69",
|
"blue" : "0.271",
|
||||||
"green" : "32",
|
"green" : "0.125",
|
||||||
"red" : "19"
|
"red" : "0.075"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"idiom" : "universal"
|
"idiom" : "universal"
|
|
@ -5,9 +5,9 @@
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "1.000",
|
"alpha" : "1.000",
|
||||||
"blue" : "0xFD",
|
"blue" : "0.992",
|
||||||
"green" : "0xFA",
|
"green" : "0.980",
|
||||||
"red" : "0xF7"
|
"red" : "0.969"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"idiom" : "universal"
|
"idiom" : "universal"
|
||||||
|
@ -23,9 +23,9 @@
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "1.000",
|
"alpha" : "1.000",
|
||||||
"blue" : "88",
|
"blue" : "0.345",
|
||||||
"green" : "50",
|
"green" : "0.196",
|
||||||
"red" : "40"
|
"red" : "0.157"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"idiom" : "universal"
|
"idiom" : "universal"
|
|
@ -52,8 +52,6 @@ internal enum Asset {
|
||||||
internal static let createButtonPressed = ColorAsset(name: "CreateButtonPressed")
|
internal static let createButtonPressed = ColorAsset(name: "CreateButtonPressed")
|
||||||
internal static let neumorphicButtonDarkSide = ColorAsset(name: "NeumorphicButtonDarkSide")
|
internal static let neumorphicButtonDarkSide = ColorAsset(name: "NeumorphicButtonDarkSide")
|
||||||
internal static let neumorphicButtonLightSide = ColorAsset(name: "NeumorphicButtonLightSide")
|
internal static let neumorphicButtonLightSide = ColorAsset(name: "NeumorphicButtonLightSide")
|
||||||
internal static let neumorphicDarkSide = ColorAsset(name: "NeumorphicDarkSide")
|
|
||||||
internal static let neumorphicLightSide = ColorAsset(name: "NeumorphicLightSide")
|
|
||||||
internal static let onboardingNavigation = ColorAsset(name: "OnboardingNavigation")
|
internal static let onboardingNavigation = ColorAsset(name: "OnboardingNavigation")
|
||||||
internal static let onboardingNavigationPressed = ColorAsset(name: "OnboardingNavigationPressed")
|
internal static let onboardingNavigationPressed = ColorAsset(name: "OnboardingNavigationPressed")
|
||||||
internal static let primaryButton = ColorAsset(name: "PrimaryButton")
|
internal static let primaryButton = ColorAsset(name: "PrimaryButton")
|
||||||
|
@ -70,6 +68,8 @@ internal enum Asset {
|
||||||
internal static let circularFrameGradientStart = ColorAsset(name: "CircularFrameGradientStart")
|
internal static let circularFrameGradientStart = ColorAsset(name: "CircularFrameGradientStart")
|
||||||
internal static let navigationButtonDisabled = ColorAsset(name: "NavigationButtonDisabled")
|
internal static let navigationButtonDisabled = ColorAsset(name: "NavigationButtonDisabled")
|
||||||
internal static let navigationButtonEnabled = ColorAsset(name: "NavigationButtonEnabled")
|
internal static let navigationButtonEnabled = ColorAsset(name: "NavigationButtonEnabled")
|
||||||
|
internal static let neumorphicDarkSide = ColorAsset(name: "NeumorphicDarkSide")
|
||||||
|
internal static let neumorphicLightSide = ColorAsset(name: "NeumorphicLightSide")
|
||||||
}
|
}
|
||||||
internal enum ProgressIndicator {
|
internal enum ProgressIndicator {
|
||||||
internal static let gradientLeft = ColorAsset(name: "GradientLeft")
|
internal static let gradientLeft = ColorAsset(name: "GradientLeft")
|
||||||
|
|
|
@ -41,7 +41,7 @@ struct OnboardingContentView: View {
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.frame(width: circularFrameUniformSize(), height: circularFrameUniformSize())
|
.frame(width: circularFrameUniformSize, height: circularFrameUniformSize)
|
||||||
.badgeIcons(
|
.badgeIcons(
|
||||||
store.actionless.scope(
|
store.actionless.scope(
|
||||||
state: { state in
|
state: { state in
|
||||||
|
@ -52,7 +52,7 @@ struct OnboardingContentView: View {
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.offset(y: viewStore.offset - height / circularFrameOffsetCoeff())
|
.offset(y: viewStore.offset - height / circularFrameOffsetCoeffcient)
|
||||||
.transition(.scale(scale: 2).combined(with: .opacity))
|
.transition(.scale(scale: 2).combined(with: .opacity))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -79,7 +79,7 @@ struct OnboardingContentView: View {
|
||||||
.frame(width: width, height: height)
|
.frame(width: width, height: height)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.offset(y: viewStore.isFinalStep ? width / 2.5 : viewStore.offset + height / descriptionOffsetCoeff())
|
.offset(y: viewStore.isFinalStep ? width / 2.5 : viewStore.offset + height / descriptionOffsetCoefficient)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -88,21 +88,21 @@ struct OnboardingContentView: View {
|
||||||
/// on different devices (apects). iPhone SE and iPhone 8 are similar aspect family devices
|
/// on different devices (apects). iPhone SE and iPhone 8 are similar aspect family devices
|
||||||
/// while iPhone X, 11, etc are different family devices, capable to use more of the space.
|
/// while iPhone X, 11, etc are different family devices, capable to use more of the space.
|
||||||
extension OnboardingContentView {
|
extension OnboardingContentView {
|
||||||
func circularFrameUniformSize() -> CGFloat {
|
var circularFrameUniformSize: CGFloat {
|
||||||
let aspect = height / width
|
let aspect = height / width
|
||||||
let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0)
|
let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0)
|
||||||
|
|
||||||
return width * (0.6 * deviceMultiplier)
|
return width * (0.6 * deviceMultiplier)
|
||||||
}
|
}
|
||||||
|
|
||||||
func circularFrameOffsetCoeff() -> CGFloat {
|
var circularFrameOffsetCoeffcient: CGFloat {
|
||||||
let aspect = height / width
|
let aspect = height / width
|
||||||
let deviceMultiplier = aspect / 1.725
|
let deviceMultiplier = aspect / 1.725
|
||||||
|
|
||||||
return 4.4 * deviceMultiplier
|
return 4.4 * deviceMultiplier
|
||||||
}
|
}
|
||||||
|
|
||||||
func descriptionOffsetCoeff() -> Double {
|
var descriptionOffsetCoefficient: Double {
|
||||||
let aspect = height / width
|
let aspect = height / width
|
||||||
let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5)
|
let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5)
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@ struct OnboardingFooterView: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.createButtonStyle
|
.createButtonStyle
|
||||||
.buttonLayout()
|
.onboardingFooterButtonLayout()
|
||||||
|
|
||||||
Button("Import an Existing Wallet") {
|
Button("Import an Existing Wallet") {
|
||||||
withAnimation(.easeInOut(duration: animationDuration)) {
|
withAnimation(.easeInOut(duration: animationDuration)) {
|
||||||
|
@ -32,7 +32,7 @@ struct OnboardingFooterView: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.secondaryButtonStyle
|
.secondaryButtonStyle
|
||||||
.buttonLayout()
|
.onboardingFooterButtonLayout()
|
||||||
} else {
|
} else {
|
||||||
Button("Next") {
|
Button("Next") {
|
||||||
withAnimation(.easeInOut(duration: animationDuration)) {
|
withAnimation(.easeInOut(duration: animationDuration)) {
|
||||||
|
@ -40,23 +40,24 @@ struct OnboardingFooterView: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.primaryButtonStyle
|
.primaryButtonStyle
|
||||||
.buttonLayout()
|
.onboardingFooterButtonLayout()
|
||||||
|
|
||||||
ProgressView(
|
ProgressView(
|
||||||
"0\(viewStore.index + 1)",
|
String(format: "%02d", viewStore.index + 1),
|
||||||
value: Double(viewStore.index + 1),
|
value: Double(viewStore.index + 1),
|
||||||
total: Double(viewStore.steps.count)
|
total: Double(viewStore.steps.count)
|
||||||
)
|
)
|
||||||
.onboardingProgressStyle
|
.onboardingProgressStyle
|
||||||
.padding(.horizontal, 30)
|
.padding(.horizontal, 30)
|
||||||
.padding(.vertical, 20)
|
.padding(.vertical, 20)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
struct OnboardingFooterButtonLayout: ViewModifier {
|
// swiftlint:disable:next private_over_fileprivate strict_fileprivate
|
||||||
|
fileprivate struct OnboardingFooterButtonLayout: ViewModifier {
|
||||||
func body(content: Content) -> some View {
|
func body(content: Content) -> some View {
|
||||||
content
|
content
|
||||||
.frame(height: 60)
|
.frame(height: 60)
|
||||||
|
@ -66,7 +67,7 @@ struct OnboardingFooterButtonLayout: ViewModifier {
|
||||||
}
|
}
|
||||||
|
|
||||||
extension View {
|
extension View {
|
||||||
func buttonLayout() -> some View {
|
func onboardingFooterButtonLayout() -> some View {
|
||||||
modifier(OnboardingFooterButtonLayout())
|
modifier(OnboardingFooterButtonLayout())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,8 +8,6 @@
|
||||||
import SwiftUI
|
import SwiftUI
|
||||||
|
|
||||||
struct NavigationButtonStyle: ButtonStyle {
|
struct NavigationButtonStyle: ButtonStyle {
|
||||||
@Environment(\.colorScheme) var colorScheme
|
|
||||||
|
|
||||||
func makeBody(configuration: Configuration) -> some View {
|
func makeBody(configuration: Configuration) -> some View {
|
||||||
configuration.label
|
configuration.label
|
||||||
.frame(
|
.frame(
|
||||||
|
@ -25,7 +23,7 @@ struct NavigationButtonStyle: ButtonStyle {
|
||||||
Asset.Colors.Buttons.onboardingNavigation.color
|
Asset.Colors.Buttons.onboardingNavigation.color
|
||||||
)
|
)
|
||||||
.cornerRadius(.infinity)
|
.cornerRadius(.infinity)
|
||||||
.neumorphicButtonDesign(configuration.isPressed)
|
.neumorphicButton(configuration.isPressed)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,8 +13,10 @@ import SwiftUI
|
||||||
/// - colorScheme: The light is using full neumorphic design while dark is limited to soft shadow only
|
/// - colorScheme: The light is using full neumorphic design while dark is limited to soft shadow only
|
||||||
/// - isPressed: When the button is pressed, there are different behaviours for light vs. dark colorScheme
|
/// - isPressed: When the button is pressed, there are different behaviours for light vs. dark colorScheme
|
||||||
/// This design is mostly used for CircularFrame, not designed for a button (see NeumorphicButtonDesign)
|
/// This design is mostly used for CircularFrame, not designed for a button (see NeumorphicButtonDesign)
|
||||||
struct NeumorphicDesign: ViewModifier {
|
// swiftlint:disable:next private_over_fileprivate strict_fileprivate
|
||||||
|
fileprivate struct Neumorphic: ViewModifier {
|
||||||
@Environment(\.colorScheme) var colorScheme
|
@Environment(\.colorScheme) var colorScheme
|
||||||
|
|
||||||
let isPressed: Bool
|
let isPressed: Bool
|
||||||
|
|
||||||
init(_ isPressed: Bool) {
|
init(_ isPressed: Bool) {
|
||||||
|
@ -24,13 +26,13 @@ struct NeumorphicDesign: ViewModifier {
|
||||||
func body(content: Content) -> some View {
|
func body(content: Content) -> some View {
|
||||||
content
|
content
|
||||||
.shadow(
|
.shadow(
|
||||||
color: Asset.Colors.Buttons.neumorphicDarkSide.color,
|
color: Asset.Colors.Onboarding.neumorphicDarkSide.color,
|
||||||
radius: 15,
|
radius: 15,
|
||||||
x: colorScheme == .light && !isPressed ? 10 : -10,
|
x: colorScheme == .light && !isPressed ? 10 : -10,
|
||||||
y: colorScheme == .light && !isPressed ? 10 : 10
|
y: colorScheme == .light && !isPressed ? 10 : 10
|
||||||
)
|
)
|
||||||
.shadow(
|
.shadow(
|
||||||
color: Asset.Colors.Buttons.neumorphicLightSide.color,
|
color: Asset.Colors.Onboarding.neumorphicLightSide.color,
|
||||||
radius: 10,
|
radius: 10,
|
||||||
x: colorScheme == .light && !isPressed ? -12 : 12,
|
x: colorScheme == .light && !isPressed ? -12 : 12,
|
||||||
y: colorScheme == .light && !isPressed ? -12 : -12
|
y: colorScheme == .light && !isPressed ? -12 : -12
|
||||||
|
@ -44,8 +46,10 @@ struct NeumorphicDesign: ViewModifier {
|
||||||
/// - colorScheme: The light is using full neumorphic design while dark is limited to soft shadow only
|
/// - colorScheme: The light is using full neumorphic design while dark is limited to soft shadow only
|
||||||
/// - isPressed: When the button is pressed, there are different behaviours for light vs. dark colorScheme
|
/// - isPressed: When the button is pressed, there are different behaviours for light vs. dark colorScheme
|
||||||
/// This design is specifically crafted for buttons. The colors and positions of the shadows are different.
|
/// This design is specifically crafted for buttons. The colors and positions of the shadows are different.
|
||||||
struct NeumorphicButtonDesign: ViewModifier {
|
// swiftlint:disable:next private_over_fileprivate strict_fileprivate
|
||||||
|
fileprivate struct NeumorphicButton: ViewModifier {
|
||||||
@Environment(\.colorScheme) var colorScheme
|
@Environment(\.colorScheme) var colorScheme
|
||||||
|
|
||||||
let isPressed: Bool
|
let isPressed: Bool
|
||||||
|
|
||||||
init(_ isPressed: Bool) {
|
init(_ isPressed: Bool) {
|
||||||
|
@ -68,12 +72,13 @@ struct NeumorphicButtonDesign: ViewModifier {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
extension View {
|
extension View {
|
||||||
func neumorphicDesign(_ isPressed: Bool = false) -> some View {
|
func neumorphic(_ isPressed: Bool = false) -> some View {
|
||||||
self.modifier(NeumorphicDesign(isPressed))
|
self.modifier(Neumorphic(isPressed))
|
||||||
}
|
}
|
||||||
|
|
||||||
func neumorphicButtonDesign(_ isPressed: Bool = false) -> some View {
|
func neumorphicButton(_ isPressed: Bool = false) -> some View {
|
||||||
self.modifier(NeumorphicButtonDesign(isPressed))
|
self.modifier(NeumorphicButton(isPressed))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,7 +31,7 @@ struct StandardButtonStyle: ButtonStyle {
|
||||||
: disabledBackgroundColor
|
: disabledBackgroundColor
|
||||||
)
|
)
|
||||||
.cornerRadius(12)
|
.cornerRadius(12)
|
||||||
.neumorphicButtonDesign(configuration.isPressed)
|
.neumorphicButton(configuration.isPressed)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,7 @@ struct CircularFrameBackgroundImages: Animatable, ViewModifier {
|
||||||
.opacity(imageIndex == viewStore.index ? 1 : 0)
|
.opacity(imageIndex == viewStore.index ? 1 : 0)
|
||||||
.offset(x: imageIndex <= viewStore.index ? 0 : 25)
|
.offset(x: imageIndex <= viewStore.index ? 0 : 25)
|
||||||
.mask(Circle())
|
.mask(Circle())
|
||||||
.neumorphicDesign()
|
.neumorphic()
|
||||||
}
|
}
|
||||||
|
|
||||||
content
|
content
|
||||||
|
@ -44,7 +44,7 @@ struct CircularFrameBackgroundImage: Animatable, ViewModifier {
|
||||||
.resizable()
|
.resizable()
|
||||||
.aspectRatio(1.3, contentMode: .fill)
|
.aspectRatio(1.3, contentMode: .fill)
|
||||||
.mask(Circle())
|
.mask(Circle())
|
||||||
.neumorphicDesign()
|
.neumorphic()
|
||||||
|
|
||||||
content
|
content
|
||||||
}
|
}
|
||||||
|
@ -69,25 +69,25 @@ struct CircularFrameBackground_Previews: PreviewProvider {
|
||||||
.backgroundImage(Asset.Assets.Backgrounds.callout0.image)
|
.backgroundImage(Asset.Assets.Backgrounds.callout0.image)
|
||||||
.frame(width: 300, height: 300)
|
.frame(width: 300, height: 300)
|
||||||
.applyScreenBackground()
|
.applyScreenBackground()
|
||||||
.neumorphicDesign()
|
.neumorphic()
|
||||||
|
|
||||||
CircularFrame()
|
CircularFrame()
|
||||||
.backgroundImage(Asset.Assets.Backgrounds.callout1.image)
|
.backgroundImage(Asset.Assets.Backgrounds.callout1.image)
|
||||||
.frame(width: 300, height: 300)
|
.frame(width: 300, height: 300)
|
||||||
.applyScreenBackground()
|
.applyScreenBackground()
|
||||||
.neumorphicDesign()
|
.neumorphic()
|
||||||
|
|
||||||
CircularFrame()
|
CircularFrame()
|
||||||
.backgroundImage(Asset.Assets.Backgrounds.callout2.image)
|
.backgroundImage(Asset.Assets.Backgrounds.callout2.image)
|
||||||
.frame(width: 300, height: 300)
|
.frame(width: 300, height: 300)
|
||||||
.applyScreenBackground()
|
.applyScreenBackground()
|
||||||
.neumorphicDesign()
|
.neumorphic()
|
||||||
|
|
||||||
CircularFrame()
|
CircularFrame()
|
||||||
.backgroundImage(Asset.Assets.Backgrounds.callout3.image)
|
.backgroundImage(Asset.Assets.Backgrounds.callout3.image)
|
||||||
.frame(width: 300, height: 300)
|
.frame(width: 300, height: 300)
|
||||||
.applyScreenBackground()
|
.applyScreenBackground()
|
||||||
.neumorphicDesign()
|
.neumorphic()
|
||||||
}
|
}
|
||||||
.preferredColorScheme(.light)
|
.preferredColorScheme(.light)
|
||||||
.previewLayout(.fixed(width: size + 50, height: size + 50))
|
.previewLayout(.fixed(width: size + 50, height: size + 50))
|
||||||
|
|
|
@ -22,7 +22,7 @@ extension Text {
|
||||||
}
|
}
|
||||||
|
|
||||||
func synopsisText() -> some View {
|
func synopsisText() -> some View {
|
||||||
self.modifier(SynopsisStyle())
|
self.modifier(ParagraphStyle())
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Body text style. Used for content. Roboto-Regular 18pt
|
/// Body text style. Used for content. Roboto-Regular 18pt
|
||||||
|
@ -35,7 +35,7 @@ extension Text {
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Used for additional information, explanations, context (usually paragraphs)
|
/// Used for additional information, explanations, context (usually paragraphs)
|
||||||
private struct SynopsisStyle: ViewModifier {
|
private struct ParagraphStyle: ViewModifier {
|
||||||
func body(content: Content) -> some View {
|
func body(content: Content) -> some View {
|
||||||
content
|
content
|
||||||
.foregroundColor(Asset.Colors.Text.heading.color)
|
.foregroundColor(Asset.Colors.Text.heading.color)
|
||||||
|
|
Loading…
Reference in New Issue