final styling

calblueprint · Jan 15, 2025 · 1191d1e · 1191d1e
1 parent 70035ed
commit 1191d1e
Show file tree

Hide file tree

Showing 28 changed files with 460 additions and 413 deletions.
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -28,13 +28,12 @@ export const Dropdown = <T extends string[]>({
       <NativeDropdown
         mode="default"
         style={styles.dropdown}
-        placeholderStyle={[styles.text, styles.textContainer]}
-        selectedTextStyle={[styles.text, styles.textContainer]}
+        placeholderStyle={styles.text}
+        selectedTextStyle={styles.text}
         inputSearchStyle={styles.text}
         itemTextStyle={styles.text}
         containerStyle={styles.dropdownContainer}
         dropdownPosition="bottom"
-        iconStyle={styles.iconStyle}
         data={options.map((option: T[number], index: number) => {
           return { index, label: formatEnumKey(option), value: option };
         })}

diff --git a/src/components/Dropdown/styles.ts b/src/components/Dropdown/styles.ts
@@ -4,48 +4,34 @@ import { typography } from '@/styles/typography';
 
 export const styles = StyleSheet.create({
   dropdown: {
-    height: 47,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
     borderWidth: 1,
     borderRadius: 10,
-    paddingRight: 12,
-    textAlign: 'left',
-    flex: 1,
-    alignItems: 'center',
     borderColor: colors.gray5,
   },
 
   text: {
     ...typography.mediumRegular,
     color: colors.gray3,
     textTransform: 'capitalize',
-    textAlign: 'left',
-  },
-
-  textContainer: {
-    paddingHorizontal: 20,
   },
 
   dropdownContainer: {
-    borderRadius: 5,
+    borderRadius: 10,
     borderWidth: 1,
     borderColor: colors.gray5,
-    position: 'relative',
-  },
-
-  iconStyle: {
-    width: 20,
-    height: 20,
   },
 
   itemContainer: {
     paddingHorizontal: 20,
     paddingVertical: 12,
+    overflow: 'hidden',
   },
 
   selectedBar: {
-    borderLeftWidth: 8,
-    borderColor: colors.primary,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
     overflow: 'hidden',
-    paddingHorizontal: 12,
   },
 });
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
diff --git a/src/components/Logo/styles.ts b/src/components/Logo/styles.ts
diff --git a/src/components/QRCodeScanner/QRCodeScanner.tsx b/src/components/QRCodeScanner/QRCodeScanner.tsx
@@ -56,48 +56,52 @@ export const QRCodeScanner: React.FC<QRCodeScannerProps> = ({ navigation }) => {
   }
 
   return (
-    <SafeAreaView style={styles.safeContainer}>
-      <View style={styles.iconFlex}>
-        <TouchableOpacity onPress={() => setFlashEnabled(!flashEnabled)}>
-          <FlashCircle />
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => navigation.goBack()}>
-          <XButton />
-        </TouchableOpacity>
-      </View>
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.container}>
+        <View style={styles.topActions}>
+          <TouchableOpacity onPress={() => setFlashEnabled(!flashEnabled)}>
+            <FlashCircle />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => navigation.goBack()}>
+            <XButton />
+          </TouchableOpacity>
+        </View>
 
-      <View style={styles.mainFlex}>
-        <View style={styles.textFlex}>
-          <Text style={styles.header}>Scan QR Code</Text>
-          <Text style={styles.subtext}>Aim the camera at the tree's code</Text>
+        <View style={styles.mainFlex}>
+          <View style={styles.textFlex}>
+            <Text style={styles.header}>Scan QR Code</Text>
+            <Text style={styles.subtext}>
+              Aim the camera at the tree's code
+            </Text>
+          </View>
+
+          <View
+            style={[styles.cameraView, qrCodeFound && styles.qrCodeFoundCamera]}
+          >
+            <CameraView
+              style={[styles.camera]}
+              onBarcodeScanned={handleBarcodeScanned}
+              barcodeScannerSettings={{
+                barcodeTypes: ['qr'],
+              }}
+              enableTorch={flashEnabled}
+            />
+          </View>
         </View>
 
-        <View
-          style={[styles.cameraView, qrCodeFound && styles.qrCodeFoundCamera]}
+        <TouchableOpacity
+          style={[
+            styles.scanButton,
+            qrCodeFound ? styles.scanButtonEnabled : styles.scanButtonDisabled,
+          ]}
+          onPress={() =>
+            navigation.push('TreeInfo', { treeId: qrCodeData ?? '' })
+          }
+          disabled={!qrCodeFound}
         >
-          <CameraView
-            style={[styles.camera]}
-            onBarcodeScanned={handleBarcodeScanned}
-            barcodeScannerSettings={{
-              barcodeTypes: ['qr'],
-            }}
-            enableTorch={flashEnabled}
-          />
-        </View>
+          <Text style={styles.scanButtonText}>Scan</Text>
+        </TouchableOpacity>
       </View>
