minor fix on font size (#33)

GenerateNU · Nov 8, 2024 · 2ce23c2 · 2ce23c2
1 parent 40639ff
commit 2ce23c2
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 21 deletions.
diff --git a/frontend/app/(app)/user/components/badges.tsx b/frontend/app/(app)/user/components/badges.tsx
@@ -14,27 +14,33 @@ const Badges = ({ id }: { id: string }) => {
   if (isError) {
     return (
       <View className="flex flex-col w-full items-center">
-        <Text className="text-red-500">Failed to load badges.</Text>
+        <Text className="text-red-500 text-sm sm:text-base md:text-lg">
+          Failed to load badges.
+        </Text>
       </View>
     );
   }
 
   if (!badges || badges.length === 0) {
-    return;
+    return null;
   }
 
   return (
     <View className="flex flex-col w-full">
-      <Text className="font-bold text-lg pb-[2%] text-darkblue">Badges</Text>
-      <View className="flex flex-row w-full bg-water rounded-xl justify-between p-[5%] shadow-md flex-wrap">
+      <Text className="font-bold text-base sm:text-lg md:text-xl pb-[2%] text-darkblue">
+        Badges
+      </Text>
+      <View className="flex flex-row items-start w-full bg-water rounded-xl justify-between p-[5%] shadow-md flex-wrap">
         {badges.map((badge: any, key: number) => (
           <View
             className="flex flex-col items-center justify-center"
             key={key}
             style={{ flex: 1 }}
           >
             <Badge width={60} height={60} />
-            <Text className="line-break pt-[2%] font-bold">{badge}</Text>
+            <Text className="text-center text-xs sm:text-sm md:text-base line-break pt-[2%] font-bold">
+              {badge}
+            </Text>
           </View>
         ))}
       </View>

diff --git a/frontend/app/(app)/user/components/header.tsx b/frontend/app/(app)/user/components/header.tsx
@@ -46,7 +46,9 @@ const Header = ({ id }: { id: string }) => {
   if (isError) {
     return (
       <View className="flex flex-col w-full p-4">
-        <Text className="text-red-500">Failed to load user data.</Text>
+        <Text className="text-red-500 text-sm sm:text-base md:text-lg">
+          Failed to load user data.
+        </Text>
       </View>
     );
   }
@@ -57,25 +59,27 @@ const Header = ({ id }: { id: string }) => {
         <Profile image={data?.user.profilePicture || PROFILE_PHOTO} />
         <View className="flex flex-row ml-[5%] justify-around w-3/4">
           <TouchableOpacity className="flex-col justify-center items-center flex-1">
-            <Text className="font-bold text-darkblue">
+            <Text className="font-bold text-darkblue text-md sm:text-lg md:text-xl">
               {formatNumber(data?.user.followers.length)}
             </Text>
-            <Text className="text-darkblue">Followers</Text>
+            <Text className="text-darkblue text-xs sm:text-base">
+              Followers
+            </Text>
           </TouchableOpacity>
           <TouchableOpacity className="flex-col justify-center items-center flex-1">
-            <Text className="font-bold text-darkblue">
+            <Text className="font-bold text-darkblue text-md sm:text-lg md:text-xl">
               {formatNumber(data?.user.following.length)}
             </Text>
-            <Text className="text-darkblue">Following</Text>
+            <Text className="text-darkblue text-xs sm:text-md">Following</Text>
           </TouchableOpacity>
         </View>
       </View>
       <View className="flex flex-row justify-between py-[5%]">
         <View>
-          <Text className="font-bold text-xl text-darkblue">
+          <Text className="font-bold text-lg sm:text-xl md:text-2xl text-darkblue">
             {data?.user.name || 'First Last'}
           </Text>
-          <Text className="text-ocean">{`@${data?.user.username}`}</Text>
+          <Text className="text-ocean text-sm sm:text-base">{`@${data?.user.username}`}</Text>
         </View>
         {id !== supabaseId && (
           <Button

diff --git a/frontend/app/(app)/user/components/menu.tsx b/frontend/app/(app)/user/components/menu.tsx
@@ -64,7 +64,7 @@ const Menu = ({ id }: { id: string }) => {
   };
 
   if (noData) {
-    return;
+    return null;
   }
 
   return (
@@ -74,13 +74,17 @@ const Menu = ({ id }: { id: string }) => {
           className={`py-[3%] w-[50%] justify-center items-center ${category === 'Dives' ? 'border-b-2 border-darkblue' : 'border-b-2 border-gray-200'}`}
           onPress={() => setCategory('Dives')}
         >
-          <Text className="font-bold text-lg text-darkblue">Dives</Text>
+          <Text className="font-bold text-base sm:text-lg md:text-xl text-darkblue">
+            Dives
+          </Text>
         </TouchableOpacity>
         <TouchableOpacity
           className={`py-[3%] w-[50%] justify-center items-center ${category === 'Species' ? 'border-b-2 border-darkblue' : 'border-b-2 border-gray-200'}`}
           onPress={() => setCategory('Species')}
         >
-          <Text className="text-darkblue font-bold text-lg">Species</Text>
+          <Text className="font-bold text-base sm:text-lg md:text-xl text-darkblue">
+            Species
+          </Text>
         </TouchableOpacity>
       </View>
       {category === 'Dives' &&
@@ -91,7 +95,7 @@ const Menu = ({ id }: { id: string }) => {
             keyExtractor={(item) => item.toString()}
           />
         ) : diveLogError ? (
-          <Text className="text-gray-500 text-md">
+          <Text className="text-gray-500 text-sm sm:text-base md:text-lg">
             Error loading divelogs. Please try again.
           </Text>
         ) : (
@@ -125,7 +129,7 @@ const Menu = ({ id }: { id: string }) => {
             }}
           />
         ) : speciesError ? (
-          <Text className="text-gray-500 text-md">
+          <Text className="text-gray-500 text-sm sm:text-base md:text-lg">
             Error loading species. Please try again.
           </Text>
         ) : (

diff --git a/frontend/app/(app)/user/components/species.tsx b/frontend/app/(app)/user/components/species.tsx
@@ -13,8 +13,10 @@ const Species: React.FC<SpeciesProps> = ({ image, text, onPress }) => {
       onPress={onPress}
       className="bg-water mb-3 rounded-md flex flex-col w-[32%] justify-center items-center pt-[2%] pb-[5%]"
     >
-      <Fish height={100} width={100} />
-      <Text className="pt-2 font-bold">{text}</Text>
+      <Fish height={80} width={80} />
+      <Text className="text-center px-2 font-bold text-xs sm:text-sm md:text-md">
+        {text}
+      </Text>
     </TouchableOpacity>
   );
 };

diff --git a/frontend/app/(app)/user/components/user-profile.tsx b/frontend/app/(app)/user/components/user-profile.tsx
@@ -21,7 +21,7 @@ const User = ({ id }: { id: string }) => {
   ];
 
   const renderItem = ({ item }: { item: any }) => {
-    return <View className="px-[8%]">{item.component}</View>;
+    return <View className="px-[7%]">{item.component}</View>;
   };
 
   return (

diff --git a/frontend/components/button.tsx b/frontend/components/button.tsx
@@ -28,7 +28,7 @@ const Button: React.FC<ButtonProps> = ({
     <>
       {!textOnly && (
         <TouchableOpacity
-          className={`items-center h-10 justify-center ${small ? 'w-[20%]' : 'w-full'} py-[2%] rounded-lg
+          className={`items-center h-10 justify-center ${small ? 'w-[25%]' : 'w-full'} py-[2%] rounded-lg
             ${isOutlined ? 'bg-transparent border' : backgroundColor ? `bg-${backgroundColor}` : 'bg-ocean'}
             ${isOutlined ? `border border-${backgroundColor || 'ocean'}` : ''}`}
           disabled={disabled}