Skip to content
Snippets Groups Projects
Commit 72b37dfa authored by Alexey Lunin's avatar Alexey Lunin
Browse files

Change scan button

parent 3d9ec385
No related branches found
No related tags found
1 merge request!12Hin messaging
<html>
<head>
<style>
img {
max-width: 30px;
}
</style>
</head>
<body style="background-color: gray">
<img src="activities.svg" >
<img src="attachments.svg" >
<img src="bank.svg" >
<img src="barcode.svg" >
<img src="bell.svg" >
<img src="building.svg" >
<img src="connections.svg" >
<img src="content.svg" >
<img src="credential.svg" >
<img src="credential-check.svg" >
<img src="credential-round.svg" >
<img src="credential_card.svg" >
<img src="download.svg" >
<img src="e-mail.svg" >
<img src="exclamation.svg" >
<img src="face-id.svg" >
<img src="fingerprint.svg" >
<img src="hash.svg" >
<img src="id.svg" >
<img src="import-wallet.svg" >
<img src="index.html" >
<img src="info.svg" >
<img src="initialization.svg" >
<img src="language.svg" >
<img src="lock.svg" >
<img src="lock_icon.svg" >
<img src="logout.svg" >
<img src="mnemonic.svg" >
<img src="new_connection.svg" >
<img src="person.svg" >
<img src="phone.svg" >
<img src="privacy.svg" >
<img src="question.svg" >
<img src="scan.svg" >
<img src="seal_history.svg" >
<img src="search.svg" >
<img src="settings.svg" >
<img src="turn.svg" >
<img src="wallet.svg" >
</body>
</html>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" viewBox="0 0 152 154" enable-background="new 0 0 152 154" xml:space="preserve">
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M58.599457,22.392736
C58.941338,26.353436 58.941338,29.977104 58.941338,33.989258
C50.887131,33.989258 43.139553,33.989258 35.005928,33.989258
C35.005928,42.122940 35.005928,49.869415 35.005928,57.801895
C30.869040,57.801895 27.131340,57.801895 23.201620,57.801895
C23.201620,45.866089 23.201620,34.128132 23.201620,22.055704
C35.018871,22.055704 46.638226,22.055704 58.599457,22.392736
z"/>
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M111.002266,22.000000
C117.809959,22.000000 124.118515,22.000000 130.712769,22.000000
C130.712769,33.948997 130.712769,45.684761 130.712769,57.711327
C127.057076,57.711327 123.317024,57.711327 119.175781,57.711327
C119.175781,50.059387 119.175781,42.313435 119.175781,34.175735
C111.054062,34.175735 103.310219,34.175735 95.286407,34.175735
C95.286407,30.052572 95.286407,26.312593 95.286407,22.000000
C100.303696,22.000000 105.403412,22.000000 111.002266,22.000000
z"/>
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M46.985931,130.000000
C38.848377,130.000000 31.207720,130.000000 23.284264,130.000000
C23.284264,118.044586 23.284264,106.308586 23.284264,94.285248
C26.949869,94.285248 30.689878,94.285248 34.831436,94.285248
C34.831436,101.949181 34.831436,109.694382 34.831436,117.832001
C42.955017,117.832001 50.698219,117.832001 58.717693,117.832001
C58.717693,121.955772 58.717693,125.695663 58.717693,130.000000
C55.026810,130.000000 51.254818,130.000000 46.985931,130.000000
z"/>
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M95.002228,120.167786
C96.275635,119.126328 97.535484,118.109375 98.820557,118.076447
C105.310326,117.910149 111.806664,118.000008 118.702354,118.000008
C118.702354,110.182884 118.702354,102.437721 118.702354,94.347595
C122.829338,94.347595 126.569038,94.347595 130.658783,94.347595
C130.658783,105.828926 130.658783,117.571838 130.658783,129.658264
C119.161407,129.658264 107.421913,129.658264 95.000305,129.658264
C95.000305,126.816856 95.000305,123.731476 95.002228,120.167786
z"/>
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M55.049686,70.000000
C52.242882,70.000000 49.927132,70.000000 47.306309,70.000000
C47.306309,62.090122 47.306309,54.351261 47.306309,46.304596
C54.912769,46.304596 62.651733,46.304596 70.696960,46.304596
C70.696960,53.915993 70.696960,61.654903 70.696960,70.000000
C65.728073,70.000000 60.634407,70.000000 55.049686,70.000000
z"/>
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M93.022034,70.000000
C89.548790,70.000000 86.568657,70.000000 83.296051,70.000000
C83.296051,62.069641 83.296051,54.331253 83.296051,46.294830
C90.932602,46.294830 98.670944,46.294830 106.706345,46.294830
C106.706345,53.935070 106.706345,61.673363 106.706345,70.000000
C102.378632,70.000000 97.946892,70.000000 93.022034,70.000000
z"/>
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M71.000000,95.977966
C71.000000,99.451210 71.000000,102.431343 71.000000,105.703949
C63.069641,105.703949 55.331253,105.703949 47.294834,105.703949
C47.294834,98.067245 47.294834,90.328865 47.294834,82.293655
C54.935215,82.293655 62.673565,82.293655 71.000000,82.293655
C71.000000,86.621376 71.000000,91.053108 71.000000,95.977966
z"/>
<path fill="#FFFFFF" opacity="1.000000" stroke="none"
d="
M83.000000,89.067169
C83.000000,86.591560 83.000000,84.607620 83.000000,82.312347
C90.897972,82.312347 98.636818,82.312347 106.689407,82.312347
C106.689407,89.899902 106.689407,97.639107 106.689407,105.690857
C99.096687,105.690857 91.357620,105.690857 83.000000,105.690857
C83.000000,100.409920 83.000000,94.984383 83.000000,89.067169
z"/>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 283.5 283.5" style="enable-background:new 0 0 283.5 283.5;" xml:space="preserve">
<g id="Group_19" transform="translate(0)">
<g id="Group_14" transform="translate(34.592 0)">
<path id="Path_24" d="M199.6,112.8c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0V68.7c0-7.9-6.4-14.3-14.4-14.3H141c-4.8,0-8.6-3.9-8.6-8.6
c0,0,0,0,0,0c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0h35.5c17.5,0,31.6,14.2,31.7,31.6v35.5C208.2,109,204.3,112.8,199.6,112.8
C199.6,112.8,199.6,112.8,199.6,112.8z"/>
</g>
<g id="Group_15" transform="translate(7.574 0)">
<path id="Path_25" d="M37.6,112.8c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0V68.7C29,51.2,43.2,37,60.6,37h35.5c4.8,0,8.6,3.9,8.6,8.6
c0,0,0,0,0,0c0,4.8-3.9,8.6-8.6,8.6c0,0,0,0,0,0H60.6c-7.9,0-14.4,6.4-14.4,14.3v35.5C46.3,109,42.4,112.8,37.6,112.8z"/>
</g>
<g id="Group_16" transform="translate(7.574 27.015)">
<path id="Path_26" d="M96.2,216.2H60.6c-17.5,0-31.6-14.2-31.7-31.7V149c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0c4.8,0,8.6,3.9,8.6,8.6
c0,0,0,0,0,0v35.6c0,7.9,6.4,14.4,14.4,14.4h35.5c4.8,0,8.6,3.9,8.6,8.6c0,0,0,0,0,0C104.8,212.4,101,216.2,96.2,216.2z"/>
</g>
<g id="Group_17" transform="translate(34.592 27.015)">
<path id="Path_27" d="M176.6,216.2H141c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0h35.5
c7.9,0,14.4-6.4,14.4-14.4V149c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0c4.8,0,8.6,3.9,8.6,8.6c0,0,0,0,0,0v35.6
C208.2,202.1,194,216.2,176.6,216.2z"/>
</g>
<g id="Group_18" transform="translate(0 19.572)">
<path id="Path_28" d="M274.9,129.2H8.6c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0c0-4.8,3.9-8.7,8.6-8.7c0,0,0,0,0,0h266.2
c4.8,0,8.6,3.9,8.6,8.6c0,0,0,0,0,0C283.5,125.3,279.6,129.2,274.9,129.2C274.9,129.2,274.9,129.2,274.9,129.2z"/>
</g>
</g>
</svg>
......@@ -8,6 +8,7 @@ import {
Keyboard,
TextInput,
Text,
TouchableOpacity,
} from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/core';
......@@ -56,16 +57,17 @@ const SearchBar: React.FC<Props> = ({ searchPhrase, setSearchPhrase }) => {
}}
/>
{focused && (
<Icon
name="close"
color={ColorPallet.grayscale.darkGrey}
size={24}
style={styles.closeIcon}
onPress={cancel}
/>
<TouchableOpacity onPress={cancel}>
<Icon
name="close"
color={ColorPallet.grayscale.darkGrey}
size={24}
style={styles.closeIcon}
/>
</TouchableOpacity>
)}
</View>
<Pressable
<TouchableOpacity
style={styles.iconContainer}
onPress={() => {
navigation.navigate(Stacks.NotificationStack);
......@@ -77,15 +79,15 @@ const SearchBar: React.FC<Props> = ({ searchPhrase, setSearchPhrase }) => {
<Text style={styles.badgeText}>{notifications.length < 100 ? notifications.length : 99}</Text>
</View>
)}
</Pressable>
<Pressable
</TouchableOpacity>
<TouchableOpacity
style={styles.iconContainer}
onPress={() => {
navigation.navigate(Stacks.SettingsStack);
}}
>
<SettingsSvg style={styles.settingsIcon} />
</Pressable>
</TouchableOpacity>
</View>
);
};
......
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ColorPallet, TextTheme } from 'src/theme/theme';
import {
Screens,
Stacks,
TabStackParams,
TabStacks,
} from 'src/type/navigators';
......@@ -14,10 +13,10 @@ import SealStack from './SealStack';
import EmailStack from './EmailStack';
import CredentialStack from './CredentialStack';
import CredentialSvg from 'src/assets/svg/credential.svg';
import ScanSvg from 'src/assets/svg/scan.svg';
import ConnectionsSvg from 'src/assets/svg/connections.svg';
import SealHistorySvg from 'src/assets/svg/seal_history.svg';
import EmailSvg from 'src/assets/svg/e-mail-black.svg';
import TabStackCustom from "./TabStackCustom";
const MainTabNavigator = createBottomTabNavigator<TabStackParams>();
......@@ -58,6 +57,7 @@ const TabStack: React.FC = () => {
return (
<MainTabNavigator.Navigator
tabBar={props => <TabStackCustom {...props} />}
screenOptions={{
tabBarStyle: styles.tabBarStyle,
tabBarActiveTintColor: ColorPallet.baseColors.white,
......@@ -82,25 +82,6 @@ const TabStack: React.FC = () => {
unmountOnBlur: true,
}}
/>
<MainTabNavigator.Screen
name={TabStacks.ScanStack}
options={{
tabBarIcon: () => <TabBarIcon focused={false} Svg={ScanSvg} />,
tabBarLabel: () => (
<TabBarLabel label={t<string>('TabStack.Scan')} />
),
tabBarAccessibilityLabel: t<string>('TabStack.Scan'),
}}
listeners={({ navigation }) => ({
tabPress: e => {
e.preventDefault();
navigation.navigate(Screens.Scan);
},
})}
>
{/* Just a placeholder, the tab will navigate to a different stack */}
{() => <View />}
</MainTabNavigator.Screen>
<MainTabNavigator.Screen
name={TabStacks.ConnectionStack}
component={ContactStack}
......
import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { BottomTabBar } from '@react-navigation/bottom-tabs';
import ScanQrSvg from 'src/assets/svg/scan-qr.svg';
import {TextTheme} from "../theme/theme";
import {useNavigation} from "@react-navigation/core";
import {Screens} from "../type/navigators";
function TabStackCustom(props: any) {
const navigation = useNavigation()
return (
<View style={styles.container}>
<BottomTabBar {...props} />
<TouchableOpacity
style={styles.floatingButton}
onPress={() => {
navigation.navigate(Screens.Scan);
}}
>
<ScanQrSvg
style={[
styles.svg
]}
resizeMode="contain"
/>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
position: 'relative',
},
floatingButton: {
position: 'absolute',
bottom: 100,
right: 10,
width: 56,
height: 56,
borderRadius: 28, // half of width/height to get a round shape
overflow: 'hidden', // this will ensure the gradient doesn't overflow the button
backgroundColor: '#42d0e2',
elevation: 4, // Shadow for Android
shadowOffset: { width: 0, height: 2 }, // Shadow for iOS
shadowOpacity: 0.3,
shadowRadius: 2, // Shadow for iOS
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
text: {
...TextTheme.label,
},
buttonContainer: {
},
svg: {
width: 34,
height: 34,
}
});
export default TabStackCustom;
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment