fix(ui): polish UI & fixes for small screens (#183)

Author: pwltr

…trations/app-icon.imageset/Contents.json …ns/app-icon-black.imageset/Contents.jsonBitkit/Assets.xcassets/Illustrations/app-icon.imageset/Contents.json renamed to Bitkit/Assets.xcassets/Illustrations/app-icon-black.imageset/Contents.json Bitkit/Assets.xcassets/Illustrations/app-icon.imageset/Contents.json renamed to Bitkit/Assets.xcassets/Illustrations/app-icon-black.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "app-icon.png",
+      "filename" : "app-icon-black.png",
       "idiom" : "universal",
       "scale" : "1x"
     },

Bitkit/Assets.xcassets/Illustrations/app-icon-black.imageset/app-icon-black.png

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "app-icon-orange.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Bitkit/Assets.xcassets/Illustrations/app-icon-orange.imageset/Contents.json

@@ -64,6 +64,7 @@ struct CustomButton: View {
     let isDisabled: Bool
     let isLoading: Bool
     let shouldExpand: Bool
+    let background: AnyView?
     let action: (() async -> Void)?
     let destination: AnyView?
 
@@ -77,7 +78,8 @@ struct CustomButton: View {
         icon: (any View)? = nil,
         isDisabled: Bool = false,
         isLoading: Bool = false,
-        shouldExpand: Bool = false
+        shouldExpand: Bool = false,
+        background: (any View)? = nil
     ) {
         self.title = title
         self.variant = variant
@@ -86,6 +88,7 @@ struct CustomButton: View {
         self.isDisabled = isDisabled
         self.isLoading = isLoading
         self.shouldExpand = shouldExpand
+        self.background = background.map { AnyView($0) }
         action = nil
         destination = nil
     }
@@ -99,6 +102,7 @@ struct CustomButton: View {
         isDisabled: Bool = false,
         isLoading: Bool = false,
         shouldExpand: Bool = false,
+        background: (any View)? = nil,
         action: @escaping () async -> Void
     ) {
         self.title = title
@@ -108,6 +112,7 @@ struct CustomButton: View {
         self.isDisabled = isDisabled
         self.isLoading = isLoading
         self.shouldExpand = shouldExpand
+        self.background = background.map { AnyView($0) }
         self.action = action
         destination = nil
     }
@@ -121,6 +126,7 @@ struct CustomButton: View {
         isDisabled: Bool = false,
         isLoading: Bool = false,
         shouldExpand: Bool = false,
+        background: (any View)? = nil,
         destination: some View
     ) {
         self.title = title
@@ -130,6 +136,7 @@ struct CustomButton: View {
         self.isDisabled = isDisabled
         self.isLoading = isLoading
         self.shouldExpand = shouldExpand
+        self.background = background.map { AnyView($0) }
         action = nil
         self.destination = AnyView(destination)
     }
@@ -144,7 +151,8 @@ struct CustomButton: View {
                 isDisabled: isDisabled,
                 isLoading: isLoading,
                 isPressed: isPressed,
-                shouldExpand: shouldExpand
+                shouldExpand: shouldExpand,
+                background: background
             ))
         case .secondary:
             AnyView(SecondaryButtonView(

Bitkit/Assets.xcassets/Illustrations/app-icon-orange.imageset/app-icon-orange.png

@@ -8,6 +8,7 @@ struct PrimaryButtonView: View {
     let isLoading: Bool
     let isPressed: Bool
     let shouldExpand: Bool
+    let background: AnyView?
 
     var body: some View {
         HStack(spacing: 8) {
@@ -38,9 +39,14 @@ struct PrimaryButtonView: View {
     }
 
     private var backgroundGradient: some View {
+        if let background {
+            return background
+        }
+
         if isLoading {
             return AnyView(Color.gray6)
         }
+
         if isDisabled {
             return AnyView(Color.clear)
         }

Bitkit/Assets.xcassets/Illustrations/app-icon.imageset/app-icon.png

@@ -49,7 +49,10 @@ struct CopyAddressCard: View {
                                 onCopy(address: pair.address, index: index)
                             }
 
-                            ShareLink(item: URL(string: pair.address)!) {
+                            ShareLink(
+                                item: pair.address,
+                                preview: SharePreview(pair.address, image: Image("app-icon-orange"))
+                            ) {
                                 CustomButton(
                                     title: t("common__share"),
                                     size: .small,
@@ -77,7 +80,8 @@ struct CopyAddressCard: View {
             Spacer()
         }
         .frame(maxWidth: .infinity, alignment: .leading)
-        .padding(32)
+        .padding(.vertical, 32)
+        .padding(.horizontal, UIScreen.main.isSmall ? 16 : 32)
         .background(Color.black)
         .cornerRadius(8)
         .aspectRatio(1, contentMode: .fit)

Bitkit/Assets.xcassets/icons/bolt.imageset/bolt.pdf

@@ -25,6 +25,7 @@ struct MoneyStack: View {
                     symbol: true,
                     color: .textSecondary
                 )
+                .contentTransition(.numericText())
                 .transition(
                     .move(edge: .bottom)
                         .combined(with: .opacity)
@@ -40,6 +41,7 @@ struct MoneyStack: View {
                         prefix: prefix,
                         color: .textPrimary
                     )
+                    .contentTransition(.numericText())
 
                     Spacer()
 
@@ -60,6 +62,7 @@ struct MoneyStack: View {
                     symbol: true,
                     color: .textSecondary
                 )
+                .contentTransition(.numericText())
                 .transition(
                     .move(edge: .bottom)
                         .combined(with: .opacity)
@@ -75,6 +78,7 @@ struct MoneyStack: View {
                         prefix: prefix,
                         color: .textPrimary
                     )
+                    .contentTransition(.numericText())
 
                     Spacer()
 
@@ -179,15 +183,20 @@ private extension MoneyStack {
 #Preview {
     ScrollView {
         VStack(alignment: .leading, spacing: 32) {
-            // With toggle enabled
-            MoneyStack(sats: 123_456, prefix: "+", showSymbol: false)
+            // Large amounts to show dramatic transitions
+            MoneyStack(sats: 1_234_567_890, prefix: "+", showSymbol: false)
                 .environmentObject(MoneyStack.previewCurrencyVM(primaryDisplay: .bitcoin, currency: "USD"))
                 .environmentObject(MoneyStack.previewSettingsVM())
 
-            // With symbol
-            MoneyStack(sats: 123_456, prefix: "-", showSymbol: true)
+            // With symbol and different amount
+            MoneyStack(sats: 987_654_321, prefix: "-", showSymbol: true)
                 .environmentObject(MoneyStack.previewCurrencyVM(primaryDisplay: .fiat, currency: "EUR"))
                 .environmentObject(MoneyStack.previewSettingsVM())
+
+            // Medium amount with eye icon
+            MoneyStack(sats: 456_789_123, showEyeIcon: true)
+                .environmentObject(MoneyStack.previewCurrencyVM(primaryDisplay: .bitcoin, currency: "USD", displayUnit: .classic))
+                .environmentObject(MoneyStack.previewSettingsVM(hideBalance: true))
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .padding()