diff --git a/packages/app/components/Avatar/Avatar.tsx b/packages/app/components/Avatar/Avatar.tsx index 10a1aa0f5..259c4015b 100644 --- a/packages/app/components/Avatar/Avatar.tsx +++ b/packages/app/components/Avatar/Avatar.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { RImage } from '@packrat/ui'; import { MaterialCommunityIcons } from '@expo/vector-icons'; export interface AvatarProps { diff --git a/packages/app/components/DialogDemo/DialogDemo.tsx b/packages/app/components/DialogDemo/DialogDemo.tsx index 2d1b65fc0..13f498e22 100644 --- a/packages/app/components/DialogDemo/DialogDemo.tsx +++ b/packages/app/components/DialogDemo/DialogDemo.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import { Button as OriginalButton, diff --git a/packages/app/components/MultistepForm/ProgressBar.tsx b/packages/app/components/MultistepForm/ProgressBar.tsx index 100fd4cb6..929a0a94f 100644 --- a/packages/app/components/MultistepForm/ProgressBar.tsx +++ b/packages/app/components/MultistepForm/ProgressBar.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import useCustomStyles from 'app/hooks/useCustomStyles'; import { Svg, Line, Circle } from 'react-native-svg'; import { View } from 'react-native'; diff --git a/packages/app/components/MultistepForm/Sidebar.tsx b/packages/app/components/MultistepForm/Sidebar.tsx index 3e714aec8..102ee57a9 100644 --- a/packages/app/components/MultistepForm/Sidebar.tsx +++ b/packages/app/components/MultistepForm/Sidebar.tsx @@ -1,8 +1,9 @@ +import React from 'react'; import useCustomStyles from 'app/hooks/useCustomStyles'; import { View, Text } from 'react-native'; interface SidebarProps { - data: { title?: string; subtext?: string }[]; + data: Array<{ title?: string; subtext?: string }>; currentStep: number; } @@ -15,7 +16,6 @@ export const Sidebar: React.FC = ({ data, currentStep }) => { return ( - {/* Display your data here */} {displayData.map((currentData, index) => { if (!currentData) return null; const { title, subtext } = currentData; diff --git a/packages/app/components/RPrimaryButton/index.tsx b/packages/app/components/RPrimaryButton/index.tsx index 321fadc8e..6e208fb32 100644 --- a/packages/app/components/RPrimaryButton/index.tsx +++ b/packages/app/components/RPrimaryButton/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { styled, Button, ButtonProps } from 'tamagui'; +import { styled, Button, type ButtonProps } from 'tamagui'; interface RPrimaryButtonProps extends ButtonProps { label: string; diff --git a/packages/app/components/RSecondaryButton/index.tsx b/packages/app/components/RSecondaryButton/index.tsx index 39ed2644a..b85f3bf49 100644 --- a/packages/app/components/RSecondaryButton/index.tsx +++ b/packages/app/components/RSecondaryButton/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { styled, Button, ButtonProps } from 'tamagui'; +import { styled, Button, type ButtonProps } from 'tamagui'; import useTheme from 'app/hooks/useTheme'; interface RSecondaryButtonProps extends ButtonProps { diff --git a/packages/app/components/Redirect/Redirect.tsx b/packages/app/components/Redirect/Redirect.tsx index b41139cc4..2707dc080 100644 --- a/packages/app/components/Redirect/Redirect.tsx +++ b/packages/app/components/Redirect/Redirect.tsx @@ -1,9 +1,9 @@ import { useEffect } from 'react'; import { useRouter } from 'app/hooks/router'; -type RedirectProps = { +interface RedirectProps { to: string; -}; +} export const Redirect = ({ to }: RedirectProps) => { const router = useRouter(); diff --git a/packages/app/components/Suggestion/SuggestionDescription.tsx b/packages/app/components/Suggestion/SuggestionDescription.tsx index 98b429436..df619878f 100644 --- a/packages/app/components/Suggestion/SuggestionDescription.tsx +++ b/packages/app/components/Suggestion/SuggestionDescription.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { FlatList } from 'react-native'; import { AnimatePresence, Text, Theme, View, styled } from 'tamagui'; @@ -11,10 +11,10 @@ const List = styled(FlatList, { const getMessages = (data: Message[]) => data; -type Message = { +interface Message { role: 'user' | 'ai'; content: string; -}; +} const renderItem = ({ item: message, diff --git a/packages/app/components/Suggestion/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx index 137a09258..8fd8e78ba 100644 --- a/packages/app/components/Suggestion/SuggestionList.tsx +++ b/packages/app/components/Suggestion/SuggestionList.tsx @@ -10,7 +10,7 @@ interface Category { name: string; } -interface Item { +interface SuggestionItem { id: string; name: string; ownerId: string; @@ -21,12 +21,12 @@ interface Item { } interface SuggestionListProps { - suggestion: { Items: Item[] } | null; + suggestion: { Items: SuggestionItem[] } | null; onAddItem: (itemId: string) => void; } export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) { - const [itemsList, setItemsList] = useState([]); + const [itemsList, setItemsList] = useState([]); const { isDark } = useTheme(); useEffect(() => { @@ -51,7 +51,7 @@ export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) { style={{ minWidth: 300, height: '100%', - overflow: 'auto', + overflow: 'scroll', }} > {itemsList.map((item, i) => ( @@ -67,7 +67,12 @@ export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) { SuggestionList.fileName = 'List'; -function Item({ item, onAddItem }) { +interface ItemProps { + item: SuggestionItem; + onAddItem: (itemId: string) => void; +} + +function Item({ item, onAddItem }: ItemProps) { const { addPackItem, isLoading } = useAddPackItem(); const handleAddItem = (item) => { @@ -89,7 +94,7 @@ function Item({ item, onAddItem }) { style={{ borderRadius: 5, flexDirection: 'row', - aligItems: 'center', + alignItems: 'center', }} > diff --git a/packages/app/components/carousel/ScrollButton.tsx b/packages/app/components/carousel/ScrollButton.tsx index a8ff689c3..6455fda84 100644 --- a/packages/app/components/carousel/ScrollButton.tsx +++ b/packages/app/components/carousel/ScrollButton.tsx @@ -5,9 +5,9 @@ import { TouchableOpacity, View, StyleProp, - TextStyle, + type TextStyle, + type ViewStyle, TouchableOpacityProps, - ViewStyle, } from 'react-native'; import useCustomStyles from 'app/hooks/useCustomStyles'; import useTheme from 'app/hooks/useTheme'; diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx index 4c41c92d6..d341848eb 100644 --- a/packages/app/components/carousel/index.tsx +++ b/packages/app/components/carousel/index.tsx @@ -1,9 +1,9 @@ -import React, { useRef, useState, ReactNode } from 'react'; +import React, { useRef, useState, type ReactNode } from 'react'; import { ScrollView, Platform, Dimensions, - NativeScrollEvent, + type NativeScrollEvent, } from 'react-native'; import { RStack } from '@packrat/ui'; import ScrollButton from './ScrollButton'; diff --git a/packages/app/components/chat/ActionItem.tsx b/packages/app/components/chat/ActionItem.tsx index 8ae173aa3..78ed1fdbd 100644 --- a/packages/app/components/chat/ActionItem.tsx +++ b/packages/app/components/chat/ActionItem.tsx @@ -6,7 +6,7 @@ import Animated, { withTiming, FadeIn, } from 'react-native-reanimated'; -import { LucideIcon } from 'lucide-react-native'; +import type { LucideIcon } from 'lucide-react-native'; const AnimatedPressable = Animated.createAnimatedComponent(Pressable); diff --git a/packages/app/components/hero/index.tsx b/packages/app/components/hero/index.tsx index 087046051..65e67004b 100644 --- a/packages/app/components/hero/index.tsx +++ b/packages/app/components/hero/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { RStack, RImage } from '@packrat/ui'; -import { ImageSourcePropType, Platform, View } from 'react-native'; +import { type ImageSourcePropType, Platform, View } from 'react-native'; import { theme } from '../../theme'; import { isObjectEmpty } from '../../utils/isObjectEmpty'; import useCustomStyles from 'app/hooks/useCustomStyles'; diff --git a/packages/app/components/inventory/Inventory.tsx b/packages/app/components/inventory/Inventory.tsx index c4efff3e7..fe4cf9881 100644 --- a/packages/app/components/inventory/Inventory.tsx +++ b/packages/app/components/inventory/Inventory.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; // import { TableContainer } from '../Table'; diff --git a/packages/app/components/landing_page/FAQS.tsx b/packages/app/components/landing_page/FAQS.tsx index fdb1e16a4..5982647a3 100644 --- a/packages/app/components/landing_page/FAQS.tsx +++ b/packages/app/components/landing_page/FAQS.tsx @@ -6,7 +6,7 @@ import useTheme from 'app/hooks/useTheme'; import useResponsive from 'app/hooks/useResponsive'; import { FaqList } from 'app/constants/FAQS'; import { MaterialCommunityIcons } from '@expo/vector-icons'; -import { useState } from 'react'; +import React, { useState } from 'react'; export const FAQS = () => { const { currentTheme } = useTheme(); @@ -26,10 +26,10 @@ export const FAQS = () => { Frequently Asked Questions - + {FaqList.map((faq, index) => { return ( - + toggleAnswer(index)} style={styles.faqQuestion} @@ -59,8 +59,8 @@ export const FAQS = () => { src={PakRat_FAQS} style={{ backgroundColor: 'transparent', - width: xs || sm || md ? 359 : 650, - height: xs || sm || md ? 250 : 541, + width: xs || sm || md ? 359 : 650, + height: xs || sm || md ? 250 : 541, }} alt="PackRat Frequently Asked Questions" /> @@ -69,47 +69,47 @@ export const FAQS = () => { ); }; -const loadStyles = (currentTheme, xs, sm, md) => StyleSheet.create({ - faqMainContainer: { - flexDirection: xs || sm || md ? 'column' : 'row', - alignItems: 'center', - justifyContent: 'space-evenly', - gap: 10, - width: '100vw', - maxWidth: '100vw', - paddingTop: 20, - paddingBottom: 20, - }, - faqFirstContainer: { - alignItems: 'center', - }, - faqBox: { - width: xs || sm || md ? '100%' : '24vw', - }, - faqMainTitle: { - fontSize: xs || sm || md ? 20 : 26, - textAlign : xs || sm || md ? 'center' : 'auto', - fontWeight: 'bold', - color: currentTheme.colors.textPrimary, - marginBottom: 30, - }, - faqQuestion: { - borderBottomWidth: 1, - borderBottomColor: currentTheme.colors.textPrimary, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginTop: 4, - marginBottom: 4, - marginLeft: xs || sm || md ? 10 : 0, - marginRight: xs || sm || md ? 10 : 0, - gap: xs || sm || md ? 2 : 10, - }, - faqAnswer: { - marginLeft: 0, - width: xs || sm || md ? '100%' : '24vw', - marginLeft: xs || sm || md ? 10 : 0, - marginRight: xs || sm || md ? 10 : 0, - }, - faqSecondContainer: {}, -}); +const loadStyles = (currentTheme, xs, sm, md) => + StyleSheet.create({ + faqMainContainer: { + flexDirection: xs || sm || md ? 'column' : 'row', + alignItems: 'center', + justifyContent: 'space-evenly', + gap: 10, + width: '100vw', + maxWidth: '100vw', + paddingTop: 20, + paddingBottom: 20, + }, + faqFirstContainer: { + alignItems: 'center', + }, + faqBox: { + width: xs || sm || md ? '100%' : '24vw', + }, + faqMainTitle: { + fontSize: xs || sm || md ? 20 : 26, + textAlign: xs || sm || md ? 'center' : 'auto', + fontWeight: 'bold', + color: currentTheme.colors.textPrimary, + marginBottom: 30, + }, + faqQuestion: { + borderBottomWidth: 1, + borderBottomColor: currentTheme.colors.textPrimary, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginTop: 4, + marginBottom: 4, + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, + gap: xs || sm || md ? 2 : 10, + }, + faqAnswer: { + width: xs || sm || md ? '100%' : '24vw', + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, + }, + faqSecondContainer: {}, + }); diff --git a/packages/app/components/landing_page/LandingPageAccordion.tsx b/packages/app/components/landing_page/LandingPageAccordion.tsx index 89308a5c2..f90011fc5 100644 --- a/packages/app/components/landing_page/LandingPageAccordion.tsx +++ b/packages/app/components/landing_page/LandingPageAccordion.tsx @@ -7,13 +7,23 @@ import loadStyles from './landingpage.style'; import { FAQ_ITEMS } from './constants'; import useTheme from 'app/hooks/useTheme'; import PackRatPreview from 'app/assets/PackRat Preview.jpg'; -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import useResponsive from 'app/hooks/useResponsive'; import { Platform } from 'react-native'; const RButton: any = OriginalRButton; -export const LandingPageAccordion = ({ title, content, iconName }) => { +interface LandingPageAccordionProps { + title: string; + content: string; + iconName: string; +} + +export const LandingPageAccordion = ({ + title, + content, + iconName, +}: LandingPageAccordionProps) => { const styles = useCustomStyles(loadStyles); const { currentTheme } = useTheme(); const [index, setIndex] = useState(0); @@ -43,72 +53,77 @@ export const LandingPageAccordion = ({ title, content, iconName }) => { }; return ( - { - Platform.OS === 'web' ? ( - - - - - - - - - {data.content} - + + + + - - - - - - + - - ) : ( - - - - - {title} - - - + {data.content} + + + + + - {expanded && ( - - {content} - - )} - - ) - } + + + ) : ( + + + + + {title} + + + + + + {expanded && ( + + {content} + + )} + + )} ); }; diff --git a/packages/app/components/landing_page/Pricing.tsx b/packages/app/components/landing_page/Pricing.tsx index a083bd7b0..3e5926587 100644 --- a/packages/app/components/landing_page/Pricing.tsx +++ b/packages/app/components/landing_page/Pricing.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { RButton, RText } from '@packrat/ui'; import useTheme from 'app/hooks/useTheme'; import useResponsive from 'app/hooks/useResponsive'; @@ -15,13 +16,29 @@ export const Pricing = () => { - + Explore PackRat with Our Free Subscription Plan! - + Get Started with PackRat—Absolutely Free! - + We’re thrilled to offer you our Free Subscription Plan so you can explore and manage your trips with PackRat at no cost! This plan is designed to give you full access to a range of features, making your @@ -29,10 +46,24 @@ export const Pricing = () => { - + Free Access - + $0 @@ -46,9 +77,10 @@ export const Pricing = () => { - {PricingData.freeVersion.map((index) => { + {PricingData.freeVersion.map((index, i) => { return ( { alignItems: 'center', justifyContent: 'center', gap: 20, - }, card: { flex: 1, diff --git a/packages/app/components/logo/index.tsx b/packages/app/components/logo/index.tsx index cf57be259..ff9734dfb 100644 --- a/packages/app/components/logo/index.tsx +++ b/packages/app/components/logo/index.tsx @@ -5,11 +5,17 @@ import useAspectRatio from './useAspectRatio'; const ORIGINAL_WIDTH = 29; const ORIGINAL_HEIGHT = 32; +interface SVGLogoProps { + width?: number; + fill?: string; + [key: string]: any; +} + export default function SVGLogoComponent({ width = 963.619, fill = 'fff', ...props -}) { +}: SVGLogoProps) { const height = useAspectRatio(width, ORIGINAL_WIDTH, ORIGINAL_HEIGHT); return ( diff --git a/packages/app/components/navigation/Sidebar/ProfileNavigationList.tsx b/packages/app/components/navigation/Sidebar/ProfileNavigationList.tsx index 003dd5d8c..37c690bf0 100644 --- a/packages/app/components/navigation/Sidebar/ProfileNavigationList.tsx +++ b/packages/app/components/navigation/Sidebar/ProfileNavigationList.tsx @@ -5,12 +5,15 @@ import { useIsMobileView } from 'app/hooks/common'; import { View } from 'tamagui'; import useTheme from '../../../hooks/useTheme'; -interface ProfileNavigationList { - itemStyle?: any; - onItemSelect?: (item: any) => void; +interface ProfileNavigationListProps { + itemStyle?: Record; + onItemSelect?: (item: unknown) => void; } -export const ProfileNavigationList = ({ itemStyle, onItemSelect }) => { +export const ProfileNavigationList: React.FC = ({ + itemStyle, + onItemSelect, +}) => { const isMobileView = useIsMobileView(); const { currentTheme } = useTheme(); const { navigationItems } = useNavigationList(); diff --git a/packages/app/components/navigation/Sidebar/SideBar.tsx b/packages/app/components/navigation/Sidebar/SideBar.tsx index 3336f10eb..0994125b6 100644 --- a/packages/app/components/navigation/Sidebar/SideBar.tsx +++ b/packages/app/components/navigation/Sidebar/SideBar.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import React, { useState } from 'react'; import { View, useMedia, styled } from 'tamagui'; import { RIconButton } from '@packrat/ui'; import useTheme from 'app/hooks/useTheme'; diff --git a/packages/app/components/navigation/Sidebar/SidebarNavigationList.tsx b/packages/app/components/navigation/Sidebar/SidebarNavigationList.tsx index e2a396070..0e5b5ac04 100644 --- a/packages/app/components/navigation/Sidebar/SidebarNavigationList.tsx +++ b/packages/app/components/navigation/Sidebar/SidebarNavigationList.tsx @@ -5,12 +5,15 @@ import { useIsMobileView } from 'app/hooks/common'; import { View } from 'tamagui'; import useTheme from '../../../hooks/useTheme'; -interface SidebarNavigationList { - itemStyle?: any; - onItemSelect?: (item: any) => void; +interface SidebarNavigationListProps { + itemStyle?: Record; + onItemSelect?: (item: unknown) => void; } -export const SidebarNavigationList = ({ itemStyle, onItemSelect }) => { +export const SidebarNavigationList: React.FC = ({ + itemStyle, + onItemSelect, +}) => { const isMobileView = useIsMobileView(); const { currentTheme } = useTheme(); const { navigationItems } = useNavigationList(); diff --git a/packages/app/components/newsLetter/index.tsx b/packages/app/components/newsLetter/index.tsx index 34b9f6b82..5f032a370 100644 --- a/packages/app/components/newsLetter/index.tsx +++ b/packages/app/components/newsLetter/index.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Form, FormInput, RText, SubmitButton } from '@packrat/ui'; import useTheme from 'app/hooks/useTheme'; import useResponsive from 'app/hooks/useResponsive'; @@ -6,7 +7,7 @@ import { StyleSheet } from 'react-native'; export const NewsLetter = () => { const { currentTheme } = useTheme(); - const {xs, sm, md} = useResponsive() + const { xs, sm, md } = useResponsive(); const styles = StyleSheet.create(loadStyles(currentTheme, xs, sm, md)); return (
@@ -18,7 +19,7 @@ export const NewsLetter = () => { name="email" aria-label="Email" /> - + {}}> Join Newsletter @@ -33,15 +34,14 @@ const loadStyles = (currentTheme, xs, sm, md) => { container: { width: xs ? '100%' : 'auto', flexDirection: xs ? 'column' : 'row', - alignItems: xs ? '' : 'center', + alignItems: xs ? 'center' : 'center', justifyContent: 'center', gap: 10, - }, submitButton: { backgroundColor: '#232323', color: 'white', - width: xs ? '100%' : 'auto', + width: xs ? '100%' : 'auto', }, }); }; diff --git a/packages/app/components/password-reset/PasswordResetAlert.tsx b/packages/app/components/password-reset/PasswordResetAlert.tsx index 1f240b456..9fc63eda3 100644 --- a/packages/app/components/password-reset/PasswordResetAlert.tsx +++ b/packages/app/components/password-reset/PasswordResetAlert.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { useRouter } from '@packrat/crosspath'; import { YStack, RText, RButton } from '@packrat/ui'; diff --git a/packages/app/components/select/index.tsx b/packages/app/components/select/index.tsx index a04ab00a7..033849cb8 100644 --- a/packages/app/components/select/index.tsx +++ b/packages/app/components/select/index.tsx @@ -1,6 +1,6 @@ import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'; -import { useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Adapt, diff --git a/packages/app/components/settings/components/inputParts.tsx b/packages/app/components/settings/components/inputParts.tsx index 7a800ec75..c68000e90 100644 --- a/packages/app/components/settings/components/inputParts.tsx +++ b/packages/app/components/settings/components/inputParts.tsx @@ -2,7 +2,7 @@ import { getFontSized } from '@tamagui/get-font-sized'; import { getSpace } from '@tamagui/get-token'; import { User } from '@tamagui/lucide-icons'; import type { SizeVariantSpreadFunction } from '@tamagui/web'; -import { useState } from 'react'; +import React, { useState } from 'react'; import type { ColorTokens, FontSizeTokens } from 'tamagui'; import { Label, @@ -92,7 +92,7 @@ const InputGroupFrame = styled(XGroup, { }, } as const, defaultVariants: { - unstyled: process.env.TAMAGUI_HEADLESS === '1' ? true : false, + unstyled: process.env.TAMAGUI_HEADLESS === '1', }, }); @@ -118,8 +118,7 @@ export const inputSizeVariant: SizeVariantSpreadFunction = ( val = '$true', extras, ) => { - const radiusToken = - extras.tokens.radius[val] ?? extras.tokens.radius['$true']; + const radiusToken = extras.tokens.radius[val] ?? extras.tokens.radius.$true; const paddingHorizontal = getSpace(val, { shift: -1, bounds: [2], @@ -127,7 +126,7 @@ export const inputSizeVariant: SizeVariantSpreadFunction = ( const fontStyle = getFontSized(val as any, extras); // lineHeight messes up input on native if (!isWeb && fontStyle) { - delete fontStyle['lineHeight']; + delete fontStyle.lineHeight; } return { ...fontStyle, @@ -288,7 +287,7 @@ export const InputInfo = styled(Text, { if (!font) return; const fontSize = font.size[val].val * 0.8; const lineHeight = font.lineHeight?.[val].val * 0.8; - const fontWeight = font.weight?.['$2']; + const fontWeight = font.weight?.$2; const letterSpacing = font.letterSpacing?.[val]; const textTransform = font.transform?.[val]; const fontStyle = font.style?.[val]; @@ -311,7 +310,7 @@ const InputXGroup = styled(XGroup, { variants: { size: { '...size': (val, { tokens }) => { - const radiusToken = tokens.radius[val] ?? tokens.radius['$true']; + const radiusToken = tokens.radius[val] ?? tokens.radius.$true; return { borderRadius: radiusToken, }; diff --git a/packages/app/components/settings/components/layoutParts.tsx b/packages/app/components/settings/components/layoutParts.tsx index 1228c352a..b2be266d0 100644 --- a/packages/app/components/settings/components/layoutParts.tsx +++ b/packages/app/components/settings/components/layoutParts.tsx @@ -10,8 +10,7 @@ export const FormCard = styled(View, { alignItems: 'center', justifyContent: 'center', padding: '$6', - '$group-window-gtSm': { - + $gtSm: { shadowColor: '$shadowColor', shadowOffset: { width: 0, @@ -24,14 +23,14 @@ export const FormCard = styled(View, { borderWidth: 1, borderColor: '$borderColor', }, - '$group-window-xs': { + $xs: { borderWidth: 0, borderRadius: 0, paddingHorizontal: '$1', }, }); -export const Hide = ({ +export const Hide = async ({ children, when = 'sm', }: { diff --git a/packages/app/components/settings/index.tsx b/packages/app/components/settings/index.tsx index 479c5e826..f5e8de8e4 100644 --- a/packages/app/components/settings/index.tsx +++ b/packages/app/components/settings/index.tsx @@ -1,13 +1,6 @@ -import { - AnimatePresence, - Button, - H1, - Label, - Spinner, - View, -} from 'tamagui'; +import { AnimatePresence, Button, H1, Label, Spinner, View } from 'tamagui'; import { Input } from './components/inputParts'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { Info } from '@tamagui/lucide-icons'; import { FormCard } from './components/layoutParts'; import { useForm, Controller } from 'react-hook-form'; @@ -36,7 +29,7 @@ export function SettingsForm() { const [loading, setLoading] = useState(false); const { user, handleEditUser, handleUpdatePassword } = useProfileSettings(); const { deleteProfile, isLoading } = useDeleteProfile(); - const {xs, sm, md } = useResponsive(); + const { xs, sm, md } = useResponsive(); const { control, @@ -99,8 +92,8 @@ export function SettingsForm() { }} > } /> @@ -109,16 +102,16 @@ export function SettingsForm() {

- Preferred units -

+ style={{ + alignSelf: 'center', + }} + size="$8" + $group-window-xs={{ + size: '$7', + }} + > + Preferred units + @@ -138,7 +131,7 @@ export function SettingsForm() { @@ -148,7 +141,7 @@ export function SettingsForm() { marginTop: 16, backgroundColor: '#232323', color: 'white', - textAlign: 'center' + textAlign: 'center', }} disabled={loading} onSubmit={(data) => handleEditUser(data)} @@ -254,7 +247,7 @@ export function SettingsForm() { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - textAlign: 'center' + textAlign: 'center', }} >

Delete Account

-