refactor login and signup styles (#387)

* refactor login and signup styles

* refactor login & signup styles mobile

* refactor styles create account

apps/mobile/src/app/Router.tsx

@@ -418,6 +418,7 @@ const linking = {
           ImportKeys: 'import-keys',
           DappBrowser: 'browser',
           Oauth: 'oauth',
+          Profile: 'profile'
         },
       },
       MainStack: {

apps/mobile/src/assets/icons.tsx

@@ -882,3 +882,12 @@ export const ViewIcon: React.FC<SvgProps> = (props) => (
     />
   </Svg>
 );
+
+export const EyeIcon: React.FC<SvgProps> = (props) => (
+  <Svg width="20" height="12" viewBox="0 0 20 12" fill="none" {...props}>
+    <Path
+      d="M18 5.99999C18 4.18999 14.24 2.01499 9.993 1.99999C5.775 1.98499 2 4.17799 2 5.99999C2 7.82499 5.754 10.006 9.997 9.99999C14.252 9.99399 18 7.81999 18 5.99999ZM10 12C4.958 12.007 0 9.31399 0 5.99999C0 2.68599 4.984 -0.0170118 10 -1.18008e-05C15.016 0.0169882 20 2.68599 20 5.99999C20 9.31399 15.042 11.993 10 12ZM10 9.99999C8.93913 9.99999 7.92172 9.57856 7.17157 8.82842C6.42143 8.07827 6 7.06085 6 5.99999C6 4.93912 6.42143 3.92171 7.17157 3.17156C7.92172 2.42142 8.93913 1.99999 10 1.99999C11.0609 1.99999 12.0783 2.42142 12.8284 3.17156C13.5786 3.92171 14 4.93912 14 5.99999C14 7.06085 13.5786 8.07827 12.8284 8.82842C12.0783 9.57856 11.0609 9.99999 10 9.99999ZM10 7.99999C10.5304 7.99999 11.0391 7.78927 11.4142 7.4142C11.7893 7.03913 12 6.53042 12 5.99999C12 5.46955 11.7893 4.96085 11.4142 4.58577C11.0391 4.2107 10.5304 3.99999 10 3.99999C9.46957 3.99999 8.96086 4.2107 8.58579 4.58577C8.21071 4.96085 8 5.46955 8 5.99999C8 6.53042 8.21071 7.03913 8.58579 7.4142C8.96086 7.78927 9.46957 7.99999 10 7.99999Z"
+      fill="currentColor"
+    />
+  </Svg>
+);

apps/mobile/src/modules/Auth/index.tsx

@@ -1,8 +1,9 @@
 import {Image, KeyboardAvoidingView, ScrollView, View} from 'react-native';
 
 import {Text} from '../../components';
-import {useStyles} from '../../hooks';
+import {useStyles, useWindowDimensions} from '../../hooks';
 import stylesheet from './styles';
+import { useMemo } from 'react';
 
 export type AuthProps = {
   title: string;
@@ -12,6 +13,11 @@ export type AuthProps = {
 export const Auth: React.FC<AuthProps> = ({title, children}) => {
   const styles = useStyles(stylesheet);
 
+  const dimensions = useWindowDimensions();
+  const isDesktop = useMemo(() => {
+    return dimensions.width >= 1024;
+  }, [dimensions]);
+
   return (
     <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
       <View style={styles.container}>
@@ -31,7 +37,7 @@ export const Auth: React.FC<AuthProps> = ({title, children}) => {
               {/* <Image style={styles.logoImage} source={require('../../assets/afkMascot.png')} /> */}
             </View>
 
-            <Text weight="bold" fontSize={22} style={styles.title}>
+            <Text weight="bold" fontSize={35} style={[styles.title, !isDesktop && styles.titleMobile]}>
               {title}
             </Text>
           </View>

apps/mobile/src/modules/Auth/styles.ts

@@ -42,7 +42,15 @@ export default ThemedStyleSheet((theme) => ({
     borderRadius: 999,
   },
   title: {
-    marginVertical: Spacing.large,
+    marginBottom: Spacing.xxxlarge,
+    color: theme.colors.primary,
+    width: '100%',
+    maxWidth: 556,
+    textAlign: 'left',
+  },
+  titleMobile: {
+    paddingHorizontal: 15,
+    marginBottom: Spacing.small,
   },
 
   contentContainer: {
@@ -52,7 +60,6 @@ export default ThemedStyleSheet((theme) => ({
   content: {
     flex: 1,
     alignItems: 'center',
-    gap: Spacing.medium,
     paddingHorizontal: Spacing.medium,
     backgroundColor: theme.colors.surface,
   },

apps/mobile/src/modules/Login/StarknetLogin.tsx

@@ -1,22 +1,27 @@
-import {useState} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import {useMemo, useState} from 'react';
+import {TouchableOpacity, View, Image} from 'react-native';
 import {useAccount} from 'wagmi';
 
-import {TextButton} from '../../components';
+import {Button, TextButton} from '../../components';
 import {StarkConnectModal} from './StarkModal';
 import {SignMessageModal} from './StarknetSigner';
+import {useStyles, useWindowDimensions} from '../../hooks';
+import stylesheet from './styles';
 
 export const LoginStarknet = ({
   handleNavigation,
   btnText = 'Starknet Login',
   children,
   triggerConnect = true,
+  useCustomBtn = false,
 }: {
   handleNavigation: () => void;
   btnText?: string;
   children?: React.ReactNode;
   triggerConnect?: boolean;
+  useCustomBtn?: boolean;
 }) => {
+  const styles = useStyles(stylesheet);
   const {address} = useAccount();
   const [showSignModal, setShowSignModal] = useState(false);
   const [showConnect, setShow] = useState(false);
@@ -36,8 +41,13 @@ export const LoginStarknet = ({
     }
   };
 
+  const dimensions = useWindowDimensions();
+  const isDesktop = useMemo(() => {
+    return dimensions.width >= 1024;
+  }, [dimensions]);
+
   return (
-    <View>
+    <View style={{width: '100%'}}>
       {showConnect && (
         <StarkConnectModal
           handleToggleSign={() => setShowSignModal(!showSignModal)}
@@ -60,6 +70,22 @@ export const LoginStarknet = ({
         ) : (
           children
         )
+      ) : useCustomBtn ? (
+        <Button
+          onPress={() => {
+            setShow(true);
+          }}
+          style={[styles.loginMethodBtn, isDesktop && styles.loginMethodBtnDesktop]}
+          textStyle={styles.loginMethodBtnText}
+        >
+          <View style={styles.btnInnerContainer}>
+            <Image
+              style={styles.loginMethodBtnImg}
+              source={require('./../../assets/starknet.svg')}
+            />
+            {btnText}
+          </View>
+        </Button>
       ) : (
         <TextButton
           onPress={() => {