Response to comments

All updates and fixes related to the comments
This commit is contained in:
Lukas Korba 2022-02-23 18:32:54 +01:00
parent 64146e2ac5
commit 3e0addd99e
10 changed files with 53 additions and 49 deletions

View File

@ -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"

View File

@ -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"

View File

@ -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")

View File

@ -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)

View File

@ -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())
} }
} }

View File

@ -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)
} }
} }

View File

@ -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))
} }
} }

View File

@ -31,7 +31,7 @@ struct StandardButtonStyle: ButtonStyle {
: disabledBackgroundColor : disabledBackgroundColor
) )
.cornerRadius(12) .cornerRadius(12)
.neumorphicButtonDesign(configuration.isPressed) .neumorphicButton(configuration.isPressed)
} }
} }

View File

@ -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))

View File

@ -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)