diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx index 09638751..576b14fa 100644 --- a/JoyboyCommunity/src/assets/icons.tsx +++ b/JoyboyCommunity/src/assets/icons.tsx @@ -256,22 +256,22 @@ export const CopyIconStack: React.FC = (props: SvgProps) => ( ); export const InfoIcon: React.FC = (props) => ( - + ); @@ -282,7 +282,7 @@ export const LockIcon: React.FC = (props) => ( fillRule="evenodd" clipRule="evenodd" d="M16 1.66663C8.08388 1.66663 1.66663 8.08388 1.66663 16C1.66663 23.9161 8.08388 30.3333 16 30.3333C23.9161 30.3333 30.3333 23.9161 30.3333 16C30.3333 8.08388 23.9161 1.66663 16 1.66663ZM12.6666 14.3333C12.6666 12.4923 14.159 11 16 11C17.8409 11 19.3333 12.4923 19.3333 14.3333C19.3333 15.7002 18.5106 16.8749 17.3333 17.3893V21C17.3333 21.7364 16.7364 22.3333 16 22.3333C15.2636 22.3333 14.6666 21.7364 14.6666 21V17.3893C13.4893 16.8749 12.6666 15.7002 12.6666 14.3333Z" - fill={props.color} + fill="currentColor" /> ); @@ -303,3 +303,24 @@ export const UploadIcon: React.FC = (props) => ( /> ); +export const SuccessIcon: React.FC = (props) => ( + + + +); + +export const ErrorIcon: React.FC = (props) => ( + + + +); diff --git a/JoyboyCommunity/src/assets/tipping-modal.png b/JoyboyCommunity/src/assets/tipping-modal.png new file mode 100644 index 00000000..17e896f1 Binary files /dev/null and b/JoyboyCommunity/src/assets/tipping-modal.png differ diff --git a/JoyboyCommunity/src/components/TippingModal/index.tsx b/JoyboyCommunity/src/components/TippingModal/index.tsx new file mode 100644 index 00000000..30ee7927 --- /dev/null +++ b/JoyboyCommunity/src/components/TippingModal/index.tsx @@ -0,0 +1,69 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {Image, View} from 'react-native'; +import {Portal} from 'react-native-portalize'; + +import {useStyles} from '../../hooks'; +import {MainStackNavigationProps} from '../../types'; +import {Button, Text} from '..'; +import stylesheet from './styles'; + +export type TippingModalProps = { + user: string; + symbol: string; + amount: number; + visible?: boolean; +}; + +export const TippingModal: React.FC = ({ + user, + symbol, + amount, + visible = true, +}) => { + const styles = useStyles(stylesheet); + + const navigation = useNavigation(); + + if (!visible) return null; + + return ( + + + + + + + + + + + Tipped {user} + + + {amount} {symbol} + + + Keep spreading love + + + + + + + + + ); +}; diff --git a/JoyboyCommunity/src/components/TippingModal/styles.ts b/JoyboyCommunity/src/components/TippingModal/styles.ts new file mode 100644 index 00000000..5b9b47cd --- /dev/null +++ b/JoyboyCommunity/src/components/TippingModal/styles.ts @@ -0,0 +1,47 @@ +import {Spacing, ThemedStyleSheet} from '../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + flex: 1, + }, + modalContainer: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + backgroundColor: 'rgba(0, 0, 0, 0.4)', + width: '100%', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + }, + modal: { + width: '80%', + height: '40%', + backgroundColor: theme.colors.surface, + borderRadius: 24, + }, + logo: { + position: 'absolute', + top: '-43%', + width: '100%', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + }, + logoImage: { + width: 238, + }, + content: { + gap: Spacing.small, + width: '100%', + height: '100%', + alignItems: 'center', + justifyContent: 'flex-end', + paddingHorizontal: Spacing.large, + paddingVertical: Spacing.medium, + }, + button: { + width: '100%', + }, +})); diff --git a/JoyboyCommunity/src/components/Toast/index.tsx b/JoyboyCommunity/src/components/Toast/index.tsx new file mode 100644 index 00000000..06b1a23c --- /dev/null +++ b/JoyboyCommunity/src/components/Toast/index.tsx @@ -0,0 +1,42 @@ +import {View} from 'react-native'; + +import {ErrorIcon, InfoIcon, SuccessIcon} from '../../assets/icons'; +import {useStyles, useTheme} from '../../hooks'; +import {Text} from '../Text'; +import stylesheet from './styles'; + +export type ToastProps = { + type: 'success' | 'info' | 'error'; + title: string; +}; + +export const Toast: React.FC = ({type, title}) => { + const theme = useTheme(); + const styles = useStyles(stylesheet, type); + + const color = ( + { + success: 'successDark', + info: 'infoDark', + error: 'errorDark', + } as const + )[type]; + + const Icon = ( + { + success: SuccessIcon, + info: InfoIcon, + error: ErrorIcon, + } as const + )[type]; + + return ( + + + + + {title} + + + ); +}; diff --git a/JoyboyCommunity/src/components/Toast/styles.ts b/JoyboyCommunity/src/components/Toast/styles.ts new file mode 100644 index 00000000..6aa99eb1 --- /dev/null +++ b/JoyboyCommunity/src/components/Toast/styles.ts @@ -0,0 +1,28 @@ +import {Spacing, ThemedStyleSheet} from '../../styles'; + +export default ThemedStyleSheet((theme, type: 'success' | 'info' | 'error') => ({ + container: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + gap: Spacing.xsmall, + paddingVertical: Spacing.medium, + paddingHorizontal: Spacing.medium, + borderRadius: 8, + + ...(type === 'success' && { + backgroundColor: theme.colors.successLight, + }), + + ...(type === 'info' && { + backgroundColor: theme.colors.infoLight, + }), + + ...(type === 'error' && { + backgroundColor: theme.colors.errorLight, + }), + }, + text: { + flex: 1, + }, +})); diff --git a/JoyboyCommunity/src/components/index.ts b/JoyboyCommunity/src/components/index.ts index 00a2d1a8..910ebd9d 100644 --- a/JoyboyCommunity/src/components/index.ts +++ b/JoyboyCommunity/src/components/index.ts @@ -19,3 +19,4 @@ export {SquareInput} from './SquareInput'; export {Story} from './Story'; export {Text} from './Text'; export {TextButton} from './TextButton'; +export {Toast} from './Toast';