Merge pull request #580 from andrew-bierman/fix/types-in-styles-quick…

…fix-with-regex Fix/types-in-styles-quickfix-with-regex
andrew-bierman · Jan 11, 2024 · af44773 · af44773
2 parents 42517e6 + 812a792
commit af44773
Show file tree

Hide file tree

Showing 30 changed files with 154 additions and 160 deletions.
diff --git a/client/components/EditableText/index.tsx b/client/components/EditableText/index.tsx
@@ -28,7 +28,7 @@ export const EditableInput = ({
       {loading && <LoadingPlaceholder color="#e2e1eb" />}
       <TextInput
         style={{
-          fontSize: '20px',
+          fontSize: 20,
           fontWeight: 'bold',
           color: theme.colors.textPrimary,
         }}

diff --git a/client/components/GearList/GearList.tsx b/client/components/GearList/GearList.tsx
@@ -10,11 +10,11 @@ export const GearList = () => {
     <RStack
       alignSelf="center"
       $sm={{
-        borderRadius: '6px',
+        borderRadius: 6,
         width: '100%',
       }}
       $gtSm={{
-        borderRadius: '12px',
+        borderRadius: 12,
         width: '90%',
       }}
       style={{

diff --git a/client/components/Loader.tsx b/client/components/Loader.tsx
@@ -7,7 +7,7 @@ const Loader = () => {
         flexDirection: 'row',
         marginTop: 20,
         justifyContent: 'center',
-        gap: '8px',
+        gap: 8,
       }}
     >
       <RSpinner color="#0a84ff" />

diff --git a/client/components/MultistepForm/MultistepForm.tsx b/client/components/MultistepForm/MultistepForm.tsx
@@ -45,7 +45,7 @@ const loadStyles = (theme) => {
 
   return {
     container: {
-      height: '800px',
+      height: 800,
       backgroundColor: currentTheme.colors.white,
       alignItems: 'center',
       justifyContent: 'center',

diff --git a/client/components/SearchInput.tsx b/client/components/SearchInput.tsx
@@ -4,7 +4,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import useSearchInput from '~/hooks/search/useSearchInput';
 import useTheme from '~/hooks/useTheme';
 import useCustomStyles from '~/hooks/useCustomStyles';
-import { RStack, RInput, RButton, RText, RScrollView } from '@packrat/ui';
+import { RStack, RInput, RButton, RText, RScrollView, RIconButton } from '@packrat/ui';
 import { View, Pressable } from 'react-native';
 
 export const SearchInput = ({ onSelect, placeholder }) => {
@@ -35,8 +35,8 @@ export const SearchInput = ({ onSelect, placeholder }) => {
         >
           <RInput
             style={{
-              paddingLeft: '35px',
-              paddingRight: '55px',
+              paddingLeft: 35,
+              paddingRight: 55,
             }}
             placeholder={placeholder ?? 'Search'}
             onChangeText={(text) => {
@@ -53,7 +53,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              width: '40px',
+              width: 40,
               fontSize: 20,
             }}
           />
@@ -90,7 +90,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
             >
               <View
                 role="list"
-                style={{ width: '100%', gap: '8px', padding: '8px' }}
+                style={{ width: '100%', gap: 8, padding: 8 }}
               >
                 {data.map((result, i) => (
                   <RStack
@@ -106,11 +106,9 @@ export const SearchInput = ({ onSelect, placeholder }) => {
                     <RStack style={{ flexDirection: 'row' }}>
                       <RText fontWeight="400">{result.properties.name}</RText>
                       <RText
-                        style={{
-                          color: 'gray',
-                          opacity: '100',
-                          textTransform: 'capitalize',
-                        }}
+                        color={'gray'}
+                        opacity={100}
+                        textTransform={'capitalize'}
                       >
                         {result.properties.osm_value}
                       </RText>
@@ -132,14 +130,12 @@ export const SearchInput = ({ onSelect, placeholder }) => {
           setSearchString(text);
         }}
         placeholder="Search"
-        style={{
-          width: '100%',
-          borderRadius: '4',
-          padding: '16px 8px',
-          backgroundColor: 'white',
-        }}
         value={searchString}
         fontSize={14}
+        width={'100%'}
+        borderRadius={4}
+        paddingVertical={16}
+        backgroundColor="white"
       />
       <RIconButton
         backgroundColor="transparent"
@@ -188,6 +184,6 @@ const loadStyles = () => ({
   container: {
     marginTop: 20,
     marginBottom: 15,
-    maxWidth: '400px',
+    maxWidth: 400,
   },
 });
diff --git a/client/components/TripCard.tsx b/client/components/TripCard.tsx
@@ -146,7 +146,7 @@ const loadStyles = (theme) => {
       flex: 1,
       paddingHorizontal: 60,
       paddingVertical: 70,
-      height: Platform.OS === 'web' ? '450px' : '100%',
+      height: Platform.OS === 'web' ? 450 : '100%',
       alignSelf: 'center',
     },
     mapCard: {
@@ -157,7 +157,7 @@ const loadStyles = (theme) => {
       padding: currentTheme.size.cardPadding,
       paddingHorizontal: currentTheme.padding.paddingInside,
       marginBottom: 20,
-      height: Platform.OS === 'web' ? '650px' : '100%',
+      height: Platform.OS === 'web' ? 650 : '100%',
       overflow: 'hidden',
       alignSelf: 'center',
     },

diff --git a/client/components/card/LargeCard.tsx b/client/components/card/LargeCard.tsx
@@ -77,7 +77,7 @@ export default function LargeCard({
           style={{
             color: currentTheme.colors.textPrimary,
             fontSize: currentTheme.font.size,
-            fontWeight: 600,
+            fontWeight: "600",
           }}
         >
           {title && <RText>{title}</RText>}
@@ -120,7 +120,7 @@ const loadStyles = (theme) => {
       flex: 1,
       paddingHorizontal: 60,
       paddingVertical: 70,
-      height: Platform.OS === 'web' ? '450px' : '100%',
+      height: Platform.OS === 'web' ? 450 : '100%',
     },
     mapCard: {
       backgroundColor: currentTheme.colors.card,
@@ -130,7 +130,7 @@ const loadStyles = (theme) => {
       padding: currentTheme.size.cardPadding,
       paddingHorizontal: currentTheme.padding.paddingInside,
       marginBottom: 20,
-      height: Platform.OS === 'web' ? '650px' : '100%',
+      height: Platform.OS === 'web' ? 650 : '100%',
       overflow: 'hidden',
     },
   };

diff --git a/client/components/card/index.tsx b/client/components/card/index.tsx
@@ -78,15 +78,15 @@ export const CustomCard = ({
       <View
         style={{
           alignSelf: 'center',
-          borderRadius: '10px',
+          borderRadius: 10,
           ...styles.mainContainer,
         }}
       >
-        <RStack style={{ width: '100%', gap: '30px' }}>
+        <RStack style={{ width: '100%', gap: 30 }}>
           <View
             style={{
-              padding: '15px',
-              paddingBottom: '0px',
+              padding: 15,
+              paddingBottom: 0,
               flexDirection: 'row',
               justifyContent: 'space-between',
               alignItems: 'center',
@@ -103,7 +103,7 @@ export const CustomCard = ({
               />
             </View>
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View style={{ marginRight: '20px', marginLeft: '20px' }}>
+              <View style={{ marginRight: 20, marginLeft: 20 }}>
                 <Link href={`/profile/${data.owner_id}`}>
                   <RText>
                     {user._id === data.owner_id
@@ -159,8 +159,8 @@ export const CustomCard = ({
             style={{
               alignItems: 'center',
               justifyContent: 'center',
-              paddingRight: '16px',
-              paddingLeft: '16px',
+              paddingRight: 16,
+              paddingLeft: 16,
             }}
           >
             <SearchItem placeholder={'Search Item'} />
@@ -170,14 +170,14 @@ export const CustomCard = ({
             style={{
               alignItems: 'center',
               justifyContent: 'center',
-              paddingRight: '16px',
-              paddingLeft: '16px',
+              paddingRight: 16,
+              paddingLeft: 16,
             }}
           >
             {content}
           </View>
           <RSeparator />
-          <View style={{ padding: '16px', paddingTop: '0' }}>{footer}</View>
+          <View style={{ padding: 16, paddingTop: 0 }}>{footer}</View>
         </RStack>
         {/*         <ToastViewport multipleToasts />
         <NativeToast /> */}
@@ -190,23 +190,23 @@ export const CustomCard = ({
       <View
         style={{
           alignSelf: 'center',
-          borderRadius: '10px',
+          borderRadius: 10,
           ...styles.mainContainer,
         }}
       >
-        <RStack style={{ width: '100%', gap: '30px' }}>
+        <RStack style={{ width: '100%', gap: 30 }}>
           <View
             style={{
-              padding: '15px',
-              paddingBottom: '0px',
+              padding: 15,
+              paddingBottom: 0,
               flexDirection: 'row',
               justifyContent: 'space-between',
               alignItems: 'center',
             }}
           >
             <View>{title}</View>
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View style={{ marginRight: '20px', marginLeft: '20px' }}>
+              <View style={{ marginRight: 20, marginLeft: 20 }}>
                 <Link href={`/profile/${data.owner_id && data.owner_id._id}`}>
                   <RText>
                     {user._id === data.owner_id
@@ -255,14 +255,14 @@ export const CustomCard = ({
             style={{
               alignItems: 'center',
               justifyContent: 'center',
-              paddingRight: '16px',
-              paddingLeft: '16px',
+              paddingRight: 16,
+              paddingLeft: 16,
             }}
           >
             {content}
           </View>
           <RSeparator />
-          <View style={{ padding: '16px', paddingTop: '0' }}>{footer}</View>
+          <View style={{ padding: 16, paddingTop: 0 }}>{footer}</View>
         </RStack>
       </View>
     );

diff --git a/client/components/dashboard/FeedPreview.tsx b/client/components/dashboard/FeedPreview.tsx
@@ -41,9 +41,10 @@ const FeedPreviewScroll = () => {
                   style={{
                     backgroundColor: '#F2F1EB',
                     textTransform: 'capitalize',
-                    padding: '4px 8px',
+                    paddingVertical: 4,
+                    paddingHorizontal: 8,
                     alignSelf: 'center',
-                    borderRadius: '2px',
+                    borderRadius: 2,
                   }}
                 >
                   {item.type}

diff --git a/client/components/dashboard/Section.tsx b/client/components/dashboard/Section.tsx
@@ -9,7 +9,7 @@ const Section = ({ children, onPress }) => {
   const styles = useCustomStyles(loadStyles);
   return (
     <View style={styles.section} onPress={onPress}>
-      <RCard style={{ borderRadius: '8px' }}>
+      <RCard style={{ borderRadius: 8 }}>
         <RCard.Header style={styles.card}>{children}</RCard.Header>
       </RCard>
     </View>
@@ -29,7 +29,7 @@ const loadStyles = (theme) => {
       paddingHorizontal: 10,
       paddingVertical: 20,
       backgroundColor: currentTheme.colors.secondaryBlue,
-      borderRadius: '8px',
+      borderRadius: 8,
     },
   };
 };

diff --git a/client/components/feed/FeedCard.tsx b/client/components/feed/FeedCard.tsx
@@ -83,21 +83,21 @@ export default function Card({
   if (duration) numberOfNights = JSON.parse(duration).numberOfNights;
 
   return (
-    <View style={{ alignItems: 'center', padding: '16px' }}>
+    <View style={{ alignItems: 'center', padding: 16 }}>
       <View
         style={{
-          minHeight: '150px',
-          minWidth: '300px',
+          minHeight: 150,
+          minWidth: 300,
           marginVertical: 'auto',
-          borderRadius: '15px',
+          borderRadius: 15,
           overflow: 'hidden',
           borderColor: 'lightgray',
           borderWidth: '1',
           backgroundColor: `${currentTheme.colors.card}`,
         }}
       >
-        <RStack style={{ padding: '16px', gap: '50px' }}>
-          <RStack style={{ gap: '10px' }}>
+        <RStack style={{ padding: 16, gap: 50 }}>
+          <RStack style={{ gap: 10 }}>
             <RHeading>
               <View
                 style={{
@@ -117,7 +117,7 @@ export default function Card({
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    gap: '10px',
+                    gap: 10,
                   }}
                 >
                   {type === 'pack' && (
@@ -126,7 +126,7 @@ export default function Card({
                         flexDirection: 'row',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                        gap: '8px',
+                        gap: 8,
                         // border: '1px solid #ccc',
                       }}
                     >
@@ -189,7 +189,7 @@ export default function Card({
                 style={{
                   flexDirection: 'column',
                   alignItems: 'flex-start',
-                  gap: '8px',
+                  gap: 8,
                 }}
               >
                 <Link href={`/profile/${owner_id}`}>
@@ -201,7 +201,7 @@ export default function Card({
                   style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: '100px',
+                    gap: 100,
                   }}
                 >
                   <RText fontSize="$1" color="gray" fontWeight="400" flex={1}>
@@ -234,7 +234,7 @@ export default function Card({
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        gap: '8px',
+                        gap: 8,
                       }}
                     >
                       {user?._id === owner_id ? null : (

diff --git a/client/components/feed/FeedSearchFilter.tsx b/client/components/feed/FeedSearchFilter.tsx
@@ -76,7 +76,7 @@ const FeedSearchFilter = ({
       >
         {feedType === 'public' && (
           <RStack
-            style={{ flexDirection: 'row', gap: '10px', alignItems: 'center' }}
+            style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
           >
             <RText
               fontSize={18}
@@ -114,7 +114,7 @@ const FeedSearchFilter = ({
           </RStack>
         )}
         <RStack
-          style={{ flexDirection: 'row', gap: '10px', alignItems: 'center' }}
+          style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
         >
           <RText
             fontSize={17}