From b2eb4b228e24aedee49f14a732ad947c5397215e Mon Sep 17 00:00:00 2001 From: Dimitris Apostolou Date: Fri, 18 Feb 2022 23:39:04 +0200 Subject: [PATCH 1/7] Fix typos --- .github/ISSUE_TEMPLATE/bug-report.md | 2 +- .../BackupFlow/RecoveryPhraseValidation.swift | 2 +- secant/Models/Balance.swift | 12 ++++++------ secant/Stubs/MockServices.swift | 2 +- secant/Stubs/ZcashSDKStubs.swift | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md index 7ee50919..b8a31d05 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.md +++ b/.github/ISSUE_TEMPLATE/bug-report.md @@ -36,7 +36,7 @@ Please provide a general summary of the issue you're experiencing Tell us what should happen ### Actual behaviour + errors -Tell us what happens instead including any noticable error output (any messages +Tell us what happens instead including any noticeable error output (any messages displayed on-screen when e.g. a crash occurred) diff --git a/secant/Features/BackupFlow/RecoveryPhraseValidation.swift b/secant/Features/BackupFlow/RecoveryPhraseValidation.swift index c5b8a481..c7795652 100644 --- a/secant/Features/BackupFlow/RecoveryPhraseValidation.swift +++ b/secant/Features/BackupFlow/RecoveryPhraseValidation.swift @@ -75,7 +75,7 @@ extension RecoveryPhraseValidationState { /// Given an array of RecoveryPhraseStepCompletion, missing indices, original phrase and the number of groups it was split into, /// assembly the resulting phrase. This comes up with the "proposed solution" for the recovery phrase validation challenge. /// - returns:an array of String containing the recovery phrase words ordered by the original phrase order, or `nil` - /// if a resulting phrase can't be formed becasue the validation state is not complete. + /// if a resulting phrase can't be formed because the validation state is not complete. var resultingPhrase: [String]? { guard missingIndices.count == validationWords.count else { return nil } diff --git a/secant/Models/Balance.swift b/secant/Models/Balance.swift index 00c3db20..c4bb4f38 100644 --- a/secant/Models/Balance.swift +++ b/secant/Models/Balance.swift @@ -28,13 +28,13 @@ protocol Funds { } /** -Wallet Balance that condenses transpant, Sapling and Orchard funds +Wallet Balance that condenses transparent, Sapling and Orchard funds */ protocol WalletBalance { /** Transparent funds. This is the sum of the UTXOs of the user found at a given time */ - var transaparent: Funds { get } + var transparent: Funds { get } /** Funds on the Sapling shielded pool for a given user. @@ -70,18 +70,18 @@ protocol WalletBalance { extension WalletBalance { static var nullBalance: WalletBalance { Balance( - transaparent: ZcashFunds.noFunds, + transparent: ZcashFunds.noFunds, sapling: ZcashFunds.noFunds, orchard: ZcashFunds.noFunds ) } var totalAvailableBalance: Int64 { - transaparent.confirmed + sapling.confirmed + orchard.confirmed + transparent.confirmed + sapling.confirmed + orchard.confirmed } var totalUnconfirmedBalance: Int64 { - transaparent.unconfirmed + sapling.unconfirmed + orchard.unconfirmed + transparent.unconfirmed + sapling.unconfirmed + orchard.unconfirmed } var totalBalance: Int64 { @@ -93,7 +93,7 @@ extension WalletBalance { Concrete Wallet Balance. */ struct Balance: WalletBalance { - var transaparent: Funds + var transparent: Funds var sapling: Funds var orchard: Funds } diff --git a/secant/Stubs/MockServices.swift b/secant/Stubs/MockServices.swift index 69b46ddc..e9562bce 100644 --- a/secant/Stubs/MockServices.swift +++ b/secant/Stubs/MockServices.swift @@ -4,7 +4,7 @@ // // Created by Francisco Gindre on 8/6/21. // -// TODO: Move this to diferent Target when real functionality is developed. +// TODO: Move this to different Target when real functionality is developed. import Foundation // swiftlint:disable line_length diff --git a/secant/Stubs/ZcashSDKStubs.swift b/secant/Stubs/ZcashSDKStubs.swift index ab9275b8..a01c73fb 100644 --- a/secant/Stubs/ZcashSDKStubs.swift +++ b/secant/Stubs/ZcashSDKStubs.swift @@ -93,7 +93,7 @@ public enum ZcashSDK { public static var defaultRetrie: Int = 5 /** - The default maximum amount of time to wait during retry backoff intervals. Failed loops will never wait longer than this before retyring. + The default maximum amount of time to wait during retry backoff intervals. Failed loops will never wait longer than this before retrying. */ public static var defaultMaxBackoffInterval: TimeInterval = 600 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 2/7] 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 ae196526..86a43885 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 00000000..bacc626d --- /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 00000000..ad0beba5 --- /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 00000000..f352d215 --- /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 6d769e27..2e4c791a 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 331e3db5..d254925a 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 00000000..f41ea016 --- /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 00000000..73c00596 --- /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 0f208273..88134459 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 3d61d2e0..96f344fe 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 822ca1ce..8220815d 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 62189a66..6fc2ece3 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 1da2f567..27c57083 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 65104355..48ed04e7 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 00000000..231cd0c2 --- /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 fa3245e3..47c45f36 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 cfaf75c1..e394b630 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 74e04f2d..b1abc7be 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 3/7] 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 86a43885..ca482ab2 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 70e2d1d3..4c8b3ab0 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 ad0beba5..cdf8f906 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 f352d215..a1ea3d0a 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 2e4c791a..20a49e8c 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 ac00bc96..f00d590e 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 1007663d..532ece08 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 55d46ab7..f43fea7c 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 f41ea016..24610477 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 ded04f0f..a043fd99 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 dd90c619..f526c8ba 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 6fc2ece3..19ee1a56 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 27c57083..060b3455 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 f424df56..9df79874 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 b6779fd7..f4c4eb25 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 231cd0c2..408efb65 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 e394b630..653fde90 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 b1abc7be..bacc5f9e 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 36fcd166..b9a02a2f 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 797e66c4..e587a92c 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 00000000..01bb3af0 --- /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 9c8bc977..debe65b9 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 3c4c961e..7c6ab260 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 4/7] 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 00000000..f3443f36 --- /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 00000000..bcca9cb4 --- /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 cdf8f906..b9557e99 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 a1ea3d0a..d6c10235 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 20a49e8c..dc1be316 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 f00d590e..e6b0b436 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 00000000..53c9a8f2 --- /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 00000000..14c25de8 --- /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 00000000..a70129b2 --- /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 f43fea7c..36398173 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 24610477..b2161d78 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 8220815d..c965037d 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 f4c4eb25..b2346171 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 48ed04e7..127f6126 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 408efb65..d01c1365 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 653fde90..e5d9fd1d 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 bacc5f9e..bbfeb277 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 e587a92c..17cf7b61 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 5/7] 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 d01c1365..4e6825e5 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 01bb3af0..a2f893fa 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 6/7] 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 00000000..3b7019f7 --- /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 00000000..79f02bd9 --- /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 acf7c648..fbcdfe78 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 e307ac7c..c0e5998f 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 def83380..763c69e3 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 55b0660c..6404520e 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 c965037d..c605759a 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 060b3455..3a34e498 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 63809d17..10e2eb6a 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 385c7d86..0f38979c 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 47c45f36..d4e79c72 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 a5223a04..13dd09e2 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 e5d9fd1d..e48b619f 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 d55d7027..1d0b8a97 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 7/7] 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 3a34e498..e7c6794e 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(