Skip to content

Commit

Permalink
Updated login page with Figma
Browse files Browse the repository at this point in the history
  • Loading branch information
aryan-bhardwaj committed Jun 17, 2024
1 parent 71cf8f8 commit 07f6c9a
Show file tree
Hide file tree
Showing 5 changed files with 1,424 additions and 1,608 deletions.
1 change: 1 addition & 0 deletions CustomFontCLI
Submodule CustomFontCLI added at 72a161
Binary file added assets/loginScreen.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 15 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,26 @@
"dependencies": {
"@gluestack-style/react": "^1.0.52",
"@gluestack-ui/config": "^1.1.18",
"@gluestack-ui/themed": "^1.1.30",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@react-navigation/stack": "^6.3.29",
"@reduxjs/toolkit": "^2.2.3",
"@types/react": "~18.2.45",
"expo": "~50.0.14",
"expo-camera": "^14.1.3",
"expo-linking": "~6.2.2",
"expo-status-bar": "~1.11.1",
"@types/react": "~18.2.79",
"expo": "^51.0.14",
"expo-camera": "~15.0.11",
"expo-linking": "~6.3.1",
"expo-status-bar": "~1.12.1",
"install": "^0.13.0",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-svg": "14.1.0",
"react": "^18.3.1",
"react-native-gesture-handler": "^2.16.2",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-svg": "15.2.0",
"react-navigation": "^5.0.0",
"react-redux": "^9.1.1"
"react-redux": "^9.1.1",
"typescript": "~5.3.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
Expand All @@ -35,6 +40,7 @@
"@typescript-eslint/eslint-plugin": "^7.4.0",
"@typescript-eslint/parser": "^7.4.0",
"babel-eslint": "^10.1.0",
"chromium-edge-launcher": "^0.3.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6"
Expand Down
80 changes: 45 additions & 35 deletions screens/Login.tsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,56 @@
import React from "react";
import { StyledProvider } from "@gluestack-style/react"
import { ImageBackground, StyleSheet, TouchableOpacity } from "react-native";
import { StyledProvider } from "@gluestack-style/react";
import { config } from "@gluestack-ui/config";
import { GluestackUIProvider, Text, Box, View } from "@gluestack-ui/themed";
import { ButtonText } from "@gluestack-ui/themed";
import { Box, View } from "@gluestack-ui/themed";
import { Images } from "../Components/Images";
import { StyledButton } from "../Components/Buttons";
import { StyledText } from "../Components/Text";
import * as Linking from "expo-linking";

function Login() {
const authUrl = "https://api.reflectionsprojections.org/auth/login/mobile";
return (
<StyledProvider config={config}>
<Box width="100%" height="100%" justifyContent="space-between" alignItems="center" paddingVertical={100} flex={1}>
<Images
variant="loginLogo"
source={{uri: "https://i.pinimg.com/originals/2e/60/07/2e60079f1e36b5c7681f0996a79e8af4.jpg"}}
alt="RP Logo"
/>
<StyledText variant='bigText' >Welcome to</StyledText>
<StyledText variant='bigbold' marginTop={-30}>R|P 2024!</StyledText>
<StyledText variant='basic' marginTop={100} marginBottom={-10}>Powered by SPONSOR!!!</StyledText>
<StyledButton
styleVariant="login"
action="primary"
isDisabled={false}
isFocusVisible={false}
onPress={() => {
console.log("logged in!");
Linking.openURL(authUrl)
.catch(err => {
console.error("Failed to open URL:", err.message);
alert("Failed to open URL")
})
}}
>
<ButtonText color={"$black"}>LOGIN</ButtonText>
</StyledButton>
</Box>
</StyledProvider>
)
const authUrl = "https://api.reflectionsprojections.org/auth/login/mobile";
const handleBoxPress = () => {
// Handle box press action here
Linking.openURL(authUrl); // Example: open a URL
};

return (
<StyledProvider config={config}>
<Box width="100%" height="100%">
<ImageBackground
source={require("../assets/loginScreen.png")}
style={{ flex: 1, justifyContent: "flex-end", alignItems: "center" }}
resizeMode="cover"
>
<TouchableOpacity
style={styles.redBox}
isDisabled={false}
isFocusVisible={false}
onPress={() => {
console.log("logged in!");
Linking.openURL(authUrl).catch((err) => {
console.error("Failed to open URL:", err.message);
alert("Failed to open URL");
});
}}
>
{/* Content inside the red box */}
</TouchableOpacity>
</ImageBackground>
</Box>
</StyledProvider>
);
}

const styles = StyleSheet.create({
redBox: {
width: "40%", // Adjust width as a percentage of the parent container
height: 65, // Adjust height as needed
borderRadius: 8, // Optional: Adjust border radius for rounded corners
marginBottom: 75, // Adjust margin from bottom as a percentage
marginLeft: 40,
},
});

export default Login;
Loading

0 comments on commit 07f6c9a

Please sign in to comment.