-
-      <TouchableOpacity
-        style={[
-          styles.scanButton,
-          qrCodeFound ? styles.scanButtonEnabled : styles.scanButtonDisabled,
-        ]}
-        onPress={() =>
-          navigation.push('TreeInfo', { treeId: qrCodeData ?? '' })
-        }
-        disabled={!qrCodeFound}
-      >
-        <Text style={styles.scanButtonText}>Scan</Text>
-      </TouchableOpacity>
     </SafeAreaView>
   );
 };
diff --git a/src/components/QRCodeScanner/styles.ts b/src/components/QRCodeScanner/styles.ts
@@ -3,55 +3,52 @@ import { colors } from '@/styles/colors';
 import { typography } from '@/styles/typography';
 
 export const styles = StyleSheet.create({
-  safeContainer: {
+  safeArea: {
     flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
     backgroundColor: colors.primary,
   },
 
-  iconFlex: {
-    flex: 0,
-    width: '100%',
+  container: {
+    flex: 1,
     paddingHorizontal: 24,
+    paddingVertical: 16,
+    alignItems: 'center',
+  },
+
+  topActions: {
+    width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 80,
   },
 
   mainFlex: {
     flex: 1,
-    padding: 24,
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
     gap: 80,
   },
 
   textFlex: {
-    flex: 0,
-    flexDirection: 'column',
+    alignItems: 'center',
     gap: 8,
   },
 
   header: {
-    textAlign: 'center',
     ...typography.heading2,
     color: colors.white,
   },
 
   subtext: {
-    textAlign: 'center',
     ...typography.mediumRegular,
     color: colors.white,
   },
 
   cameraView: {
-    alignSelf: 'center',
-    width: 285,
-    height: 248,
+    width: 280,
+    height: 280,
     borderWidth: 2,
     borderColor: colors.secondary,
     borderRadius: 12,
-    zIndex: 1,
   },
 
   qrCodeFoundCamera: {
@@ -61,17 +58,14 @@ export const styles = StyleSheet.create({
   camera: {
     flex: 1,
     borderRadius: 12,
-    overflow: 'hidden',
   },
 
   scanButton: {
     alignItems: 'center',
-    justifyContent: 'center',
+    paddingHorizontal: 120,
     paddingVertical: 12,
     borderRadius: 10,
-    elevation: 3,
-    marginHorizontal: 48,
-    marginBottom: 64,
+    marginBottom: 32,
   },
 
   scanButtonEnabled: {

diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
@@ -37,27 +37,25 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   const closeFilter = () => setIsModalVisible(false);
 
   return (
-    <View style={styles.searchContainer}>
-      <View style={styles.inputContainer}>
-        <Search />
-        <TextInput
-          style={styles.searchBarInput}
-          placeholder="Find a species..."
-          value={searchText}
-          onChangeText={onSearchTextChange}
-        />
-        <TouchableOpacity onPress={openFilter}>
-          <View style={styles.filterIconContainer}>
-            <Filter />
-          </View>
-        </TouchableOpacity>
-        <SearchFilter
-          isModalVisible={isModalVisible}
-          onClose={closeFilter}
-          activeFilters={activeFilters}
-          onActiveFilterChange={onActiveFilterChange}
-        />
-      </View>
+    <View style={styles.searchBar}>
+      <Search />
+      <TextInput
+        style={styles.searchBarInput}
+        placeholder="Find a species..."
+        value={searchText}
+        onChangeText={onSearchTextChange}
+      />
+      <TouchableOpacity onPress={openFilter}>
+        <View style={styles.filterIconContainer}>
+          <Filter />
+        </View>
+      </TouchableOpacity>
+      <SearchFilter
+        isModalVisible={isModalVisible}
+        onClose={closeFilter}
+        activeFilters={activeFilters}
+        onActiveFilterChange={onActiveFilterChange}
+      />
     </View>
   );
 };
diff --git a/src/components/SearchBar/styles.ts b/src/components/SearchBar/styles.ts
@@ -3,41 +3,20 @@ import { colors } from '@/styles/colors';
 import { typography } from '@/styles/typography';
 
 export const styles = StyleSheet.create({
-  searchContainer: {
+  searchBar: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: colors.gray5,
-    paddingTop: 6,
-    paddingBottom: 20,
-    paddingHorizontal: 24,
-  },
-
-  inputContainer: {
-    flex: 1,
-    height: 42,
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    position: 'relative',
-    borderColor: colors.gray6,
     backgroundColor: colors.gray6,
-    borderRadius: 30,
-    paddingHorizontal: 12,
+    borderRadius: 48,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
   },
 
   searchBarInput: {
     ...typography.mediumRegular,
     color: colors.gray2,
     flex: 1,
-    height: 42,
-    borderWidth: 1,
-    borderRadius: 30,
-    paddingHorizontal: 12,
-    borderColor: colors.gray6,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
+    marginHorizontal: 8,
   },
 
   filterIconContainer: {