From a47a11900a066142c8dc25c6cb20fe7177f4b3f7 Mon Sep 17 00:00:00 2001
From: Edmel John Linaugo <68092712+EdmelKun@users.noreply.github.com>
Date: Sun, 17 Dec 2023 04:54:02 +0800
Subject: [PATCH] chore: adjusted headers and changed tip placement

---
 .../bottom-sheet/ChoiceBottomSheet.tsx         | 15 ++++-----------
 .../expo/src/components/cards/QuestionCard.tsx |  2 +-
 .../src/components/headers/SettingsHeader.tsx  |  3 ++-
 .../components/headers/ViewAllScreenHeader.tsx | 18 +++++++++---------
 4 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx b/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx
index 6ca4a674..9deed68c 100644
--- a/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx
+++ b/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx
@@ -5,7 +5,6 @@ import {
   ChatIcon,
   CheckboxIcon,
 } from "../../icons/bottom-sheet";
-import { Foundation } from "@expo/vector-icons";
 
 import type { FC } from "react";
 import type { QuestionType } from "../../stores/useQuestionStore";
@@ -30,23 +29,17 @@ const ChoiceBottomSheet: FC<Props> = ({
   return (
     <View className="flex-1 bg-white pt-2 shadow shadow-black">
       <View className="mx-6 my-4 flex flex-row">
-        <View className=" w-full items-center justify-evenly self-center rounded-2xl border border-zinc-100 bg-white">
-          <View className="mt-2">
-            <Foundation name="lightbulb" size={30} color="#7c3aed" />
-          </View>
+        <View className="w-full items-center justify-evenly self-center rounded-2xl border border-zinc-100 bg-white">
           <View className="my-2">
-            <Text className="font-nunito-bold self-center text-center text-lg">
-              Just a tip!
-            </Text>
-            <Text className="font-nunito-semibold self-center px-8 text-center text-sm">
-              Please create at least one (1) question to save the test!
+            <Text className="font-nunito-bold self-center text-center text-xl">
+              Please choose your question type!
             </Text>
           </View>
         </View>
       </View>
 
       {/* Horizontal Line */}
-      <View className="mb-3 h-[0px] w-[382px] self-center border border-zinc-100" />
+      <View className="my-5 h-[0px] w-[382px] self-center border border-zinc-100" />
 
       {/* Cards Choices */}
       <ScrollView showsVerticalScrollIndicator={false}>
diff --git a/apps/expo/src/components/cards/QuestionCard.tsx b/apps/expo/src/components/cards/QuestionCard.tsx
index e5ad5716..7b60c50f 100644
--- a/apps/expo/src/components/cards/QuestionCard.tsx
+++ b/apps/expo/src/components/cards/QuestionCard.tsx
@@ -87,7 +87,7 @@ const QuestionCard: FC<QuestionCardProps> = ({
           numberOfLines={1}
           ellipsizeMode="tail"
         >
-          {truncateString(question.title, 25)}
+          {truncateString(question.title, 20)}
         </Text>
       </View>
     </TouchableOpacity>
diff --git a/apps/expo/src/components/headers/SettingsHeader.tsx b/apps/expo/src/components/headers/SettingsHeader.tsx
index ea75c1e4..b3245a49 100644
--- a/apps/expo/src/components/headers/SettingsHeader.tsx
+++ b/apps/expo/src/components/headers/SettingsHeader.tsx
@@ -15,7 +15,8 @@ const SettingsHeader: FC<HeaderProps> = ({ screenName }) => {
         <View className="w-[90%] flex-row gap-4 self-center">
           <TouchableOpacity
             onPress={goBack}
-            className="flex flex-row items-center self-center"
+            className="flex flex-row items-center self-center p-1"
+            hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }}
           >
             <LeftArrowIcon />
           </TouchableOpacity>
diff --git a/apps/expo/src/components/headers/ViewAllScreenHeader.tsx b/apps/expo/src/components/headers/ViewAllScreenHeader.tsx
index a2e307cf..dfa9e453 100644
--- a/apps/expo/src/components/headers/ViewAllScreenHeader.tsx
+++ b/apps/expo/src/components/headers/ViewAllScreenHeader.tsx
@@ -46,21 +46,21 @@ const ViewAllScreenHeader: FC<Props> = ({
           />
         </View>
       ) : (
-        <View className="sticky z-50 mx-3 flex flex-row justify-between bg-white py-5">
-          <View className="flex-row self-center">
+        <View className="sticky z-50 mx-3 flex flex-row justify-between self-center bg-white py-5">
+          <View className="w-[90%] flex-row space-x-4 self-center">
             <TouchableOpacity
               className="flex flex-row items-center gap-2 self-center"
               onPress={goBack}
             >
               <LeftArrowIcon />
-              <Text
-                className="font-nunito-bold w-4/5 text-2xl leading-[38.40px] text-neutral-800"
-                numberOfLines={1}
-                ellipsizeMode="tail"
-              >
-                {props.title}
-              </Text>
             </TouchableOpacity>
+            <Text
+              className="font-nunito-bold w-4/5 text-2xl leading-[38.40px] text-neutral-800"
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {props.title}
+            </Text>
           </View>
           {displaySearchBar && (
             <TouchableOpacity className="self-center" onPress={openSearchBar}>