fix: temp fix for identification component spacing (#218)

HansGabriel · Dec 4, 2023 · ceed5a4 · ceed5a4
1 parent 1ee4612
commit ceed5a4
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 94 deletions.
diff --git a/apps/expo/src/screens/play-test/TestCard.tsx b/apps/expo/src/screens/play-test/TestCard.tsx
@@ -137,8 +137,8 @@ export const IdentificationCard = ({
     <>
       <TextInput
         multiline={true}
-        maxLength={100}
-        className="mx-5 my-5 h-[20%] flex-col items-center justify-center rounded-2xl border-b-2 bg-emerald-500 p-2 text-center text-lg font-bold leading-[28.80px] text-white"
+        maxLength={75}
+        className="mx-5 my-8 h-[15%] flex-col items-center justify-center rounded-2xl border-b-2 bg-emerald-500 p-2 text-center text-lg font-bold leading-[28.80px] text-white"
         selectionColor="white"
         value={answer}
         onChangeText={setAnswer}
@@ -149,14 +149,14 @@ export const IdentificationCard = ({
 
       {isDone && (
         <>
-          <Text className="font-nunito-extrabold my-3 text-center text-2xl leading-[38.40px] text-neutral-800">
-            Correct Answers:
+          <Text className="font-nunito-extrabold text-center text-2xl leading-[38.40px] text-neutral-800">
+            Correct Answer:
           </Text>
           <View className="mt-2 flex flex-row flex-wrap items-center justify-center gap-x-2 gap-y-2">
             {choices?.map((choice) => (
               <View
                 key={choice.id}
-                className={`inline-flex h-[70px] w-[150px] flex-col items-center justify-center rounded-2xl border-b-4 ${choice.styles}`}
+                className={`inline-flex h-[50px] w-[85%] flex-col items-center justify-center rounded-2xl border-b-4 ${choice.styles}`}
               >
                 <Text className="font-nunito-extrabold self-stretch text-center text-sm font-bold leading-[28.80px] text-white">
                   {choice.text}
@@ -171,7 +171,7 @@ export const IdentificationCard = ({
         <AppButton
           onPress={onPress}
           text="Submit"
-          classNameValue="my-1"
+          classNameValue="mb-16"
           buttonColor="violet-600"
           borderShadowColor="indigo-800"
           borderRadius="full"

diff --git a/apps/expo/src/screens/play-test/index.tsx b/apps/expo/src/screens/play-test/index.tsx
@@ -522,104 +522,102 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
             />
           ) : null}
         </View>
-        <ScrollView showsVerticalScrollIndicator={false}>
-          <View className="mx-6">
-            {question?.image && (
-              <View className="mb-4 mt-8 flex flex-col">
-                <View className="mx-auto h-56 w-full items-center justify-center rounded-3xl">
-                  <Image
-                    source={{ uri: question?.image }}
-                    className="h-60 w-full rounded-3xl"
-                  />
-                </View>
+        <ScrollView showsVerticalScrollIndicator={false} className="mx-6">
+          {question?.image && (
+            <View className="mb-4 mt-8 flex flex-col">
+              <View className="mx-auto h-56 w-full items-center justify-center rounded-3xl">
+                <Image
+                  source={{ uri: question?.image }}
+                  className="h-60 w-full rounded-3xl"
+                />
               </View>
-            )}
-            <View
-              className={`-z-10 mt-5 items-center justify-center rounded-2xl border border-zinc-100 bg-neutral-50 px-5 py-8`}
-            >
-              <Text className="self-stretch text-center text-xl font-bold leading-loose text-black">
-                {questions[index]?.title}
-              </Text>
             </View>
+          )}
+          <View
+            className={`-z-10 mt-5 items-center justify-center rounded-2xl border border-zinc-100 bg-neutral-50 px-5 py-8`}
+          >
+            <Text className="self-stretch text-center text-xl font-bold leading-loose text-black">
+              {questions[index]?.title}
+            </Text>
+          </View>
 
-            {match(question?.type)
-              .with("multiple_choice", () => (
-                <View className="mt-5 flex w-[100%] flex-row items-center justify-evenly self-center">
-                  <View className="space-y-4">
-                    <View>{choices[0] ? renderChoice(choices[0]) : <></>}</View>
-                    <View>{choices[1] ? renderChoice(choices[1]) : <></>}</View>
-                  </View>
-                  <View className="space-y-4">
-                    <View>{choices[2] ? renderChoice(choices[2]) : <></>}</View>
-                    <View>{choices[3] ? renderChoice(choices[3]) : <></>}</View>
-                  </View>
+          {match(question?.type)
+            .with("multiple_choice", () => (
+              <View className="mt-5 flex w-[100%] flex-row items-center justify-evenly self-center">
+                <View className="space-y-4">
+                  <View>{choices[0] ? renderChoice(choices[0]) : <></>}</View>
+                  <View>{choices[1] ? renderChoice(choices[1]) : <></>}</View>
                 </View>
-              ))
-              .with("true_or_false", () => (
-                <View className="mt-14 flex flex-row items-center space-x-8 self-center">
-                  <View>
-                    <TrueOrFalseCard
-                      choice={choices[0]}
-                      isDone={isDone}
-                      handlePressChoice={handlePressChoice}
-                    />
-                  </View>
-                  <View>
-                    <TrueOrFalseCard
-                      choice={choices[1]}
-                      isDone={isDone}
-                      handlePressChoice={handlePressChoice}
-                    />
-                  </View>
+                <View className="space-y-4">
+                  <View>{choices[2] ? renderChoice(choices[2]) : <></>}</View>
+                  <View>{choices[3] ? renderChoice(choices[3]) : <></>}</View>
                 </View>
-              ))
-              .with("multi_select", () => (
-                <>
-                  <MultiSelectCards
-                    choiceStatus={choiceStatus}
-                    setChoiceStatus={setChoiceStatus}
-                    choices={choices}
+              </View>
+            ))
+            .with("true_or_false", () => (
+              <View className="mt-14 flex flex-row items-center space-x-8 self-center">
+                <View>
+                  <TrueOrFalseCard
+                    choice={choices[0]}
                     isDone={isDone}
-                    handleMultiSelectSubmit={handleMultiSelectSubmit}
+                    handlePressChoice={handlePressChoice}
                   />
-                </>
-              ))
-              .with("identification", () => (
-                <IdentificationCard
-                  choices={question?.choices?.map((choice, id) => {
-                    return {
-                      id,
-                      text: choice.text,
-                      isCorrect: choice.isCorrect,
-                      styles: choiceStyles[id]?.styles ?? "",
-                      isSelected: false,
-                    };
-                  })}
-                  isDone={isDone}
-                  handleSubmit={handleSubmitIdentification}
-                />
-              ))
-              .with(undefined, () => <></>)
-              .exhaustive()}
-
-            {isDone && (
+                </View>
+                <View>
+                  <TrueOrFalseCard
+                    choice={choices[1]}
+                    isDone={isDone}
+                    handlePressChoice={handlePressChoice}
+                  />
+                </View>
+              </View>
+            ))
+            .with("multi_select", () => (
               <>
-                <AppButton
-                  onPress={handleGoToNextQuestion}
-                  text={isLastQuestion ? "Finish" : "Next Question"}
-                  classNameValue="my-10"
-                  buttonColor="violet-600"
-                  borderShadowColor="indigo-800"
-                  borderRadius="full"
-                  fontStyle="bold"
-                  textColor="white"
-                  TOwidth="full"
-                  Vwidth="full"
-                  isLoading={isSavingTestHistory}
+                <MultiSelectCards
+                  choiceStatus={choiceStatus}
+                  setChoiceStatus={setChoiceStatus}
+                  choices={choices}
+                  isDone={isDone}
+                  handleMultiSelectSubmit={handleMultiSelectSubmit}
                 />
               </>
-            )}
-          </View>
+            ))
+            .with("identification", () => (
+              <IdentificationCard
+                choices={question?.choices?.map((choice, id) => {
+                  return {
+                    id,
+                    text: choice.text,
+                    isCorrect: choice.isCorrect,
+                    styles: choiceStyles[id]?.styles ?? "",
+                    isSelected: false,
+                  };
+                })}
+                isDone={isDone}
+                handleSubmit={handleSubmitIdentification}
+              />
+            ))
+            .with(undefined, () => <></>)
+            .exhaustive()}
+
+          {isDone && (
+            <>
+              <AppButton
+                onPress={handleGoToNextQuestion}
+                text={isLastQuestion ? "Finish" : "Next Question"}
+                classNameValue="my-16"
+                buttonColor="violet-600"
+                borderShadowColor="indigo-800"
+                borderRadius="full"
+                fontStyle="bold"
+                textColor="white"
+                TOwidth="full"
+                Vwidth="full"
+                isLoading={isSavingTestHistory}
+              />
+            </>
+          )}
         </ScrollView>
       </SafeAreaView>
       {match(modalType)