feat(ui): design prototype v58 (#150)

Author: pwltr

Bitkit/AppScene.swift

@@ -14,6 +14,7 @@ struct AppScene: View {
     @StateObject private var activity = ActivityListViewModel()
     @StateObject private var transfer = TransferViewModel()
     @StateObject private var widgets = WidgetsViewModel()
+    @StateObject private var scannerManager = ScannerManager()
     @StateObject private var settings = SettingsViewModel()
     @StateObject private var suggestionsManager = SuggestionsManager()
     @StateObject private var tagManager = TagManager()
@@ -70,6 +71,7 @@ struct AppScene: View {
             .environmentObject(activity)
             .environmentObject(transfer)
             .environmentObject(widgets)
+            .environmentObject(scannerManager)
             .environmentObject(settings)
             .environmentObject(suggestionsManager)
             .environmentObject(tagManager)

Bitkit/Assets.xcassets/icons/arrow-cjit.imageset/arrow-cjit.pdf

@@ -29,16 +29,8 @@ struct ActivityList: View {
                         NavigationLink(value: Route.activityDetail(item)) {
                             ActivityRow(item: item)
                         }
-                        .padding(.vertical)
+                        .padding(.top)
                         .disabled(isHorizontalSwipe)
-
-                        // Add divider if not the last item in the group
-                        if let nextIndex = activity.groupedActivities.firstIndex(of: groupItem),
-                           nextIndex + 1 < activity.groupedActivities.count,
-                           case .activity = activity.groupedActivities[nextIndex + 1]
-                        {
-                            Divider()
-                        }
                     }
                 }
             }

Bitkit/Assets.xcassets/icons/scan-brand.imageset/Contents.json

@@ -56,13 +56,6 @@ struct CustomButton: View {
             case .large: return 16
             }
         }
-
-        var cornerRadius: CGFloat {
-            switch self {
-            case .small: return 30
-            case .large: return 64
-            }
-        }
     }
 
     enum Variant {

Bitkit/Assets.xcassets/icons/scan-brand.imageset/scan-brand.pdf

@@ -31,7 +31,7 @@ struct PrimaryButtonView: View {
         .frame(height: size.height)
         .padding(.horizontal, size.horizontalPadding)
         .background(backgroundGradient)
-        .cornerRadius(size.cornerRadius)
+        .cornerRadius(64)
         .shadow(color: shadowColor, radius: 0, x: 0, y: -1)
         .opacity(isDisabled ? 0.3 : 1.0)
         .contentShape(Rectangle())
@@ -45,15 +45,7 @@ struct PrimaryButtonView: View {
             return AnyView(Color.gray4)
         }
 
-        let colors: [Color] = if isPressed {
-            [Color(hex: 0x3A3A3A), Color(hex: 0x2A2A2A)]
-        } else {
-            [Color(hex: 0x2A2A2A), Color(hex: 0x1C1C1C)]
-        }
-
-        return AnyView(
-            LinearGradient(colors: colors, startPoint: .top, endPoint: .bottom)
-        )
+        return AnyView(ButtonGradient(isPressed: isPressed))
     }
 
     private var shadowColor: Color {

Bitkit/Components/Activity/ActivityList.swift

@@ -14,37 +14,45 @@ struct SecondaryButtonView: View {
             }
 
             if size == .small {
-                CaptionBText(title, textColor: foregroundColor)
+                CaptionBText(title, textColor: textColor)
             } else {
-                BodySSBText(title, textColor: foregroundColor)
+                BodySSBText(title, textColor: textColor)
             }
         }
-        .frame(maxWidth: .infinity)
-        .frame(height: size.height)
-        .padding(.horizontal, size.horizontalPadding)
+        .frame(maxWidth: size == .large ? .infinity : nil)
+        .frame(height: buttonHeight)
+        .padding(.horizontal, 16)
         // TODO: Add background blur
         .background(
-            RoundedRectangle(cornerRadius: size.cornerRadius)
+            RoundedRectangle(cornerRadius: 64)
                 .fill(isPressed ? Color.white10 : Color.white01)
-        )
-        .overlay(
-            RoundedRectangle(cornerRadius: size.cornerRadius)
-                .stroke(borderColor, lineWidth: 2)
+                .overlay(
+                    RoundedRectangle(cornerRadius: 64)
+                        .strokeBorder(borderColor, lineWidth: strokeWidth)
+                )
         )
         .contentShape(Rectangle())
     }
 
