Merge pull request #263 from getAlby/task-add-padding

fix: add padding to icons
getAlby · Feb 7, 2025 · 8f197b0 · 8f197b0
2 parents d7b632e + 4b648d8
commit 8f197b0
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -29,11 +29,12 @@
   "dependencies": {
     "@alevy97/react-native-userdefaults": "^0.2.2",
     "@getalby/expo-shared-preferences": "^0.0.1",
-    "@noble/curves": "^1.6.0",
     "@getalby/lightning-tools": "^5.1.2",
     "@getalby/sdk": "^3.9.0",
-    "@popicons/react-native": "^0.0.20",
+    "@noble/curves": "^1.6.0",
+    "@popicons/react-native": "^0.0.22",
     "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-navigation/native-stack": "^7.2.0",
     "@rn-primitives/dialog": "^1.0.3",
     "@rn-primitives/portal": "^1.0.3",
     "@rn-primitives/switch": "^1.0.3",
@@ -42,17 +43,17 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.10",
-    "expo-device": "~6.0.2",
-    "expo-notification-service-extension-plugin": "^1.0.1",
-    "expo-notifications": "~0.29.11",
     "expo": "~52.0.20",
     "expo-camera": "~16.0.10",
     "expo-clipboard": "~7.0.0",
     "expo-constants": "~17.0.3",
+    "expo-device": "~6.0.2",
     "expo-font": "~13.0.2",
     "expo-linear-gradient": "~14.0.1",
     "expo-linking": "~7.0.3",
     "expo-local-authentication": "~15.0.1",
+    "expo-notification-service-extension-plugin": "^1.0.1",
+    "expo-notifications": "~0.29.11",
     "expo-router": "~4.0.15",
     "expo-secure-store": "~14.0.0",
     "expo-splash-screen": "^0.29.18",

diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -69,8 +69,13 @@ export function Home() {
             onPressIn={() => {
               router.push("/settings");
             }}
+            className="-mr-4 px-6"
           >
-            <SettingsIcon className="text-muted-foreground" />
+            <SettingsIcon
+              className="text-muted-foreground"
+              width={24}
+              height={24}
+            />
           </TouchableOpacity>
         )}
       />
@@ -151,7 +156,7 @@ export function Home() {
         </ScrollView>
         <View className="flex items-center justify-center">
           <Link href="/transactions" asChild>
-            <TouchableOpacity>
+            <TouchableOpacity className="p-4">
               <ChevronUpIcon
                 className="text-muted-foreground"
                 width={32}

diff --git a/pages/Transactions.tsx b/pages/Transactions.tsx
@@ -7,6 +7,7 @@ import {
   Pressable,
   RefreshControl,
   ScrollView,
+  TouchableOpacity,
   View,
 } from "react-native";
 import { XIcon } from "~/components/Icons";
@@ -74,13 +75,14 @@ export function Transactions() {
         title="Transactions"
         animation="slide_from_bottom"
         right={() => (
-          <Pressable
+          <TouchableOpacity
             onPressIn={() => {
               router.back();
             }}
+            className="-mr-4 px-6"
           >
-            <XIcon className="text-foreground" />
-          </Pressable>
+            <XIcon className="text-muted-foreground" width={24} height={24} />
+          </TouchableOpacity>
         )}
       />
       {allTransactions && allTransactions.length ? (

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
@@ -171,13 +171,21 @@ export function SetupWallet() {
                 }
                 router.replace("/");
               }}
+              className="-mr-4 px-6"
             >
-              <XIcon className="text-foreground" />
+              <XIcon className="text-muted-foreground" width={24} height={24} />
             </TouchableOpacity>
           ) : (
             <>
-              <TouchableOpacity onPressIn={() => setShowHelp(true)}>
-                <HelpCircleIcon className="text-foreground" />
+              <TouchableOpacity
+                onPressIn={() => setShowHelp(true)}
+                className="-mr-4 px-6"
+              >
+                <HelpCircleIcon
+                  className="text-muted-foreground"
+                  width={24}
+                  height={24}
+                />
               </TouchableOpacity>
               <HelpModal
                 visible={showHelp}

diff --git a/yarn.lock b/yarn.lock
@@ -1703,10 +1703,10 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
-"@popicons/react-native@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@popicons/react-native/-/react-native-0.0.20.tgz#0bb9d84f63a8057e918c86a8f809e101b95eb35b"
-  integrity sha512-oBTQ6DNBA4NGEnODr/IhGujcDVZPgKB0uXNYEkrg9znsCYN/CZC1CTyoKnQzQSnmsZj/7+JLFd0TpUD7v1DCug==
+"@popicons/react-native@^0.0.22":
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/@popicons/react-native/-/react-native-0.0.22.tgz#3d1084a1a0d357d09e129ff8e532a8c5b871d0de"
+  integrity sha512-j3pPLd/y5QZV2JYlwczQxpOYIWgxIdkwqtUWTH0X1JwLmncaqr4ht4b3PAEPQyfhRexEcSD43EP1a8+IyW0rXQ==
 
 "@radix-ui/primitive@1.1.0":
   version "1.1.0"
@@ -2079,6 +2079,14 @@
   dependencies:
     nanoid "3.3.8"
 
+"@react-navigation/stack@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-7.1.1.tgz#0ae8902c5d72573a3c178b3fd19a65cc1971ad16"
+  integrity sha512-CBTKQlIkELp05zRiTAv5Pa7OMuCpKyBXcdB3PGMN2Mm55/5MkDsA1IaZorp/6TsVCdllITD6aTbGX/HA/88A6w==
+  dependencies:
+    "@react-navigation/elements" "^2.2.5"
+    color "^4.2.3"
+
 "@remix-run/node@^2.12.0":
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/@remix-run/node/-/node-2.15.0.tgz#e64e2b14ca5ce4628021b7384d45992df118218f"