Skip to content

Commit 4a95163

Browse files
pwltrpwltr
authored
feat(ui): update button design (#147)
1 parent a6dddc3 commit 4a95163

File tree

11 files changed

+242
-164
lines changed

11 files changed

+242
-164
lines changed

‎Bitkit/Components/Button.swift‎

Lines changed: 25 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ struct CustomButton: View {
6969
case primary
7070
case secondary
7171
case tertiary
72-
case accent
7372
}
7473

7574
let title: String
@@ -149,82 +148,40 @@ struct CustomButton: View {
149148
self.destination = AnyView(destination)
150149
}
151150

152-
private var backgroundColor: Color {
153-
if isLoading {
154-
return .gray6
155-
}
156-
157-
if isDisabled && icon != nil {
158-
return .white06
159-
}
160-
161-
if isDisabled {
162-
return .clear
163-
}
164-
165-
switch variant {
166-
case .primary:
167-
if isPressed {
168-
return .white32
169-
} else {
170-
return .white16
171-
}
172-
case .secondary, .tertiary:
173-
return .clear
174-
case .accent:
175-
if isPressed {
176-
return .brandAccent.opacity(0.8)
177-
} else {
178-
return .brandAccent
179-
}
180-
}
181-
}
182-
183-
private var foregroundColor: Color {
184-
if isDisabled {
185-
return .white32
186-
}
187-
188-
switch variant {
189-
case .primary:
190-
return .textPrimary
191-
case .secondary, .tertiary:
192-
if isPressed {
193-
return .textPrimary
194-
} else {
195-
return .white80
196-
}
197-
case .accent:
198-
return .white
199-
}
200-
}
201-
202-
private var borderColor: Color? {
203-
if isDisabled {
204-
return nil
205-
}
206-
151+
private var buttonVariantView: some View {
207152
switch variant {
208153
case .primary:
209-
return nil
154+
AnyView(PrimaryButtonView(
155+
title: title,
156+
size: size,
157+
icon: icon,
158+
isDisabled: isDisabled,
159+
isLoading: isLoading,
160+
isPressed: isPressed,
161+
shouldExpand: shouldExpand
162+
))
210163
case .secondary:
211-
if isPressed {
212-
return .white32
213-
} else {
214-
return .white16
215-
}
164+
AnyView(SecondaryButtonView(
165+
title: title,
166+
size: size,
167+
icon: icon,
168+
isDisabled: isDisabled,
169+
isPressed: isPressed
170+
))
216171
case .tertiary:
217-
return nil
218-
case .accent:
219-
return nil
172+
AnyView(TertiaryButtonView(
173+
title: title,
174+
icon: icon,
175+
isPressed: isPressed
176+
))
220177
}
221178
}
222179

223180
var body: some View {
224181
Group {
225182
if let destination {
226183
NavigationLink(destination: destination) {
227-
buttonContent
184+
buttonVariantView
228185
}
229186
.buttonStyle(
230187
CustomButtonStyle(
@@ -252,7 +209,7 @@ struct CustomButton: View {
252209
await action()
253210
}
254211
} label: {
255-
buttonContent
212+
buttonVariantView
256213
}
257214
.buttonStyle(
258215
CustomButtonStyle(
@@ -264,58 +221,11 @@ struct CustomButton: View {
264221
)
265222
.disabled(isDisabled || isLoading)
266223
} else {
267-
buttonContent
224+
buttonVariantView
268225
.opacity(isDisabled ? 0.5 : 1)
269226
}
270227
}
271228
}
272-
273-
private var buttonContent: some View {
274-
HStack(spacing: 8) {
275-
if let icon, !isLoading {
276-
icon
277-
}
278-
279-
if isLoading {
280-
ProgressView()
281-
.progressViewStyle(CircularProgressViewStyle(tint: foregroundColor))
282-
.frame(width: 20, height: 20)
283-
} else {
284-
if size == .small {
285-
CaptionBText(title, textColor: foregroundColor)
286-
} else {
287-
BodySSBText(title, textColor: foregroundColor)
288-
}
289-
}
290-
}
291-
.frame(maxWidth: size == .large || shouldExpand ? .infinity : nil)
292-
.frame(height: size.height)
293-
.padding(.horizontal, size.horizontalPadding)
294-
.background(backgroundColor)
295-
.cornerRadius(size.cornerRadius)
296-
.overlay(
297-
Group {
298-
if let borderColor {
299-
RoundedRectangle(cornerRadius: size.cornerRadius)
300-
.stroke(borderColor, lineWidth: 2)
301-
}
302-
}
303-
)
304-
.contentShape(Rectangle())
305-
}
306-
}
307-
308-
// UIViewRepresentable for UIKit blur effect
309-
struct BackdropBlurView: UIViewRepresentable {
310-
let radius: CGFloat
311-
312-
func makeUIView(context: Context) -> UIVisualEffectView {
313-
return UIVisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial))
314-
}
315-
316-
func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
317-
uiView.effect = UIBlurEffect(style: .systemUltraThinMaterial)
318-
}
319229
}
320230

321231
#Preview {

‎Bitkit/Components/Button/PrimaryButtonView.swift‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import SwiftUI
2+
3+
struct PrimaryButtonView: View {
4+
let title: String
5+
let size: CustomButton.Size
6+
let icon: AnyView?
7+
let isDisabled: Bool
8+
let isLoading: Bool
9+
let isPressed: Bool
10+
let shouldExpand: Bool
11+
12+
var body: some View {
13+
HStack(spacing: 8) {
14+
if let icon, !isLoading {
15+
icon
16+
}
17+
18+
if isLoading {
19+
ProgressView()
20+
.progressViewStyle(CircularProgressViewStyle(tint: .textPrimary))
21+
.frame(width: 20, height: 20)
22+
} else {
23+
if size == .small {
24+
CaptionBText(title, textColor: .textPrimary)
25+
} else {
26+
BodySSBText(title, textColor: .textPrimary)
27+
}
28+
}
29+
}
30+
.frame(maxWidth: (size == .large || shouldExpand) ? .infinity : nil)
31+
.frame(height: size.height)
32+
.padding(.horizontal, size.horizontalPadding)
33+
.background(backgroundGradient)
34+
.cornerRadius(size.cornerRadius)
35+
.shadow(color: shadowColor, radius: 0, x: 0, y: -1)
36+
.opacity(isDisabled ? 0.3 : 1.0)
37+
.contentShape(Rectangle())
38+
}
39+
40+
private var backgroundGradient: some View {
41+
if isLoading {
42+
return AnyView(Color.gray6)
43+
}
44+
if isDisabled {
45+
return AnyView(Color.gray4)
46+
}
47+
48+
let colors: [Color] = if isPressed {
49+
[Color(hex: 0x3A3A3A), Color(hex: 0x2A2A2A)]
50+
} else {
51+
[Color(hex: 0x2A2A2A), Color(hex: 0x1C1C1C)]
52+
}
53+
54+
return AnyView(
55+
LinearGradient(colors: colors, startPoint: .top, endPoint: .bottom)
56+
)
57+
}
58+
59+
private var shadowColor: Color {
60+
if isDisabled {
61+
return .clear
62+
}
63+
return isPressed ? Color.white.opacity(0.4) : Color.white.opacity(0.25)
64+
}
65+
}

‎Bitkit/Components/Button/SecondaryButtonView.swift‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import SwiftUI
2+
3+
struct SecondaryButtonView: View {
4+
let title: String
5+
let size: CustomButton.Size
6+
let icon: AnyView?
7+
let isDisabled: Bool
8+
let isPressed: Bool
9+
10+
var body: some View {
11+
HStack(spacing: 8) {
12+
if let icon {
13+
icon
14+
}
15+
16+
if size == .small {
17+
CaptionBText(title, textColor: foregroundColor)
18+
} else {
19+
BodySSBText(title, textColor: foregroundColor)
20+
}
21+
}
22+
.frame(maxWidth: .infinity)
23+
.frame(height: size.height)
24+
.padding(.horizontal, size.horizontalPadding)
25+
// TODO: Add background blur
26+
.background(
27+
RoundedRectangle(cornerRadius: size.cornerRadius)
28+
.fill(isPressed ? Color.white10 : Color.white01)
29+
)
30+
.overlay(
31+
RoundedRectangle(cornerRadius: size.cornerRadius)
32+
.stroke(borderColor, lineWidth: 2)
33+
)
34+
.contentShape(Rectangle())
35+
}
36+
37+
private var foregroundColor: Color {
38+
if isDisabled {
39+
return .white32
40+
}
41+
return .white80
42+
}
43+
44+
private var borderColor: Color {
45+
if isDisabled {
46+
return .clear
47+
}
48+
return Color(hex: 0x3A3A3A)
49+
}
50+
}

‎Bitkit/Components/Button/TertiaryButtonView.swift‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import SwiftUI
2+
3+
struct TertiaryButtonView: View {
4+
let title: String
5+
let icon: AnyView?
6+
let isPressed: Bool
7+
8+
var body: some View {
9+
HStack(spacing: 8) {
10+
if let icon {
11+
icon
12+
}
13+
14+
BodySSBText(title, textColor: foregroundColor)
15+
}
16+
.frame(maxWidth: .infinity)
17+
.frame(height: CustomButton.Size.large.height)
18+
.padding(.horizontal, CustomButton.Size.large.horizontalPadding)
19+
.background(.clear)
20+
.cornerRadius(CustomButton.Size.large.cornerRadius)
21+
.contentShape(Rectangle())
22+
}
23+
24+
private var foregroundColor: Color {
25+
return isPressed ? .textPrimary : .white80
26+
}
27+
}

‎Bitkit/Components/Home/Widgets.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ struct Widgets: View {
5656
}
5757

5858
CustomButton(
59-
title: t("widgets__add"), variant: .tertiary, size: .large, icon: Image("plus")
59+
title: t("widgets__add"), variant: .tertiary, icon: Image("plus")
6060
) {
6161
if app.hasSeenWidgetsIntro {
6262
navigation.navigate(.widgetsList)

‎Bitkit/Styles/Colors.swift‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@ extension Color {
1919

2020
static let gray6 = Color(hex: 0x101010)
2121
static let gray5 = Color(hex: 0x1C1C1D)
22+
static let gray4 = Color(hex: 0x3A3A3A)
2223
static let gray3 = Color(hex: 0x48484A)
2324
static let gray2 = Color(hex: 0x636366)
2425

2526
// MARK: - Alpha Colors
2627

2728
static let black50 = Color.black.opacity(0.5)
2829
static let black92 = Color.black.opacity(0.92)
30+
static let white01 = Color.white.opacity(0.01)
2931
static let white06 = Color.white.opacity(0.06)
3032
static let white08 = Color.white.opacity(0.08)
3133
static let white10 = Color.white.opacity(0.10)

‎Bitkit/Utilities/LocalizeHelpers.swift‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,18 @@ func t(_ key: String, comment: String = "", variables: [String: String] = [:]) -
7171
return localizedString
7272
}
7373

74+
// These are for keys that are not yet translated
75+
func tTodo(_ key: String, comment: String = "", variables: [String: String] = [:]) -> String {
76+
var localizedString = key
77+
78+
// Replace variables
79+
for (name, value) in variables {
80+
localizedString = localizedString.replacingOccurrences(of: "{\(name)}", with: value)
81+
}
82+
83+
return localizedString
84+
}
85+
7486
// Get a random line from a localized string
7587
func localizedRandom(_ key: String, comment: String = "") -> String {
7688
let localizedString = LocalizationHelper.getString(for: key, comment: comment)

0 commit comments

Comments
 (0)