-    private var foregroundColor: Color {
-        if isDisabled {
-            return .white32
-        }
-        return .white80
+    private var textColor: Color {
+        return isDisabled ? .white32 : .white80
     }
 
     private var borderColor: Color {
-        if isDisabled {
-            return .clear
+        return isDisabled ? .clear : Color(hex: 0x3A3A3A)
+    }
+
+    private var buttonHeight: CGFloat {
+        switch size {
+        case .small: return 37
+        case .large: return 56
+        }
+    }
+
+    private var strokeWidth: CGFloat {
+        switch size {
+        case .small: return 1
+        case .large: return 2
         }
-        return Color(hex: 0x3A3A3A)
     }
 }

Bitkit/Components/Button.swift Bitkit/Components/Button/Button.swiftBitkit/Components/Button.swift renamed to Bitkit/Components/Button/Button.swift

@@ -11,17 +11,16 @@ struct TertiaryButtonView: View {
                 icon
             }
 
-            BodySSBText(title, textColor: foregroundColor)
+            BodySSBText(title, textColor: textColor)
         }
         .frame(maxWidth: .infinity)
         .frame(height: CustomButton.Size.large.height)
         .padding(.horizontal, CustomButton.Size.large.horizontalPadding)
         .background(.clear)
-        .cornerRadius(CustomButton.Size.large.cornerRadius)
         .contentShape(Rectangle())
     }
 
-    private var foregroundColor: Color {
+    private var textColor: Color {
         return isPressed ? .textPrimary : .white80
     }
 }

Bitkit/Components/Button/PrimaryButtonView.swift

@@ -13,6 +13,7 @@ struct CopyAddressPair {
 
 struct CopyAddressCard: View {
     let addresses: [CopyAddressPair]
+    @Binding var navigationPath: [ReceiveRoute]
     @State private var showTooltipForIndex: Int? = nil
 
     var body: some View {
@@ -25,11 +26,20 @@ struct CopyAddressCard: View {
                         CaptionMText(pair.title)
                             .padding(.bottom, 12)
 
-                        BodySSBText(pair.address)
+                        BodySText(pair.address, textColor: .textPrimary)
                             .lineLimit(2)
                             .padding(.bottom, 12)
 
                         HStack(spacing: 8) {
+                            CustomButton(
+                                title: t("common__edit"),
+                                size: .small,
+                                icon: Image("pencil").foregroundColor(pair.type == .lightning ? .purpleAccent : .brandAccent),
+                                shouldExpand: true
+                            ) {
+                                navigationPath.append(.edit)
+                            }
+
                             CustomButton(
                                 title: t("common__copy"),
                                 size: .small,
@@ -68,7 +78,7 @@ struct CopyAddressCard: View {
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .padding(32)
-        .background(Color.white06)
+        .background(Color.black)
         .cornerRadius(8)
         .aspectRatio(1, contentMode: .fit)
     }
@@ -90,14 +100,3 @@ struct CopyAddressCard: View {
         }
     }
 }
-
-#Preview {
-    CopyAddressCard(addresses: [
-        CopyAddressPair(title: "On-chain Address", address: "bc1qar0srrr7xfkvy5l643lydnw9re59gtzzwf5mdq", type: .onchain),
-        CopyAddressPair(
-            title: "Lightning Invoice", address: "lnbc1500n1p3hk3sppp5k54t9c4p4u4tdgj0y8tqjp3kzjak8jtr0fwvnl2dpl5pvrm9gxsdqqcqzpgxqyz5vqsp5",
-            type: .lightning
-        ),
-    ])
-    .preferredColorScheme(.dark)
-}