added style

This commit is contained in:
Ksenia Lebedeva 2024-09-13 18:20:15 +02:00
parent 7430890d03
commit eda1670f9c
16 changed files with 124 additions and 22 deletions

View File

@ -4,7 +4,7 @@ apply plugin: "com.facebook.react"
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
project.ext.vectoricons = [
iconFontNames: [ 'Feather.ttf' ]
iconFontNames: [ 'Feather.ttf', 'Ionicons.ttf' ]
]
/**

View File

@ -0,0 +1,17 @@
{
"migIndex": 1,
"data": [
{
"path": "src/assets/fonts/Inconsolata Condensed Medium.ttf",
"sha1": "352263ace35c1aefd0cdc387e32189351cbbc112"
},
{
"path": "src/assets/fonts/Inconsolata Medium.ttf",
"sha1": "f72a59ce0107983a5fff171d27da81e8c128c8b2"
},
{
"path": "src/assets/fonts/Inconsolata Regular.ttf",
"sha1": "55181a8eafc09ca273f978d6e35d2ed46e47e570"
}
]
}

View File

@ -14,6 +14,9 @@
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
7699B88040F8A987B510C191 /* libPods-keycardExit-keycardExitTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-keycardExit-keycardExitTests.a */; };
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
B9C3311BDD14496BBB4E1CA8 /* Inconsolata Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C152A6052C4C4603A1D67162 /* Inconsolata Regular.ttf */; };
BB2182DA25304A4597E3C05B /* Inconsolata Condensed Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B73A75AC252241AD9A88316F /* Inconsolata Condensed Medium.ttf */; };
B411AC695C5A4B95AD8C63CF /* Inconsolata Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BFDDB358DEF6415188C7C046 /* Inconsolata Medium.ttf */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -45,6 +48,9 @@
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = keycardExit/LaunchScreen.storyboard; sourceTree = "<group>"; };
89C6BE57DB24E9ADA2F236DE /* Pods-keycardExit-keycardExitTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-keycardExit-keycardExitTests.release.xcconfig"; path = "Target Support Files/Pods-keycardExit-keycardExitTests/Pods-keycardExit-keycardExitTests.release.xcconfig"; sourceTree = "<group>"; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
C152A6052C4C4603A1D67162 /* Inconsolata Regular.ttf */ = {isa = PBXFileReference; name = "Inconsolata Regular.ttf"; path = "../src/assets/fonts/Inconsolata Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
B73A75AC252241AD9A88316F /* Inconsolata Condensed Medium.ttf */ = {isa = PBXFileReference; name = "Inconsolata Condensed Medium.ttf"; path = "../src/assets/fonts/Inconsolata Condensed Medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
BFDDB358DEF6415188C7C046 /* Inconsolata Medium.ttf */ = {isa = PBXFileReference; name = "Inconsolata Medium.ttf"; path = "../src/assets/fonts/Inconsolata Medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -124,6 +130,7 @@
83CBBA001A601CBA00E9B192 /* Products */,
2D16E6871FA4F8E400B85C8A /* Frameworks */,
BBD78D7AC51CEA395F1C20DB /* Pods */,
992F09F0E661463D9AC551F7 /* Resources */,
);
indentWidth = 2;
sourceTree = "<group>";
@ -150,6 +157,17 @@
path = Pods;
sourceTree = "<group>";
};
992F09F0E661463D9AC551F7 /* Resources */ = {
isa = "PBXGroup";
children = (
C152A6052C4C4603A1D67162 /* Inconsolata Regular.ttf */,
B73A75AC252241AD9A88316F /* Inconsolata Condensed Medium.ttf */,
BFDDB358DEF6415188C7C046 /* Inconsolata Medium.ttf */,
);
name = Resources;
sourceTree = "<group>";
path = "";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
@ -245,6 +263,9 @@
files = (
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
B9C3311BDD14496BBB4E1CA8 /* Inconsolata Regular.ttf in Resources */,
BB2182DA25304A4597E3C05B /* Inconsolata Condensed Medium.ttf in Resources */,
B411AC695C5A4B95AD8C63CF /* Inconsolata Medium.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};

View File

@ -26,14 +26,13 @@
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
<key>NSAllowsArbitraryLoads</key>
<false/>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<string/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
@ -48,5 +47,11 @@
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>UIAppFonts</key>
<array>
<string>Inconsolata Regular.ttf</string>
<string>Inconsolata Condensed Medium.ttf</string>
<string>Inconsolata Medium.ttf</string>
</array>
</dict>
</plist>

View File

@ -0,0 +1,17 @@
{
"migIndex": 1,
"data": [
{
"path": "src/assets/fonts/Inconsolata Condensed Medium.ttf",
"sha1": "352263ace35c1aefd0cdc387e32189351cbbc112"
},
{
"path": "src/assets/fonts/Inconsolata Medium.ttf",
"sha1": "f72a59ce0107983a5fff171d27da81e8c128c8b2"
},
{
"path": "src/assets/fonts/Inconsolata Regular.ttf",
"sha1": "55181a8eafc09ca273f978d6e35d2ed46e47e570"
}
]
}

3
react-native.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
assets: ['./src/assets/fonts/'],
};

View File

@ -181,7 +181,7 @@ const Main = () => {
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
height: '100%'
},
});

View File

@ -1,6 +1,9 @@
import React, {FC, useEffect, useState } from "react";
import {Platform, StyleSheet, Text, View } from "react-native";
import {Platform, StyleSheet, Text, useColorScheme, View } from "react-native";
import Modal from "react-native-modal/dist/modal";
import Icon from 'react-native-vector-icons/Feather';
import { Colors } from "react-native/Libraries/NewAppScreen";
import Button from "./components/Button";
type NFCModalProps = {
isVisible: boolean;
@ -9,12 +12,17 @@ type NFCModalProps = {
const NFCModal: FC<NFCModalProps> = props => {
const {isVisible, onChangeFunc} = props;
const isDarkMode = useColorScheme() === 'dark';
return (
<Modal isVisible={(Platform.OS === 'android') && isVisible} onSwipeComplete={() => onChangeFunc(!isVisible)} swipeDirection={['up', 'left', 'right', 'down']} style={modalStyle.modalContainer}>
<View style={modalStyle.container}>
<Modal isVisible={(Platform.OS === 'android') && isVisible} style={modalStyle.modalContainer}>
<View style={[modalStyle.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
<Text style={modalStyle.header}>Ready to Scan</Text>
<View style={modalStyle.iconContainer}>
<Icon name="smartphone" size={40} style={modalStyle.icon}/>
</View>
<Text style={modalStyle.prompt}>Tap your Keycard</Text>
<Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnFontSize={13} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => onChangeFunc(!isVisible)} btnJustifyContent='center'></Button>
</View>
</Modal>
)};
@ -25,8 +33,7 @@ const modalStyle = StyleSheet.create({
margin: 0
},
container: {
backgroundColor: '#4A646C',
height: 250,
height: 350,
paddingBottom: 20,
alignItems: 'center',
borderTopLeftRadius: 10,
@ -34,13 +41,27 @@ const modalStyle = StyleSheet.create({
borderColor: 'rgba(0, 0, 0, 0.1)',
},
header: {
paddingTop: '5%',
fontSize: 24
paddingTop: '7%',
fontSize: 22,
fontFamily: 'Inconsolata Regular'
},
prompt: {
paddingTop: '10%',
paddingBottom: '10%',
fontSize: 15
fontSize: 16,
fontFamily: 'Inconsolata Regular'
},
iconContainer: {
width: 80,
height: 80,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#0e4e0b',
borderWidth: 3,
borderRadius: 80,
marginTop: '7%',
},
icon: {
color: '#0e4e0b'
}
});

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -6,17 +6,20 @@ type ButtonProps = {
disabled: boolean;
btnColor: string;
btnWidth: string;
btnFontSize?: number;
btnBorderColor?: string;
btnBorderWidth?: number;
btnJustifyContent: string;
onChangeFunc: () => void;
};
const Button: FC<ButtonProps> = props => {
const {label, disabled, btnColor, btnWidth, btnJustifyContent, onChangeFunc} = props;
const {label, disabled, btnColor, btnWidth, btnJustifyContent, btnFontSize, btnBorderWidth, btnBorderColor, onChangeFunc} = props;
return (
<View style={[buttonStyle.textBtnContainer, {width: btnWidth as DimensionValue, justifyContent: btnJustifyContent as any}]}>
<TouchableOpacity key={label} disabled={disabled} style={buttonStyle.button} onPress={onChangeFunc}>
<Text style={[buttonStyle.title, {color: btnColor}]}>{label}</Text>
<Text style={[buttonStyle.title, {color: btnColor, borderBottomColor: btnBorderColor || 'none', borderBottomWidth: btnBorderWidth || 0, fontSize: btnFontSize}]}>{label}</Text>
</TouchableOpacity>
</View>
)};
@ -32,9 +35,8 @@ const buttonStyle = StyleSheet.create({
button: {
},
title: {
fontSize: 15,
textTransform: 'uppercase',
fontFamily: 'Inconsolata Medium',
},
});

View File

@ -10,10 +10,12 @@ const DiscoveryScreen: FC<DiscoveryScreenProps> = props => {
const {onPressFunc} = props;
return (
<View>
<View>
<View style={styles.container}>
<View style={styles.headingContainer}>
<Text style={styles.heading}> We are recruiting Operators to be the founders of a new, self-sovereign world in cyberspace</Text>
<Button label="Discover" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
</View>
<View style={styles.btnContainer}>
<Button label="Connect" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
</View>
<View>
</View>
@ -21,9 +23,23 @@ const DiscoveryScreen: FC<DiscoveryScreenProps> = props => {
)};
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%'
},
headingContainer: {
width: '100%',
paddingLeft: '5.5%',
paddingRight: '5.5%',
paddingTop: '50%',
},
heading: {
textAlign: 'center',
fontSize: 16
fontSize: 18,
fontFamily: 'Inconsolata Regular'
},
btnContainer: {
paddingTop: '7%'
}
});