frontend client for gemstone. decentralised workplace app
refactor: hover state
+61
-45
+30
-22
src/components/Settings/RegisterLatticeModalContent.tsx
+30
-22
src/components/Settings/RegisterLatticeModalContent.tsx
···
1
1
import { Loading } from "@/components/primitives/Loading";
2
2
import { Text } from "@/components/primitives/Text";
3
3
import { useFacet } from "@/lib/facet";
4
+
import { lighten } from "@/lib/facet/src/lib/colors";
4
5
import { registerNewLattice } from "@/lib/utils/gmstn";
5
6
import {
6
7
useOAuthAgentGuaranteed,
···
97
98
/>
98
99
</View>
99
100
<Pressable
100
-
style={{
101
-
backgroundColor: inputText.trim()
102
-
? semantic.primary
103
-
: registerError
104
-
? semantic.error
105
-
: semantic.border,
106
-
borderRadius: atoms.radii.lg,
107
-
alignItems: "center",
108
-
paddingVertical: 10,
109
-
}}
110
101
onPress={() => {
111
102
newLatticeMutation();
112
103
}}
113
104
>
114
-
{mutationPending ? (
115
-
<Loading size="small" />
116
-
) : (
117
-
<Text
118
-
style={[
119
-
typography.weights.byName.normal,
120
-
{ color: semantic.textInverse },
121
-
]}
122
-
>
123
-
Register
124
-
</Text>
125
-
)}
105
+
{({ hovered }) =>
106
+
mutationPending ? (
107
+
<Loading size="small" />
108
+
) : (
109
+
<View
110
+
style={{
111
+
backgroundColor: inputText.trim()
112
+
? hovered
113
+
? lighten(semantic.primary, 7)
114
+
: semantic.primary
115
+
: registerError
116
+
? semantic.error
117
+
: semantic.border,
118
+
borderRadius: atoms.radii.lg,
119
+
alignItems: "center",
120
+
paddingVertical: 10,
121
+
}}
122
+
>
123
+
<Text
124
+
style={[
125
+
typography.weights.byName.normal,
126
+
{ color: semantic.textInverse },
127
+
]}
128
+
>
129
+
Add
130
+
</Text>
131
+
</View>
132
+
)
133
+
}
126
134
</Pressable>
127
135
</View>
128
136
);
+31
-23
src/components/Settings/RegisterShardModalContent.tsx
+31
-23
src/components/Settings/RegisterShardModalContent.tsx
···
1
1
import { Loading } from "@/components/primitives/Loading";
2
2
import { Text } from "@/components/primitives/Text";
3
3
import { useFacet } from "@/lib/facet";
4
+
import { lighten } from "@/lib/facet/src/lib/colors";
4
5
import { registerNewShard } from "@/lib/utils/gmstn";
5
6
import {
6
7
useOAuthAgentGuaranteed,
···
27
28
const agent = useOAuthAgentGuaranteed();
28
29
const session = useOAuthSessionGuaranteed();
29
30
const queryClient = useQueryClient();
30
-
const { queryKey: shardsQueryKey } = useShardsQuery(session)
31
+
const { queryKey: shardsQueryKey } = useShardsQuery(session);
31
32
const { mutate: newShardMutation, isPending: mutationPending } =
32
33
useMutation({
33
34
mutationFn: async () => {
···
97
98
/>
98
99
</View>
99
100
<Pressable
100
-
style={{
101
-
backgroundColor: inputText.trim()
102
-
? semantic.primary
103
-
: registerError
104
-
? semantic.error
105
-
: semantic.border,
106
-
borderRadius: atoms.radii.lg,
107
-
alignItems: "center",
108
-
paddingVertical: 10,
109
-
}}
110
101
onPress={() => {
111
102
newShardMutation();
112
103
}}
113
104
>
114
-
{mutationPending ? (
115
-
<Loading size="small" />
116
-
) : (
117
-
<Text
118
-
style={[
119
-
typography.weights.byName.normal,
120
-
{ color: semantic.textInverse },
121
-
]}
122
-
>
123
-
Register
124
-
</Text>
125
-
)}
105
+
{({ hovered }) =>
106
+
mutationPending ? (
107
+
<Loading size="small" />
108
+
) : (
109
+
<View
110
+
style={{
111
+
backgroundColor: inputText.trim()
112
+
? hovered
113
+
? lighten(semantic.primary, 7)
114
+
: semantic.primary
115
+
: registerError
116
+
? semantic.error
117
+
: semantic.border,
118
+
borderRadius: atoms.radii.lg,
119
+
alignItems: "center",
120
+
paddingVertical: 10,
121
+
}}
122
+
>
123
+
<Text
124
+
style={[
125
+
typography.weights.byName.normal,
126
+
{ color: semantic.textInverse },
127
+
]}
128
+
>
129
+
Add
130
+
</Text>
131
+
</View>
132
+
)
133
+
}
126
134
</Pressable>
127
135
</View>
128
136
);