feat: styling

bambu-group-03 · Dec 5, 2023 · 3938dd0 · 3938dd0
1 parent 9f3c7d8
commit 3938dd0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/src/screens/profile/components/edit-profile-button.tsx b/src/screens/profile/components/edit-profile-button.tsx
@@ -17,10 +17,10 @@ export const EditProfileButton = ({
 
   if (user?.id === currentUser?.id) {
     return (
-      <View className="flex  justify-center">
+      <View className="flex justify-center">
         <Button
           label="Edit"
-          className="mb-2 mt-4 rounded-full bg-blue-400 px-4 py-2 text-center font-bold text-white shadow hover:bg-blue-500"
+          className="mt-4 rounded-full bg-blue-400 px-4 py-2 text-center font-bold text-white shadow hover:bg-blue-500"
           onPress={() => {
             navigation.navigate('EditProfileScreen', { user: currentUser });
           }}

diff --git a/src/screens/profile/components/profile-bio.tsx b/src/screens/profile/components/profile-bio.tsx
@@ -10,7 +10,7 @@ type ProfileBioProps = {
 export const ProfileBio = ({ user }: ProfileBioProps) => {
   return (
     <>
-      <View className="text-center">
+      <View className="py-5 text-center">
         <Text className="mb-1 text-2xl font-bold leading-normal text-slate-700">
           {user?.first_name} {user?.last_name}
         </Text>

diff --git a/src/screens/profile/components/stadistics-button.tsx b/src/screens/profile/components/stadistics-button.tsx
@@ -17,7 +17,7 @@ export const StadisticsButton = ({
 
   if (user?.id === currentUser?.id) {
     return (
-      <View className="mb-2 flex  justify-center">
+      <View className="flex justify-center">
         <Button
           label="Stats"
           className="mt-4 rounded-full bg-violet-400 px-4 py-2 text-center font-bold text-white shadow"

diff --git a/src/screens/profile/components/verify-button.tsx b/src/screens/profile/components/verify-button.tsx
@@ -17,7 +17,7 @@ export const VerifyButton = ({
 
   if (user?.id === currentUser?.id) {
     return (
-      <View className="mb-2 flex justify-center">
+      <View className=" flex justify-center">
         <Button
           label="Verify"
           className="mt-4 rounded-full bg-green-400 px-4 py-2 text-center font-bold text-white shadow"

diff --git a/src/screens/profile/profile-view.tsx b/src/screens/profile/profile-view.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { getUserState } from '@/core/auth';
 import type { UserType } from '@/core/auth/utils';
-import { View } from '@/ui';
+import { Button, View } from '@/ui';
 
 import EditProfileButton from './components/edit-profile-button';
 import { FollowActions } from './components/follow-actions';
@@ -23,6 +23,8 @@ const ProfileScreenView = ({
 }) => {
   const currentUser = getUserState();
 
+  const [moreOptions, setMoreOptions] = useState<boolean>(false);
+
   const [isFollowing, setIsFollowing] = useState<boolean>(
     user?.is_followed || false
   );
@@ -57,11 +59,20 @@ const ProfileScreenView = ({
         followerCount={followerCount}
         followingCount={followingCount}
       />
-      <View className=" border-gray-200 flex flex-row py-5 justify-between">
-        <EditProfileButton user={user} currentUser={currentUser} />
-        <StadisticsButton user={user} currentUser={currentUser} />
-        <VerifyButton user={user} currentUser={currentUser} />
-      </View>
+
+      <Button
+        className="py-18 mx-20 mt-3 flex items-center justify-center rounded-full bg-blue-400 px-6 text-center font-bold text-black shadow"
+        onPress={() => setMoreOptions(!moreOptions)}
+        label={moreOptions ? 'Less Options' : 'More Options'}
+      />
+
+      {moreOptions ? (
+        <View className=" flex flex-row justify-between border-gray-200 py-1">
+          <EditProfileButton user={user} currentUser={currentUser} />
+          <StadisticsButton user={user} currentUser={currentUser} />
+          <VerifyButton user={user} currentUser={currentUser} />
+        </View>
+      ) : null}
       <ProfileBio user={user} />
     </View>
   );