Merge pull request #54 from zcash/background-component
Background Linear Gradient component + Design Guide
This commit is contained in:
commit
7f6c06af4f
|
@ -35,6 +35,7 @@
|
|||
0D4E7A1B26B364180058B01E /* secantTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D4E7A1A26B364180058B01E /* secantTests.swift */; };
|
||||
0D4E7A2626B364180058B01E /* secantUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D4E7A2526B364180058B01E /* secantUITests.swift */; };
|
||||
0D5D16F526E24CCF00AD33D1 /* AppError.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D5D16F426E24CCF00AD33D1 /* AppError.swift */; };
|
||||
0D7DF08C271DCC0E00530046 /* ScreenBackground.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D7DF08B271DCC0E00530046 /* ScreenBackground.swift */; };
|
||||
0D864A0526E1546000A61879 /* LoadingScreenTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D864A0426E1546000A61879 /* LoadingScreenTests.swift */; };
|
||||
0D864A0926E154FD00A61879 /* InitFailedScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D864A0726E154FD00A61879 /* InitFailedScreen.swift */; };
|
||||
0D864A0A26E154FD00A61879 /* InitFailedScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D864A0826E154FD00A61879 /* InitFailedScreenViewModel.swift */; };
|
||||
|
@ -42,7 +43,6 @@
|
|||
0D864A0F26E1583000A61879 /* LoadingScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D864A0D26E1583000A61879 /* LoadingScreenViewModel.swift */; };
|
||||
0DA13C8F26C15D1D00E3B610 /* WelcomeScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13C8D26C15D1D00E3B610 /* WelcomeScreen.swift */; };
|
||||
0DA13C9026C15D1D00E3B610 /* WelcomeScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13C8E26C15D1D00E3B610 /* WelcomeScreenViewModel.swift */; };
|
||||
0DA13C9326C15E2F00E3B610 /* PlainButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13C9226C15E2F00E3B610 /* PlainButton.swift */; };
|
||||
0DA13C9726C186FF00E3B610 /* RestoreWalletScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13C9526C186FF00E3B610 /* RestoreWalletScreen.swift */; };
|
||||
0DA13C9826C186FF00E3B610 /* RestoreWalletScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13C9626C186FF00E3B610 /* RestoreWalletScreenViewModel.swift */; };
|
||||
0DA13C9C26C1942100E3B610 /* BackupWalletScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13C9A26C1942100E3B610 /* BackupWalletScreen.swift */; };
|
||||
|
@ -50,6 +50,7 @@
|
|||
0DA13CA126C1955600E3B610 /* HomeScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13C9F26C1955600E3B610 /* HomeScreen.swift */; };
|
||||
0DA13CA226C1955600E3B610 /* HomeScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13CA026C1955600E3B610 /* HomeScreenViewModel.swift */; };
|
||||
0DA13CA526C1963000E3B610 /* Balance.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DA13CA426C1963000E3B610 /* Balance.swift */; };
|
||||
0DB8AA81271DC7520035BC9D /* DesignGuide.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DB8AA80271DC7520035BC9D /* DesignGuide.swift */; };
|
||||
660558E9270C7A54009D6954 /* Colors.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 660558E8270C7A54009D6954 /* Colors.xcassets */; };
|
||||
660558F7270C862F009D6954 /* Fonts+Generated.swift in Sources */ = {isa = PBXBuildFile; fileRef = 660558F5270C862F009D6954 /* Fonts+Generated.swift */; };
|
||||
660558F8270C862F009D6954 /* XCAssets+Generated.swift in Sources */ = {isa = PBXBuildFile; fileRef = 660558F6270C862F009D6954 /* XCAssets+Generated.swift */; };
|
||||
|
@ -118,6 +119,7 @@
|
|||
0D4E7A2526B364180058B01E /* secantUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = secantUITests.swift; sourceTree = "<group>"; };
|
||||
0D4E7A2726B364180058B01E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
|
||||
0D5D16F426E24CCF00AD33D1 /* AppError.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppError.swift; sourceTree = "<group>"; };
|
||||
0D7DF08B271DCC0E00530046 /* ScreenBackground.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ScreenBackground.swift; sourceTree = "<group>"; };
|
||||
0D864A0426E1546000A61879 /* LoadingScreenTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoadingScreenTests.swift; sourceTree = "<group>"; };
|
||||
0D864A0726E154FD00A61879 /* InitFailedScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InitFailedScreen.swift; sourceTree = "<group>"; };
|
||||
0D864A0826E154FD00A61879 /* InitFailedScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InitFailedScreenViewModel.swift; sourceTree = "<group>"; };
|
||||
|
@ -125,7 +127,6 @@
|
|||
0D864A0D26E1583000A61879 /* LoadingScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoadingScreenViewModel.swift; sourceTree = "<group>"; };
|
||||
0DA13C8D26C15D1D00E3B610 /* WelcomeScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WelcomeScreen.swift; sourceTree = "<group>"; };
|
||||
0DA13C8E26C15D1D00E3B610 /* WelcomeScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WelcomeScreenViewModel.swift; sourceTree = "<group>"; };
|
||||
0DA13C9226C15E2F00E3B610 /* PlainButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlainButton.swift; sourceTree = "<group>"; };
|
||||
0DA13C9526C186FF00E3B610 /* RestoreWalletScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RestoreWalletScreen.swift; sourceTree = "<group>"; };
|
||||
0DA13C9626C186FF00E3B610 /* RestoreWalletScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RestoreWalletScreenViewModel.swift; sourceTree = "<group>"; };
|
||||
0DA13C9A26C1942100E3B610 /* BackupWalletScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BackupWalletScreen.swift; sourceTree = "<group>"; };
|
||||
|
@ -133,6 +134,7 @@
|
|||
0DA13C9F26C1955600E3B610 /* HomeScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeScreen.swift; sourceTree = "<group>"; };
|
||||
0DA13CA026C1955600E3B610 /* HomeScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeScreenViewModel.swift; sourceTree = "<group>"; };
|
||||
0DA13CA426C1963000E3B610 /* Balance.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Balance.swift; sourceTree = "<group>"; };
|
||||
0DB8AA80271DC7520035BC9D /* DesignGuide.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DesignGuide.swift; sourceTree = "<group>"; };
|
||||
660558E8270C7A54009D6954 /* Colors.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Colors.xcassets; sourceTree = "<group>"; };
|
||||
660558F5270C862F009D6954 /* Fonts+Generated.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "Fonts+Generated.swift"; sourceTree = "<group>"; };
|
||||
660558F6270C862F009D6954 /* XCAssets+Generated.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "XCAssets+Generated.swift"; sourceTree = "<group>"; };
|
||||
|
@ -403,6 +405,8 @@
|
|||
children = (
|
||||
663FAB9A271D873300E495F8 /* Buttons */,
|
||||
66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */,
|
||||
0DB8AA80271DC7520035BC9D /* DesignGuide.swift */,
|
||||
0D7DF08B271DCC0E00530046 /* ScreenBackground.swift */,
|
||||
);
|
||||
path = "UI Components";
|
||||
sourceTree = "<group>";
|
||||
|
@ -454,7 +458,6 @@
|
|||
663FAB9A271D873300E495F8 /* Buttons */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
0DA13C9226C15E2F00E3B610 /* PlainButton.swift */,
|
||||
66DC733E271D88CC0053CBB6 /* StandardButtonStyle.swift */,
|
||||
663FAB9B271D874D00E495F8 /* ActiveButton.swift */,
|
||||
663FAB9D271D875700E495F8 /* CreateButton.swift */,
|
||||
|
@ -697,6 +700,7 @@
|
|||
0DA13C9826C186FF00E3B610 /* RestoreWalletScreenViewModel.swift in Sources */,
|
||||
0D32283326C5877A00262533 /* BalanceScreenViewModel.swift in Sources */,
|
||||
0D5D16F526E24CCF00AD33D1 /* AppError.swift in Sources */,
|
||||
0DB8AA81271DC7520035BC9D /* DesignGuide.swift in Sources */,
|
||||
0D32282326C586A800262533 /* HistoryScreen.swift in Sources */,
|
||||
0D864A0A26E154FD00A61879 /* InitFailedScreenViewModel.swift in Sources */,
|
||||
0DA13CA526C1963000E3B610 /* Balance.swift in Sources */,
|
||||
|
@ -719,8 +723,8 @@
|
|||
0DA13C9026C15D1D00E3B610 /* WelcomeScreenViewModel.swift in Sources */,
|
||||
66A0807B271993C500118B79 /* OnboardingProgressIndicator.swift in Sources */,
|
||||
663FAB9E271D875700E495F8 /* CreateButton.swift in Sources */,
|
||||
0D7DF08C271DCC0E00530046 /* ScreenBackground.swift in Sources */,
|
||||
0DA13C8F26C15D1D00E3B610 /* WelcomeScreen.swift in Sources */,
|
||||
0DA13C9326C15E2F00E3B610 /* PlainButton.swift in Sources */,
|
||||
0D32282826C586E000262533 /* RequestZcashScreen.swift in Sources */,
|
||||
0D32283226C5877A00262533 /* BalanceScreen.swift in Sources */,
|
||||
0D354A0A26D5A9D000315F45 /* KeyStoring.swift in Sources */,
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "extended-linear-srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0xF3",
|
||||
"green" : "0xE4",
|
||||
"red" : "0xD2"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0x5A",
|
||||
"green" : "0x36",
|
||||
"red" : "0x29"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "display-p3",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0xF9",
|
||||
"green" : "0xEF",
|
||||
"red" : "0xE3"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0x55",
|
||||
"green" : "0x31",
|
||||
"red" : "0x24"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
|
@ -53,6 +53,10 @@ internal enum Asset {
|
|||
internal static let gradientRight = ColorAsset(name: "GradientRight")
|
||||
internal static let negativeSpace = ColorAsset(name: "NegativeSpace")
|
||||
}
|
||||
internal enum ScreenBackground {
|
||||
internal static let gradientEnd = ColorAsset(name: "gradientEnd")
|
||||
internal static let gradientStart = ColorAsset(name: "gradientStart")
|
||||
}
|
||||
internal enum Text {
|
||||
internal static let activeButtonText = ColorAsset(name: "ActiveButtonText")
|
||||
internal static let button = ColorAsset(name: "Button")
|
||||
|
|
|
@ -56,21 +56,24 @@ struct HomeScreen: View {
|
|||
Button(action: {}, label: {
|
||||
Text("Request ZEC")
|
||||
})
|
||||
.buttonStyle(PlainButton())
|
||||
.primaryButtonStyle
|
||||
.frame(height: 50)
|
||||
}
|
||||
|
||||
@ViewBuilder var sendButton: some View {
|
||||
Button(action: {}, label: {
|
||||
Text("Send ZEC")
|
||||
})
|
||||
.buttonStyle(PlainButton())
|
||||
.primaryButtonStyle
|
||||
.frame(height: 50)
|
||||
}
|
||||
|
||||
@ViewBuilder var historyButton: some View {
|
||||
Button(action: {}, label: {
|
||||
Text("History")
|
||||
})
|
||||
.buttonStyle(PlainButton(style: .light))
|
||||
.primaryButtonStyle
|
||||
.frame(height: 50)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -23,7 +23,8 @@ struct RestoreWalletScreen: View {
|
|||
Button(action: {}, label: {
|
||||
Text("Restore Seed Phrase")
|
||||
})
|
||||
.buttonStyle(PlainButton())
|
||||
.primaryButtonStyle
|
||||
.frame(height: 50)
|
||||
}
|
||||
.padding(.horizontal, 30)
|
||||
.padding(.vertical)
|
||||
|
|
|
@ -28,14 +28,16 @@ struct WelcomeScreen: View {
|
|||
}, label: {
|
||||
Text("RESTORE WALLET")
|
||||
})
|
||||
.buttonStyle(PlainButton())
|
||||
.primaryButtonStyle
|
||||
.frame(height: 50)
|
||||
|
||||
Button(action: {
|
||||
self.viewModel.createNew()
|
||||
}, label: {
|
||||
Text("CREATE NEW WALLET")
|
||||
})
|
||||
.buttonStyle(PlainButton())
|
||||
.primaryButtonStyle
|
||||
.frame(height: 50)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
|
|
|
@ -1,62 +0,0 @@
|
|||
//
|
||||
// PlainButton.swift
|
||||
// secant
|
||||
//
|
||||
// Created by Francisco Gindre on 8/9/21.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct PlainButton: ButtonStyle {
|
||||
enum Theme {
|
||||
case light
|
||||
case bold
|
||||
}
|
||||
|
||||
var style = Theme.bold
|
||||
|
||||
func makeBody(configuration: Configuration) -> some View {
|
||||
configuration.label
|
||||
.foregroundColor(style.foregroundColor)
|
||||
.padding()
|
||||
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 48, maxHeight: 48)
|
||||
.background(style.background)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Previews
|
||||
|
||||
struct PlainButton_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
VStack {
|
||||
Button(action: {}, label: {
|
||||
Text("Button")
|
||||
})
|
||||
.buttonStyle(PlainButton())
|
||||
|
||||
Button(action: {}, label: {
|
||||
Text("Button")
|
||||
})
|
||||
.buttonStyle(PlainButton(style: .bold))
|
||||
}
|
||||
.padding(.horizontal, 30)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Theme
|
||||
|
||||
extension PlainButton.Theme {
|
||||
var background: some View {
|
||||
switch self {
|
||||
case .bold: return Color.black
|
||||
default: return Color.white
|
||||
}
|
||||
}
|
||||
|
||||
var foregroundColor: Color {
|
||||
switch self {
|
||||
case .bold: return Color.white
|
||||
default: return Color.black
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,50 @@
|
|||
//
|
||||
// DesignGuide.swift
|
||||
// secant-testnet
|
||||
//
|
||||
// Created by Francisco Gindre on 10/18/21.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct DesignGuide: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 30) {
|
||||
Button(action: {}) {
|
||||
Text("Primary Button")
|
||||
}
|
||||
.primaryButtonStyle
|
||||
.frame(height: 50)
|
||||
|
||||
Button(action: {}) {
|
||||
Text("Primary Active Button")
|
||||
}
|
||||
.createButtonStyle
|
||||
.frame(height: 50)
|
||||
|
||||
Button(action: {}) {
|
||||
Text("Secondary Button")
|
||||
}
|
||||
.secondaryButtonStyle
|
||||
.frame(height: 50)
|
||||
|
||||
Button(action: {}) {
|
||||
Text("Action Button")
|
||||
}
|
||||
.activeButtonStyle
|
||||
.frame(height: 50)
|
||||
}
|
||||
.padding(.horizontal, 30)
|
||||
.applyScreenBackground()
|
||||
}
|
||||
}
|
||||
|
||||
struct DesignGuide_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
DesignGuide()
|
||||
.preferredColorScheme(.dark)
|
||||
|
||||
DesignGuide()
|
||||
.preferredColorScheme(.light)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,55 @@
|
|||
//
|
||||
// ScreenBackground.swift
|
||||
// secant-testnet
|
||||
//
|
||||
// Created by Francisco Gindre on 10/18/21.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
/**
|
||||
A Vertical LinearGradient that takes an array of Colors and renders them vertically in a centered fashion mostly used as a background for Screen views..
|
||||
*/
|
||||
struct ScreenBackground: View {
|
||||
var colors = [
|
||||
Asset.Colors.ScreenBackground.gradientStart.color,
|
||||
Asset.Colors.ScreenBackground.gradientEnd.color
|
||||
]
|
||||
var body: some View {
|
||||
LinearGradient(
|
||||
colors: colors,
|
||||
startPoint: UnitPoint(x: 0.5, y: 0),
|
||||
endPoint: UnitPoint(x: 0.5, y: 1)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
struct ScreenBackgroundModifier: ViewModifier {
|
||||
func body(content: Content) -> some View {
|
||||
ZStack {
|
||||
ScreenBackground()
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension View {
|
||||
/**
|
||||
Adds a Vertical Linear Gradient with the default Colors of VLinearGradient. Supports both Light and Dark Mode
|
||||
*/
|
||||
func applyScreenBackground() -> some View {
|
||||
self.modifier(
|
||||
ScreenBackgroundModifier()
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
struct ScreenBackground_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
VStack {
|
||||
Text("Hello")
|
||||
}
|
||||
.applyScreenBackground()
|
||||
.preferredColorScheme(.light)
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue