Button UI updates
Colors updated, pressed button simulated and present in the DesignGuide.swift
This commit is contained in:
parent
e1c1ec62e7
commit
8931433f8e
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -23,9 +23,9 @@
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "0.200",
|
"alpha" : "0.200",
|
||||||
"blue" : "0.933",
|
"blue" : "0xEF",
|
||||||
"green" : "0.863",
|
"green" : "0xDC",
|
||||||
"red" : "0.780"
|
"red" : "0xC8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"idiom" : "universal"
|
"idiom" : "universal"
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
"color" : {
|
"color" : {
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "1.000",
|
"alpha" : "0.000",
|
||||||
"blue" : "0xFF",
|
"blue" : "0xFF",
|
||||||
"green" : "0xFF",
|
"green" : "0xFF",
|
||||||
"red" : "0xFF"
|
"red" : "0xFF"
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "1.000",
|
"alpha" : "1.000",
|
||||||
"blue" : "1.000",
|
"blue" : "246",
|
||||||
"green" : "1.000",
|
"green" : "234",
|
||||||
"red" : "1.000"
|
"red" : "222"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"idiom" : "universal"
|
"idiom" : "universal"
|
||||||
|
@ -22,10 +22,10 @@
|
||||||
"color" : {
|
"color" : {
|
||||||
"color-space" : "srgb",
|
"color-space" : "srgb",
|
||||||
"components" : {
|
"components" : {
|
||||||
"alpha" : "0.200",
|
"alpha" : "1.000",
|
||||||
"blue" : "1.000",
|
"blue" : "106",
|
||||||
"green" : "1.000",
|
"green" : "72",
|
||||||
"red" : "1.000"
|
"red" : "61"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"idiom" : "universal"
|
"idiom" : "universal"
|
||||||
|
|
|
@ -39,6 +39,7 @@ enum OnboardingAction: Equatable {
|
||||||
case back
|
case back
|
||||||
case skip
|
case skip
|
||||||
case createNewWallet
|
case createNewWallet
|
||||||
|
case importExistingWallet
|
||||||
}
|
}
|
||||||
|
|
||||||
typealias OnboardingReducer = Reducer<OnboardingState, OnboardingAction, Void>
|
typealias OnboardingReducer = Reducer<OnboardingState, OnboardingAction, Void>
|
||||||
|
@ -69,6 +70,9 @@ extension OnboardingReducer {
|
||||||
|
|
||||||
case .createNewWallet:
|
case .createNewWallet:
|
||||||
return .none
|
return .none
|
||||||
|
|
||||||
|
case .importExistingWallet:
|
||||||
|
return .none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,6 +44,8 @@ internal enum Asset {
|
||||||
}
|
}
|
||||||
internal enum Buttons {
|
internal enum Buttons {
|
||||||
internal static let activeButton = ColorAsset(name: "ActiveButton")
|
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 buttonsTitleShadow = ColorAsset(name: "ButtonsTitleShadow")
|
||||||
internal static let createButton = ColorAsset(name: "CreateButton")
|
internal static let createButton = ColorAsset(name: "CreateButton")
|
||||||
internal static let createButtonDisabled = ColorAsset(name: "CreateButtonDisabled")
|
internal static let createButtonDisabled = ColorAsset(name: "CreateButtonDisabled")
|
||||||
|
|
|
@ -28,6 +28,16 @@ struct OnboardingFooterView: View {
|
||||||
.frame(height: proxy.size.height / 12)
|
.frame(height: proxy.size.height / 12)
|
||||||
.padding(.horizontal, 15)
|
.padding(.horizontal, 15)
|
||||||
.transition(.opacity)
|
.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 {
|
} else {
|
||||||
Button("Next") {
|
Button("Next") {
|
||||||
withAnimation(.easeInOut(duration: animationDuration)) {
|
withAnimation(.easeInOut(duration: animationDuration)) {
|
||||||
|
@ -38,7 +48,6 @@ struct OnboardingFooterView: View {
|
||||||
.frame(height: 60)
|
.frame(height: 60)
|
||||||
.padding(.horizontal, 28)
|
.padding(.horizontal, 28)
|
||||||
.transition(.opacity)
|
.transition(.opacity)
|
||||||
}
|
|
||||||
|
|
||||||
ProgressView(
|
ProgressView(
|
||||||
"0\(viewStore.index + 1)",
|
"0\(viewStore.index + 1)",
|
||||||
|
@ -53,11 +62,12 @@ struct OnboardingFooterView: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
struct OnboardingFooterView_Previews: PreviewProvider {
|
struct OnboardingFooterView_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
let store = Store<OnboardingState, OnboardingAction>(
|
let store = Store<OnboardingState, OnboardingAction>(
|
||||||
initialState: OnboardingState(index: 0),
|
initialState: OnboardingState(index: 3),
|
||||||
reducer: OnboardingReducer.default,
|
reducer: OnboardingReducer.default,
|
||||||
environment: ()
|
environment: ()
|
||||||
)
|
)
|
||||||
|
|
|
@ -13,7 +13,8 @@ extension Button {
|
||||||
StandardButtonStyle(
|
StandardButtonStyle(
|
||||||
foregroundColor: Asset.Colors.Text.activeButtonText.color,
|
foregroundColor: Asset.Colors.Text.activeButtonText.color,
|
||||||
background: Asset.Colors.Buttons.activeButton.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
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,8 @@ extension Button {
|
||||||
StandardButtonStyle(
|
StandardButtonStyle(
|
||||||
foregroundColor: Asset.Colors.Text.button.color,
|
foregroundColor: Asset.Colors.Text.button.color,
|
||||||
background: Asset.Colors.Buttons.createButton.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
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,8 +12,9 @@ extension Button {
|
||||||
buttonStyle(
|
buttonStyle(
|
||||||
StandardButtonStyle(
|
StandardButtonStyle(
|
||||||
foregroundColor: Asset.Colors.Text.button.color,
|
foregroundColor: Asset.Colors.Text.button.color,
|
||||||
background: Asset.Colors.Buttons.primaryButtonPressed.color,
|
background: Asset.Colors.Buttons.primaryButton.color,
|
||||||
pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color
|
pressedBackgroundColor: Asset.Colors.Buttons.primaryButtonPressed.color,
|
||||||
|
disabledBackgroundColor: Asset.Colors.Buttons.primaryButtonDisabled.color
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,8 @@ extension Button {
|
||||||
StandardButtonStyle(
|
StandardButtonStyle(
|
||||||
foregroundColor: Asset.Colors.Text.secondaryButtonText.color,
|
foregroundColor: Asset.Colors.Text.secondaryButtonText.color,
|
||||||
background: Asset.Colors.Buttons.secondaryButton.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
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,6 +13,7 @@ struct StandardButtonStyle: ButtonStyle {
|
||||||
let foregroundColor: Color
|
let foregroundColor: Color
|
||||||
let background: Color
|
let background: Color
|
||||||
let pressedBackgroundColor: Color
|
let pressedBackgroundColor: Color
|
||||||
|
let disabledBackgroundColor: Color
|
||||||
|
|
||||||
func makeBody(configuration: Configuration) -> some View {
|
func makeBody(configuration: Configuration) -> some View {
|
||||||
configuration.label
|
configuration.label
|
||||||
|
@ -27,7 +28,7 @@ struct StandardButtonStyle: ButtonStyle {
|
||||||
.background(
|
.background(
|
||||||
isEnabled ?
|
isEnabled ?
|
||||||
(configuration.isPressed ? pressedBackgroundColor : background)
|
(configuration.isPressed ? pressedBackgroundColor : background)
|
||||||
: .red
|
: disabledBackgroundColor
|
||||||
)
|
)
|
||||||
.cornerRadius(12)
|
.cornerRadius(12)
|
||||||
.neumorphicButtonDesign(configuration.isPressed)
|
.neumorphicButtonDesign(configuration.isPressed)
|
||||||
|
@ -40,7 +41,8 @@ private extension Button {
|
||||||
StandardButtonStyle(
|
StandardButtonStyle(
|
||||||
foregroundColor: Asset.Colors.Text.button.color,
|
foregroundColor: Asset.Colors.Text.button.color,
|
||||||
background: Asset.Colors.Buttons.createButton.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
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -118,11 +118,11 @@ struct ButtonGuide: View {
|
||||||
.primaryButtonStyle
|
.primaryButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// TODO: Pressed Primary Button
|
// Pressed Primary Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Pressed Primary Button")
|
Text("Pressed Primary Button")
|
||||||
}
|
}
|
||||||
.primaryButtonStyle
|
.primaryButtonPressedStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// Disabled Primary Button
|
// Disabled Primary Button
|
||||||
|
@ -140,14 +140,14 @@ struct ButtonGuide: View {
|
||||||
.activeButtonStyle
|
.activeButtonStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// TODO: Pressed Active Button
|
// Pressed Active Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Pressed Active Button")
|
Text("Pressed Active Button")
|
||||||
}
|
}
|
||||||
.activeButtonStyle
|
.activeButtonPressedStyle
|
||||||
.frame(height: buttonHeight)
|
.frame(height: buttonHeight)
|
||||||
|
|
||||||
// TODO: Disabled Active Button
|
// Disabled Active Button
|
||||||
Button(action: {}) {
|
Button(action: {}) {
|
||||||
Text("Disabled Active Button")
|
Text("Disabled Active Button")
|
||||||
}
|
}
|
||||||
|
@ -189,3 +189,31 @@ struct DesignGuide_Previews: PreviewProvider {
|
||||||
.previewLayout(.fixed(width: 1086, height: 1080))
|
.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
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue