better look for account

ArtisanConnect/app/(tabs)/dashboard/account.jsx

@@ -1,5 +1,5 @@
 import { Link } from "expo-router";
-import {Button} from "react-native";
+import {Pressable} from "react-native";
 import {Box} from "@/components/ui/box";
 import {Text} from "@/components/ui/text";
 import {VStack} from "@/components/ui/vstack";
@@ -7,11 +7,12 @@ import {Image} from "@/components/ui/image";
 import {ActivityIndicator, } from "react-native";
 import {useEffect, useState} from "react";
 import {getUserById} from "@/api/client";
+import {HStack} from "@gluestack-ui/themed";
 
 export default function Account() {
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const currentUserId = 1; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
+  const currentUserId = 2; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -37,34 +38,67 @@ export default function Account() {
   }
 
   return (
-      <VStack className="p-4">
+      <VStack className="bg-gray-50 flex-1">
-        <Box className="flex-row items-center mb-4">
+        <Box className="bg-white pb-6 shadow-sm">
-          <Image
+          <Box className="items-center pt-6 mb-4">
-              source={{ uri: user.profileImage || "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain" }}
+            <Image
-              className="h-16 w-16 text-center rounded-full mr-4"
+                source={{
-              alt="Zdjęcie profilowe"
+                  uri: user.profileImage || "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain"
-          />
+                }}
-          <Text className="text-xl font-bold">
+                className="h-24 w-24 rounded-full border-4 border-white shadow-md"
+                alt="Zdjęcie profilowe"
+            />
+          </Box>
+
+          <Text className="text-2xl font-bold text-center mb-1">
             {user.firstName} {user.lastName}
           </Text>
-        </Box>
-        <Button className="mb-4"
-                title="Edytuj dane użytkownika"
-            onPress={() => {
-              // TODO: Implementacja edycji danych użytkownika
-              console.log("Edytuj dane użytkownika");
-            }}
 
-        >
+          <Pressable
-        </Button>
+              className="border border-[#002f34] rounded-md py-2 px-4 self-center"
-        <Box className="mt-4">
+              onPress={() => console.log("Edytuj dane użytkownika")}
-          <Link href="/dashboard/userNotices">
+          >
-            <Text className="text-lg text-primary-500">Moje ogłoszenia</Text>
+            <Text className="text-[#002f34] font-medium">Edytuj profil</Text>
-          </Link>
+          </Pressable>
-          <Link href="/dashboard/userPaymentHistory">
-            <Text className="text-lg text-primary-500 mt-2">Moje płatności</Text>
-          </Link>
         </Box>
+
+        <Box className="bg-white mt-4 p-5 border-t border-b border-gray-200">
+          <Text className="font-bold text-lg mb-3">Moje dane</Text>
+
+          <HStack className="mb-3">
+            <Text className="text-gray-600 w-24">E-mail</Text>
+            <Text className="flex-1">{user.email || "brak danych"}</Text>
+          </HStack>
+
+        </Box>
+
+        <Box className="bg-white mt-4 p-5">
+          <Text className="font-bold text-lg mb-3">Moje konto</Text>
+
+          <Link href="/dashboard/userNotices" asChild>
+            <Pressable className="py-3 flex-row items-center border-b border-gray-100">
+              <Text className="text-lg flex-1">Moje ogłoszenia</Text>
+              <Text>▶</Text>
+            </Pressable>
+          </Link>
+
+          {/*Tak dodałem, można zmienić na coś innego*/}
+          <Link href="/dashboard/userPaymentHistory" asChild>
+            <Pressable className="py-3 flex-row items-center border-b border-gray-100">
+              <Text className="text-lg flex-1">Historia płatności</Text>
+              <Text>▶</Text>
+            </Pressable>
+          </Link>
+
+          <Pressable className="py-3 flex-row items-center">
+            <Text className="text-lg flex-1">Ustawienia powiadomień</Text>
+            <Text>▶</Text>
+          </Pressable>
+        </Box>
+
+        <Pressable className="mt-8 mx-5 p-4 bg-white rounded-md items-center shadow-sm">
+          <Text className="text-red-500 font-medium">Wyloguj się</Text>
+        </Pressable>
       </VStack>
   );
 }