From 81ccc2b283bea2d5851f22b9661c0536b698a31c Mon Sep 17 00:00:00 2001 From: Lukas Korba <62649321+lukaskorba-indiedev@users.noreply.github.com> Date: Mon, 21 Feb 2022 21:17:49 +0100 Subject: [PATCH 01/13] First batch of UI updates The focus was on neumorphic buttons that work for both light and dark as well as state of the button (pressed) --- secant.xcodeproj/project.pbxproj | 4 ++ .../ButtonsTitleShadow.colorset/Contents.json | 38 ++++++++++++++++ .../NeumorphicDarkSide.colorset/Contents.json | 38 ++++++++++++++++ .../Contents.json | 38 ++++++++++++++++ .../Contents.json | 12 ++--- .../Contents.json | 12 ++--- .../Contents.json | 0 .../Contents.json | 38 ++++++++++++++++ .../Colors.xcassets/Onboarding/Contents.json | 6 +++ .../ActiveButtonText.colorset/Contents.json | 8 ++-- .../Text/Button.colorset/Contents.json | 12 ++--- secant/Generated/XCAssets+Generated.swift | 6 ++- .../Onboarding/OnboardingContentView.swift | 14 +++--- .../Onboarding/OnboardingFooterView.swift | 15 +++++-- .../Buttons/NavigationButtonStyle.swift | 7 ++- .../Buttons/NeumorphicDesignModifier.swift | 44 +++++++++++++++++++ .../UIComponents/Buttons/PrimaryButton.swift | 2 + .../Buttons/StandardButtonStyle.swift | 2 + .../CircularFrame/CircularFrame.swift | 15 +++++-- 19 files changed, 272 insertions(+), 39 deletions(-) create mode 100644 secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json rename secant/Colors.xcassets/Onboarding/{CircularFrame.colorset => CircularFrameGradientEnd.colorset}/Contents.json (100%) create mode 100644 secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/Contents.json create mode 100644 secant/UIComponents/Buttons/NeumorphicDesignModifier.swift diff --git a/secant.xcodeproj/project.pbxproj b/secant.xcodeproj/project.pbxproj index ae19652..86a4388 100644 --- a/secant.xcodeproj/project.pbxproj +++ b/secant.xcodeproj/project.pbxproj @@ -82,6 +82,7 @@ 66A0807B271993C500118B79 /* OnboardingProgressIndicator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */; }; 66D50668271D9B6100E51F0D /* NavigationButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */; }; 66DC733F271D88CC0053CBB6 /* StandardButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66DC733E271D88CC0053CBB6 /* StandardButtonStyle.swift */; }; + 9E4DC6E027C409A100E657F4 /* NeumorphicDesignModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */; }; F9322DC0273B555C00C105B5 /* NavigationLinks.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9322DBF273B555C00C105B5 /* NavigationLinks.swift */; }; F93673D62742CB840099C6AF /* Previews.swift in Sources */ = {isa = PBXBuildFile; fileRef = F93673D52742CB840099C6AF /* Previews.swift */; }; F93874F0273C4DE200F0E875 /* HomeStore.swift in Sources */ = {isa = PBXBuildFile; fileRef = F93874ED273C4DE200F0E875 /* HomeStore.swift */; }; @@ -209,6 +210,7 @@ 66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingProgressIndicator.swift; sourceTree = ""; }; 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NavigationButtonStyle.swift; sourceTree = ""; }; 66DC733E271D88CC0053CBB6 /* StandardButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StandardButtonStyle.swift; sourceTree = ""; }; + 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NeumorphicDesignModifier.swift; sourceTree = ""; }; F9322DBF273B555C00C105B5 /* NavigationLinks.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = NavigationLinks.swift; sourceTree = ""; }; F93673D52742CB840099C6AF /* Previews.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Previews.swift; sourceTree = ""; }; F93874ED273C4DE200F0E875 /* HomeStore.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = HomeStore.swift; sourceTree = ""; }; @@ -562,6 +564,7 @@ 663FAB9F271D876200E495F8 /* PrimaryButton.swift */, 663FABA1271D876C00E495F8 /* SecondaryButton.swift */, 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */, + 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */, ); path = Buttons; sourceTree = ""; @@ -1000,6 +1003,7 @@ 0DC487C32772574C00BE6A63 /* ValidationSucceededView.swift in Sources */, 0D8A43C4272AEEDE005A6414 /* SecantTextStyles.swift in Sources */, 0D1922F226BDE29300052649 /* ZcashSDKStubs.swift in Sources */, + 9E4DC6E027C409A100E657F4 /* NeumorphicDesignModifier.swift in Sources */, 0DACFA7F27208CE00039EEA5 /* Clamped.swift in Sources */, 0DFE93E3272CA1AA000FCCA5 /* RecoveryPhraseValidation.swift in Sources */, 0D354A0B26D5A9D000315F45 /* MnemonicSeedPhraseHandling.swift in Sources */, diff --git a/secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json new file mode 100644 index 0000000..bacc626 --- /dev/null +++ b/secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.330", + "blue" : "0x36", + "green" : "0x2C", + "red" : "0x27" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.000", + "blue" : "0x36", + "green" : "0x2C", + "red" : "0x27" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json new file mode 100644 index 0000000..ad0beba --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xE2", + "green" : "0xDA", + "red" : "0xD0" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.150", + "blue" : "0xFF", + "green" : "0xFF", + "red" : "0xFF" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json new file mode 100644 index 0000000..f352d21 --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xFF", + "green" : "0xFF", + "red" : "0xFF" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.150", + "blue" : "0xFF", + "green" : "0xFF", + "red" : "0xFF" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json index 6d769e2..2e4c791 100644 --- a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.937", - "green" : "0.863", - "red" : "0.784" + "blue" : "0xFC", + "green" : "0xF8", + "red" : "0xF5" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.937", - "green" : "0.863", - "red" : "0.784" + "blue" : "0xD9", + "green" : "0xC0", + "red" : "0xA7" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json b/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json index 331e3db..d254925 100644 --- a/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xD9", - "green" : "0xC0", - "red" : "0xA7" + "blue" : "0xFC", + "green" : "0xF8", + "red" : "0xF5" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xD9", - "green" : "0xC0", - "red" : "0xA7" + "blue" : "0xEF", + "green" : "0xDC", + "red" : "0xC8" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Onboarding/CircularFrame.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json similarity index 100% rename from secant/Colors.xcassets/Onboarding/CircularFrame.colorset/Contents.json rename to secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json new file mode 100644 index 0000000..f41ea01 --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xFC", + "green" : "0xF8", + "red" : "0xF5" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.514", + "green" : "0.486", + "red" : "0.443" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/Contents.json b/secant/Colors.xcassets/Onboarding/Contents.json new file mode 100644 index 0000000..73c0059 --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json b/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json index 0f20827..8813445 100644 --- a/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json +++ b/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json @@ -20,12 +20,12 @@ } ], "color" : { - "color-space" : "srgb", + "color-space" : "display-p3", "components" : { "alpha" : "1.000", - "blue" : "0.333", - "green" : "0.192", - "red" : "0.141" + "blue" : "0x52", + "green" : "0x31", + "red" : "0x26" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Text/Button.colorset/Contents.json b/secant/Colors.xcassets/Text/Button.colorset/Contents.json index 3d61d2e..96f344f 100644 --- a/secant/Colors.xcassets/Text/Button.colorset/Contents.json +++ b/secant/Colors.xcassets/Text/Button.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0x59", - "green" : "0x35", - "red" : "0x28" + "blue" : "0x47", + "green" : "0x37", + "red" : "0x2D" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "1.000", - "green" : "1.000", - "red" : "1.000" + "blue" : "0x00", + "green" : "0x00", + "red" : "0x00" } }, "idiom" : "universal" diff --git a/secant/Generated/XCAssets+Generated.swift b/secant/Generated/XCAssets+Generated.swift index 822ca1c..8220815 100644 --- a/secant/Generated/XCAssets+Generated.swift +++ b/secant/Generated/XCAssets+Generated.swift @@ -44,9 +44,12 @@ internal enum Asset { } internal enum Buttons { internal static let activeButton = ColorAsset(name: "ActiveButton") + internal static let buttonsTitleShadow = ColorAsset(name: "ButtonsTitleShadow") internal static let createButton = ColorAsset(name: "CreateButton") internal static let createButtonDisabled = ColorAsset(name: "CreateButtonDisabled") internal static let createButtonPressed = ColorAsset(name: "CreateButtonPressed") + internal static let neumorphicDarkSide = ColorAsset(name: "NeumorphicDarkSide") + internal static let neumorphicLightSide = ColorAsset(name: "NeumorphicLightSide") internal static let onboardingNavigation = ColorAsset(name: "OnboardingNavigation") internal static let onboardingNavigationPressed = ColorAsset(name: "OnboardingNavigationPressed") internal static let primaryButton = ColorAsset(name: "PrimaryButton") @@ -56,7 +59,8 @@ internal enum Asset { internal static let secondaryButtonPressed = ColorAsset(name: "SecondaryButtonPressed") } internal enum Onboarding { - internal static let circularFrame = ColorAsset(name: "CircularFrame") + internal static let circularFrameGradientEnd = ColorAsset(name: "CircularFrameGradientEnd") + internal static let circularFrameGradientStart = ColorAsset(name: "CircularFrameGradientStart") internal static let navigationButtonDisabled = ColorAsset(name: "NavigationButtonDisabled") internal static let navigationButtonEnabled = ColorAsset(name: "NavigationButtonEnabled") } diff --git a/secant/Screens/Onboarding/OnboardingContentView.swift b/secant/Screens/Onboarding/OnboardingContentView.swift index 62189a6..6fc2ece 100644 --- a/secant/Screens/Onboarding/OnboardingContentView.swift +++ b/secant/Screens/Onboarding/OnboardingContentView.swift @@ -41,7 +41,7 @@ struct OnboardingContentView: View { } ) ) - .frame(width: width * 0.85, height: width * 0.85) + .frame(width: width * 0.82, height: width * 0.82) .badgeIcons( store.actionless.scope( state: { state in @@ -61,16 +61,15 @@ struct OnboardingContentView: View { VStack(spacing: viewStore.isFinalStep ? 50 : 15) { HStack { Text(viewStore.steps[stepIndex].title) - .font(.custom(FontFamily.Roboto.bold.name, size: 30)) - .fontWeight(.regular) + .titleText() if !viewStore.isFinalStep { Spacer() } } Text(viewStore.steps[stepIndex].description) - .font(.custom(FontFamily.Roboto.regular.name, size: 15)) - .lineSpacing(5) + .bodyText() + .opacity(0.53) } .opacity(stepIndex == viewStore.index ? 1: 0) .padding(.horizontal, 35) @@ -85,7 +84,7 @@ struct OnboardingContentView: View { struct OnboardingContentView_Previews: PreviewProvider { static var previews: some View { let store = Store( - initialState: OnboardingState(index: 2), + initialState: OnboardingState(index: 0), reducer: OnboardingReducer.default, environment: () ) @@ -114,8 +113,9 @@ struct OnboardingContentView_Previews: PreviewProvider { width: proxy.size.width, height: proxy.size.height ) - .preferredColorScheme(.light) } } + .applyScreenBackground() + .preferredColorScheme(.light) } } diff --git a/secant/Screens/Onboarding/OnboardingFooterView.swift b/secant/Screens/Onboarding/OnboardingFooterView.swift index 1da2f56..27c5708 100644 --- a/secant/Screens/Onboarding/OnboardingFooterView.swift +++ b/secant/Screens/Onboarding/OnboardingFooterView.swift @@ -35,18 +35,18 @@ struct OnboardingFooterView: View { } } .primaryButtonStyle - .frame(height: proxy.size.height / 12) - .padding(.horizontal, 15) + .frame(height: 69) + .padding(.horizontal, 28) .transition(.opacity) } ProgressView( - "\(viewStore.index + 1)/\(viewStore.steps.count)", + "0\(viewStore.index + 1)", value: Double(viewStore.index + 1), total: Double(viewStore.steps.count) ) .onboardingProgressStyle - .padding(.horizontal, 30) + .padding(.horizontal, 28) .padding([.vertical], 20) } } @@ -64,10 +64,17 @@ struct OnboardingFooterView_Previews: PreviewProvider { Group { OnboardingFooterView(store: store) + .applyScreenBackground() + .preferredColorScheme(.light) + .previewDevice("iPhone 13 Pro Max") + + OnboardingFooterView(store: store) + .applyScreenBackground() .preferredColorScheme(.dark) .previewDevice("iPhone 13 Pro Max") OnboardingFooterView(store: store) + .applyScreenBackground() .preferredColorScheme(.dark) .previewDevice("iPhone 13 mini") } diff --git a/secant/UIComponents/Buttons/NavigationButtonStyle.swift b/secant/UIComponents/Buttons/NavigationButtonStyle.swift index 6510435..48ed04e 100644 --- a/secant/UIComponents/Buttons/NavigationButtonStyle.swift +++ b/secant/UIComponents/Buttons/NavigationButtonStyle.swift @@ -8,6 +8,8 @@ import SwiftUI struct NavigationButtonStyle: ButtonStyle { + @Environment(\.colorScheme) var colorScheme + func makeBody(configuration: Configuration) -> some View { configuration.label .frame( @@ -23,6 +25,7 @@ struct NavigationButtonStyle: ButtonStyle { Asset.Colors.Buttons.onboardingNavigation.color ) .cornerRadius(.infinity) + .neumorphicDesign(configuration.isPressed) } } @@ -39,12 +42,14 @@ struct NavigationModifier_Previews: PreviewProvider { Button("Back") { dump("Example button") } .navigationButtonStyle .frame(width: 80, height: 40) + .applyScreenBackground() .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.dark) - + Button("Skip") { dump("Example button") } .navigationButtonStyle .frame(width: 80, height: 40) + .applyScreenBackground() .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.light) } diff --git a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift new file mode 100644 index 0000000..231cd0c --- /dev/null +++ b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift @@ -0,0 +1,44 @@ +// +// NeumorphicDesignModifier.swift +// secant-testnet +// +// Created by Lukáš Korba on 21.02.2022. +// + +import SwiftUI + +/// Neumorphic design is charasterictical with two shadows (light & dark) around the button +/// Appereance in our case is influenced by two parameters: +/// - Parameters: +/// - 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 +struct NeumorphicDesign: ViewModifier { + @Environment(\.colorScheme) var colorScheme + let isPressed: Bool + + init(_ isPressed: Bool) { + self.isPressed = isPressed + } + + func body(content: Content) -> some View { + content + .shadow( + color: Asset.Colors.Buttons.neumorphicDarkSide.color, + radius: 10, + x: colorScheme == .light && !isPressed ? 10 : 0, + y: colorScheme == .light && !isPressed ? 10 : 0 + ) + .shadow( + color: Asset.Colors.Buttons.neumorphicLightSide.color, + radius: 10, + x: colorScheme == .light && !isPressed ? -5 : 0, + y: colorScheme == .light && !isPressed ? -5 : 0 + ) + } +} + +extension View { + func neumorphicDesign(_ isPressed: Bool = false) -> some View { + self.modifier(NeumorphicDesign(isPressed)) + } +} diff --git a/secant/UIComponents/Buttons/PrimaryButton.swift b/secant/UIComponents/Buttons/PrimaryButton.swift index fa3245e..47c45f3 100644 --- a/secant/UIComponents/Buttons/PrimaryButton.swift +++ b/secant/UIComponents/Buttons/PrimaryButton.swift @@ -26,11 +26,13 @@ struct PrimaryButton_Previews: PreviewProvider { .frame(width: 250, height: 50) .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.light) + .applyScreenBackground() Button("Primary Button") { dump("Primary button") } .primaryButtonStyle .frame(width: 250, height: 50) .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.dark) + .applyScreenBackground() } } diff --git a/secant/UIComponents/Buttons/StandardButtonStyle.swift b/secant/UIComponents/Buttons/StandardButtonStyle.swift index cfaf75c..e394b63 100644 --- a/secant/UIComponents/Buttons/StandardButtonStyle.swift +++ b/secant/UIComponents/Buttons/StandardButtonStyle.swift @@ -14,6 +14,7 @@ struct StandardButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label + .shadow(color: Asset.Colors.Buttons.buttonsTitleShadow.color, radius: 2, x: 0, y: 2) .frame( minWidth: 0, maxWidth: .infinity, @@ -25,6 +26,7 @@ struct StandardButtonStyle: ButtonStyle { configuration.isPressed ? pressedBackgroundColor : background ) .cornerRadius(12) + .neumorphicDesign(configuration.isPressed) } } diff --git a/secant/UIComponents/CircularFrame/CircularFrame.swift b/secant/UIComponents/CircularFrame/CircularFrame.swift index 74e04f2..b1abc7b 100644 --- a/secant/UIComponents/CircularFrame/CircularFrame.swift +++ b/secant/UIComponents/CircularFrame/CircularFrame.swift @@ -8,20 +8,27 @@ import SwiftUI struct CircularFrame: View { + private let gradient = LinearGradient( + gradient: Gradient(colors: [ + Asset.Colors.Onboarding.circularFrameGradientStart.color, Asset.Colors.Onboarding.circularFrameGradientEnd.color + ]), + startPoint: .leading, + endPoint: .trailing + ) + var body: some View { GeometryReader { proxy in let lineWidth = proxy.size.width * 0.05 Circle() - .stroke(lineWidth: lineWidth) - .foregroundColor(Asset.Colors.Onboarding.circularFrame.color) - // Add two points to the frame to properly mask edges + .stroke(gradient, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)) + // Add two points to the frame to properly mask edges .frame( width: proxy.size.width - lineWidth + 2, height: proxy.size.height - lineWidth + 2, alignment: .center ) - // Update the offset to account for the 2 extra points + // Update the offset to account for the 2 extra points .offset(x: lineWidth / 2 - 1, y: lineWidth / 2 - 1) .shadow(radius: 10) } From 54d9dd2fd9fc4466bd54216a592f6c6475e7d9d9 Mon Sep 17 00:00:00 2001 From: Lukas Korba <62649321+lukaskorba-indiedev@users.noreply.github.com> Date: Tue, 22 Feb 2022 13:50:50 +0100 Subject: [PATCH 02/13] Device specific enhancements Colors and texts updated. Device specific paddings, margins and sizes enhanced --- secant.xcodeproj/project.pbxproj | 4 ++ .../ActiveButton.colorset/Contents.json | 6 +-- .../NeumorphicDarkSide.colorset/Contents.json | 6 +-- .../Contents.json | 6 +-- .../Contents.json | 8 +-- .../PrimaryButton.colorset/Contents.json | 6 +-- .../Contents.json | 6 +-- .../Contents.json | 6 +-- .../Contents.json | 6 +-- .../gradientEnd.colorset/Contents.json | 14 ++--- .../gradientStart.colorset/Contents.json | 14 ++--- .../Onboarding/OnboardingContentView.swift | 51 +++++++++++++++++-- .../Onboarding/OnboardingFooterView.swift | 6 +-- .../Onboarding/OnboardingHeaderView.swift | 3 +- .../Screens/Onboarding/OnboardingScreen.swift | 21 ++++++++ .../Buttons/NeumorphicDesignModifier.swift | 6 +-- .../Buttons/StandardButtonStyle.swift | 6 ++- .../CircularFrame/CircularFrame.swift | 27 ++++------ .../CircularFrameBackground.swift | 16 ++++-- .../CircularFrame/CircularFrameBadge.swift | 6 ++- .../FontStyles/SecantButtonStyles.swift | 23 +++++++++ .../FontStyles/SecantTextStyles.swift | 15 +++++- .../OnboardingProgressIndicator.swift | 8 +-- 23 files changed, 193 insertions(+), 77 deletions(-) create mode 100644 secant/UIComponents/FontStyles/SecantButtonStyles.swift diff --git a/secant.xcodeproj/project.pbxproj b/secant.xcodeproj/project.pbxproj index 86a4388..ca482ab 100644 --- a/secant.xcodeproj/project.pbxproj +++ b/secant.xcodeproj/project.pbxproj @@ -83,6 +83,7 @@ 66D50668271D9B6100E51F0D /* NavigationButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */; }; 66DC733F271D88CC0053CBB6 /* StandardButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66DC733E271D88CC0053CBB6 /* StandardButtonStyle.swift */; }; 9E4DC6E027C409A100E657F4 /* NeumorphicDesignModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */; }; + 9E4DC6E227C4C6B700E657F4 /* SecantButtonStyles.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9E4DC6E127C4C6B700E657F4 /* SecantButtonStyles.swift */; }; F9322DC0273B555C00C105B5 /* NavigationLinks.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9322DBF273B555C00C105B5 /* NavigationLinks.swift */; }; F93673D62742CB840099C6AF /* Previews.swift in Sources */ = {isa = PBXBuildFile; fileRef = F93673D52742CB840099C6AF /* Previews.swift */; }; F93874F0273C4DE200F0E875 /* HomeStore.swift in Sources */ = {isa = PBXBuildFile; fileRef = F93874ED273C4DE200F0E875 /* HomeStore.swift */; }; @@ -211,6 +212,7 @@ 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NavigationButtonStyle.swift; sourceTree = ""; }; 66DC733E271D88CC0053CBB6 /* StandardButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StandardButtonStyle.swift; sourceTree = ""; }; 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NeumorphicDesignModifier.swift; sourceTree = ""; }; + 9E4DC6E127C4C6B700E657F4 /* SecantButtonStyles.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SecantButtonStyles.swift; sourceTree = ""; }; F9322DBF273B555C00C105B5 /* NavigationLinks.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = NavigationLinks.swift; sourceTree = ""; }; F93673D52742CB840099C6AF /* Previews.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Previews.swift; sourceTree = ""; }; F93874ED273C4DE200F0E875 /* HomeStore.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = HomeStore.swift; sourceTree = ""; }; @@ -447,6 +449,7 @@ isa = PBXGroup; children = ( 0D8A43C3272AEEDE005A6414 /* SecantTextStyles.swift */, + 9E4DC6E127C4C6B700E657F4 /* SecantButtonStyles.swift */, ); path = FontStyles; sourceTree = ""; @@ -1009,6 +1012,7 @@ 0D354A0B26D5A9D000315F45 /* MnemonicSeedPhraseHandling.swift in Sources */, 0D535FE2271F9476009A9E3E /* EnumeratedChip.swift in Sources */, 6654C73E2715A41300901167 /* OnboardingStore.swift in Sources */, + 9E4DC6E227C4C6B700E657F4 /* SecantButtonStyles.swift in Sources */, 0DDB6A5127737D4A0012A410 /* ValidationFailedView.swift in Sources */, 0D6D628B276A528E002FB4CC /* DropDelegate.swift in Sources */, F9971A5327680DD000A2DB75 /* Profile.swift in Sources */, diff --git a/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json index 70e2d1d..4c8b3ab 100644 --- a/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.000", - "green" : "0.725", - "red" : "1.000" + "blue" : "0x00", + "green" : "0xB9", + "red" : "0xFF" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json index ad0beba..cdf8f90 100644 --- a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xE2", - "green" : "0xDA", - "red" : "0xD0" + "blue" : "0xD1", + "green" : "0xB8", + "red" : "0xA1" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json index f352d21..a1ea3d0 100644 --- a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xFF", - "green" : "0xFF", - "red" : "0xFF" + "blue" : "0xFD", + "green" : "0xFA", + "red" : "0xF7" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json index 2e4c791..20a49e8 100644 --- a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json @@ -2,12 +2,12 @@ "colors" : [ { "color" : { - "color-space" : "srgb", + "color-space" : "display-p3", "components" : { "alpha" : "1.000", - "blue" : "0xFC", - "green" : "0xF8", - "red" : "0xF5" + "blue" : "0xFD", + "green" : "0xF7", + "red" : "0xF1" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json b/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json index ac00bc9..f00d590 100644 --- a/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.984", - "green" : "0.953", - "red" : "0.910" + "blue" : "0xFD", + "green" : "0xF7", + "red" : "0xF1" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json b/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json index 1007663..532ece0 100644 --- a/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.996", - "green" : "0.988", - "red" : "0.984" + "blue" : "253", + "green" : "250", + "red" : "244" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json index 55d46ab..f43fea7 100644 --- a/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json +++ b/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.902", - "green" : "0.867", - "red" : "0.804" + "blue" : "233", + "green" : "221", + "red" : "209" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json index f41ea01..2461047 100644 --- a/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json +++ b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xFC", - "green" : "0xF8", - "red" : "0xF5" + "blue" : "0xFD", + "green" : "0xF7", + "red" : "0xF1" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json b/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json index ded04f0..a043fd9 100644 --- a/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json +++ b/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json @@ -2,12 +2,12 @@ "colors" : [ { "color" : { - "color-space" : "extended-linear-srgb", + "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xF3", - "green" : "0xE4", - "red" : "0xD2" + "blue" : "243", + "green" : "228", + "red" : "210" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0x5A", - "green" : "0x36", - "red" : "0x29" + "blue" : "0x55", + "green" : "0x31", + "red" : "0x24" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json b/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json index dd90c61..f526c8b 100644 --- a/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json +++ b/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json @@ -2,12 +2,12 @@ "colors" : [ { "color" : { - "color-space" : "display-p3", + "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xF9", - "green" : "0xEF", - "red" : "0xE3" + "blue" : "249", + "green" : "239", + "red" : "227" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0x55", - "green" : "0x31", - "red" : "0x24" + "blue" : "0x5A", + "green" : "0x36", + "red" : "0x29" } }, "idiom" : "universal" diff --git a/secant/Screens/Onboarding/OnboardingContentView.swift b/secant/Screens/Onboarding/OnboardingContentView.swift index 6fc2ece..19ee1a5 100644 --- a/secant/Screens/Onboarding/OnboardingContentView.swift +++ b/secant/Screens/Onboarding/OnboardingContentView.swift @@ -41,7 +41,7 @@ struct OnboardingContentView: View { } ) ) - .frame(width: width * 0.82, height: width * 0.82) + .frame(width: circularFrameUniformSize(), height: circularFrameUniformSize()) .badgeIcons( store.actionless.scope( state: { state in @@ -52,7 +52,7 @@ struct OnboardingContentView: View { } ) ) - .offset(y: viewStore.offset - height / 7) + .offset(y: viewStore.offset - height / circularFrameOffsetCoeff()) .transition(.scale(scale: 2).combined(with: .opacity)) } } @@ -62,13 +62,16 @@ struct OnboardingContentView: View { HStack { Text(viewStore.steps[stepIndex].title) .titleText() + .lineLimit(0) + .minimumScaleFactor(0.1) if !viewStore.isFinalStep { Spacer() } } Text(viewStore.steps[stepIndex].description) - .bodyText() + .synopsisText() + .lineSpacing(2) .opacity(0.53) } .opacity(stepIndex == viewStore.index ? 1: 0) @@ -76,11 +79,37 @@ struct OnboardingContentView: View { .frame(width: width, height: height) } } - .offset(y: viewStore.isFinalStep ? width / 2.3 : viewStore.offset + width / 2.3) + .offset(y: viewStore.isFinalStep ? width / 2.5 : viewStore.offset + height / descriptionOffsetCoeff()) } } } +/// Following computations are necessary to handle properly sizing and positioning of elements +/// 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. +extension OnboardingContentView { + func circularFrameUniformSize() -> CGFloat { + let aspect = height / width + let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0) + + return width * (0.6 * deviceMultiplier) + } + + func circularFrameOffsetCoeff() -> CGFloat { + let aspect = height / width + let deviceMultiplier = aspect / 1.725 + + return 4.4 * deviceMultiplier + } + + func descriptionOffsetCoeff() -> Double { + let aspect = height / width + let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5) + + return 8.0 / deviceMultiplier + } +} + struct OnboardingContentView_Previews: PreviewProvider { static var previews: some View { let store = Store( @@ -88,6 +117,20 @@ struct OnboardingContentView_Previews: PreviewProvider { reducer: OnboardingReducer.default, environment: () ) + + OnboardingContentView_Previews.example(store) + .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)")) + + OnboardingContentView_Previews.example(store) + .previewDevice(PreviewDevice(rawValue: "iPhone 8")) + + OnboardingContentView_Previews.example(store) + .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) + } +} + +extension OnboardingContentView_Previews { + static func example(_ store: Store) -> some View { GeometryReader { proxy in ZStack { OnboardingHeaderView( diff --git a/secant/Screens/Onboarding/OnboardingFooterView.swift b/secant/Screens/Onboarding/OnboardingFooterView.swift index 27c5708..060b345 100644 --- a/secant/Screens/Onboarding/OnboardingFooterView.swift +++ b/secant/Screens/Onboarding/OnboardingFooterView.swift @@ -35,7 +35,7 @@ struct OnboardingFooterView: View { } } .primaryButtonStyle - .frame(height: 69) + .frame(height: 60) .padding(.horizontal, 28) .transition(.opacity) } @@ -46,8 +46,8 @@ struct OnboardingFooterView: View { total: Double(viewStore.steps.count) ) .onboardingProgressStyle - .padding(.horizontal, 28) - .padding([.vertical], 20) + .padding(.horizontal, 30) + .padding(.vertical, 20) } } } diff --git a/secant/Screens/Onboarding/OnboardingHeaderView.swift b/secant/Screens/Onboarding/OnboardingHeaderView.swift index f424df5..9df7987 100644 --- a/secant/Screens/Onboarding/OnboardingHeaderView.swift +++ b/secant/Screens/Onboarding/OnboardingHeaderView.swift @@ -55,7 +55,7 @@ struct OnboardingHeaderView: View { Spacer() } - .padding(.top, 20) + .padding(.top, 5) } } } @@ -85,5 +85,6 @@ struct OnboardingHeaderView_Previews: PreviewProvider { ) ) .preferredColorScheme(.light) + .applyScreenBackground() } } diff --git a/secant/Screens/Onboarding/OnboardingScreen.swift b/secant/Screens/Onboarding/OnboardingScreen.swift index b6779fd..f4c4eb2 100644 --- a/secant/Screens/Onboarding/OnboardingScreen.swift +++ b/secant/Screens/Onboarding/OnboardingScreen.swift @@ -56,5 +56,26 @@ struct OnboardingScreen_Previews: PreviewProvider { ) ) .preferredColorScheme(.light) + .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.light) + .previewDevice(PreviewDevice(rawValue: "iPhone 8")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.light) + .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) } } diff --git a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift index 231cd0c..408efb6 100644 --- a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift +++ b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift @@ -24,15 +24,15 @@ struct NeumorphicDesign: ViewModifier { content .shadow( color: Asset.Colors.Buttons.neumorphicDarkSide.color, - radius: 10, + radius: 15, x: colorScheme == .light && !isPressed ? 10 : 0, y: colorScheme == .light && !isPressed ? 10 : 0 ) .shadow( color: Asset.Colors.Buttons.neumorphicLightSide.color, radius: 10, - x: colorScheme == .light && !isPressed ? -5 : 0, - y: colorScheme == .light && !isPressed ? -5 : 0 + x: colorScheme == .light && !isPressed ? -12 : 0, + y: colorScheme == .light && !isPressed ? -12 : 0 ) } } diff --git a/secant/UIComponents/Buttons/StandardButtonStyle.swift b/secant/UIComponents/Buttons/StandardButtonStyle.swift index e394b63..653fde9 100644 --- a/secant/UIComponents/Buttons/StandardButtonStyle.swift +++ b/secant/UIComponents/Buttons/StandardButtonStyle.swift @@ -8,6 +8,8 @@ import SwiftUI struct StandardButtonStyle: ButtonStyle { + @Environment(\.isEnabled) private var isEnabled: Bool + let foregroundColor: Color let background: Color let pressedBackgroundColor: Color @@ -23,7 +25,9 @@ struct StandardButtonStyle: ButtonStyle { ) .foregroundColor(foregroundColor) .background( - configuration.isPressed ? pressedBackgroundColor : background + isEnabled ? + (configuration.isPressed ? pressedBackgroundColor : background) + : .red ) .cornerRadius(12) .neumorphicDesign(configuration.isPressed) diff --git a/secant/UIComponents/CircularFrame/CircularFrame.swift b/secant/UIComponents/CircularFrame/CircularFrame.swift index b1abc7b..bacc5f9 100644 --- a/secant/UIComponents/CircularFrame/CircularFrame.swift +++ b/secant/UIComponents/CircularFrame/CircularFrame.swift @@ -9,28 +9,20 @@ import SwiftUI struct CircularFrame: View { private let gradient = LinearGradient( - gradient: Gradient(colors: [ - Asset.Colors.Onboarding.circularFrameGradientStart.color, Asset.Colors.Onboarding.circularFrameGradientEnd.color - ]), - startPoint: .leading, - endPoint: .trailing + colors: [ + Asset.Colors.Onboarding.circularFrameGradientStart.color, + Asset.Colors.Onboarding.circularFrameGradientEnd.color + ], + startPoint: .topLeading, + endPoint: .bottomTrailing ) var body: some View { GeometryReader { proxy in - let lineWidth = proxy.size.width * 0.05 - + let lineWidth = proxy.size.width * 0.06 + Circle() - .stroke(gradient, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)) - // Add two points to the frame to properly mask edges - .frame( - width: proxy.size.width - lineWidth + 2, - height: proxy.size.height - lineWidth + 2, - alignment: .center - ) - // Update the offset to account for the 2 extra points - .offset(x: lineWidth / 2 - 1, y: lineWidth / 2 - 1) - .shadow(radius: 10) + .stroke(gradient, style: StrokeStyle(lineWidth: lineWidth)) } } } @@ -123,5 +115,6 @@ struct CircularFrame_Previews: PreviewProvider { CircularFramePreviewHelper() .preferredColorScheme(.light) .previewLayout(.device) + .applyScreenBackground() } } diff --git a/secant/UIComponents/CircularFrame/CircularFrameBackground.swift b/secant/UIComponents/CircularFrame/CircularFrameBackground.swift index 36fcd16..b9a02a2 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBackground.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBackground.swift @@ -26,6 +26,7 @@ struct CircularFrameBackgroundImages: Animatable, ViewModifier { .opacity(imageIndex == viewStore.index ? 1 : 0) .offset(x: imageIndex <= viewStore.index ? 0 : 25) .mask(Circle()) + .neumorphicDesign() } content @@ -43,6 +44,7 @@ struct CircularFrameBackgroundImage: Animatable, ViewModifier { .resizable() .aspectRatio(1.3, contentMode: .fill) .mask(Circle()) + .neumorphicDesign() content } @@ -66,18 +68,26 @@ struct CircularFrameBackground_Previews: PreviewProvider { CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout0.image) .frame(width: 300, height: 300) - + .applyScreenBackground() + .neumorphicDesign() + CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout1.image) .frame(width: 300, height: 300) - + .applyScreenBackground() + .neumorphicDesign() + CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout2.image) .frame(width: 300, height: 300) - + .applyScreenBackground() + .neumorphicDesign() + CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout3.image) .frame(width: 300, height: 300) + .applyScreenBackground() + .neumorphicDesign() } .preferredColorScheme(.light) .previewLayout(.fixed(width: size + 50, height: size + 50)) diff --git a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift index 797e66c..e587a92 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift @@ -74,9 +74,10 @@ struct BadgesOverlay: Animatable, ViewModifier { ) .offset( x: 4.0, - y: proxy.size.height * 0.15 + y: proxy.size.height * 0.18 ) .opacity(badgeIndex == viewStore.index ? 1 : 0) + .shadow(color: .white, radius: 10, x: 0, y: 0) } } @@ -110,10 +111,11 @@ struct BadgeOverlay: Animatable, ViewModifier { ) .offset( x: 4.0, - y: proxy.size.height * 0.15 + y: proxy.size.height * 0.18 ) .transition(.scale(scale: 2)) .transition(.opacity) + .shadow(color: .white, radius: 10, x: 0, y: 0) Spacer() } } diff --git a/secant/UIComponents/FontStyles/SecantButtonStyles.swift b/secant/UIComponents/FontStyles/SecantButtonStyles.swift new file mode 100644 index 0000000..01bb3af --- /dev/null +++ b/secant/UIComponents/FontStyles/SecantButtonStyles.swift @@ -0,0 +1,23 @@ +// +// SecantButtonStyles.swift +// secant-testnet +// +// Created by Lukáš Korba on 22.02.2022. +// + +import SwiftUI + +extension Button { + func titleText() -> some View { + self.modifier(TitleTextStyle()) + } + + private struct TitleTextStyle: ViewModifier { + func body(content: Content) -> some View { + content + .foregroundColor(Asset.Colors.Text.heading.color) + .font(.custom(FontFamily.Rubik.regular.name, size: 15)) + .shadow(color: Asset.Colors.Text.captionTextShadow.color, radius: 1, x: 0, y: 1) + } + } +} diff --git a/secant/UIComponents/FontStyles/SecantTextStyles.swift b/secant/UIComponents/FontStyles/SecantTextStyles.swift index 9c8bc97..debe65b 100644 --- a/secant/UIComponents/FontStyles/SecantTextStyles.swift +++ b/secant/UIComponents/FontStyles/SecantTextStyles.swift @@ -21,6 +21,10 @@ extension Text { self.modifier(TitleTextStyle()) } + func synopsisText() -> some View { + self.modifier(SynopsisStyle()) + } + /// Body text style. Used for content. Roboto-Regular 18pt private struct BodyTextStyle: ViewModifier { func body(content: Content) -> some View { @@ -30,11 +34,20 @@ extension Text { } } + /// Used for additional information, explanations, context (usually paragraphs) + private struct SynopsisStyle: ViewModifier { + func body(content: Content) -> some View { + content + .foregroundColor(Asset.Colors.Text.heading.color) + .font(.custom(FontFamily.Rubik.regular.name, size: 16)) + } + } + private struct TitleTextStyle: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Asset.Colors.Text.heading.color) - .font(.custom(FontFamily.Rubik.regular.name, size: 33)) + .font(.custom(FontFamily.Rubik.regular.name, size: 33, relativeTo: .callout)) .shadow(color: Asset.Colors.Text.captionTextShadow.color, radius: 1, x: 0, y: 1) } } diff --git a/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift b/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift index 3c4c961..7c6ab26 100644 --- a/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift +++ b/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift @@ -15,8 +15,8 @@ struct OnboardingProgressStyle: ProgressViewStyle { Asset.Colors.ProgressIndicator.gradientLeft.color, Asset.Colors.ProgressIndicator.gradientRight.color ], - startPoint: UnitPoint(x: 0.00, y: 0.00), - endPoint: UnitPoint(x: 1.00, y: 0.00) + startPoint: .leading, + endPoint: .trailing ) func makeBody(configuration: Configuration) -> some View { @@ -25,7 +25,9 @@ struct OnboardingProgressStyle: ProgressViewStyle { return VStack { HStack { configuration.label - .foregroundColor(Asset.Colors.ProgressIndicator.negativeSpace.color) + .foregroundColor(Asset.Colors.Text.heading.color) + .font(.custom(FontFamily.Rubik.regular.name, size: 16)) + .opacity(0.3) Spacer() } From bbf5498fe2ed59c7252b93603a3ac50c7a79bc85 Mon Sep 17 00:00:00 2001 From: Lukas Korba <62649321+lukaskorba-indiedev@users.noreply.github.com> Date: Tue, 22 Feb 2022 15:02:16 +0100 Subject: [PATCH 03/13] Dark appearance Tweaks for the dark version of the onboarding UI --- .../Contents.json | 38 ++++++++++++++++ .../Contents.json | 38 ++++++++++++++++ .../NeumorphicDarkSide.colorset/Contents.json | 8 ++-- .../Contents.json | 8 ++-- .../Contents.json | 6 +-- .../PrimaryButton.colorset/Contents.json | 6 +-- .../BadgeShadow.colorset/Contents.json | 38 ++++++++++++++++ .../Contents.json | 38 ++++++++++++++++ .../Contents.json | 38 ++++++++++++++++ .../Contents.json | 6 +-- .../Contents.json | 6 +-- secant/Generated/XCAssets+Generated.swift | 5 +++ .../Screens/Onboarding/OnboardingScreen.swift | 30 +++++++++++++ .../Buttons/NavigationButtonStyle.swift | 2 +- .../Buttons/NeumorphicDesignModifier.swift | 39 ++++++++++++++-- .../Buttons/StandardButtonStyle.swift | 2 +- .../CircularFrame/CircularFrame.swift | 45 ++++++++++++++----- .../CircularFrame/CircularFrameBadge.swift | 8 ++-- 18 files changed, 321 insertions(+), 40 deletions(-) create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json diff --git a/secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json new file mode 100644 index 0000000..f3443f3 --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.820", + "green" : "0.722", + "red" : "0.631" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.150", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json new file mode 100644 index 0000000..bcca9cb --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.992", + "green" : "0.980", + "red" : "0.969" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.150", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json index cdf8f90..b9557e9 100644 --- a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json @@ -22,10 +22,10 @@ "color" : { "color-space" : "srgb", "components" : { - "alpha" : "0.150", - "blue" : "0xFF", - "green" : "0xFF", - "red" : "0xFF" + "alpha" : "1.000", + "blue" : "69", + "green" : "32", + "red" : "19" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json index a1ea3d0..d6c1023 100644 --- a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json @@ -22,10 +22,10 @@ "color" : { "color-space" : "srgb", "components" : { - "alpha" : "0.150", - "blue" : "0xFF", - "green" : "0xFF", - "red" : "0xFF" + "alpha" : "1.000", + "blue" : "88", + "green" : "50", + "red" : "40" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json index 20a49e8..dc1be31 100644 --- a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xD9", - "green" : "0xC0", - "red" : "0xA7" + "blue" : "217", + "green" : "192", + "red" : "167" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json b/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json index f00d590..e6b0b43 100644 --- a/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.851", - "green" : "0.753", - "red" : "0.655" + "blue" : "217", + "green" : "192", + "red" : "167" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json new file mode 100644 index 0000000..53c9a8f --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "69", + "green" : "32", + "red" : "19" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json new file mode 100644 index 0000000..14c25de --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "66", + "green" : "30", + "red" : "21" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json new file mode 100644 index 0000000..a70129b --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "117", + "green" : "80", + "red" : "69" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json index f43fea7..3639817 100644 --- a/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json +++ b/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.514", - "green" : "0.486", - "red" : "0.443" + "blue" : "106", + "green" : "63", + "red" : "44" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json index 2461047..b2161d7 100644 --- a/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json +++ b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.514", - "green" : "0.486", - "red" : "0.443" + "blue" : "0x62", + "green" : "0x33", + "red" : "0x22" } }, "idiom" : "universal" diff --git a/secant/Generated/XCAssets+Generated.swift b/secant/Generated/XCAssets+Generated.swift index 8220815..c965037 100644 --- a/secant/Generated/XCAssets+Generated.swift +++ b/secant/Generated/XCAssets+Generated.swift @@ -48,6 +48,8 @@ internal enum Asset { internal static let createButton = ColorAsset(name: "CreateButton") internal static let createButtonDisabled = ColorAsset(name: "CreateButtonDisabled") internal static let createButtonPressed = ColorAsset(name: "CreateButtonPressed") + internal static let neumorphicButtonDarkSide = ColorAsset(name: "NeumorphicButtonDarkSide") + 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") @@ -59,6 +61,9 @@ internal enum Asset { internal static let secondaryButtonPressed = ColorAsset(name: "SecondaryButtonPressed") } internal enum Onboarding { + internal static let badgeShadow = ColorAsset(name: "BadgeShadow") + internal static let circularFrameDarkOutlineGradientEnd = ColorAsset(name: "CircularFrameDarkOutlineGradientEnd") + internal static let circularFrameDarkOutlineGradientStart = ColorAsset(name: "CircularFrameDarkOutlineGradientStart") internal static let circularFrameGradientEnd = ColorAsset(name: "CircularFrameGradientEnd") internal static let circularFrameGradientStart = ColorAsset(name: "CircularFrameGradientStart") internal static let navigationButtonDisabled = ColorAsset(name: "NavigationButtonDisabled") diff --git a/secant/Screens/Onboarding/OnboardingScreen.swift b/secant/Screens/Onboarding/OnboardingScreen.swift index f4c4eb2..b234617 100644 --- a/secant/Screens/Onboarding/OnboardingScreen.swift +++ b/secant/Screens/Onboarding/OnboardingScreen.swift @@ -77,5 +77,35 @@ struct OnboardingScreen_Previews: PreviewProvider { ) .preferredColorScheme(.light) .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.dark) + .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.dark) + .previewDevice(PreviewDevice(rawValue: "iPhone 8")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.dark) + .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) } } diff --git a/secant/UIComponents/Buttons/NavigationButtonStyle.swift b/secant/UIComponents/Buttons/NavigationButtonStyle.swift index 48ed04e..127f612 100644 --- a/secant/UIComponents/Buttons/NavigationButtonStyle.swift +++ b/secant/UIComponents/Buttons/NavigationButtonStyle.swift @@ -25,7 +25,7 @@ struct NavigationButtonStyle: ButtonStyle { Asset.Colors.Buttons.onboardingNavigation.color ) .cornerRadius(.infinity) - .neumorphicDesign(configuration.isPressed) + .neumorphicButtonDesign(configuration.isPressed) } } diff --git a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift index 408efb6..d01c136 100644 --- a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift +++ b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift @@ -7,7 +7,7 @@ import SwiftUI -/// Neumorphic design is charasterictical with two shadows (light & dark) around the button +/// Neumorphic design is charasterictical with two shadows (light & dark) around the view /// Appereance in our case is influenced by two parameters: /// - Parameters: /// - colorScheme: The light is using full neumorphic design while dark is limited to soft shadow only @@ -25,20 +25,53 @@ struct NeumorphicDesign: ViewModifier { .shadow( color: Asset.Colors.Buttons.neumorphicDarkSide.color, radius: 15, + x: colorScheme == .light && !isPressed ? 10 : -10, + y: colorScheme == .light && !isPressed ? 10 : 10 + ) + .shadow( + color: Asset.Colors.Buttons.neumorphicLightSide.color, + radius: 10, + x: colorScheme == .light && !isPressed ? -12 : 12, + y: colorScheme == .light && !isPressed ? -12 : -12 + ) + } +} + +/// Neumorphic design is charasterictical with two shadows (light & dark) around the button +/// Appereance in our case is influenced by two parameters: +/// - Parameters: +/// - 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 +struct NeumorphicButtonDesign: ViewModifier { + @Environment(\.colorScheme) var colorScheme + let isPressed: Bool + + init(_ isPressed: Bool) { + self.isPressed = isPressed + } + + func body(content: Content) -> some View { + content + .shadow( + color: Asset.Colors.Buttons.neumorphicButtonDarkSide.color, + radius: 15, x: colorScheme == .light && !isPressed ? 10 : 0, y: colorScheme == .light && !isPressed ? 10 : 0 ) .shadow( - color: Asset.Colors.Buttons.neumorphicLightSide.color, + color: Asset.Colors.Buttons.neumorphicButtonLightSide.color, radius: 10, x: colorScheme == .light && !isPressed ? -12 : 0, y: colorScheme == .light && !isPressed ? -12 : 0 ) } } - extension View { func neumorphicDesign(_ isPressed: Bool = false) -> some View { self.modifier(NeumorphicDesign(isPressed)) } + + func neumorphicButtonDesign(_ isPressed: Bool = false) -> some View { + self.modifier(NeumorphicButtonDesign(isPressed)) + } } diff --git a/secant/UIComponents/Buttons/StandardButtonStyle.swift b/secant/UIComponents/Buttons/StandardButtonStyle.swift index 653fde9..e5d9fd1 100644 --- a/secant/UIComponents/Buttons/StandardButtonStyle.swift +++ b/secant/UIComponents/Buttons/StandardButtonStyle.swift @@ -30,7 +30,7 @@ struct StandardButtonStyle: ButtonStyle { : .red ) .cornerRadius(12) - .neumorphicDesign(configuration.isPressed) + .neumorphicButtonDesign(configuration.isPressed) } } diff --git a/secant/UIComponents/CircularFrame/CircularFrame.swift b/secant/UIComponents/CircularFrame/CircularFrame.swift index bacc5f9..bbfeb27 100644 --- a/secant/UIComponents/CircularFrame/CircularFrame.swift +++ b/secant/UIComponents/CircularFrame/CircularFrame.swift @@ -8,21 +8,44 @@ import SwiftUI struct CircularFrame: View { - private let gradient = LinearGradient( - colors: [ - Asset.Colors.Onboarding.circularFrameGradientStart.color, - Asset.Colors.Onboarding.circularFrameGradientEnd.color - ], - startPoint: .topLeading, - endPoint: .bottomTrailing - ) - + @Environment(\.colorScheme) var colorScheme + var body: some View { GeometryReader { proxy in let lineWidth = proxy.size.width * 0.06 Circle() - .stroke(gradient, style: StrokeStyle(lineWidth: lineWidth)) + .stroke( + LinearGradient( + colors: [ + Asset.Colors.Onboarding.circularFrameGradientStart.color, + Asset.Colors.Onboarding.circularFrameGradientEnd.color + ], + startPoint: colorScheme == .light ? .topLeading : .top, + endPoint: colorScheme == .light ? .bottomTrailing : .bottom + ), + style: StrokeStyle( + lineWidth: lineWidth + ) + ) + .padding(colorScheme == .light ? 0 : 10) + + if colorScheme == .dark { + Circle() + .stroke( + LinearGradient( + colors: [ + Asset.Colors.Onboarding.circularFrameDarkOutlineGradientStart.color, + Asset.Colors.Onboarding.circularFrameDarkOutlineGradientEnd.color + ], + startPoint: .top, + endPoint: .bottom + ), + style: StrokeStyle( + lineWidth: lineWidth * 0.15 + ) + ) + } } } } @@ -113,7 +136,7 @@ struct CircularFramePreviewHelper: View { struct CircularFrame_Previews: PreviewProvider { static var previews: some View { CircularFramePreviewHelper() - .preferredColorScheme(.light) + .preferredColorScheme(.dark) .previewLayout(.device) .applyScreenBackground() } diff --git a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift index e587a92..17cf7b6 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift @@ -74,10 +74,10 @@ struct BadgesOverlay: Animatable, ViewModifier { ) .offset( x: 4.0, - y: proxy.size.height * 0.18 + y: proxy.size.height * 0.15 ) .opacity(badgeIndex == viewStore.index ? 1 : 0) - .shadow(color: .white, radius: 10, x: 0, y: 0) + .shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0) } } @@ -111,11 +111,11 @@ struct BadgeOverlay: Animatable, ViewModifier { ) .offset( x: 4.0, - y: proxy.size.height * 0.18 + y: proxy.size.height * 0.15 ) .transition(.scale(scale: 2)) .transition(.opacity) - .shadow(color: .white, radius: 10, x: 0, y: 0) + .shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0) Spacer() } } From e1c1ec62e7db1ac7974e4c5210f7534f10f9eb7b Mon Sep 17 00:00:00 2001 From: Lukas Korba <62649321+lukaskorba-indiedev@users.noreply.github.com> Date: Tue, 22 Feb 2022 15:10:53 +0100 Subject: [PATCH 04/13] Update of the comments --- secant/UIComponents/Buttons/NeumorphicDesignModifier.swift | 4 +++- secant/UIComponents/FontStyles/SecantButtonStyles.swift | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift index d01c136..4e6825e 100644 --- a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift +++ b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift @@ -2,7 +2,7 @@ // NeumorphicDesignModifier.swift // secant-testnet // -// Created by Lukáš Korba on 21.02.2022. +// Created by Lukáš Korba on 02/21/22. // import SwiftUI @@ -12,6 +12,7 @@ import SwiftUI /// - Parameters: /// - 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 +/// This design is mostly used for CircularFrame, not designed for a button (see NeumorphicButtonDesign) struct NeumorphicDesign: ViewModifier { @Environment(\.colorScheme) var colorScheme let isPressed: Bool @@ -42,6 +43,7 @@ struct NeumorphicDesign: ViewModifier { /// - Parameters: /// - 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 +/// This design is specifically crafted for buttons. The colors and positions of the shadows are different. struct NeumorphicButtonDesign: ViewModifier { @Environment(\.colorScheme) var colorScheme let isPressed: Bool diff --git a/secant/UIComponents/FontStyles/SecantButtonStyles.swift b/secant/UIComponents/FontStyles/SecantButtonStyles.swift index 01bb3af..a2f893f 100644 --- a/secant/UIComponents/FontStyles/SecantButtonStyles.swift +++ b/secant/UIComponents/FontStyles/SecantButtonStyles.swift @@ -2,7 +2,7 @@ // SecantButtonStyles.swift // secant-testnet // -// Created by Lukáš Korba on 22.02.2022. +// Created by Lukáš Korba on 02/22/22. // import SwiftUI From 8931433f8e6a3f210296aafa4a5543b9250d52aa Mon Sep 17 00:00:00 2001 From: Lukas Korba <62649321+lukaskorba-indiedev@users.noreply.github.com> Date: Tue, 22 Feb 2022 15:44:29 +0100 Subject: [PATCH 05/13] Button UI updates Colors updated, pressed button simulated and present in the DesignGuide.swift --- .../Contents.json | 38 +++++++++++++++++++ .../Contents.json | 38 +++++++++++++++++++ .../Contents.json | 6 +-- .../SecondaryButton.colorset/Contents.json | 2 +- .../Contents.json | 14 +++---- .../Features/Onboarding/OnboardingStore.swift | 4 ++ secant/Generated/XCAssets+Generated.swift | 2 + .../Onboarding/OnboardingFooterView.swift | 30 ++++++++++----- .../UIComponents/Buttons/ActiveButton.swift | 3 +- .../UIComponents/Buttons/CreateButton.swift | 3 +- .../UIComponents/Buttons/PrimaryButton.swift | 5 ++- .../Buttons/SecondaryButton.swift | 3 +- .../Buttons/StandardButtonStyle.swift | 8 ++-- secant/UIComponents/DesignGuide.swift | 38 ++++++++++++++++--- 14 files changed, 160 insertions(+), 34 deletions(-) create mode 100644 secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/ActiveButtonPressed.colorset/Contents.json diff --git a/secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json new file mode 100644 index 0000000..3b7019f --- /dev/null +++ b/secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.341", + "green" : "0.200", + "red" : "0.149" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.200", + "blue" : "0x28", + "green" : "0xB7", + "red" : "0xF4" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/ActiveButtonPressed.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ActiveButtonPressed.colorset/Contents.json new file mode 100644 index 0000000..79f02bd --- /dev/null +++ b/secant/Colors.xcassets/Buttons/ActiveButtonPressed.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0x57", + "green" : "0x33", + "red" : "0x26" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.000", + "green" : "0.847", + "red" : "1.000" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json b/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json index acf7c64..fbcdfe7 100644 --- a/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "0.200", - "blue" : "0.933", - "green" : "0.863", - "red" : "0.780" + "blue" : "0xEF", + "green" : "0xDC", + "red" : "0xC8" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json b/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json index e307ac7..c0e5998 100644 --- a/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json @@ -4,7 +4,7 @@ "color" : { "color-space" : "srgb", "components" : { - "alpha" : "1.000", + "alpha" : "0.000", "blue" : "0xFF", "green" : "0xFF", "red" : "0xFF" diff --git a/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json b/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json index def8338..763c69e 100644 --- a/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "1.000", - "green" : "1.000", - "red" : "1.000" + "blue" : "246", + "green" : "234", + "red" : "222" } }, "idiom" : "universal" @@ -22,10 +22,10 @@ "color" : { "color-space" : "srgb", "components" : { - "alpha" : "0.200", - "blue" : "1.000", - "green" : "1.000", - "red" : "1.000" + "alpha" : "1.000", + "blue" : "106", + "green" : "72", + "red" : "61" } }, "idiom" : "universal" diff --git a/secant/Features/Onboarding/OnboardingStore.swift b/secant/Features/Onboarding/OnboardingStore.swift index 55b0660..6404520 100644 --- a/secant/Features/Onboarding/OnboardingStore.swift +++ b/secant/Features/Onboarding/OnboardingStore.swift @@ -39,6 +39,7 @@ enum OnboardingAction: Equatable { case back case skip case createNewWallet + case importExistingWallet } typealias OnboardingReducer = Reducer @@ -69,6 +70,9 @@ extension OnboardingReducer { case .createNewWallet: return .none + + case .importExistingWallet: + return .none } } } diff --git a/secant/Generated/XCAssets+Generated.swift b/secant/Generated/XCAssets+Generated.swift index c965037..c605759 100644 --- a/secant/Generated/XCAssets+Generated.swift +++ b/secant/Generated/XCAssets+Generated.swift @@ -44,6 +44,8 @@ internal enum Asset { } internal enum Buttons { internal static let activeButton = ColorAsset(name: "ActiveButton") + internal static let activeButtonDisabled = ColorAsset(name: "ActiveButtonDisabled") + internal static let activeButtonPressed = ColorAsset(name: "ActiveButtonPressed") internal static let buttonsTitleShadow = ColorAsset(name: "ButtonsTitleShadow") internal static let createButton = ColorAsset(name: "CreateButton") internal static let createButtonDisabled = ColorAsset(name: "CreateButtonDisabled") diff --git a/secant/Screens/Onboarding/OnboardingFooterView.swift b/secant/Screens/Onboarding/OnboardingFooterView.swift index 060b345..3a34e49 100644 --- a/secant/Screens/Onboarding/OnboardingFooterView.swift +++ b/secant/Screens/Onboarding/OnboardingFooterView.swift @@ -28,6 +28,16 @@ struct OnboardingFooterView: View { .frame(height: proxy.size.height / 12) .padding(.horizontal, 15) .transition(.opacity) + + Button("Import an Existing Wallet") { + withAnimation(.easeInOut(duration: animationDuration)) { + viewStore.send(.createNewWallet) + } + } + .secondaryButtonStyle + .frame(height: proxy.size.height / 12) + .padding(.horizontal, 15) + .transition(.opacity) } else { Button("Next") { withAnimation(.easeInOut(duration: animationDuration)) { @@ -38,16 +48,16 @@ struct OnboardingFooterView: View { .frame(height: 60) .padding(.horizontal, 28) .transition(.opacity) - } - ProgressView( - "0\(viewStore.index + 1)", - value: Double(viewStore.index + 1), - total: Double(viewStore.steps.count) - ) - .onboardingProgressStyle - .padding(.horizontal, 30) - .padding(.vertical, 20) + ProgressView( + "0\(viewStore.index + 1)", + value: Double(viewStore.index + 1), + total: Double(viewStore.steps.count) + ) + .onboardingProgressStyle + .padding(.horizontal, 30) + .padding(.vertical, 20) + } } } } @@ -57,7 +67,7 @@ struct OnboardingFooterView: View { struct OnboardingFooterView_Previews: PreviewProvider { static var previews: some View { let store = Store( - initialState: OnboardingState(index: 0), + initialState: OnboardingState(index: 3), reducer: OnboardingReducer.default, environment: () ) diff --git a/secant/UIComponents/Buttons/ActiveButton.swift b/secant/UIComponents/Buttons/ActiveButton.swift index 63809d1..10e2eb6 100644 --- a/secant/UIComponents/Buttons/ActiveButton.swift +++ b/secant/UIComponents/Buttons/ActiveButton.swift @@ -13,7 +13,8 @@ extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.activeButtonText.color, background: Asset.Colors.Buttons.activeButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.activeButton.color + pressedBackgroundColor: Asset.Colors.Buttons.activeButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.activeButtonDisabled.color ) ) } diff --git a/secant/UIComponents/Buttons/CreateButton.swift b/secant/UIComponents/Buttons/CreateButton.swift index 385c7d8..0f38979 100644 --- a/secant/UIComponents/Buttons/CreateButton.swift +++ b/secant/UIComponents/Buttons/CreateButton.swift @@ -13,7 +13,8 @@ extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.button.color, background: Asset.Colors.Buttons.createButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color + pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.createButtonDisabled.color ) ) } diff --git a/secant/UIComponents/Buttons/PrimaryButton.swift b/secant/UIComponents/Buttons/PrimaryButton.swift index 47c45f3..d4e79c7 100644 --- a/secant/UIComponents/Buttons/PrimaryButton.swift +++ b/secant/UIComponents/Buttons/PrimaryButton.swift @@ -12,8 +12,9 @@ extension Button { buttonStyle( StandardButtonStyle( foregroundColor: Asset.Colors.Text.button.color, - background: Asset.Colors.Buttons.primaryButtonPressed.color, - pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color + background: Asset.Colors.Buttons.primaryButton.color, + pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.primaryButtonDisabled.color ) ) } diff --git a/secant/UIComponents/Buttons/SecondaryButton.swift b/secant/UIComponents/Buttons/SecondaryButton.swift index a5223a0..13dd09e 100644 --- a/secant/UIComponents/Buttons/SecondaryButton.swift +++ b/secant/UIComponents/Buttons/SecondaryButton.swift @@ -13,7 +13,8 @@ extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.secondaryButtonText.color, background: Asset.Colors.Buttons.secondaryButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.secondaryButtonPressed.color + pressedBackgroundColor: Asset.Colors.Buttons.secondaryButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.secondaryButton.color ) ) } diff --git a/secant/UIComponents/Buttons/StandardButtonStyle.swift b/secant/UIComponents/Buttons/StandardButtonStyle.swift index e5d9fd1..e48b619 100644 --- a/secant/UIComponents/Buttons/StandardButtonStyle.swift +++ b/secant/UIComponents/Buttons/StandardButtonStyle.swift @@ -13,7 +13,8 @@ struct StandardButtonStyle: ButtonStyle { let foregroundColor: Color let background: Color let pressedBackgroundColor: Color - + let disabledBackgroundColor: Color + func makeBody(configuration: Configuration) -> some View { configuration.label .shadow(color: Asset.Colors.Buttons.buttonsTitleShadow.color, radius: 2, x: 0, y: 2) @@ -27,7 +28,7 @@ struct StandardButtonStyle: ButtonStyle { .background( isEnabled ? (configuration.isPressed ? pressedBackgroundColor : background) - : .red + : disabledBackgroundColor ) .cornerRadius(12) .neumorphicButtonDesign(configuration.isPressed) @@ -40,7 +41,8 @@ private extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.button.color, background: Asset.Colors.Buttons.createButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color + pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.createButtonDisabled.color ) ) } diff --git a/secant/UIComponents/DesignGuide.swift b/secant/UIComponents/DesignGuide.swift index d55d702..1d0b8a9 100644 --- a/secant/UIComponents/DesignGuide.swift +++ b/secant/UIComponents/DesignGuide.swift @@ -118,11 +118,11 @@ struct ButtonGuide: View { .primaryButtonStyle .frame(height: buttonHeight) - // TODO: Pressed Primary Button + // Pressed Primary Button Button(action: {}) { Text("Pressed Primary Button") } - .primaryButtonStyle + .primaryButtonPressedStyle .frame(height: buttonHeight) // Disabled Primary Button @@ -140,14 +140,14 @@ struct ButtonGuide: View { .activeButtonStyle .frame(height: buttonHeight) - // TODO: Pressed Active Button + // Pressed Active Button Button(action: {}) { Text("Pressed Active Button") } - .activeButtonStyle + .activeButtonPressedStyle .frame(height: buttonHeight) - // TODO: Disabled Active Button + // Disabled Active Button Button(action: {}) { Text("Disabled Active Button") } @@ -189,3 +189,31 @@ struct DesignGuide_Previews: PreviewProvider { .previewLayout(.fixed(width: 1086, height: 1080)) } } + +// MARK: - Pressed Simulated + +extension Button { + var primaryButtonPressedStyle: some View { + buttonStyle( + StandardButtonStyle( + foregroundColor: Asset.Colors.Text.button.color, + background: Asset.Colors.Buttons.primaryButtonPressed.color, + pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.primaryButtonDisabled.color + ) + ) + } + + var activeButtonPressedStyle: some View { + buttonStyle( + StandardButtonStyle( + foregroundColor: Asset.Colors.Text.activeButtonText.color, + background: Asset.Colors.Buttons.activeButtonPressed.color, + pressedBackgroundColor: Asset.Colors.Buttons.activeButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.activeButtonDisabled.color + ) + ) + } +} + + From 9df95ebc2988e8a834ccba297245524e85460a1a Mon Sep 17 00:00:00 2001 From: Lukas Korba <62649321+lukaskorba-indiedev@users.noreply.github.com> Date: Wed, 23 Feb 2022 15:04:36 +0100 Subject: [PATCH 06/13] Optimised Button's Layout Onboarding footer was using the same settings for 3 buttons. --- .../Onboarding/OnboardingFooterView.swift | 93 ++++++++++--------- 1 file changed, 50 insertions(+), 43 deletions(-) diff --git a/secant/Screens/Onboarding/OnboardingFooterView.swift b/secant/Screens/Onboarding/OnboardingFooterView.swift index 3a34e49..e7c6794 100644 --- a/secant/Screens/Onboarding/OnboardingFooterView.swift +++ b/secant/Screens/Onboarding/OnboardingFooterView.swift @@ -13,57 +13,64 @@ struct OnboardingFooterView: View { let animationDuration: CGFloat = 0.8 var body: some View { - GeometryReader { proxy in - WithViewStore(self.store) { viewStore in - VStack(spacing: 5) { - Spacer() - - if viewStore.isFinalStep { - Button("Create New Wallet") { - withAnimation(.easeInOut(duration: animationDuration)) { - viewStore.send(.createNewWallet) - } + WithViewStore(self.store) { viewStore in + VStack(spacing: 5) { + Spacer() + + if viewStore.isFinalStep { + Button("Create New Wallet") { + withAnimation(.easeInOut(duration: animationDuration)) { + viewStore.send(.createNewWallet) } - .primaryButtonStyle - .frame(height: proxy.size.height / 12) - .padding(.horizontal, 15) - .transition(.opacity) - - Button("Import an Existing Wallet") { - withAnimation(.easeInOut(duration: animationDuration)) { - viewStore.send(.createNewWallet) - } - } - .secondaryButtonStyle - .frame(height: proxy.size.height / 12) - .padding(.horizontal, 15) - .transition(.opacity) - } else { - Button("Next") { - withAnimation(.easeInOut(duration: animationDuration)) { - viewStore.send(.next) - } - } - .primaryButtonStyle - .frame(height: 60) - .padding(.horizontal, 28) - .transition(.opacity) - - ProgressView( - "0\(viewStore.index + 1)", - value: Double(viewStore.index + 1), - total: Double(viewStore.steps.count) - ) - .onboardingProgressStyle - .padding(.horizontal, 30) - .padding(.vertical, 20) } + .createButtonStyle + .buttonLayout() + + Button("Import an Existing Wallet") { + withAnimation(.easeInOut(duration: animationDuration)) { + viewStore.send(.createNewWallet) + } + } + .secondaryButtonStyle + .buttonLayout() + } else { + Button("Next") { + withAnimation(.easeInOut(duration: animationDuration)) { + viewStore.send(.next) + } + } + .primaryButtonStyle + .buttonLayout() + + ProgressView( + "0\(viewStore.index + 1)", + value: Double(viewStore.index + 1), + total: Double(viewStore.steps.count) + ) + .onboardingProgressStyle + .padding(.horizontal, 30) + .padding(.vertical, 20) } } } } } +struct OnboardingFooterButtonLayout: ViewModifier { + func body(content: Content) -> some View { + content + .frame(height: 60) + .padding(.horizontal, 28) + .transition(.opacity) + } +} + +extension View { + func buttonLayout() -> some View { + modifier(OnboardingFooterButtonLayout()) + } +} + struct OnboardingFooterView_Previews: PreviewProvider { static var previews: some View { let store = Store( From 277c8b33fdf9c0a8eac98b92ce1df505e20283d0 Mon Sep 17 00:00:00 2001 From: Lukas Korba <62649321+lukaskorba-indiedev@users.noreply.github.com> Date: Mon, 21 Feb 2022 21:17:49 +0100 Subject: [PATCH 07/13] First batch of UI updates The focus was on neumorphic buttons that work for both light and dark as well as state of the button (pressed) Device specific enhancements Colors and texts updated. Device specific paddings, margins and sizes enhanced Dark appearance Tweaks for the dark version of the onboarding UI Update of the comments Button UI updates Colors updated, pressed button simulated and present in the DesignGuide.swift Optimised Button's Layout Onboarding footer was using the same settings for 3 buttons. --- secant.xcodeproj/project.pbxproj | 8 ++ .../ActiveButton.colorset/Contents.json | 6 +- .../Contents.json | 38 +++++++++ .../Contents.json | 12 +-- .../ButtonsTitleShadow.colorset/Contents.json | 38 +++++++++ .../Contents.json | 38 +++++++++ .../Contents.json | 38 +++++++++ .../NeumorphicDarkSide.colorset/Contents.json | 38 +++++++++ .../Contents.json | 38 +++++++++ .../Contents.json | 14 ++-- .../Contents.json | 12 +-- .../PrimaryButton.colorset/Contents.json | 12 +-- .../Contents.json | 6 +- .../Contents.json | 6 +- .../SecondaryButton.colorset/Contents.json | 2 +- .../Contents.json | 14 ++-- .../BadgeShadow.colorset/Contents.json | 38 +++++++++ .../Contents.json | 38 +++++++++ .../Contents.json | 38 +++++++++ .../Contents.json | 38 +++++++++ .../Contents.json | 38 +++++++++ .../Colors.xcassets/Onboarding/Contents.json | 6 ++ .../gradientEnd.colorset/Contents.json | 14 ++-- .../gradientStart.colorset/Contents.json | 14 ++-- .../ActiveButtonText.colorset/Contents.json | 8 +- .../Text/Button.colorset/Contents.json | 12 +-- .../Features/Onboarding/OnboardingStore.swift | 4 + secant/Generated/XCAssets+Generated.swift | 13 ++- .../Onboarding/OnboardingContentView.swift | 61 ++++++++++++-- .../Onboarding/OnboardingFooterView.swift | 82 ++++++++++++------- .../Onboarding/OnboardingHeaderView.swift | 3 +- .../Screens/Onboarding/OnboardingScreen.swift | 51 ++++++++++++ .../UIComponents/Buttons/ActiveButton.swift | 3 +- .../UIComponents/Buttons/CreateButton.swift | 3 +- .../Buttons/NavigationButtonStyle.swift | 7 +- .../Buttons/NeumorphicDesignModifier.swift | 79 ++++++++++++++++++ .../UIComponents/Buttons/PrimaryButton.swift | 7 +- .../Buttons/SecondaryButton.swift | 3 +- .../Buttons/StandardButtonStyle.swift | 14 +++- .../CircularFrame/CircularFrame.swift | 49 ++++++++--- .../CircularFrameBackground.swift | 16 +++- .../CircularFrame/CircularFrameBadge.swift | 2 + secant/UIComponents/DesignGuide.swift | 38 +++++++-- .../FontStyles/SecantButtonStyles.swift | 23 ++++++ .../FontStyles/SecantTextStyles.swift | 15 +++- .../OnboardingProgressIndicator.swift | 8 +- 46 files changed, 905 insertions(+), 140 deletions(-) create mode 100644 secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json rename secant/Colors.xcassets/{Onboarding/CircularFrame.colorset => Buttons/ActiveButtonPressed.colorset}/Contents.json (76%) create mode 100644 secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Onboarding/Contents.json create mode 100644 secant/UIComponents/Buttons/NeumorphicDesignModifier.swift create mode 100644 secant/UIComponents/FontStyles/SecantButtonStyles.swift diff --git a/secant.xcodeproj/project.pbxproj b/secant.xcodeproj/project.pbxproj index ae19652..ca482ab 100644 --- a/secant.xcodeproj/project.pbxproj +++ b/secant.xcodeproj/project.pbxproj @@ -82,6 +82,8 @@ 66A0807B271993C500118B79 /* OnboardingProgressIndicator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */; }; 66D50668271D9B6100E51F0D /* NavigationButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */; }; 66DC733F271D88CC0053CBB6 /* StandardButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66DC733E271D88CC0053CBB6 /* StandardButtonStyle.swift */; }; + 9E4DC6E027C409A100E657F4 /* NeumorphicDesignModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */; }; + 9E4DC6E227C4C6B700E657F4 /* SecantButtonStyles.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9E4DC6E127C4C6B700E657F4 /* SecantButtonStyles.swift */; }; F9322DC0273B555C00C105B5 /* NavigationLinks.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9322DBF273B555C00C105B5 /* NavigationLinks.swift */; }; F93673D62742CB840099C6AF /* Previews.swift in Sources */ = {isa = PBXBuildFile; fileRef = F93673D52742CB840099C6AF /* Previews.swift */; }; F93874F0273C4DE200F0E875 /* HomeStore.swift in Sources */ = {isa = PBXBuildFile; fileRef = F93874ED273C4DE200F0E875 /* HomeStore.swift */; }; @@ -209,6 +211,8 @@ 66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingProgressIndicator.swift; sourceTree = ""; }; 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NavigationButtonStyle.swift; sourceTree = ""; }; 66DC733E271D88CC0053CBB6 /* StandardButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StandardButtonStyle.swift; sourceTree = ""; }; + 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NeumorphicDesignModifier.swift; sourceTree = ""; }; + 9E4DC6E127C4C6B700E657F4 /* SecantButtonStyles.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SecantButtonStyles.swift; sourceTree = ""; }; F9322DBF273B555C00C105B5 /* NavigationLinks.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = NavigationLinks.swift; sourceTree = ""; }; F93673D52742CB840099C6AF /* Previews.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Previews.swift; sourceTree = ""; }; F93874ED273C4DE200F0E875 /* HomeStore.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = HomeStore.swift; sourceTree = ""; }; @@ -445,6 +449,7 @@ isa = PBXGroup; children = ( 0D8A43C3272AEEDE005A6414 /* SecantTextStyles.swift */, + 9E4DC6E127C4C6B700E657F4 /* SecantButtonStyles.swift */, ); path = FontStyles; sourceTree = ""; @@ -562,6 +567,7 @@ 663FAB9F271D876200E495F8 /* PrimaryButton.swift */, 663FABA1271D876C00E495F8 /* SecondaryButton.swift */, 66D50667271D9B6100E51F0D /* NavigationButtonStyle.swift */, + 9E4DC6DF27C409A100E657F4 /* NeumorphicDesignModifier.swift */, ); path = Buttons; sourceTree = ""; @@ -1000,11 +1006,13 @@ 0DC487C32772574C00BE6A63 /* ValidationSucceededView.swift in Sources */, 0D8A43C4272AEEDE005A6414 /* SecantTextStyles.swift in Sources */, 0D1922F226BDE29300052649 /* ZcashSDKStubs.swift in Sources */, + 9E4DC6E027C409A100E657F4 /* NeumorphicDesignModifier.swift in Sources */, 0DACFA7F27208CE00039EEA5 /* Clamped.swift in Sources */, 0DFE93E3272CA1AA000FCCA5 /* RecoveryPhraseValidation.swift in Sources */, 0D354A0B26D5A9D000315F45 /* MnemonicSeedPhraseHandling.swift in Sources */, 0D535FE2271F9476009A9E3E /* EnumeratedChip.swift in Sources */, 6654C73E2715A41300901167 /* OnboardingStore.swift in Sources */, + 9E4DC6E227C4C6B700E657F4 /* SecantButtonStyles.swift in Sources */, 0DDB6A5127737D4A0012A410 /* ValidationFailedView.swift in Sources */, 0D6D628B276A528E002FB4CC /* DropDelegate.swift in Sources */, F9971A5327680DD000A2DB75 /* Profile.swift in Sources */, diff --git a/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json index 70e2d1d..4c8b3ab 100644 --- a/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/ActiveButton.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.000", - "green" : "0.725", - "red" : "1.000" + "blue" : "0x00", + "green" : "0xB9", + "red" : "0xFF" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json new file mode 100644 index 0000000..3b7019f --- /dev/null +++ b/secant/Colors.xcassets/Buttons/ActiveButtonDisabled.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.341", + "green" : "0.200", + "red" : "0.149" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.200", + "blue" : "0x28", + "green" : "0xB7", + "red" : "0xF4" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrame.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ActiveButtonPressed.colorset/Contents.json similarity index 76% rename from secant/Colors.xcassets/Onboarding/CircularFrame.colorset/Contents.json rename to secant/Colors.xcassets/Buttons/ActiveButtonPressed.colorset/Contents.json index 55d46ab..79f02bd 100644 --- a/secant/Colors.xcassets/Onboarding/CircularFrame.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/ActiveButtonPressed.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.902", - "green" : "0.867", - "red" : "0.804" + "blue" : "0x57", + "green" : "0x33", + "red" : "0x26" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.514", - "green" : "0.486", - "red" : "0.443" + "blue" : "0.000", + "green" : "0.847", + "red" : "1.000" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json b/secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json new file mode 100644 index 0000000..bacc626 --- /dev/null +++ b/secant/Colors.xcassets/Buttons/ButtonsTitleShadow.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.330", + "blue" : "0x36", + "green" : "0x2C", + "red" : "0x27" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.000", + "blue" : "0x36", + "green" : "0x2C", + "red" : "0x27" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json new file mode 100644 index 0000000..f3443f3 --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicButtonDarkSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.820", + "green" : "0.722", + "red" : "0.631" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.150", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json new file mode 100644 index 0000000..bcca9cb --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicButtonLightSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0.992", + "green" : "0.980", + "red" : "0.969" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.150", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json new file mode 100644 index 0000000..b9557e9 --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xD1", + "green" : "0xB8", + "red" : "0xA1" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "69", + "green" : "32", + "red" : "19" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json new file mode 100644 index 0000000..d6c1023 --- /dev/null +++ b/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xFD", + "green" : "0xFA", + "red" : "0xF7" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "88", + "green" : "50", + "red" : "40" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json index 6d769e2..dc1be31 100644 --- a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json @@ -2,12 +2,12 @@ "colors" : [ { "color" : { - "color-space" : "srgb", + "color-space" : "display-p3", "components" : { "alpha" : "1.000", - "blue" : "0.937", - "green" : "0.863", - "red" : "0.784" + "blue" : "0xFD", + "green" : "0xF7", + "red" : "0xF1" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.937", - "green" : "0.863", - "red" : "0.784" + "blue" : "217", + "green" : "192", + "red" : "167" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json b/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json index 331e3db..d254925 100644 --- a/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/OnboardingNavigationPressed.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xD9", - "green" : "0xC0", - "red" : "0xA7" + "blue" : "0xFC", + "green" : "0xF8", + "red" : "0xF5" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xD9", - "green" : "0xC0", - "red" : "0xA7" + "blue" : "0xEF", + "green" : "0xDC", + "red" : "0xC8" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json b/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json index ac00bc9..e6b0b43 100644 --- a/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/PrimaryButton.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.984", - "green" : "0.953", - "red" : "0.910" + "blue" : "0xFD", + "green" : "0xF7", + "red" : "0xF1" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.851", - "green" : "0.753", - "red" : "0.655" + "blue" : "217", + "green" : "192", + "red" : "167" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json b/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json index acf7c64..fbcdfe7 100644 --- a/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/PrimaryButtonDisabled.colorset/Contents.json @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "0.200", - "blue" : "0.933", - "green" : "0.863", - "red" : "0.780" + "blue" : "0xEF", + "green" : "0xDC", + "red" : "0xC8" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json b/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json index 1007663..532ece0 100644 --- a/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/PrimaryButtonPressed.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0.996", - "green" : "0.988", - "red" : "0.984" + "blue" : "253", + "green" : "250", + "red" : "244" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json b/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json index e307ac7..c0e5998 100644 --- a/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/SecondaryButton.colorset/Contents.json @@ -4,7 +4,7 @@ "color" : { "color-space" : "srgb", "components" : { - "alpha" : "1.000", + "alpha" : "0.000", "blue" : "0xFF", "green" : "0xFF", "red" : "0xFF" diff --git a/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json b/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json index def8338..763c69e 100644 --- a/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/SecondaryButtonPressed.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "1.000", - "green" : "1.000", - "red" : "1.000" + "blue" : "246", + "green" : "234", + "red" : "222" } }, "idiom" : "universal" @@ -22,10 +22,10 @@ "color" : { "color-space" : "srgb", "components" : { - "alpha" : "0.200", - "blue" : "1.000", - "green" : "1.000", - "red" : "1.000" + "alpha" : "1.000", + "blue" : "106", + "green" : "72", + "red" : "61" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json new file mode 100644 index 0000000..53c9a8f --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/BadgeShadow.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "69", + "green" : "32", + "red" : "19" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json new file mode 100644 index 0000000..14c25de --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientEnd.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "66", + "green" : "30", + "red" : "21" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json new file mode 100644 index 0000000..a70129b --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/CircularFrameDarkOutlineGradientStart.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "117", + "green" : "80", + "red" : "69" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json new file mode 100644 index 0000000..3639817 --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/CircularFrameGradientEnd.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "233", + "green" : "221", + "red" : "209" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "106", + "green" : "63", + "red" : "44" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json new file mode 100644 index 0000000..b2161d7 --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/CircularFrameGradientStart.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xFD", + "green" : "0xF7", + "red" : "0xF1" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0x62", + "green" : "0x33", + "red" : "0x22" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Onboarding/Contents.json b/secant/Colors.xcassets/Onboarding/Contents.json new file mode 100644 index 0000000..73c0059 --- /dev/null +++ b/secant/Colors.xcassets/Onboarding/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json b/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json index ded04f0..a043fd9 100644 --- a/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json +++ b/secant/Colors.xcassets/ScreenBackground/gradientEnd.colorset/Contents.json @@ -2,12 +2,12 @@ "colors" : [ { "color" : { - "color-space" : "extended-linear-srgb", + "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xF3", - "green" : "0xE4", - "red" : "0xD2" + "blue" : "243", + "green" : "228", + "red" : "210" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0x5A", - "green" : "0x36", - "red" : "0x29" + "blue" : "0x55", + "green" : "0x31", + "red" : "0x24" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json b/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json index dd90c61..f526c8b 100644 --- a/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json +++ b/secant/Colors.xcassets/ScreenBackground/gradientStart.colorset/Contents.json @@ -2,12 +2,12 @@ "colors" : [ { "color" : { - "color-space" : "display-p3", + "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xF9", - "green" : "0xEF", - "red" : "0xE3" + "blue" : "249", + "green" : "239", + "red" : "227" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0x55", - "green" : "0x31", - "red" : "0x24" + "blue" : "0x5A", + "green" : "0x36", + "red" : "0x29" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json b/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json index 0f20827..8813445 100644 --- a/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json +++ b/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json @@ -20,12 +20,12 @@ } ], "color" : { - "color-space" : "srgb", + "color-space" : "display-p3", "components" : { "alpha" : "1.000", - "blue" : "0.333", - "green" : "0.192", - "red" : "0.141" + "blue" : "0x52", + "green" : "0x31", + "red" : "0x26" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Text/Button.colorset/Contents.json b/secant/Colors.xcassets/Text/Button.colorset/Contents.json index 3d61d2e..96f344f 100644 --- a/secant/Colors.xcassets/Text/Button.colorset/Contents.json +++ b/secant/Colors.xcassets/Text/Button.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0x59", - "green" : "0x35", - "red" : "0x28" + "blue" : "0x47", + "green" : "0x37", + "red" : "0x2D" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "1.000", - "green" : "1.000", - "red" : "1.000" + "blue" : "0x00", + "green" : "0x00", + "red" : "0x00" } }, "idiom" : "universal" diff --git a/secant/Features/Onboarding/OnboardingStore.swift b/secant/Features/Onboarding/OnboardingStore.swift index 55b0660..6404520 100644 --- a/secant/Features/Onboarding/OnboardingStore.swift +++ b/secant/Features/Onboarding/OnboardingStore.swift @@ -39,6 +39,7 @@ enum OnboardingAction: Equatable { case back case skip case createNewWallet + case importExistingWallet } typealias OnboardingReducer = Reducer @@ -69,6 +70,9 @@ extension OnboardingReducer { case .createNewWallet: return .none + + case .importExistingWallet: + return .none } } } diff --git a/secant/Generated/XCAssets+Generated.swift b/secant/Generated/XCAssets+Generated.swift index 822ca1c..c605759 100644 --- a/secant/Generated/XCAssets+Generated.swift +++ b/secant/Generated/XCAssets+Generated.swift @@ -44,9 +44,16 @@ internal enum Asset { } internal enum Buttons { internal static let activeButton = ColorAsset(name: "ActiveButton") + internal static let activeButtonDisabled = ColorAsset(name: "ActiveButtonDisabled") + internal static let activeButtonPressed = ColorAsset(name: "ActiveButtonPressed") + internal static let buttonsTitleShadow = ColorAsset(name: "ButtonsTitleShadow") internal static let createButton = ColorAsset(name: "CreateButton") internal static let createButtonDisabled = ColorAsset(name: "CreateButtonDisabled") internal static let createButtonPressed = ColorAsset(name: "CreateButtonPressed") + internal static let neumorphicButtonDarkSide = ColorAsset(name: "NeumorphicButtonDarkSide") + 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 onboardingNavigationPressed = ColorAsset(name: "OnboardingNavigationPressed") internal static let primaryButton = ColorAsset(name: "PrimaryButton") @@ -56,7 +63,11 @@ internal enum Asset { internal static let secondaryButtonPressed = ColorAsset(name: "SecondaryButtonPressed") } internal enum Onboarding { - internal static let circularFrame = ColorAsset(name: "CircularFrame") + internal static let badgeShadow = ColorAsset(name: "BadgeShadow") + internal static let circularFrameDarkOutlineGradientEnd = ColorAsset(name: "CircularFrameDarkOutlineGradientEnd") + internal static let circularFrameDarkOutlineGradientStart = ColorAsset(name: "CircularFrameDarkOutlineGradientStart") + internal static let circularFrameGradientEnd = ColorAsset(name: "CircularFrameGradientEnd") + internal static let circularFrameGradientStart = ColorAsset(name: "CircularFrameGradientStart") internal static let navigationButtonDisabled = ColorAsset(name: "NavigationButtonDisabled") internal static let navigationButtonEnabled = ColorAsset(name: "NavigationButtonEnabled") } diff --git a/secant/Screens/Onboarding/OnboardingContentView.swift b/secant/Screens/Onboarding/OnboardingContentView.swift index 62189a6..19ee1a5 100644 --- a/secant/Screens/Onboarding/OnboardingContentView.swift +++ b/secant/Screens/Onboarding/OnboardingContentView.swift @@ -41,7 +41,7 @@ struct OnboardingContentView: View { } ) ) - .frame(width: width * 0.85, height: width * 0.85) + .frame(width: circularFrameUniformSize(), height: circularFrameUniformSize()) .badgeIcons( store.actionless.scope( state: { state in @@ -52,7 +52,7 @@ struct OnboardingContentView: View { } ) ) - .offset(y: viewStore.offset - height / 7) + .offset(y: viewStore.offset - height / circularFrameOffsetCoeff()) .transition(.scale(scale: 2).combined(with: .opacity)) } } @@ -61,34 +61,76 @@ struct OnboardingContentView: View { VStack(spacing: viewStore.isFinalStep ? 50 : 15) { HStack { Text(viewStore.steps[stepIndex].title) - .font(.custom(FontFamily.Roboto.bold.name, size: 30)) - .fontWeight(.regular) + .titleText() + .lineLimit(0) + .minimumScaleFactor(0.1) if !viewStore.isFinalStep { Spacer() } } Text(viewStore.steps[stepIndex].description) - .font(.custom(FontFamily.Roboto.regular.name, size: 15)) - .lineSpacing(5) + .synopsisText() + .lineSpacing(2) + .opacity(0.53) } .opacity(stepIndex == viewStore.index ? 1: 0) .padding(.horizontal, 35) .frame(width: width, height: height) } } - .offset(y: viewStore.isFinalStep ? width / 2.3 : viewStore.offset + width / 2.3) + .offset(y: viewStore.isFinalStep ? width / 2.5 : viewStore.offset + height / descriptionOffsetCoeff()) } } } +/// Following computations are necessary to handle properly sizing and positioning of elements +/// 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. +extension OnboardingContentView { + func circularFrameUniformSize() -> CGFloat { + let aspect = height / width + let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0) + + return width * (0.6 * deviceMultiplier) + } + + func circularFrameOffsetCoeff() -> CGFloat { + let aspect = height / width + let deviceMultiplier = aspect / 1.725 + + return 4.4 * deviceMultiplier + } + + func descriptionOffsetCoeff() -> Double { + let aspect = height / width + let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5) + + return 8.0 / deviceMultiplier + } +} + struct OnboardingContentView_Previews: PreviewProvider { static var previews: some View { let store = Store( - initialState: OnboardingState(index: 2), + initialState: OnboardingState(index: 0), reducer: OnboardingReducer.default, environment: () ) + + OnboardingContentView_Previews.example(store) + .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)")) + + OnboardingContentView_Previews.example(store) + .previewDevice(PreviewDevice(rawValue: "iPhone 8")) + + OnboardingContentView_Previews.example(store) + .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) + } +} + +extension OnboardingContentView_Previews { + static func example(_ store: Store) -> some View { GeometryReader { proxy in ZStack { OnboardingHeaderView( @@ -114,8 +156,9 @@ struct OnboardingContentView_Previews: PreviewProvider { width: proxy.size.width, height: proxy.size.height ) - .preferredColorScheme(.light) } } + .applyScreenBackground() + .preferredColorScheme(.light) } } diff --git a/secant/Screens/Onboarding/OnboardingFooterView.swift b/secant/Screens/Onboarding/OnboardingFooterView.swift index 1da2f56..e7c6794 100644 --- a/secant/Screens/Onboarding/OnboardingFooterView.swift +++ b/secant/Screens/Onboarding/OnboardingFooterView.swift @@ -13,61 +13,85 @@ struct OnboardingFooterView: View { let animationDuration: CGFloat = 0.8 var body: some View { - GeometryReader { proxy in - WithViewStore(self.store) { viewStore in - VStack(spacing: 5) { - Spacer() - - if viewStore.isFinalStep { - Button("Create New Wallet") { - withAnimation(.easeInOut(duration: animationDuration)) { - viewStore.send(.createNewWallet) - } + WithViewStore(self.store) { viewStore in + VStack(spacing: 5) { + Spacer() + + if viewStore.isFinalStep { + Button("Create New Wallet") { + withAnimation(.easeInOut(duration: animationDuration)) { + viewStore.send(.createNewWallet) } - .primaryButtonStyle - .frame(height: proxy.size.height / 12) - .padding(.horizontal, 15) - .transition(.opacity) - } else { - Button("Next") { - withAnimation(.easeInOut(duration: animationDuration)) { - viewStore.send(.next) - } - } - .primaryButtonStyle - .frame(height: proxy.size.height / 12) - .padding(.horizontal, 15) - .transition(.opacity) } + .createButtonStyle + .buttonLayout() + + Button("Import an Existing Wallet") { + withAnimation(.easeInOut(duration: animationDuration)) { + viewStore.send(.createNewWallet) + } + } + .secondaryButtonStyle + .buttonLayout() + } else { + Button("Next") { + withAnimation(.easeInOut(duration: animationDuration)) { + viewStore.send(.next) + } + } + .primaryButtonStyle + .buttonLayout() ProgressView( - "\(viewStore.index + 1)/\(viewStore.steps.count)", + "0\(viewStore.index + 1)", value: Double(viewStore.index + 1), total: Double(viewStore.steps.count) ) - .onboardingProgressStyle - .padding(.horizontal, 30) - .padding([.vertical], 20) + .onboardingProgressStyle + .padding(.horizontal, 30) + .padding(.vertical, 20) } } } } } +struct OnboardingFooterButtonLayout: ViewModifier { + func body(content: Content) -> some View { + content + .frame(height: 60) + .padding(.horizontal, 28) + .transition(.opacity) + } +} + +extension View { + func buttonLayout() -> some View { + modifier(OnboardingFooterButtonLayout()) + } +} + struct OnboardingFooterView_Previews: PreviewProvider { static var previews: some View { let store = Store( - initialState: OnboardingState(index: 0), + initialState: OnboardingState(index: 3), reducer: OnboardingReducer.default, environment: () ) Group { OnboardingFooterView(store: store) + .applyScreenBackground() + .preferredColorScheme(.light) + .previewDevice("iPhone 13 Pro Max") + + OnboardingFooterView(store: store) + .applyScreenBackground() .preferredColorScheme(.dark) .previewDevice("iPhone 13 Pro Max") OnboardingFooterView(store: store) + .applyScreenBackground() .preferredColorScheme(.dark) .previewDevice("iPhone 13 mini") } diff --git a/secant/Screens/Onboarding/OnboardingHeaderView.swift b/secant/Screens/Onboarding/OnboardingHeaderView.swift index f424df5..9df7987 100644 --- a/secant/Screens/Onboarding/OnboardingHeaderView.swift +++ b/secant/Screens/Onboarding/OnboardingHeaderView.swift @@ -55,7 +55,7 @@ struct OnboardingHeaderView: View { Spacer() } - .padding(.top, 20) + .padding(.top, 5) } } } @@ -85,5 +85,6 @@ struct OnboardingHeaderView_Previews: PreviewProvider { ) ) .preferredColorScheme(.light) + .applyScreenBackground() } } diff --git a/secant/Screens/Onboarding/OnboardingScreen.swift b/secant/Screens/Onboarding/OnboardingScreen.swift index b6779fd..b234617 100644 --- a/secant/Screens/Onboarding/OnboardingScreen.swift +++ b/secant/Screens/Onboarding/OnboardingScreen.swift @@ -56,5 +56,56 @@ struct OnboardingScreen_Previews: PreviewProvider { ) ) .preferredColorScheme(.light) + .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.light) + .previewDevice(PreviewDevice(rawValue: "iPhone 8")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.light) + .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.dark) + .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.dark) + .previewDevice(PreviewDevice(rawValue: "iPhone 8")) + + OnboardingScreen( + store: Store( + initialState: OnboardingState(), + reducer: OnboardingReducer.default, + environment: () + ) + ) + .preferredColorScheme(.dark) + .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) } } diff --git a/secant/UIComponents/Buttons/ActiveButton.swift b/secant/UIComponents/Buttons/ActiveButton.swift index 63809d1..10e2eb6 100644 --- a/secant/UIComponents/Buttons/ActiveButton.swift +++ b/secant/UIComponents/Buttons/ActiveButton.swift @@ -13,7 +13,8 @@ extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.activeButtonText.color, background: Asset.Colors.Buttons.activeButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.activeButton.color + pressedBackgroundColor: Asset.Colors.Buttons.activeButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.activeButtonDisabled.color ) ) } diff --git a/secant/UIComponents/Buttons/CreateButton.swift b/secant/UIComponents/Buttons/CreateButton.swift index 385c7d8..0f38979 100644 --- a/secant/UIComponents/Buttons/CreateButton.swift +++ b/secant/UIComponents/Buttons/CreateButton.swift @@ -13,7 +13,8 @@ extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.button.color, background: Asset.Colors.Buttons.createButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color + pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.createButtonDisabled.color ) ) } diff --git a/secant/UIComponents/Buttons/NavigationButtonStyle.swift b/secant/UIComponents/Buttons/NavigationButtonStyle.swift index 6510435..127f612 100644 --- a/secant/UIComponents/Buttons/NavigationButtonStyle.swift +++ b/secant/UIComponents/Buttons/NavigationButtonStyle.swift @@ -8,6 +8,8 @@ import SwiftUI struct NavigationButtonStyle: ButtonStyle { + @Environment(\.colorScheme) var colorScheme + func makeBody(configuration: Configuration) -> some View { configuration.label .frame( @@ -23,6 +25,7 @@ struct NavigationButtonStyle: ButtonStyle { Asset.Colors.Buttons.onboardingNavigation.color ) .cornerRadius(.infinity) + .neumorphicButtonDesign(configuration.isPressed) } } @@ -39,12 +42,14 @@ struct NavigationModifier_Previews: PreviewProvider { Button("Back") { dump("Example button") } .navigationButtonStyle .frame(width: 80, height: 40) + .applyScreenBackground() .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.dark) - + Button("Skip") { dump("Example button") } .navigationButtonStyle .frame(width: 80, height: 40) + .applyScreenBackground() .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.light) } diff --git a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift new file mode 100644 index 0000000..4e6825e --- /dev/null +++ b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift @@ -0,0 +1,79 @@ +// +// NeumorphicDesignModifier.swift +// secant-testnet +// +// Created by Lukáš Korba on 02/21/22. +// + +import SwiftUI + +/// Neumorphic design is charasterictical with two shadows (light & dark) around the view +/// Appereance in our case is influenced by two parameters: +/// - Parameters: +/// - 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 +/// This design is mostly used for CircularFrame, not designed for a button (see NeumorphicButtonDesign) +struct NeumorphicDesign: ViewModifier { + @Environment(\.colorScheme) var colorScheme + let isPressed: Bool + + init(_ isPressed: Bool) { + self.isPressed = isPressed + } + + func body(content: Content) -> some View { + content + .shadow( + color: Asset.Colors.Buttons.neumorphicDarkSide.color, + radius: 15, + x: colorScheme == .light && !isPressed ? 10 : -10, + y: colorScheme == .light && !isPressed ? 10 : 10 + ) + .shadow( + color: Asset.Colors.Buttons.neumorphicLightSide.color, + radius: 10, + x: colorScheme == .light && !isPressed ? -12 : 12, + y: colorScheme == .light && !isPressed ? -12 : -12 + ) + } +} + +/// Neumorphic design is charasterictical with two shadows (light & dark) around the button +/// Appereance in our case is influenced by two parameters: +/// - Parameters: +/// - 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 +/// This design is specifically crafted for buttons. The colors and positions of the shadows are different. +struct NeumorphicButtonDesign: ViewModifier { + @Environment(\.colorScheme) var colorScheme + let isPressed: Bool + + init(_ isPressed: Bool) { + self.isPressed = isPressed + } + + func body(content: Content) -> some View { + content + .shadow( + color: Asset.Colors.Buttons.neumorphicButtonDarkSide.color, + radius: 15, + x: colorScheme == .light && !isPressed ? 10 : 0, + y: colorScheme == .light && !isPressed ? 10 : 0 + ) + .shadow( + color: Asset.Colors.Buttons.neumorphicButtonLightSide.color, + radius: 10, + x: colorScheme == .light && !isPressed ? -12 : 0, + y: colorScheme == .light && !isPressed ? -12 : 0 + ) + } +} +extension View { + func neumorphicDesign(_ isPressed: Bool = false) -> some View { + self.modifier(NeumorphicDesign(isPressed)) + } + + func neumorphicButtonDesign(_ isPressed: Bool = false) -> some View { + self.modifier(NeumorphicButtonDesign(isPressed)) + } +} diff --git a/secant/UIComponents/Buttons/PrimaryButton.swift b/secant/UIComponents/Buttons/PrimaryButton.swift index fa3245e..d4e79c7 100644 --- a/secant/UIComponents/Buttons/PrimaryButton.swift +++ b/secant/UIComponents/Buttons/PrimaryButton.swift @@ -12,8 +12,9 @@ extension Button { buttonStyle( StandardButtonStyle( foregroundColor: Asset.Colors.Text.button.color, - background: Asset.Colors.Buttons.primaryButtonPressed.color, - pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color + background: Asset.Colors.Buttons.primaryButton.color, + pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.primaryButtonDisabled.color ) ) } @@ -26,11 +27,13 @@ struct PrimaryButton_Previews: PreviewProvider { .frame(width: 250, height: 50) .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.light) + .applyScreenBackground() Button("Primary Button") { dump("Primary button") } .primaryButtonStyle .frame(width: 250, height: 50) .previewLayout(.fixed(width: 300, height: 100)) .preferredColorScheme(.dark) + .applyScreenBackground() } } diff --git a/secant/UIComponents/Buttons/SecondaryButton.swift b/secant/UIComponents/Buttons/SecondaryButton.swift index a5223a0..13dd09e 100644 --- a/secant/UIComponents/Buttons/SecondaryButton.swift +++ b/secant/UIComponents/Buttons/SecondaryButton.swift @@ -13,7 +13,8 @@ extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.secondaryButtonText.color, background: Asset.Colors.Buttons.secondaryButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.secondaryButtonPressed.color + pressedBackgroundColor: Asset.Colors.Buttons.secondaryButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.secondaryButton.color ) ) } diff --git a/secant/UIComponents/Buttons/StandardButtonStyle.swift b/secant/UIComponents/Buttons/StandardButtonStyle.swift index cfaf75c..e48b619 100644 --- a/secant/UIComponents/Buttons/StandardButtonStyle.swift +++ b/secant/UIComponents/Buttons/StandardButtonStyle.swift @@ -8,12 +8,16 @@ import SwiftUI struct StandardButtonStyle: ButtonStyle { + @Environment(\.isEnabled) private var isEnabled: Bool + let foregroundColor: Color let background: Color let pressedBackgroundColor: Color - + let disabledBackgroundColor: Color + func makeBody(configuration: Configuration) -> some View { configuration.label + .shadow(color: Asset.Colors.Buttons.buttonsTitleShadow.color, radius: 2, x: 0, y: 2) .frame( minWidth: 0, maxWidth: .infinity, @@ -22,9 +26,12 @@ struct StandardButtonStyle: ButtonStyle { ) .foregroundColor(foregroundColor) .background( - configuration.isPressed ? pressedBackgroundColor : background + isEnabled ? + (configuration.isPressed ? pressedBackgroundColor : background) + : disabledBackgroundColor ) .cornerRadius(12) + .neumorphicButtonDesign(configuration.isPressed) } } @@ -34,7 +41,8 @@ private extension Button { StandardButtonStyle( foregroundColor: Asset.Colors.Text.button.color, background: Asset.Colors.Buttons.createButton.color, - pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color + pressedBackgroundColor: Asset.Colors.Buttons.createButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.createButtonDisabled.color ) ) } diff --git a/secant/UIComponents/CircularFrame/CircularFrame.swift b/secant/UIComponents/CircularFrame/CircularFrame.swift index 74e04f2..bbfeb27 100644 --- a/secant/UIComponents/CircularFrame/CircularFrame.swift +++ b/secant/UIComponents/CircularFrame/CircularFrame.swift @@ -8,22 +8,44 @@ import SwiftUI struct CircularFrame: View { + @Environment(\.colorScheme) var colorScheme + var body: some View { GeometryReader { proxy in - let lineWidth = proxy.size.width * 0.05 - + let lineWidth = proxy.size.width * 0.06 + Circle() - .stroke(lineWidth: lineWidth) - .foregroundColor(Asset.Colors.Onboarding.circularFrame.color) - // Add two points to the frame to properly mask edges - .frame( - width: proxy.size.width - lineWidth + 2, - height: proxy.size.height - lineWidth + 2, - alignment: .center + .stroke( + LinearGradient( + colors: [ + Asset.Colors.Onboarding.circularFrameGradientStart.color, + Asset.Colors.Onboarding.circularFrameGradientEnd.color + ], + startPoint: colorScheme == .light ? .topLeading : .top, + endPoint: colorScheme == .light ? .bottomTrailing : .bottom + ), + style: StrokeStyle( + lineWidth: lineWidth + ) ) - // Update the offset to account for the 2 extra points - .offset(x: lineWidth / 2 - 1, y: lineWidth / 2 - 1) - .shadow(radius: 10) + .padding(colorScheme == .light ? 0 : 10) + + if colorScheme == .dark { + Circle() + .stroke( + LinearGradient( + colors: [ + Asset.Colors.Onboarding.circularFrameDarkOutlineGradientStart.color, + Asset.Colors.Onboarding.circularFrameDarkOutlineGradientEnd.color + ], + startPoint: .top, + endPoint: .bottom + ), + style: StrokeStyle( + lineWidth: lineWidth * 0.15 + ) + ) + } } } } @@ -114,7 +136,8 @@ struct CircularFramePreviewHelper: View { struct CircularFrame_Previews: PreviewProvider { static var previews: some View { CircularFramePreviewHelper() - .preferredColorScheme(.light) + .preferredColorScheme(.dark) .previewLayout(.device) + .applyScreenBackground() } } diff --git a/secant/UIComponents/CircularFrame/CircularFrameBackground.swift b/secant/UIComponents/CircularFrame/CircularFrameBackground.swift index 36fcd16..b9a02a2 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBackground.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBackground.swift @@ -26,6 +26,7 @@ struct CircularFrameBackgroundImages: Animatable, ViewModifier { .opacity(imageIndex == viewStore.index ? 1 : 0) .offset(x: imageIndex <= viewStore.index ? 0 : 25) .mask(Circle()) + .neumorphicDesign() } content @@ -43,6 +44,7 @@ struct CircularFrameBackgroundImage: Animatable, ViewModifier { .resizable() .aspectRatio(1.3, contentMode: .fill) .mask(Circle()) + .neumorphicDesign() content } @@ -66,18 +68,26 @@ struct CircularFrameBackground_Previews: PreviewProvider { CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout0.image) .frame(width: 300, height: 300) - + .applyScreenBackground() + .neumorphicDesign() + CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout1.image) .frame(width: 300, height: 300) - + .applyScreenBackground() + .neumorphicDesign() + CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout2.image) .frame(width: 300, height: 300) - + .applyScreenBackground() + .neumorphicDesign() + CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout3.image) .frame(width: 300, height: 300) + .applyScreenBackground() + .neumorphicDesign() } .preferredColorScheme(.light) .previewLayout(.fixed(width: size + 50, height: size + 50)) diff --git a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift index 797e66c..17cf7b6 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift @@ -77,6 +77,7 @@ struct BadgesOverlay: Animatable, ViewModifier { y: proxy.size.height * 0.15 ) .opacity(badgeIndex == viewStore.index ? 1 : 0) + .shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0) } } @@ -114,6 +115,7 @@ struct BadgeOverlay: Animatable, ViewModifier { ) .transition(.scale(scale: 2)) .transition(.opacity) + .shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0) Spacer() } } diff --git a/secant/UIComponents/DesignGuide.swift b/secant/UIComponents/DesignGuide.swift index d55d702..1d0b8a9 100644 --- a/secant/UIComponents/DesignGuide.swift +++ b/secant/UIComponents/DesignGuide.swift @@ -118,11 +118,11 @@ struct ButtonGuide: View { .primaryButtonStyle .frame(height: buttonHeight) - // TODO: Pressed Primary Button + // Pressed Primary Button Button(action: {}) { Text("Pressed Primary Button") } - .primaryButtonStyle + .primaryButtonPressedStyle .frame(height: buttonHeight) // Disabled Primary Button @@ -140,14 +140,14 @@ struct ButtonGuide: View { .activeButtonStyle .frame(height: buttonHeight) - // TODO: Pressed Active Button + // Pressed Active Button Button(action: {}) { Text("Pressed Active Button") } - .activeButtonStyle + .activeButtonPressedStyle .frame(height: buttonHeight) - // TODO: Disabled Active Button + // Disabled Active Button Button(action: {}) { Text("Disabled Active Button") } @@ -189,3 +189,31 @@ struct DesignGuide_Previews: PreviewProvider { .previewLayout(.fixed(width: 1086, height: 1080)) } } + +// MARK: - Pressed Simulated + +extension Button { + var primaryButtonPressedStyle: some View { + buttonStyle( + StandardButtonStyle( + foregroundColor: Asset.Colors.Text.button.color, + background: Asset.Colors.Buttons.primaryButtonPressed.color, + pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.primaryButtonDisabled.color + ) + ) + } + + var activeButtonPressedStyle: some View { + buttonStyle( + StandardButtonStyle( + foregroundColor: Asset.Colors.Text.activeButtonText.color, + background: Asset.Colors.Buttons.activeButtonPressed.color, + pressedBackgroundColor: Asset.Colors.Buttons.activeButtonPressed.color, + disabledBackgroundColor: Asset.Colors.Buttons.activeButtonDisabled.color + ) + ) + } +} + + diff --git a/secant/UIComponents/FontStyles/SecantButtonStyles.swift b/secant/UIComponents/FontStyles/SecantButtonStyles.swift new file mode 100644 index 0000000..a2f893f --- /dev/null +++ b/secant/UIComponents/FontStyles/SecantButtonStyles.swift @@ -0,0 +1,23 @@ +// +// SecantButtonStyles.swift +// secant-testnet +// +// Created by Lukáš Korba on 02/22/22. +// + +import SwiftUI + +extension Button { + func titleText() -> some View { + self.modifier(TitleTextStyle()) + } + + private struct TitleTextStyle: ViewModifier { + func body(content: Content) -> some View { + content + .foregroundColor(Asset.Colors.Text.heading.color) + .font(.custom(FontFamily.Rubik.regular.name, size: 15)) + .shadow(color: Asset.Colors.Text.captionTextShadow.color, radius: 1, x: 0, y: 1) + } + } +} diff --git a/secant/UIComponents/FontStyles/SecantTextStyles.swift b/secant/UIComponents/FontStyles/SecantTextStyles.swift index 9c8bc97..debe65b 100644 --- a/secant/UIComponents/FontStyles/SecantTextStyles.swift +++ b/secant/UIComponents/FontStyles/SecantTextStyles.swift @@ -21,6 +21,10 @@ extension Text { self.modifier(TitleTextStyle()) } + func synopsisText() -> some View { + self.modifier(SynopsisStyle()) + } + /// Body text style. Used for content. Roboto-Regular 18pt private struct BodyTextStyle: ViewModifier { func body(content: Content) -> some View { @@ -30,11 +34,20 @@ extension Text { } } + /// Used for additional information, explanations, context (usually paragraphs) + private struct SynopsisStyle: ViewModifier { + func body(content: Content) -> some View { + content + .foregroundColor(Asset.Colors.Text.heading.color) + .font(.custom(FontFamily.Rubik.regular.name, size: 16)) + } + } + private struct TitleTextStyle: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Asset.Colors.Text.heading.color) - .font(.custom(FontFamily.Rubik.regular.name, size: 33)) + .font(.custom(FontFamily.Rubik.regular.name, size: 33, relativeTo: .callout)) .shadow(color: Asset.Colors.Text.captionTextShadow.color, radius: 1, x: 0, y: 1) } } diff --git a/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift b/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift index 3c4c961..7c6ab26 100644 --- a/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift +++ b/secant/UIComponents/ProgressIndicators/OnboardingProgressIndicator.swift @@ -15,8 +15,8 @@ struct OnboardingProgressStyle: ProgressViewStyle { Asset.Colors.ProgressIndicator.gradientLeft.color, Asset.Colors.ProgressIndicator.gradientRight.color ], - startPoint: UnitPoint(x: 0.00, y: 0.00), - endPoint: UnitPoint(x: 1.00, y: 0.00) + startPoint: .leading, + endPoint: .trailing ) func makeBody(configuration: Configuration) -> some View { @@ -25,7 +25,9 @@ struct OnboardingProgressStyle: ProgressViewStyle { return VStack { HStack { configuration.label - .foregroundColor(Asset.Colors.ProgressIndicator.negativeSpace.color) + .foregroundColor(Asset.Colors.Text.heading.color) + .font(.custom(FontFamily.Rubik.regular.name, size: 16)) + .opacity(0.3) Spacer() } From 3e0addd99e8d809f1cbc8257205b64d4da1065d8 Mon Sep 17 00:00:00 2001 From: Lukas Korba Date: Wed, 23 Feb 2022 18:32:54 +0100 Subject: [PATCH 08/13] Response to comments All updates and fixes related to the comments --- .../NeumorphicDarkSide.colorset/Contents.json | 12 +++++------ .../Contents.json | 12 +++++------ secant/Generated/XCAssets+Generated.swift | 4 ++-- .../Onboarding/OnboardingContentView.swift | 12 +++++------ .../Onboarding/OnboardingFooterView.swift | 19 +++++++++-------- .../Buttons/NavigationButtonStyle.swift | 4 +--- .../Buttons/NeumorphicDesignModifier.swift | 21 ++++++++++++------- .../Buttons/StandardButtonStyle.swift | 2 +- .../CircularFrameBackground.swift | 12 +++++------ .../FontStyles/SecantTextStyles.swift | 4 ++-- 10 files changed, 53 insertions(+), 49 deletions(-) rename secant/Colors.xcassets/{Buttons => Onboarding}/NeumorphicDarkSide.colorset/Contents.json (76%) rename secant/Colors.xcassets/{Buttons => Onboarding}/NeumorphicLightSide.colorset/Contents.json (76%) diff --git a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/NeumorphicDarkSide.colorset/Contents.json similarity index 76% rename from secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json rename to secant/Colors.xcassets/Onboarding/NeumorphicDarkSide.colorset/Contents.json index b9557e9..7e77db1 100644 --- a/secant/Colors.xcassets/Buttons/NeumorphicDarkSide.colorset/Contents.json +++ b/secant/Colors.xcassets/Onboarding/NeumorphicDarkSide.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xD1", - "green" : "0xB8", - "red" : "0xA1" + "blue" : "0.820", + "green" : "0.722", + "red" : "0.631" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "69", - "green" : "32", - "red" : "19" + "blue" : "0.271", + "green" : "0.125", + "red" : "0.075" } }, "idiom" : "universal" diff --git a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json b/secant/Colors.xcassets/Onboarding/NeumorphicLightSide.colorset/Contents.json similarity index 76% rename from secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json rename to secant/Colors.xcassets/Onboarding/NeumorphicLightSide.colorset/Contents.json index d6c1023..f7578c0 100644 --- a/secant/Colors.xcassets/Buttons/NeumorphicLightSide.colorset/Contents.json +++ b/secant/Colors.xcassets/Onboarding/NeumorphicLightSide.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "0xFD", - "green" : "0xFA", - "red" : "0xF7" + "blue" : "0.992", + "green" : "0.980", + "red" : "0.969" } }, "idiom" : "universal" @@ -23,9 +23,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "88", - "green" : "50", - "red" : "40" + "blue" : "0.345", + "green" : "0.196", + "red" : "0.157" } }, "idiom" : "universal" diff --git a/secant/Generated/XCAssets+Generated.swift b/secant/Generated/XCAssets+Generated.swift index c605759..ec82a79 100644 --- a/secant/Generated/XCAssets+Generated.swift +++ b/secant/Generated/XCAssets+Generated.swift @@ -52,8 +52,6 @@ internal enum Asset { internal static let createButtonPressed = ColorAsset(name: "CreateButtonPressed") internal static let neumorphicButtonDarkSide = ColorAsset(name: "NeumorphicButtonDarkSide") 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 onboardingNavigationPressed = ColorAsset(name: "OnboardingNavigationPressed") internal static let primaryButton = ColorAsset(name: "PrimaryButton") @@ -70,6 +68,8 @@ internal enum Asset { internal static let circularFrameGradientStart = ColorAsset(name: "CircularFrameGradientStart") internal static let navigationButtonDisabled = ColorAsset(name: "NavigationButtonDisabled") 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 static let gradientLeft = ColorAsset(name: "GradientLeft") diff --git a/secant/Screens/Onboarding/OnboardingContentView.swift b/secant/Screens/Onboarding/OnboardingContentView.swift index 19ee1a5..ea10070 100644 --- a/secant/Screens/Onboarding/OnboardingContentView.swift +++ b/secant/Screens/Onboarding/OnboardingContentView.swift @@ -41,7 +41,7 @@ struct OnboardingContentView: View { } ) ) - .frame(width: circularFrameUniformSize(), height: circularFrameUniformSize()) + .frame(width: circularFrameUniformSize, height: circularFrameUniformSize) .badgeIcons( store.actionless.scope( 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)) } } @@ -79,7 +79,7 @@ struct OnboardingContentView: View { .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 /// while iPhone X, 11, etc are different family devices, capable to use more of the space. extension OnboardingContentView { - func circularFrameUniformSize() -> CGFloat { + var circularFrameUniformSize: CGFloat { let aspect = height / width let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0) return width * (0.6 * deviceMultiplier) } - func circularFrameOffsetCoeff() -> CGFloat { + var circularFrameOffsetCoeffcient: CGFloat { let aspect = height / width let deviceMultiplier = aspect / 1.725 return 4.4 * deviceMultiplier } - func descriptionOffsetCoeff() -> Double { + var descriptionOffsetCoefficient: Double { let aspect = height / width let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5) diff --git a/secant/Screens/Onboarding/OnboardingFooterView.swift b/secant/Screens/Onboarding/OnboardingFooterView.swift index e7c6794..2a93a60 100644 --- a/secant/Screens/Onboarding/OnboardingFooterView.swift +++ b/secant/Screens/Onboarding/OnboardingFooterView.swift @@ -24,7 +24,7 @@ struct OnboardingFooterView: View { } } .createButtonStyle - .buttonLayout() + .onboardingFooterButtonLayout() Button("Import an Existing Wallet") { withAnimation(.easeInOut(duration: animationDuration)) { @@ -32,7 +32,7 @@ struct OnboardingFooterView: View { } } .secondaryButtonStyle - .buttonLayout() + .onboardingFooterButtonLayout() } else { Button("Next") { withAnimation(.easeInOut(duration: animationDuration)) { @@ -40,23 +40,24 @@ struct OnboardingFooterView: View { } } .primaryButtonStyle - .buttonLayout() + .onboardingFooterButtonLayout() ProgressView( - "0\(viewStore.index + 1)", + String(format: "%02d", viewStore.index + 1), value: Double(viewStore.index + 1), total: Double(viewStore.steps.count) ) - .onboardingProgressStyle - .padding(.horizontal, 30) - .padding(.vertical, 20) + .onboardingProgressStyle + .padding(.horizontal, 30) + .padding(.vertical, 20) } } } } } -struct OnboardingFooterButtonLayout: ViewModifier { +// swiftlint:disable:next private_over_fileprivate strict_fileprivate +fileprivate struct OnboardingFooterButtonLayout: ViewModifier { func body(content: Content) -> some View { content .frame(height: 60) @@ -66,7 +67,7 @@ struct OnboardingFooterButtonLayout: ViewModifier { } extension View { - func buttonLayout() -> some View { + func onboardingFooterButtonLayout() -> some View { modifier(OnboardingFooterButtonLayout()) } } diff --git a/secant/UIComponents/Buttons/NavigationButtonStyle.swift b/secant/UIComponents/Buttons/NavigationButtonStyle.swift index 127f612..c687b0b 100644 --- a/secant/UIComponents/Buttons/NavigationButtonStyle.swift +++ b/secant/UIComponents/Buttons/NavigationButtonStyle.swift @@ -8,8 +8,6 @@ import SwiftUI struct NavigationButtonStyle: ButtonStyle { - @Environment(\.colorScheme) var colorScheme - func makeBody(configuration: Configuration) -> some View { configuration.label .frame( @@ -25,7 +23,7 @@ struct NavigationButtonStyle: ButtonStyle { Asset.Colors.Buttons.onboardingNavigation.color ) .cornerRadius(.infinity) - .neumorphicButtonDesign(configuration.isPressed) + .neumorphicButton(configuration.isPressed) } } diff --git a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift index 4e6825e..d0e3fc8 100644 --- a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift +++ b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift @@ -13,8 +13,10 @@ import SwiftUI /// - 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 /// 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 + let isPressed: Bool init(_ isPressed: Bool) { @@ -24,13 +26,13 @@ struct NeumorphicDesign: ViewModifier { func body(content: Content) -> some View { content .shadow( - color: Asset.Colors.Buttons.neumorphicDarkSide.color, + color: Asset.Colors.Onboarding.neumorphicDarkSide.color, radius: 15, x: colorScheme == .light && !isPressed ? 10 : -10, y: colorScheme == .light && !isPressed ? 10 : 10 ) .shadow( - color: Asset.Colors.Buttons.neumorphicLightSide.color, + color: Asset.Colors.Onboarding.neumorphicLightSide.color, radius: 10, x: 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 /// - 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. -struct NeumorphicButtonDesign: ViewModifier { +// swiftlint:disable:next private_over_fileprivate strict_fileprivate +fileprivate struct NeumorphicButton: ViewModifier { @Environment(\.colorScheme) var colorScheme + let isPressed: Bool init(_ isPressed: Bool) { @@ -68,12 +72,13 @@ struct NeumorphicButtonDesign: ViewModifier { ) } } + extension View { - func neumorphicDesign(_ isPressed: Bool = false) -> some View { - self.modifier(NeumorphicDesign(isPressed)) + func neumorphic(_ isPressed: Bool = false) -> some View { + self.modifier(Neumorphic(isPressed)) } - func neumorphicButtonDesign(_ isPressed: Bool = false) -> some View { - self.modifier(NeumorphicButtonDesign(isPressed)) + func neumorphicButton(_ isPressed: Bool = false) -> some View { + self.modifier(NeumorphicButton(isPressed)) } } diff --git a/secant/UIComponents/Buttons/StandardButtonStyle.swift b/secant/UIComponents/Buttons/StandardButtonStyle.swift index e48b619..135cc3f 100644 --- a/secant/UIComponents/Buttons/StandardButtonStyle.swift +++ b/secant/UIComponents/Buttons/StandardButtonStyle.swift @@ -31,7 +31,7 @@ struct StandardButtonStyle: ButtonStyle { : disabledBackgroundColor ) .cornerRadius(12) - .neumorphicButtonDesign(configuration.isPressed) + .neumorphicButton(configuration.isPressed) } } diff --git a/secant/UIComponents/CircularFrame/CircularFrameBackground.swift b/secant/UIComponents/CircularFrame/CircularFrameBackground.swift index b9a02a2..4ac6ab2 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBackground.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBackground.swift @@ -26,7 +26,7 @@ struct CircularFrameBackgroundImages: Animatable, ViewModifier { .opacity(imageIndex == viewStore.index ? 1 : 0) .offset(x: imageIndex <= viewStore.index ? 0 : 25) .mask(Circle()) - .neumorphicDesign() + .neumorphic() } content @@ -44,7 +44,7 @@ struct CircularFrameBackgroundImage: Animatable, ViewModifier { .resizable() .aspectRatio(1.3, contentMode: .fill) .mask(Circle()) - .neumorphicDesign() + .neumorphic() content } @@ -69,25 +69,25 @@ struct CircularFrameBackground_Previews: PreviewProvider { .backgroundImage(Asset.Assets.Backgrounds.callout0.image) .frame(width: 300, height: 300) .applyScreenBackground() - .neumorphicDesign() + .neumorphic() CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout1.image) .frame(width: 300, height: 300) .applyScreenBackground() - .neumorphicDesign() + .neumorphic() CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout2.image) .frame(width: 300, height: 300) .applyScreenBackground() - .neumorphicDesign() + .neumorphic() CircularFrame() .backgroundImage(Asset.Assets.Backgrounds.callout3.image) .frame(width: 300, height: 300) .applyScreenBackground() - .neumorphicDesign() + .neumorphic() } .preferredColorScheme(.light) .previewLayout(.fixed(width: size + 50, height: size + 50)) diff --git a/secant/UIComponents/FontStyles/SecantTextStyles.swift b/secant/UIComponents/FontStyles/SecantTextStyles.swift index debe65b..59f6be8 100644 --- a/secant/UIComponents/FontStyles/SecantTextStyles.swift +++ b/secant/UIComponents/FontStyles/SecantTextStyles.swift @@ -22,7 +22,7 @@ extension Text { } func synopsisText() -> some View { - self.modifier(SynopsisStyle()) + self.modifier(ParagraphStyle()) } /// Body text style. Used for content. Roboto-Regular 18pt @@ -35,7 +35,7 @@ extension Text { } /// Used for additional information, explanations, context (usually paragraphs) - private struct SynopsisStyle: ViewModifier { + private struct ParagraphStyle: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Asset.Colors.Text.heading.color) From ae2521d408a8250fcff4dc7492af7725ebe1cc0f Mon Sep 17 00:00:00 2001 From: Lukas Korba Date: Wed, 23 Feb 2022 18:56:53 +0100 Subject: [PATCH 09/13] Update secant/UIComponents/CircularFrame/CircularFrameBadge.swift agreed Co-authored-by: dh-ecc <90868897+dh-ecc@users.noreply.github.com> --- secant/UIComponents/CircularFrame/CircularFrameBadge.swift | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift index 17cf7b6..900f7cb 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift @@ -77,7 +77,12 @@ struct BadgesOverlay: Animatable, ViewModifier { y: proxy.size.height * 0.15 ) .opacity(badgeIndex == viewStore.index ? 1 : 0) - .shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0) + .shadow( + color: Asset.Colors.Onboarding.badgeShadow.color, + radius: 10, + x: 0, + y: 0 + ) } } From 9323e32f6af24f6587fc41cd7ac10407e4c9e276 Mon Sep 17 00:00:00 2001 From: Lukas Korba Date: Wed, 23 Feb 2022 18:57:08 +0100 Subject: [PATCH 10/13] Update secant/UIComponents/CircularFrame/CircularFrameBadge.swift agreed Co-authored-by: dh-ecc <90868897+dh-ecc@users.noreply.github.com> --- secant/UIComponents/CircularFrame/CircularFrameBadge.swift | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift index 900f7cb..cd27b29 100644 --- a/secant/UIComponents/CircularFrame/CircularFrameBadge.swift +++ b/secant/UIComponents/CircularFrame/CircularFrameBadge.swift @@ -120,7 +120,12 @@ struct BadgeOverlay: Animatable, ViewModifier { ) .transition(.scale(scale: 2)) .transition(.opacity) - .shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0) + .shadow( + color: Asset.Colors.Onboarding.badgeShadow.color, + radius: 10, + x: 0, + y: 0 + ) Spacer() } } From cc2479722e0a0528df5dd85dc9711e02b631a79b Mon Sep 17 00:00:00 2001 From: Lukas Korba Date: Wed, 23 Feb 2022 18:57:32 +0100 Subject: [PATCH 11/13] removed extra spaces --- secant/UIComponents/CircularFrame/CircularFrame.swift | 2 +- secant/UIComponents/DesignGuide.swift | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/secant/UIComponents/CircularFrame/CircularFrame.swift b/secant/UIComponents/CircularFrame/CircularFrame.swift index bbfeb27..bfa7431 100644 --- a/secant/UIComponents/CircularFrame/CircularFrame.swift +++ b/secant/UIComponents/CircularFrame/CircularFrame.swift @@ -13,7 +13,7 @@ struct CircularFrame: View { var body: some View { GeometryReader { proxy in let lineWidth = proxy.size.width * 0.06 - + Circle() .stroke( LinearGradient( diff --git a/secant/UIComponents/DesignGuide.swift b/secant/UIComponents/DesignGuide.swift index 1d0b8a9..d82e1da 100644 --- a/secant/UIComponents/DesignGuide.swift +++ b/secant/UIComponents/DesignGuide.swift @@ -215,5 +215,3 @@ extension Button { ) } } - - From 18d880e2ea5e7ed70ec01f68c8a9a240908716be Mon Sep 17 00:00:00 2001 From: Lukas Korba Date: Wed, 23 Feb 2022 20:29:29 +0100 Subject: [PATCH 12/13] requested changes All comments have been resolved --- .../Contents.json | 2 +- .../ActiveButtonText.colorset/Contents.json | 2 +- .../Onboarding/OnboardingContentView.swift | 32 +++++++++++++------ .../Buttons/NeumorphicDesignModifier.swift | 4 +-- 4 files changed, 27 insertions(+), 13 deletions(-) diff --git a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json index dc1be31..e6b0b43 100644 --- a/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json +++ b/secant/Colors.xcassets/Buttons/OnboardingNavigation.colorset/Contents.json @@ -2,7 +2,7 @@ "colors" : [ { "color" : { - "color-space" : "display-p3", + "color-space" : "srgb", "components" : { "alpha" : "1.000", "blue" : "0xFD", diff --git a/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json b/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json index 8813445..f1d8177 100644 --- a/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json +++ b/secant/Colors.xcassets/Text/ActiveButtonText.colorset/Contents.json @@ -20,7 +20,7 @@ } ], "color" : { - "color-space" : "display-p3", + "color-space" : "srgb", "components" : { "alpha" : "1.000", "blue" : "0x52", diff --git a/secant/Screens/Onboarding/OnboardingContentView.swift b/secant/Screens/Onboarding/OnboardingContentView.swift index ea10070..63d2c2f 100644 --- a/secant/Screens/Onboarding/OnboardingContentView.swift +++ b/secant/Screens/Onboarding/OnboardingContentView.swift @@ -89,24 +89,38 @@ struct OnboardingContentView: View { /// while iPhone X, 11, etc are different family devices, capable to use more of the space. extension OnboardingContentView { var circularFrameUniformSize: CGFloat { - let aspect = height / width - let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0) + var deviceMultiplier = 1.0 - return width * (0.6 * deviceMultiplier) + if width > 0.0 { + let aspect = height / width + deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0) + } + + return width * 0.6 * deviceMultiplier } var circularFrameOffsetCoeffcient: CGFloat { - let aspect = height / width - let deviceMultiplier = aspect / 1.725 + var deviceMultiplier = 1.0 + + if width > 0.0 { + let aspect = height / width + deviceMultiplier = aspect / 1.725 + } return 4.4 * deviceMultiplier } var descriptionOffsetCoefficient: Double { - let aspect = height / width - let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5) - - return 8.0 / deviceMultiplier + if width > 0.0 { + let aspect = height / width + let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5) + + if abs(deviceMultiplier) > 0.0 { + return 8.0 / deviceMultiplier + } + } + + return 8.0 } } diff --git a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift index d0e3fc8..c0e948b 100644 --- a/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift +++ b/secant/UIComponents/Buttons/NeumorphicDesignModifier.swift @@ -29,13 +29,13 @@ fileprivate struct Neumorphic: ViewModifier { color: Asset.Colors.Onboarding.neumorphicDarkSide.color, radius: 15, x: colorScheme == .light && !isPressed ? 10 : -10, - y: colorScheme == .light && !isPressed ? 10 : 10 + y: 10 ) .shadow( color: Asset.Colors.Onboarding.neumorphicLightSide.color, radius: 10, x: colorScheme == .light && !isPressed ? -12 : 12, - y: colorScheme == .light && !isPressed ? -12 : -12 + y: -12 ) } } From 6528309245abdb4866b20f47c8d283515dd2ab32 Mon Sep 17 00:00:00 2001 From: Lukas Korba Date: Thu, 24 Feb 2022 14:30:00 +0100 Subject: [PATCH 13/13] synopsis -> paragraph The name of the function has been changed so it reflects the style being used --- secant/Screens/Onboarding/OnboardingContentView.swift | 2 +- secant/UIComponents/FontStyles/SecantTextStyles.swift | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/secant/Screens/Onboarding/OnboardingContentView.swift b/secant/Screens/Onboarding/OnboardingContentView.swift index 63d2c2f..81e6e8f 100644 --- a/secant/Screens/Onboarding/OnboardingContentView.swift +++ b/secant/Screens/Onboarding/OnboardingContentView.swift @@ -70,7 +70,7 @@ struct OnboardingContentView: View { } Text(viewStore.steps[stepIndex].description) - .synopsisText() + .paragraphText() .lineSpacing(2) .opacity(0.53) } diff --git a/secant/UIComponents/FontStyles/SecantTextStyles.swift b/secant/UIComponents/FontStyles/SecantTextStyles.swift index 59f6be8..7c31185 100644 --- a/secant/UIComponents/FontStyles/SecantTextStyles.swift +++ b/secant/UIComponents/FontStyles/SecantTextStyles.swift @@ -21,7 +21,7 @@ extension Text { self.modifier(TitleTextStyle()) } - func synopsisText() -> some View { + func paragraphText() -> some View { self.modifier(ParagraphStyle()) }