Changed styling to stylesheets in shelfmodal

Purdue-CS307-tsundoku · Mar 10, 2024 · 4f8767d · 4f8767d
1 parent 35cc4d4
commit 4f8767d
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 93 deletions.
diff --git a/mobile/Components/ShelfModal/ShelfModal.tsx b/mobile/Components/ShelfModal/ShelfModal.tsx
@@ -6,13 +6,15 @@ import {
   Keyboard,
   TouchableWithoutFeedback,
   Image,
+  StyleSheet,
 } from "react-native";
 import React from "react";
 import { useState, useContext } from "react";
 import BookSearchBar from "../BookSearchBar";
 import { Divider } from "@rneui/base";
 
 import { DATA } from "../BookSearchBar/Genres";
+import { toStyleSheet } from "styled-components/native";
 
 function checkTitle(value, search) {
   return value.title.toUpperCase().includes(search.toUpperCase());
@@ -70,60 +72,26 @@ const ShelfModal = ({ route, navigation }) => {
 
   return (
     <View
-      style={{
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "white",
-        width: "100%",
-        height: "100%",
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-      }}
+      style={styles.modalContainer}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
         <View
-          style={{
-            width: "100%",
-            position: "absolute",
-            borderRadius: 5,
-            alignSelf: "center",
-            top: 10,
-          }}
+          style={styles.grayBarContainer}
         >
           <View
-            style={{
-              backgroundColor: "#D3D3D3",
-              height: 7,
-              width: 70,
-              borderRadius: 5,
-              alignSelf: "center",
-            }}
+            style={styles.grayBar}
           />
         </View>
       </TouchableWithoutFeedback>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
         <View
-          style={{
-            position: "absolute",
-            top: 30,
-            left: 20,
-            width: "100%",
-          }}
+          style={styles.titleContainer}
         >
           <Text style={{ fontWeight: "bold", fontSize: 30 }}>{shelf}</Text>
         </View>
       </TouchableWithoutFeedback>
 
-      <View
-        style={{
-          width: "93%",
-          position: "absolute",
-          borderRadius: 10,
-          top: 75,
-          left: 20,
-          paddingBottom: 0,
-        }}
-      >
+      <View style={styles.bookSearchBarContainer}>
         <BookSearchBar
           search={search}
           updateSearch={updateSearch}
@@ -134,17 +102,7 @@ const ShelfModal = ({ route, navigation }) => {
         />
       </View>
       <View
-        style={{
-          flex: 1,
-          width: "100%",
-          position: "absolute",
-          height: "82.3%",
-          borderRadius: 10,
-          top: 150,
-          left: 20,
-          paddingTop: 0,
-          marginTop: -14,
-        }}
+        style={styles.resultsContainer}
       >
         <FlatList
           data={bookData.filter(
@@ -167,29 +125,17 @@ const ShelfModal = ({ route, navigation }) => {
                   style={{ flexDirection: "row", paddingTop: 8 }}
                 >
                   <Image
-                    style={{
-                      width: 53,
-                      height: 80,
-                      justifyContent: "center",
-                      alignItems: "center",
-                      backgroundColor: "white",
-                      shadowColor: "black",
-                    }}
+                    style={styles.image}
                     resizeMode="contain"
                     source={{ uri: item.image_url }}
                   />
-                  <View
-                    style={{
-                      paddingLeft: 10,
-                      width: "80%",
-                    }}
-                  >
+                  <View style={styles.textContainer}>
                     <Text style={{ fontSize: 20 }}>{item.title}</Text>
                     <Text>{item.author}</Text>
                     <Text>ISBN: {item.isbn}</Text>
                   </View>
                 </TouchableOpacity>
-                <Divider style={{ paddingTop: 8, paddingBottom: 8 }} />
+                <Divider style={styles.divider} />
               </View>
             );
           }}
@@ -214,3 +160,69 @@ export default ShelfModal;
 //   onBackdropPress={() => { setShelfModalVisible(false); setSearch("")}}
 //   onSwipeCancel={Keyboard.dismiss}
 // >
+const styles = StyleSheet.create({
+  modalContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "white",
+    width: "100%",
+    height: "100%",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  grayBarContainer: {
+    width: "100%",
+    position: "absolute",
+    borderRadius: 5,
+    alignSelf: "center",
+    top: 10,
+  },
+  grayBar: {
+    backgroundColor: "#D3D3D3",
+    height: 7,
+    width: 70,
+    borderRadius: 5,
+    alignSelf: "center",
+  },
+  titleContainer: {
+    position: "absolute",
+    top: 30,
+    left: 20,
+    width: "100%",
+  },
+  bookSearchBarContainer: {
+    width: "93%",
+    position: "absolute",
+    borderRadius: 10,
+    top: 75,
+    left: 20,
+    paddingBottom: 0,
+  },
+  resultsContainer: {
+    flex: 1,
+    width: "100%",
+    position: "absolute",
+    height: "82.3%",
+    borderRadius: 10,
+    top: 150,
+    left: 20,
+    paddingTop: 0,
+    marginTop: -14,
+  },
+  image: {
+    width: 53,
+    height: 80,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "white",
+    shadowColor: "black",
+  },
+  textContainer: {
+    paddingLeft: 10,
+    width: "80%",
+  },
+  divider: { 
+    paddingTop: 8, 
+    paddingBottom: 8 
+  },
+});
diff --git a/mobile/Screens/Discover.tsx b/mobile/Screens/Discover.tsx
@@ -129,8 +129,9 @@ async function getBooks(
   return books;
 }
 
+const windowHeight = Dimensions.get("window").height;
+
 export const Discover = (props) => {
-  const windowHeight = Dimensions.get("window").height;
   const [loading, setLoading] = React.useState(false);
   const [books, setBooks] = React.useState([]);
   const [search, setSearch] = React.useState("");
@@ -185,7 +186,7 @@ export const Discover = (props) => {
 
   return (
     <NavigationContext.Provider value={navigation}>
-      <SafeAreaView style={{ flexGrow: 1, backgroundColor: "white" }}>
+      <SafeAreaView style={styles.safeArea}>
         <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
           <View>
             <Text
@@ -201,7 +202,7 @@ export const Discover = (props) => {
             </Text>
           </View>
         </TouchableWithoutFeedback>
-        <View style={{ paddingLeft: 10, paddingBottom: 10, paddingRight: 10 }}>
+        <View style={styles.bookSearchContainer}>
           <BookSearchBar
             search={search}
             updateSearch={(val) => {
@@ -220,16 +221,7 @@ export const Discover = (props) => {
         {search.length > 0 && (
           <KeyboardAvoidingView
             behavior={Platform.OS === "ios" ? "padding" : "height"}
-            style={{
-              backgroundColor: "#F7F7F7",
-              width: "100%",
-              position: "absolute",
-              top: "21.5%",
-              zIndex: 100,
-              borderColor: "black",
-              borderWidth: 0,
-              maxHeight: windowHeight - 230,
-            }}
+            style={styles.searchResultContainer}
           >
             <FlatList
               data={books.filter((book) => checkGenres(book.genre))}
@@ -241,22 +233,9 @@ export const Discover = (props) => {
                       navigation.navigate("bookInfoModal", { bookInfo: item })
                     }
                   >
-                    <View
-                      style={{
-                        flexDirection: "row",
-                        paddingTop: 10,
-                        paddingBottom: 10,
-                      }}
-                    >
+                    <View style={styles.resultItemContainer}>
                       <Image
-                        style={{
-                          width: 80,
-                          height: 100,
-                          justifyContent: "center",
-                          alignItems: "center",
-                          backgroundColor: "white",
-                          shadowColor: "black",
-                        }}
+                        style={styles.image}
                         resizeMode="contain"
                         source={{ uri: item.image_url }}
                       />
@@ -298,6 +277,38 @@ export const Discover = (props) => {
 };
 
 const styles = StyleSheet.create({
+  safeArea: {
+    flexGrow: 1, 
+    backgroundColor: "white",
+  },
+  bookSearchContainer: {
+    paddingLeft: 10, 
+    paddingBottom: 10, 
+    paddingRight: 10,
+  },
+  searchResultContainer: {
+    backgroundColor: "#F7F7F7",
+    width: "100%",
+    position: "absolute",
+    top: "21.5%",
+    zIndex: 100,
+    borderColor: "black",
+    borderWidth: 0,
+    maxHeight: windowHeight - 230,
+  },
+  resultItemContainer: {
+    flexDirection: "row",
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  image: {
+    width: 80,
+    height: 100,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "white",
+    shadowColor: "black",
+  },
   modalContainer: {
     flex: 1,
     justifyContent: "center",