frontend client for gemstone. decentralised workplace app
refactor: login page
+82
-23
+82
-23
src/components/Auth/Login.web.tsx
+82
-23
src/components/Auth/Login.web.tsx
···
1
+
import { GmstnLogoColor } from "@/components/icons/gmstn/GmstnLogoColor";
2
+
import { Text } from "@/components/primitives/Text";
3
+
import { useFacet } from "@/lib/facet";
4
+
import { lighten } from "@/lib/facet/src/lib/colors";
1
5
import { useOAuthSetter, useOAuthValue } from "@/providers/OAuthProvider";
6
+
import { useCurrentPalette } from "@/providers/ThemeProvider";
2
7
import { Agent } from "@atproto/api";
8
+
import { ArrowRight } from "lucide-react-native";
3
9
import { useState } from "react";
4
-
import { Button, StyleSheet, TextInput, View } from "react-native";
10
+
import { Pressable, TextInput, View } from "react-native";
5
11
6
12
export const Login = () => {
13
+
const { semantic } = useCurrentPalette();
14
+
const { atoms, typography } = useFacet();
7
15
const [atprotoHandle, setAtprotoHandle] = useState("");
8
16
const oAuth = useOAuthValue();
9
17
const setOAuth = useOAuthSetter();
···
30
38
};
31
39
32
40
return (
33
-
<View>
34
-
<TextInput
35
-
style={styles.input}
36
-
value={atprotoHandle}
37
-
onChangeText={setAtprotoHandle}
38
-
placeholder="alice.bsky.social"
39
-
onSubmitEditing={handleSubmit}
40
-
/>
41
-
<Button title="Log in with your PDS ->" onPress={handleSubmit} />
41
+
<View
42
+
style={{
43
+
flex: 1,
44
+
flexDirection: "column",
45
+
alignItems: "center",
46
+
justifyContent: "center",
47
+
gap: 16,
48
+
}}
49
+
>
50
+
<View style={{ alignItems: "center" }}>
51
+
<View style={{ padding: 8, paddingLeft: 12, paddingTop: 12 }}>
52
+
<GmstnLogoColor height={36} width={36} />
53
+
</View>
54
+
<Text
55
+
style={[
56
+
typography.sizes.xl,
57
+
typography.weights.byName.medium,
58
+
]}
59
+
>
60
+
Gemstone
61
+
</Text>
62
+
</View>
63
+
<View style={{ gap: 10 }}>
64
+
<TextInput
65
+
style={[{
66
+
flex: 1,
67
+
borderWidth: 1,
68
+
borderColor: semantic.border,
69
+
borderRadius: atoms.radii.lg,
70
+
paddingHorizontal: 14,
71
+
paddingVertical: 12,
72
+
marginRight: 8,
73
+
fontSize: 16,
74
+
color: semantic.text
75
+
}, typography.weights.byName.light]}
76
+
value={atprotoHandle}
77
+
onChangeText={setAtprotoHandle}
78
+
placeholder="alice.bsky.social"
79
+
onSubmitEditing={handleSubmit}
80
+
placeholderTextColor={semantic.textPlaceholder}
81
+
/>
82
+
<Pressable onPress={handleSubmit}>
83
+
{({ hovered }) => (
84
+
<View
85
+
style={{
86
+
backgroundColor: hovered
87
+
? lighten(semantic.primary, 7)
88
+
: semantic.primary,
89
+
flexDirection: "row",
90
+
gap: 4,
91
+
alignItems: "center",
92
+
justifyContent: "center",
93
+
paddingVertical: 10,
94
+
borderRadius: atoms.radii.lg,
95
+
}}
96
+
>
97
+
<Text
98
+
style={[
99
+
{ color: semantic.textInverse },
100
+
typography.weights.byName.normal,
101
+
]}
102
+
>
103
+
Log in with ATProto
104
+
</Text>
105
+
<ArrowRight
106
+
height={16}
107
+
width={16}
108
+
color={semantic.textInverse}
109
+
/>
110
+
</View>
111
+
)}
112
+
</Pressable>
113
+
</View>
42
114
</View>
43
115
);
44
116
};
45
-
46
-
const styles = StyleSheet.create({
47
-
input: {
48
-
flex: 1,
49
-
borderWidth: 1,
50
-
borderColor: "#ccc",
51
-
borderRadius: 8,
52
-
paddingHorizontal: 12,
53
-
paddingVertical: 8,
54
-
marginRight: 8,
55
-
fontSize: 16,
56
-
},
57
-
});