Merge pull request #106 from bambu-group-03/styling

Styling
bambu-group-03 · Dec 5, 2023 · f56a370 · f56a370
2 parents 63851ff + 55f1834
commit f56a370
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 12 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/profile-stats.tsx b/src/screens/profile/components/profile-stats.tsx
@@ -1,4 +1,8 @@
-import { faBookmark } from '@fortawesome/free-solid-svg-icons';
+import {
+  faAngleDown,
+  faAngleUp,
+  faBookmark,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
@@ -11,12 +15,16 @@ type ProfileStatsProps = {
   user: UserType | undefined;
   followerCount: number;
   followingCount: number;
+  option: boolean;
+  setOption: (option: boolean) => void;
 };
 
 export const ProfileStats = ({
   user,
   followerCount,
   followingCount,
+  option,
+  setOption,
 }: ProfileStatsProps) => {
   const navigate = useNavigation();
 
@@ -72,6 +80,18 @@ export const ProfileStats = ({
           </TouchableOpacity>
         </View>
       ) : null}
+
+      <View className="p-3 text-center ">
+        <TouchableOpacity onPress={() => setOption(!option)}>
+          <Text className=" tracking-wide text-slate-700" />
+          <Text className="text-sm text-blue-600">
+            <FontAwesomeIcon
+              icon={option ? faAngleUp : faAngleDown}
+              color={'black'}
+            />
+          </Text>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 };
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
   );
@@ -56,12 +58,23 @@ const ProfileScreenView = ({
         user={user}
         followerCount={followerCount}
         followingCount={followingCount}
+        option={moreOptions}
+        setOption={setMoreOptions}
+      />
+
+      <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'}
       />
-      <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>
+
+      {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>
   );