Button UI updates

Colors updated, pressed button simulated and present in the DesignGuide.swift
This commit is contained in:
Lukas Korba 2022-02-22 15:44:29 +01:00
parent e1c1ec62e7
commit 8931433f8e
14 changed files with 160 additions and 34 deletions

View File

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

View File

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

View File

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

View File

@ -4,7 +4,7 @@
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"alpha" : "0.000",
"blue" : "0xFF",
"green" : "0xFF",
"red" : "0xFF"

View File

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

View File

@ -39,6 +39,7 @@ enum OnboardingAction: Equatable {
case back
case skip
case createNewWallet
case importExistingWallet
}
typealias OnboardingReducer = Reducer<OnboardingState, OnboardingAction, Void>
@ -69,6 +70,9 @@ extension OnboardingReducer {
case .createNewWallet:
return .none
case .importExistingWallet:
return .none
}
}
}

View File

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

View File

@ -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<OnboardingState, OnboardingAction>(
initialState: OnboardingState(index: 0),
initialState: OnboardingState(index: 3),
reducer: OnboardingReducer.default,
environment: ()
)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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