From 53a56a1b890f6ceca44ceace6d10143538c37803 Mon Sep 17 00:00:00 2001 From: Emre Date: Sun, 19 Feb 2023 12:49:20 +0100 Subject: [PATCH] Add new Icons, create a registration page and i made the pages more responsive :white_check_mark: --- src/FLAD/assets/icons/icons/Spotify.png | Bin 0 -> 3287 bytes src/FLAD/assets/icons/icons/User.png | Bin 360 -> 2529 bytes src/FLAD/assets/icons/icons/next.png | Bin 0 -> 1443 bytes src/FLAD/components/NextButton.tsx | 3 +- src/FLAD/components/Onboarding.tsx | 67 +++++----- src/FLAD/components/OnboardingItem.tsx | 3 +- src/FLAD/navigation/StartNavigation.tsx | 6 + src/FLAD/package.json | 2 +- src/FLAD/screens/InscriptionPage.tsx | 163 ++++++++++++++++++++++++ src/FLAD/screens/loginPage.tsx | 77 +++++++---- 10 files changed, 256 insertions(+), 65 deletions(-) create mode 100644 src/FLAD/assets/icons/icons/Spotify.png create mode 100644 src/FLAD/assets/icons/icons/next.png create mode 100644 src/FLAD/screens/InscriptionPage.tsx diff --git a/src/FLAD/assets/icons/icons/Spotify.png b/src/FLAD/assets/icons/icons/Spotify.png new file mode 100644 index 0000000000000000000000000000000000000000..011863b37aa79b19493b117e14e74a8059c30e13 GIT binary patch literal 3287 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 V`rhpI;ywTX002ovPDHLkV1lL51%3bk literal 0 HcmV?d00001 diff --git a/src/FLAD/assets/icons/icons/User.png b/src/FLAD/assets/icons/icons/User.png index d90f31a8842faed1dd0463aa54cfae49b91f89db..48d70b014440e28ef0eb51f1aea7c2099ebb3b2c 100644 GIT binary patch delta 2526 zcmV<42_g3A0^t)jiBL{Q4GJ0x0000DNk~Le0001#0001#2nGNE0ChY7)Bpeg32;bR za{vG=O8@{YO97=lmZ_08AAbpUNklKh3e8p>H-KRH(ff?T>y)8zNZWYN|DTeyEAWg zzaOyPB}H1|@|*YGyqS5kB{d}lNs@Fwe*E}AAL3|jZEdA^oX)@OmVdYB?mWhO#&}Qe zo*OqBjZ=N@?Ck7BYRHzZ6i_wLv z%DJ;WT<(hzOSCF8%YOye_ySfdmxzg0P&+$28NP_;u~?%O=*29o=mh0@XGawj(siN~ zRy2ZgG137ppG$qvp#9ZgFgTP*h(b{6-q2c)2$tIgE3ESn_u^2DlZa8&#ofPu{|8+DPsog{*=)APX9bt1)~1L$8!K!RB)TBp(oYNdi%C|ak| z2x_H5y1YzCDTJJS7(`Gm@01ED1@!nbL=>3>Ac&ywfu9N~6}Y{}5`Z9rs=<8l;Doxz z-UX%8c_q^2PBG!!p7;CgT~O%KJ`&;!?{3e#ptR)(@qYs1s8l=?B8H;7^M{wBAoF+^ z6oN(XAF{55xYu3<<$^?7C{G}~sC-aPG5IAG&v+HoojZ3@AztyFIxxR-m}~~zUQ;|m zL6JhCph%%mP^3^OC{idC6e$!6iWG`hL7ktU=R&+P91edIkI+JqLZP5Yp?DQk>_y!p zBp1)nLVuA$2_dLlh!@Rr_I=XpKDx^>bgF&$G zHS`qVw?Ya90eN2n5>!wy&EE?t6vR(K8);|@rM{j6#RY;!8nm+$R8X2L3E3m58ZQ47 zG=FIvd>PebGU*8^1PhJR!n!;)(R6zS0C(4uzyueR8zSfl*$C(Ef+vejtQ=-ZqXn(ic|G;G?WFgKvJrhHiD>&w?R4!y85Y)aH z!u;n2!MY|baXgE8qsk~P z)I6|Ozr#|!j@$)mhvQ4==yS_S%Vmh(Ld^qfl_p8@QeB3`feJ}yslEzTajs}8C8!zD z)nmB9p4fGRl@rp8N(xF*YvmH5Einef^jQp9?{%o`7O^g{wOD_uS5+}7Re#@e*ql45 zdbOFV3(8z@jt)a66(;($!EJOpokKAwD9~-U+wYN>{aGqVC4zF7F6g55KfptsH>E-{ z7mUxNuFs80=IA_}o}ZuRF())AM zbBmgl_gdM`i=dn}dWy?^p*8Y~2K6c~U5V|(YLzM|6%szsb6O)a^nc10Rw;s_kjzt> zunH9vg%lly3#$-8xuK6E3MpC&6V^t9!`f@RckkYp2>Ooj@Lxh=UH5!fjvLY*4D2o#4`ff`68Fk>yqwN2^pLW<}1Hod>_v6kwhG=vL=aOf>`E=wkH{G;pxY z>lemQZYu3_A$8|J%fwZm6coiou8}Pg)vbb}n8+=BQdBnziee%Q$ePXODUzUnDvNkwb#MmvV&*z`K(#z94lgoY+vItFpzPbM76_gYOwOYK}(C|W17DbP<_i>Ec*gFPW+17M|eIh<^{ zrA;FtWHa)?V6fdtk|YyCHYeTQ-hR+PF#cEwDF9u-+u&q5QXpNmP^l170MJsa>NPfr zN7UP?%d7QHnSZ1>V4=p1$z<|M2q^$HPKoY3jsZTMD_+^X=Scau#SG6bW*by>?>XWJ zx7H74`E;GV{0gsNHxrxuHSsFdr(8CECc2i;h591be>6X&*SPH=_)W6KWBAdatHntpET307*qoM6N<$g6+ttE&u=k delta 340 zcmV-a0jvJu6X*gqiBL{Q4GJ0x0000DNk~Le0000F0000G2nGNE0LfM*1ONa432;bR za{vGf6951U69E94oEVWdAAbP-NklzZO8Zh1E33jJ=j7o)7QfRvFo~JQ4~)T&pYr-gMCtUU9XUVB7aAiRSy~gNe(ht z8b`1hvSBp^KuyXYSifWJ0A=3Wg0&JhtcUHiU{vxvbUXHsy)aVB5wND;4o5B8(0(tB zZaG4T5Jk!Cb@-{2(zNp{uAvZ{Cj>=oMCfyhQQc7%9AJ#w?(9$D8CyPKB>SW!4Lj1M mu``Q{AprKKn!s*sjuk#3sB?*ZMsdUd0000%<7QImvY_Zx2r{u+2ntkG!XT5B)QtijRM)fQFY-X! z;lIHjf*MsOb7BJsGVl(@{KMsxzlS%ZFasEhr}frlQ3--Zjkn*M@$!&-t0&CXHU1iX zh?jeEnZ{(9qD1kWW)o3<)NX`E*hQD`vZ*<>Q`nj%=$o3DoBEiPbn?v3hZ+wwTWWc@ z`Fq;s0K$go-Kc~vfksDE8;3lxVK@8XZfh29j9{^eJ!LmCVvouF6y%dVM(86>oI;2X z#i7!0gBf3$qUr3wOHIu4QsYk@>xas6tB$@1%gVH!G)&Mt75h965_J))VR2>mmMj%q zkBBR8$Mmrmu1$Y)bvKuRe*G0F;uH%tNJsx9QIKLr zqEiQnnJFeDx>S?ckwPcYJrmB7LGAV^V%}QFU#h3rCK8x8cblmi7)g`ZmQVe1oH2As zLnF?JZ+WJXi`EW>g{W1z+w-?~bk**3tnNQ~w#w?qmeDfgL|b(9d_Ygr()5H1pPM{W z8*y~k=|ndbZ4KR0atw4nn{~XnwfP!<>W?1=x)iiR&xu_r*Aw(Ex_d7jX9N`A1g!p4 zgYg@YVnvTi<`f*pizomcMQ%u{sP!*H+DF&FYK3u?TMKxTD|?+E|# zUKTE*-*n$p%uL5>(x)H)+RI!~%=}GIV~t2o9_h{*=9DDG(q+Qyv2t;$QGMIX2b1}S z&N-`7`JzpUXTqD}=7;-6V`G*5A>ZKVUr%SuEeeru| z6I_DI3#!8AWR#*xx}n?rj<0VSN^_SpYCUMuTo*=FBPp(o5)T7ut~;Zk(Lfpqo3=9+ zeN_nz#kG_oHSPN9QK(y*5z9JjQ=y@hqPqsy^Mr~~1nlQ@ zK;4z_6t9j_BtXYRJ(K~WVcQj>D30D7d18%@1Ii6PZpYG1BVq|n&P1FrMK{4ksE=}h z6-zfyaKEJbW&;kYOCz|J)Fc()u>5>527~hZf;D?dYw{GY2`)sP;^U>D*8$nj(s7Ai zgz^g?HwRo-(&Y-$iWZA-*RPgn6`Az_4aeyxE#PN zXq(+~;qfQ;+wYZ~t93=wkr$s$y~hC87ERKqIl&oFA~qz|oEQT#B`9A1X`Ww!>Wbyt zG`AMov$;6hC{W=baeCzMJm2s^lUD{B=$=pQPgyau^97|lAtpV$g`i0f1G{kxHM9#U&wSfit_64X=8T*N{R8&Qa(6Ezf&)UaI$m7HzdZv|&Hw-a literal 0 HcmV?d00001 diff --git a/src/FLAD/components/NextButton.tsx b/src/FLAD/components/NextButton.tsx index 87f7388..f0c6c9a 100644 --- a/src/FLAD/components/NextButton.tsx +++ b/src/FLAD/components/NextButton.tsx @@ -75,8 +75,7 @@ const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', - alignItems: 'center', - marginTop: -70 + alignItems: 'center' }, button: { position: 'absolute', diff --git a/src/FLAD/components/Onboarding.tsx b/src/FLAD/components/Onboarding.tsx index 6faa8ea..ead6b94 100644 --- a/src/FLAD/components/Onboarding.tsx +++ b/src/FLAD/components/Onboarding.tsx @@ -34,7 +34,7 @@ export default function Onboarding() { return ( - + } @@ -50,33 +50,33 @@ export default function Onboarding() { onViewableItemsChanged={viewableItemsChanged} viewabilityConfig={viewConfig} ref={slidesRef} - /> - - + /> - - v2.0 - - - - - - - - {handleModal(); navigation.navigate('Login');}}> - CONTINUER AVEC SPOTIFY - - - S’INSCRIRE MAINTENANT - - {handleModal(); navigation.navigate('Login');}}> - SE CONNECTER - + + + v2.0 + + + + + + + + {handleModal(); navigation.navigate('Login');}}> + CONTINUER AVEC SPOTIFY + + {handleModal(); navigation.navigate('Inscription');}}> + S’INSCRIRE MAINTENANT + + {handleModal(); navigation.navigate('Login');}}> + SE CONNECTER + + @@ -94,15 +94,13 @@ const styles = StyleSheet.create({ imageLogo: { width: 280, height: 140, - position: 'absolute', - top: 150, - right: 60 + marginBottom: 100 }, balise: { flex: 1, justifyContent: 'center', alignItems: 'center', - marginTop: -130 + marginBottom: 50 }, closeButtonCircle: { backgroundColor: 'gray', @@ -123,6 +121,11 @@ const styles = StyleSheet.create({ right: '-5%', height: '100%', }, + modalView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + }, backgroundImage: { flex: 1, width: '100%', @@ -143,28 +146,24 @@ const styles = StyleSheet.create({ buttonConnection: { width: 262, height: 57, - position: 'absolute', - top: 350, - right: 70, justifyContent: 'center', alignItems: 'center', backgroundColor: '#24CF5F', borderRadius: 11, borderColor: '#68F097', - borderWidth: 1 + borderWidth: 1, + marginBottom: 12 }, buttonInscription: { width: 262, height: 57, - position: 'absolute', - top: 420, - right: 70, justifyContent: 'center', alignItems: 'center', backgroundColor: '#951DDE', borderRadius: 11, borderColor: '#C656ED', - borderWidth: 1 + borderWidth: 1, + marginBottom: 220 }, text: { fontWeight: 'bold', diff --git a/src/FLAD/components/OnboardingItem.tsx b/src/FLAD/components/OnboardingItem.tsx index 1f4203a..e130da0 100644 --- a/src/FLAD/components/OnboardingItem.tsx +++ b/src/FLAD/components/OnboardingItem.tsx @@ -10,10 +10,9 @@ export default function Onboarding({ item }) { - {item.title} {item.description} - + ); diff --git a/src/FLAD/navigation/StartNavigation.tsx b/src/FLAD/navigation/StartNavigation.tsx index 9676d2f..ee07e8c 100644 --- a/src/FLAD/navigation/StartNavigation.tsx +++ b/src/FLAD/navigation/StartNavigation.tsx @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import LoginPage from '../screens/loginPage'; +import InscriptionPage from '../screens/InscriptionPage'; import Onboarding from '../components/Onboarding'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; @@ -19,6 +20,11 @@ export default function StartNavigation() { component={LoginPage} options={{ headerShown: false }} /> + diff --git a/src/FLAD/package.json b/src/FLAD/package.json index 0a6884b..90f6178 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -31,7 +31,7 @@ "react-native-reanimated": "~2.12.0", "react-native-safe-area-context": "^4.4.1", "react-native-screens": "~3.18.0", - "react-native-svg": "^13.8.0", + "react-native-svg": "13.4.0", "react-native-vector-icons": "^9.2.0", "react-native-web": "~0.18.9", "rive-react-native": "^3.0.41" diff --git a/src/FLAD/screens/InscriptionPage.tsx b/src/FLAD/screens/InscriptionPage.tsx new file mode 100644 index 0000000..ef2fb15 --- /dev/null +++ b/src/FLAD/screens/InscriptionPage.tsx @@ -0,0 +1,163 @@ +import React, {Component, useState } from 'react'; +import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; +import {useNavigation} from "@react-navigation/native"; + +const DismissKeyboard = ({ children }) => ( + Keyboard.dismiss()}> + {children} + +) + +export default function InscriptionPage() { + const [rememberMe, setRememberMe] = useState(false); + const navigation = useNavigation(); + + const toggleRememberMe = () => { + setRememberMe(!rememberMe); + } + + return ( + + + + + v2.0 + + + S'INSCRIRE + + + + + + + + + + + + + + Lier compte + + + console.log("Oui")}> + + + + Tu as déjà un compte? + navigation.navigate('Login')}> + Se connecter + + + + + + ) +} + +const styles = StyleSheet.create ({ + container: { + flex: 1 + }, + containerInput: { + justifyContent: 'center' + }, + image: { + flex: 1, + justifyContent: 'center', + }, + imageLogo: { + width: 280, + height: 140, + alignSelf: 'center', + marginBottom: 50, + marginTop: -20 + }, + button: { + marginTop: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + backgroundColor: 'white', + width: 86, + height: 86, + borderRadius: 21 + }, + buttonImage: { + width: 40, + height: 40 + }, + versionText: { + position: 'absolute', + top: 40, + right: 20, + color: 'gray', + fontWeight: 'bold', + fontSize: 15 + }, + text: { + fontWeight: 'bold', + fontSize: 25, + alignSelf: 'center', + color: 'white', + marginBottom: 15 + }, + textIntoButton: { + fontWeight: 'bold', + fontSize: 15, + color: 'white', + marginRight: 10 + }, + shadow: { + shadowColor: '#000', + shadowOffset: { + width: 2, + height: 3, + }, + shadowOpacity: 0.50, + shadowRadius: 3.84, + }, + input: { + width: 300, + height: 42, + borderRadius: 30, + color: 'black', + backgroundColor: 'white', + fontSize: 15, + alignSelf: 'center', + marginBottom: 20, + paddingLeft: 50, + paddingRight: 20 + }, + iconUser : { + position: 'absolute', + width: 20, + height: 20, + left: '17%', + bottom: '50%' + }, + iconLock : { + position: 'absolute', + width: 20, + height: 20, + left: '17%', + bottom: '50%' + }, + inscriptionText: { + flexDirection: 'row', + alignSelf: 'center', + bottom: -80 + }, + buttonSpotify: { + width: 300, + height: 42, + backgroundColor: '#24CF5F', + justifyContent: 'center', + alignItems: 'center', + alignSelf: 'center', + borderRadius: 30, + flexDirection: 'row' + } +}) \ No newline at end of file diff --git a/src/FLAD/screens/loginPage.tsx b/src/FLAD/screens/loginPage.tsx index 5682986..d04d7b9 100644 --- a/src/FLAD/screens/loginPage.tsx +++ b/src/FLAD/screens/loginPage.tsx @@ -1,6 +1,6 @@ import React, {Component, useState } from 'react'; import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; -import { TouchableHighlight } from 'react-native-gesture-handler'; +import {useNavigation} from "@react-navigation/native"; const DismissKeyboard = ({ children }) => ( Keyboard.dismiss()}> @@ -10,6 +10,7 @@ const DismissKeyboard = ({ children }) => ( export default function loginPage() { const [rememberMe, setRememberMe] = useState(false); + const navigation = useNavigation(); const toggleRememberMe = () => { setRememberMe(!rememberMe); @@ -17,30 +18,36 @@ export default function loginPage() { return ( - - - - v2.0 - - - SE CONNECTER - - - - - - - SE SOUVENIR DE MOI - - console.log("Oui")}> - - - - Tu n'as pas de compte? - S'inscrire - - - + + + + v2.0 + + + SE CONNECTER + + + + + + + + + + + SE SOUVENIR DE MOI + + console.log("Oui")}> + + + + Tu n'as pas de compte? + navigation.navigate('Inscription')}> + S'inscrire + + + + ) } @@ -51,6 +58,10 @@ const styles = StyleSheet.create ({ container: { flex: 1, }, + containerInput: { + justifyContent: 'center', + alignItems: 'flex-start', + }, image: { flex: 1, justifyContent: 'center', @@ -76,6 +87,20 @@ const styles = StyleSheet.create ({ width: 40, height: 40 }, + iconUser : { + position: 'absolute', + width: 20, + height: 20, + left: '17%', + bottom: '50%' + }, + iconLock : { + position: 'absolute', + width: 20, + height: 20, + left: '17%', + bottom: '50%' + }, input: { width: 300, height: 42, @@ -85,7 +110,7 @@ const styles = StyleSheet.create ({ fontSize: 15, alignSelf: 'center', marginBottom: 20, - paddingLeft: 20, + paddingLeft: 50, paddingRight: 20 }, text: {