fix: multiple ui changes

HansGabriel · Dec 3, 2023 · cca90e1 · cca90e1
1 parent aa46eeb
commit cca90e1
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 50 deletions.
diff --git a/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx b/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx
@@ -5,7 +5,7 @@ import {
   ChatIcon,
   CheckboxIcon,
 } from "../../icons/bottom-sheet";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Foundation } from "@expo/vector-icons";
 
 import type { FC } from "react";
 import type { QuestionType } from "../../stores/useQuestionStore";
@@ -29,15 +29,11 @@ const ChoiceBottomSheet: FC<Props> = ({
       <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">
-            <MaterialCommunityIcons
-              name="bell-ring-outline"
-              size={25}
-              color="#7c3aed"
-            />
+            <Foundation name="lightbulb" size={30} color="#7c3aed" />
           </View>
           <View className="my-2">
             <Text className="font-nunito-bold self-center text-center text-lg">
-              Reminder
+              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!

diff --git a/apps/expo/src/components/buttons/AddButton.tsx b/apps/expo/src/components/buttons/AddButton.tsx
@@ -13,7 +13,7 @@ export const AddButton: FC<ButtonProps> = ({ screen }) => {
   return (
     <TouchableOpacity
       onPress={() => navigation.navigate(screen)}
-      className="h-12 w-12 items-center justify-center rounded-[100px] border-b-4 border-l border-r border-t border-indigo-800 bg-violet-600"
+      className="h-12 w-12 items-center justify-center rounded-[100px] border-b border-l border-r border-t border-indigo-800 bg-violet-600"
     >
       <Text className=" text-2xl text-white">+</Text>
     </TouchableOpacity>

diff --git a/apps/expo/src/components/buttons/AppButton.tsx b/apps/expo/src/components/buttons/AppButton.tsx
@@ -76,7 +76,7 @@ export const AppButton = ({
       <View
         className={` h-${Vheight} w-${Vwidth} flex-row items-center justify-center self-center rounded-[${borderRadiusSize(
           borderRadius,
-        )}] border-b-4 border-l border-r border-t border-${borderShadowColor} bg-${buttonColor} ${classNameValue} `}
+        )}] border-b border-l border-r border-t border-${borderShadowColor} bg-${buttonColor} ${classNameValue} `}
       >
         {iconLeft}
         <Text

diff --git a/apps/expo/src/components/headers/MainHeader.tsx b/apps/expo/src/components/headers/MainHeader.tsx
@@ -2,7 +2,6 @@ import { View, Text, TouchableOpacity } from "react-native";
 
 import TinyTestTrekIcon from "../../icons/logos/TinyTestTrekIcon";
 import SearchIcon from "../../icons/SearchIcon";
-import NotificationsIcon from "../../icons/NotificationsIcon";
 
 import { FC, useState } from "react";
 
@@ -37,7 +36,7 @@ const MainHeader: FC = ({}) => {
         </View>
       ) : (
         <Animated.View
-          className="sticky top-0 z-50 mx-6 mb-5 mt-5 flex-row justify-between bg-white pt-1"
+          className="sticky top-0 z-50 mb-3 mt-5 w-[90%] flex-row justify-between self-center bg-white pb-4"
           entering={SlideInLeft}
           exiting={SlideOutLeft}
         >
@@ -54,9 +53,6 @@ const MainHeader: FC = ({}) => {
             <TouchableOpacity onPress={handlePressed}>
               <SearchIcon />
             </TouchableOpacity>
-            <TouchableOpacity>
-              <NotificationsIcon />
-            </TouchableOpacity>
           </View>
         </Animated.View>
       )}

diff --git a/apps/expo/src/components/modals/OptionModal.tsx b/apps/expo/src/components/modals/OptionModal.tsx
@@ -32,7 +32,7 @@ const OptionModal: FC<Props> = ({
   isVisible,
   setIsVisible,
   setOptions,
-  buttonText = "Ok",
+  buttonText = "OK",
   handleButtonPress,
 }) => {
   const handleClose = () => {
@@ -76,8 +76,8 @@ const OptionModal: FC<Props> = ({
       <TouchableWithoutFeedback onPress={handleClose}>
         <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-3/4 w-11/12 items-center rounded-2xl bg-white">
-              <Text className="mt-10 self-center px-5 text-center text-2xl font-bold">
+            <View className="flex h-[75%] w-11/12 items-center rounded-2xl bg-white">
+              <Text className="mt-auto self-center px-5 text-center text-2xl font-bold">
                 {title}
               </Text>
 
@@ -112,7 +112,7 @@ const OptionModal: FC<Props> = ({
               ))}
 
               <TouchableOpacity
-                className="mb-5 mt-auto h-[58px] w-[284px] items-center justify-center rounded-[100px] border-b-4 border-t border-l border-r border-indigo-800 bg-violet-600 px-4 py-[18px]"
+                className="mb-5 my-auto h-[58px] w-[200px] items-center justify-center rounded-[100px] border-b border-t border-l border-r border-indigo-800 bg-violet-600 px-4 py-[18px]"
                 onPress={handleButtonPress ?? handleClose}
               >
                 <Text className="shrink grow basis-0 text-center text-base font-bold leading-snug tracking-tight text-white">

diff --git a/apps/expo/src/components/search/SearchContent.tsx b/apps/expo/src/components/search/SearchContent.tsx
@@ -140,7 +140,7 @@ export const SearchContent: FC<ContentProps> = ({
     <TouchableOpacity
       key={category}
       onPress={() => toggleCategory(category)}
-      className="m-2"
+      className="m-1"
     >
       <View
         className={`items-center justify-center rounded-lg 
@@ -172,6 +172,7 @@ export const SearchContent: FC<ContentProps> = ({
         </View>
 
         <View
+        className="w-[90%] self-center"
           style={{
             flexDirection: "row",
             justifyContent: "center",

diff --git a/apps/expo/src/forms/CreateTestForm/index.tsx b/apps/expo/src/forms/CreateTestForm/index.tsx
@@ -656,7 +656,7 @@ const CreateTestForm: FC<Props> = ({
             </TouchableOpacity>
             <TouchableOpacity
               onPress={() => setOpenCreationChoice(true)}
-              className="w-[45%] items-center justify-center rounded-[100px] border-b-4 border-l border-r border-t border-indigo-800 bg-indigo-700 py-[18px]"
+              className="w-[45%] items-center justify-center rounded-[100px] border-b border-l border-r border-t border-indigo-800 bg-indigo-700 py-[18px]"
             >
               <Text className="shrink grow basis-0 text-center text-base font-bold leading-snug tracking-tight text-white">
                 Add Question

diff --git a/apps/expo/src/screens/create-question/ChoiceCard.tsx b/apps/expo/src/screens/create-question/ChoiceCard.tsx
@@ -660,19 +660,22 @@ export const IdentificationCards = ({
             </TouchableOpacity>
           </View>
         ))}
-      <AppButton
-        text="Add Choice"
-        buttonColor="violet-600"
-        borderShadowColor="indigo-800"
-        borderRadius="full"
-        fontStyle="bold"
-        textColor="white"
-        TOwidth="full"
-        Vwidth="full"
-        Vheight="10"
-        onPress={addChoice}
-        isLoading={false}
-      />
+
+      <View className="w-[90%]">
+        <AppButton
+          text="Add Choice"
+          buttonColor="violet-600"
+          borderShadowColor="indigo-800"
+          borderRadius="full"
+          fontStyle="bold"
+          textColor="white"
+          TOwidth="[50%]"
+          Vwidth="full"
+          Vheight="12"
+          onPress={addChoice}
+          isLoading={false}
+        />
+      </View>
     </View>
   );
 };
diff --git a/apps/expo/src/screens/create-question/index.tsx b/apps/expo/src/screens/create-question/index.tsx
@@ -705,7 +705,7 @@ export const CreateQuestionScreen: FC = () => {
           </View>
 
           <View
-            className={`-z-10 mt-5 items-center justify-center rounded-2xl border border-zinc-100 bg-neutral-50 px-5 py-8
+            className={`-z-10 mt-5 w-[90%] items-center self-center rounded-2xl border border-zinc-100 bg-neutral-50 px-5 py-8
           ${
             isTextInputFocused
               ? "border-2 border-violet-600 bg-white"
@@ -805,7 +805,7 @@ export const CreateQuestionScreen: FC = () => {
             .exhaustive()}
 
           <TouchableOpacity
-            className={`mt-10 w-[90%] items-center justify-center self-center rounded-[100px] border-b-4 border-l border-r border-t border-indigo-800 bg-violet-600 py-[18px] ${
+            className={`mt-10 w-[50%] items-center justify-center self-center rounded-[100px] border-b border-l border-r border-t border-indigo-800 bg-violet-600 py-[18px] ${
               !isSaved ? "opacity-50" : ""
             }`}
             // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -959,7 +959,7 @@ export const CreateQuestionScreen: FC = () => {
               })}
             </ScrollView>
             <TouchableOpacity
-              className="ml-5 inline-flex flex-col items-center justify-center rounded-2xl border-b-4 border-l border-r border-t border-indigo-800 bg-violet-600 p-[17px] shadow"
+              className="ml-5 inline-flex flex-col items-center justify-center rounded-2xl border-b border-l border-r border-t border-indigo-800 bg-violet-600 p-[17px] shadow"
               onPress={openBottomSheet}
             >
               <Feather name="plus" size={24} color="white" />

diff --git a/apps/expo/src/screens/edit-personal-info.tsx b/apps/expo/src/screens/edit-personal-info.tsx
@@ -307,16 +307,17 @@ export const EditPersonalInfoScreen = () => {
           </View>
 
           {edit ? (
-            <View className="my-16">
+            <View className="mt-24">
               <AppButton
                 text="Save"
                 buttonColor="violet-600"
                 borderShadowColor="indigo-800"
                 borderRadius="full"
                 fontStyle="bold"
                 textColor="white"
-                TOwidth="full"
-                Vwidth="80"
+                TOwidth="[50%]"
+                Vwidth="full"
+                Vheight="16"
                 onPress={handleSubmit(submitEditedData)}
                 isLoading={isEditingUser}
               />

diff --git a/apps/expo/src/screens/my-library.tsx b/apps/expo/src/screens/my-library.tsx
@@ -1,6 +1,5 @@
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
 import { View, Text, TouchableOpacity, Dimensions } from "react-native";
-import TinyTestTrekIcon from "../icons/logos/TinyTestTrekIcon";
 import { useEffect, useState } from "react";
 import { HeaderAndContent } from "../components/my-library/HeaderAndContent";
 import Footer from "../components/Footer";
@@ -126,9 +125,9 @@ export const MyLibraryScreen = () => {
 
   return (
     <SafeAreaView style={{ flex: 1, height: height, width: width }}>
-      <SafeAreaView className="z-50 flex-row items-center justify-between space-x-4">
+      <SafeAreaView className="z-50 flex-row items-center justify-between space-x-4 self-center">
         {isSearchPressed ? (
-          <View className=" z-50 flex-row justify-between self-center bg-white">
+          <View className=" sticky z-50 flex-row justify-between self-center bg-white pb-3">
             <SearchField
               searchString={query}
               onChange={updateQuery}
@@ -140,21 +139,20 @@ export const MyLibraryScreen = () => {
           </View>
         ) : (
           <Animated.View
-            className="sticky top-0 z-50 h-full w-full flex-row justify-between bg-white px-5 pb-3"
+            className="sticky top-0 z-50 mb-5 h-full w-[90%] flex-row justify-between self-center bg-white pb-3"
             entering={SlideInLeft}
             exiting={SlideOutLeft}
           >
-            <View className="flex-row gap-4">
+            <View className="flex flex-row items-center gap-4">
               <TouchableOpacity
                 onPress={() => navigation.navigate("Home")}
                 className="self-center"
               >
                 <LeftArrowIcon />
               </TouchableOpacity>
-              <TinyTestTrekIcon />
-              <Text className=" font-nunito-bold text-2xl">Library</Text>
+              <Text className=" font-nunito-bold text-2xl">My Library</Text>
             </View>
-            <TouchableOpacity onPress={handlePressed}>
+            <TouchableOpacity className="self-center" onPress={handlePressed}>
               <SearchIcon />
             </TouchableOpacity>
           </Animated.View>

diff --git a/apps/expo/src/screens/my-statistics.tsx b/apps/expo/src/screens/my-statistics.tsx
@@ -37,7 +37,7 @@ export const MyStatistics = () => {
     {
       name: "Total Score",
       icon: <CoinIcon />,
-      value: totalScore?._sum.score,
+      value: totalScore?._sum.score ?? 0,
     },
     { name: "Top Three", icon: <MedalIcon />, value: totalUserOnTop },
     {

diff --git a/apps/expo/src/screens/walkthrough.tsx b/apps/expo/src/screens/walkthrough.tsx
@@ -105,7 +105,7 @@ export const WalkthroughScreen: FC = () => {
       </Swiper>
       <TouchableOpacity
         onPress={signInWithGoogle}
-        className="mb-1 mt-5 w-[90%] rounded-2xl border-b-4 border-l border-r border-t border-zinc-100 bg-white px-8 py-[18px]"
+        className="mb-1 mt-5 w-[90%] rounded-2xl border-2 border-zinc-100 bg-white px-8 py-[18px]"
       >
         <View className="flex flex-row items-center justify-center gap-3">
           <GoogleIcon />
@@ -116,7 +116,7 @@ export const WalkthroughScreen: FC = () => {
       </TouchableOpacity>
       <TouchableOpacity
         onPress={signInWithFacebook}
-        className="mb-5 mt-5 w-[90%] rounded-2xl border-b-4 border-l border-r border-t border-zinc-100 bg-white px-8 py-[18px]"
+        className="mb-5 mt-5 w-[90%] rounded-2xl border-2 border-zinc-100 bg-white px-8 py-[18px]"
       >
         <View className="flex flex-row items-center justify-center gap-3">
           <FacebookIcon />