chore: handle tes-313 - tes-327 (#291) (#292)

* chore: change error message

* fix: handle excess user input

* feature: added X icon for cancellation

* feature: added description about app

* chore: adjusted headers and changed tip placement

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}>

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>

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>

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}>

apps/expo/src/components/modals/AskAiModal.tsx

@@ -41,7 +41,7 @@ export const AskAiModal = ({
                     What is your question?
                   </Text>
                 </View>
-                <View className=" m-2 self-start ">
+                <View className="absolute right-1 top-1">
                   <TouchableOpacity
                     onPress={handleClose}
                     disabled={isGenerating}

apps/expo/src/components/modals/ChoiceModal.tsx

@@ -75,14 +75,13 @@ const ChoiceModal: FC<Props> = ({
         <View className="absolute inset-0 h-[100%] w-[100%] flex-1 bg-black/70">
           <View className="flex-1 items-center justify-center bg-opacity-50 shadow shadow-black/80">
             <View className="flex h-[60%] w-[90%] flex-col items-center justify-evenly rounded-2xl bg-white">
-              <TouchableOpacity
-                className="-mt-[9%] mr-2 self-end"
-                onPress={setIsVisible}
-              >
-                <XIcon className="self-end" />
-              </TouchableOpacity>
+              <View className="absolute right-1 top-1">
+                <TouchableOpacity onPress={setIsVisible}>
+                  <XIcon />
+                </TouchableOpacity>
+              </View>
 
-              <View className="-mt-7 w-[90%]">
+              <View className=" w-[90%]">
                 <Text className="self-center px-5 text-center text-2xl font-bold">
                   {title}
                 </Text>

apps/expo/src/components/modals/PromptModal.tsx

@@ -1,7 +1,9 @@
 import React from "react";
+import { TouchableOpacity } from "react-native";
 
 import { View, SafeAreaView, Text, Dimensions } from "react-native";
 import Modal from "react-native-modal";
+import XIcon from "../../icons/XIcon";
 import { AppButton } from "../buttons/AppButton";
 
 interface ModalProps {
@@ -15,6 +17,8 @@ interface ModalProps {
   cancelButtonText?: string;
   isCancelButtonVisible?: boolean;
   isLoading?: boolean;
+  isXIconVisible?: boolean;
+  onXIconPressed?: () => void;
 }
 
 export const PromptModal = ({
@@ -28,6 +32,8 @@ export const PromptModal = ({
   isCancelButtonVisible = false,
   onCancel,
   isLoading,
+  isXIconVisible = false,
+  onXIconPressed,
 }: ModalProps) => {
   const { width, height } = Dimensions.get("window");
 
@@ -38,6 +44,13 @@ export const PromptModal = ({
         style={{ width: width * 0.9, height: height }}
       >
         <View className="h-[40%] w-full items-center justify-evenly self-center rounded-2xl border border-zinc-100 bg-white">
+          {isXIconVisible && (
+            <View className="absolute right-1 top-1">
+              <TouchableOpacity onPress={onXIconPressed}>
+                <XIcon />
+              </TouchableOpacity>
+            </View>
+          )}
           <View>{modalIcon}</View>
           <View>
             <Text className="font-nunito-bold self-center text-center text-2xl">

apps/expo/src/forms/CreateTestForm/index.tsx

@@ -31,11 +31,10 @@ import AppPicker, {
 import useImageStore from "../../stores/useImageStore";
 import { trpc } from "../../utils/trpc";
 import { truncateString } from "@acme/utils/src/strings";
-import { Octicons } from "@expo/vector-icons";
 import RightSidebar from "./RightSidebar";
 import { RouterOutputs } from "../../utils/trpc";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-
+import { Foundation } from "@expo/vector-icons";
 import type { TestInput } from "@acme/schema/src/types";
 import type { FC } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -447,7 +446,13 @@ const CreateTestForm: FC<Props> = ({
     <SafeAreaView>
       <ReusableHeader
         screenName={testTitle}
-        optionIcon={<Octicons name="three-bars" size={24} color="black" />}
+        optionIcon={
+          <MaterialCommunityIcons
+            name="clipboard-plus"
+            size={30}
+            color="rgb(79 70 229)"
+          />
+        }
         onIconPress={() => setIsSidebarOpen(true)}
         backIcon={
           questions.length > 0 || testTitle === "Create Test" ? (
@@ -502,6 +507,7 @@ const CreateTestForm: FC<Props> = ({
                     placeholder: "Enter Title",
                     onChangeText: onChange,
                     value,
+                    maxLength: 50,
                   }}
                 />
               )}
@@ -545,6 +551,7 @@ const CreateTestForm: FC<Props> = ({
                       label="Keyword"
                       textInputProps={{
                         placeholder: "Type keyword and enter",
+                        maxLength: 20,
                       }}
                       texts={value}
                       onChangeTexts={onChange}
@@ -567,6 +574,7 @@ const CreateTestForm: FC<Props> = ({
                       onBlur,
                       onChangeText: onChange,
                       value,
+                      maxLength: 1000,
                     }}
                   />
                 )}
@@ -616,8 +624,8 @@ const CreateTestForm: FC<Props> = ({
           )}
 
           <View className="mb-10 h-full flex-1 flex-col">
-            {questions.length > 0 && (
-              <View className="mb-6 flex flex-row items-center justify-between">
+            {questions.length > 0 ? (
+              <View className="my-auto flex flex-row items-center justify-between">
                 <Text className="text-xl font-bold leading-loose text-neutral-800">
                   Question ({questions.length})
                 </Text>
@@ -631,6 +639,20 @@ const CreateTestForm: FC<Props> = ({
                   <RightArrowIcon />
                 </TouchableOpacity>
               </View>
+            ) : (
+              <View className="h-full 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="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>
+                </View>
+              </View>
             )}
 
             <SafeAreaView className="min-h-full flex-1">
@@ -730,6 +752,7 @@ const CreateTestForm: FC<Props> = ({
 
       <PromptModal
         isVisible={openCreationChoice}
+        isXIconVisible={true}
         modalIcon={
           <MaterialCommunityIcons name="robot" size={40} color="#7c3aed" />
         }
@@ -738,6 +761,7 @@ const CreateTestForm: FC<Props> = ({
         confirmButtonText={"Yes"}
         isCancelButtonVisible={true}
         cancelButtonText={"Manual Input"}
+        onXIconPressed={handleCloseCreationChoice}
         onCancel={() => {
           handleCloseCreationChoice();
           openBottomSheet();
@@ -751,7 +775,7 @@ const CreateTestForm: FC<Props> = ({
       />
 
       <ChoiceModal
-        title="No. of questions you want to generate"
+        title="No. of questions you want to generate?"
         selectButtonText={
           !selectedReviewer?.content ? "Select Reviewer" : "Generate Questions"
         }

apps/expo/src/screens/create-collection.tsx

@@ -199,6 +199,7 @@ export const CreateCollection = () => {
                   placeholder: "Enter Title",
                   onChangeText: onChange,
                   value,
+                  maxLength: 50,
                 }}
               />
             )}

apps/expo/src/screens/edit-collection/index.tsx

@@ -3,7 +3,7 @@ import { Collections } from "@acme/schema/src/types";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { FC, useState, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { Octicons } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import {
   View,
   Text,
@@ -203,7 +203,13 @@ export const EditCollection: FC<RootStackScreenProps<"EditCollection">> = ({
       <SafeAreaView className="flex-1" style={{ height: height, width: width }}>
         <ReusableHeader
           screenName="Edit Collection"
-          optionIcon={<Octicons name="three-bars" size={24} color="black" />}
+          optionIcon={
+            <MaterialCommunityIcons
+              name="book-plus-multiple"
+              size={25}
+              color="rgb(79 70 229)"
+            />
+          }
           onIconPress={() => setIsSidebarOpen(true)}
           backIcon={<Feather name="x" size={24} color="black" />}
           handleExit={handleExitScreen}
@@ -235,7 +241,13 @@ export const EditCollection: FC<RootStackScreenProps<"EditCollection">> = ({
     >
       <ReusableHeader
         screenName="Edit Collection"
-        optionIcon={<Octicons name="three-bars" size={24} color="black" />}
+        optionIcon={
+          <MaterialCommunityIcons
+            name="book-plus-multiple"
+            size={25}
+            color="rgb(79 70 229)"
+          />
+        }
         onIconPress={() => setIsSidebarOpen(true)}
         backIcon={<Feather name="x" size={24} color="black" />}
         handleExit={handleExitScreen}
@@ -286,6 +298,7 @@ export const EditCollection: FC<RootStackScreenProps<"EditCollection">> = ({
                   placeholder: "Enter Title",
                   onChangeText: onChange,
                   value,
+                  maxLength: 50,
                 }}
               />
             )}

apps/expo/src/screens/edit-personal-info.tsx

@@ -206,6 +206,7 @@ export const EditPersonalInfoScreen = () => {
                     value,
                     editable: edit,
                     style: { color: !edit ? "#6b7280" : "black" },
+                    maxLength: 50,
                   }}
                 />
               )}
@@ -227,6 +228,7 @@ export const EditPersonalInfoScreen = () => {
                     value,
                     editable: edit,
                     style: { color: !edit ? "#6b7280" : "black" },
+                    maxLength: 50,
                   }}
                 />
               )}
@@ -248,6 +250,7 @@ export const EditPersonalInfoScreen = () => {
                     value,
                     editable: edit,
                     style: { color: !edit ? "#6b7280" : "black" },
+                    maxLength: 50,
                   }}
                 />
               )}
@@ -296,6 +299,7 @@ export const EditPersonalInfoScreen = () => {
                         color: !edit ? "#6b7280" : "black",
                         textAlignVertical: "top",
                       },
+                      maxLength: 500,
                     }}
                   />
                 )}

apps/expo/src/screens/premium.tsx

@@ -42,10 +42,12 @@ export const PremiumScreen = ({
         trpcUtils.user.getUserPremiumStatus.invalidate();
         navigation.navigate("Home");
         successToast({
-          title: "Success",
+          title: !premiumStatus
+            ? "Subscribed to Premium"
+            : "Unsubscribed to Premium",
           message: !premiumStatus
-            ? "You are now a premium user"
-            : "You are no longer a premium user",
+            ? "Enjoy your premium features!"
+            : "Please subscribe again!",
         });
       },
       onError: (err) => {

apps/expo/src/screens/settings/AboutTestTrek.tsx

@@ -22,6 +22,20 @@ export const AboutTestTrekScreen = () => {
           TestTrek v1.0
         </Text>
       </View>
+      <View className=" my-auto h-[45%] w-[90%] self-center">
+        <View className="mb-5 items-center">
+          <Text className=" font-nunito-bold text-xl">What is TestTrek?</Text>
+        </View>
+        <View className="items-center self-center">
+          <Text className=" font-nunito-medium text-center text-xl">
+            TestTrek is a mobile application dedicated to streamline test and
+            reviewer creation for students. By combining artificial
+            intelligence, optical character recognition, and gamification
+            elements, TestTrek is an all-in-one solution at the palm of your
+            hand.
+          </Text>
+        </View>
+      </View>
     </SafeAreaView>
   );
 };