diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/common/NavigationIcon.tsx | 14 | ||||
| -rw-r--r-- | src/components/common/SmallSocialIcon.tsx | 54 | ||||
| -rw-r--r-- | src/components/common/index.ts | 1 | ||||
| -rw-r--r-- | src/components/taggs/Tagg.tsx | 44 |
4 files changed, 102 insertions, 11 deletions
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx index 8bf8b4a0..8fff18f4 100644 --- a/src/components/common/NavigationIcon.tsx +++ b/src/components/common/NavigationIcon.tsx @@ -17,8 +17,8 @@ const NavigationIcon = (props: NavigationIconProps) => { switch (props.tab) { case 'Home': imgSrc = props.disabled - ? require('../../assets/navigationIcons/home-new.png') - : require('../../assets/navigationIcons/home-new-clicked.png'); + ? require('../../assets/navigationIcons/home.png') + : require('../../assets/navigationIcons/home-clicked.png'); break; case 'Search': imgSrc = props.disabled @@ -44,16 +44,16 @@ const NavigationIcon = (props: NavigationIconProps) => { imgSrc = null; } return ( - <View style={styles.icon}> + <View style={styles.container}> <TouchableOpacity {...props}> - <Image source={imgSrc} /> + <Image source={imgSrc} style={styles.icon} /> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ - icon: { + container: { flex: 1, justifyContent: 'center', shadowColor: '#000000', @@ -64,6 +64,10 @@ const styles = StyleSheet.create({ shadowRadius: 2, shadowOpacity: 0.4, }, + icon: { + height: 30, + width: 30, + }, }); export default NavigationIcon; diff --git a/src/components/common/SmallSocialIcon.tsx b/src/components/common/SmallSocialIcon.tsx new file mode 100644 index 00000000..d7d175d5 --- /dev/null +++ b/src/components/common/SmallSocialIcon.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import {Image} from 'react-native'; + +interface SmallSocialIconProps { + social: string; + style: object; +} +/** + * An image component that returns the <Image> of the icon for a specific social media platform. + */ +const SmallSocialIcon: React.FC<SmallSocialIconProps> = ({ + social: social, + style: style, +}) => { + switch (social) { + case 'Instagram': + var icon = require('../../assets/socials/instagram-icon-small.png'); + break; + case 'Facebook': + var icon = require('../../assets/socials/facebook-icon-small.png'); + break; + case 'Twitter': + var icon = require('../../assets/socials/twitter-icon-small.png'); + break; + // TODO: Missing icon assets + // case 'Twitch': + // var icon = require('../../assets/socials/twitch-icon-small.png'); + // break; + // case 'Pinterest': + // var icon = require('../../assets/socials/pinterest-icon-small.png'); + // break; + // case 'Whatsapp': + // var icon = require('../../assets/socials/whatsapp-icon-small.png'); + // break; + // case 'Linkedin': + // var icon = require('../../assets/socials/linkedin-icon-small.png'); + // break; + case 'Snapchat': + var icon = require('../../assets/socials/snapchat-icon-small.png'); + break; + case 'Youtube': + var icon = require('../../assets/socials/youtube-icon-small.png'); + break; + case 'TikTok': + var icon = require('../../assets/socials/tiktok-icon-small.png'); + break; + default: + var icon = require('../../assets/socials/logo.png'); + break; + } + return <Image style={style} source={icon} />; +}; + +export default SmallSocialIcon; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 883dae61..0feeaab8 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -5,6 +5,7 @@ export {default as RadioCheckbox} from './RadioCheckbox'; export {default as NavigationIcon} from './NavigationIcon'; export {default as GradientBackground} from './GradientBackground'; export {default as SocialIcon} from './SocialIcon'; +export {default as SmallSocialIcon} from './SmallSocialIcon'; export {default as TabsGradient} from './TabsGradient'; export {default as RecentSearches} from '../search/RecentSearches'; export {default as LoadingIndicator} from './LoadingIndicator'; diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index d9c35b27..9f8fafd1 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -7,6 +7,7 @@ import RingPlus from '../../assets/icons/ring+.svg'; import Ring from '../../assets/icons/ring.svg'; import { INTEGRATED_SOCIAL_LIST, + SOCIAL_ICON_SIZE_ADJUSTMENT, TAGG_ICON_DIM, TAGG_RING_DIM, } from '../../constants'; @@ -15,7 +16,7 @@ import { handlePressForAuthBrowser, registerNonIntegratedSocialLink, } from '../../services'; -import {SocialIcon, SocialLinkModal} from '../common'; +import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common'; import {AuthContext, ProfileContext} from '../../routes'; interface TaggProps { @@ -129,17 +130,33 @@ const Tagg: React.FC<TaggProps> = ({ {isProfileView && !isLinked ? ( <Fragment /> ) : ( - <TouchableOpacity onPress={modalOrAuthBrowserOrPass}> + <> <SocialLinkModal modalVisible={modalVisible} setModalVisible={setModalVisible} completionCallback={linkNonIntegratedSocial} /> <View style={styles.container}> - <SocialIcon style={styles.image} social={social} /> - {pickTheRightRingHere()} + <TouchableOpacity + style={styles.iconTap} + onPress={modalOrAuthBrowserOrPass}> + <SocialIcon style={styles.icon} social={social} /> + {pickTheRightRingHere()} + </TouchableOpacity> + <View style={styles.smallIconContainer}> + <SmallSocialIcon + style={[ + styles.smallIcon, + { + height: SOCIAL_ICON_SIZE_ADJUSTMENT[social], + width: SOCIAL_ICON_SIZE_ADJUSTMENT[social], + }, + ]} + social={social} + /> + </View> </View> - </TouchableOpacity> + </> )} </> ); @@ -151,12 +168,27 @@ const styles = StyleSheet.create({ alignItems: 'center', marginHorizontal: 15, }, - image: { + iconTap: { + justifyContent: 'center', + alignItems: 'center', + }, + icon: { width: TAGG_ICON_DIM, height: TAGG_ICON_DIM, borderRadius: TAGG_ICON_DIM / 2, position: 'absolute', }, + smallIconContainer: { + height: 35, + width: 35, + position: 'absolute', + justifyContent: 'center', + alignItems: 'center', + bottom: -35, + }, + smallIcon: { + borderRadius: 1000, + }, }); export default Tagg; |