frontend client for gemstone. decentralised workplace app
feat: lighten on hover
lighten and darken functions were implemented wrongly
+72
-48
+33
-21
src/components/Settings/LatticeSettings.tsx
+33
-21
src/components/Settings/LatticeSettings.tsx
···
3
3
import { LatticeInfo } from "@/components/Settings/LatticeInfo";
4
4
import { RegisterLatticeModalContent } from "@/components/Settings/RegisterLatticeModalContent";
5
5
import { useFacet } from "@/lib/facet";
6
-
import { fade } from "@/lib/facet/src/lib/colors";
6
+
import { fade, lighten } from "@/lib/facet/src/lib/colors";
7
7
import type { AtUri } from "@/lib/types/atproto";
8
8
import { stringToAtUri } from "@/lib/utils/atproto";
9
9
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
···
88
88
)}
89
89
<View>
90
90
<Pressable
91
-
style={{
92
-
flexDirection: "row",
93
-
alignItems: "center",
94
-
marginLeft: 10,
95
-
gap: 4,
96
-
backgroundColor: semantic.primary,
97
-
alignSelf: "flex-start",
98
-
padding: 8,
99
-
paddingRight: 12,
100
-
borderRadius: atoms.radii.md,
101
-
}}
91
+
style={{ alignSelf: "flex-start", marginLeft: 10 }}
102
92
onPress={() => {
103
93
setShowRegisterModal(true);
104
94
}}
105
95
>
106
-
<Plus height={16} width={16} color={semantic.textInverse} />
107
-
<Text
108
-
style={[
109
-
typography.weights.byName.normal,
110
-
{ color: semantic.textInverse },
111
-
]}
112
-
>
113
-
Register a Lattice
114
-
</Text>
96
+
{({ hovered }) => (
97
+
<View
98
+
style={{
99
+
flexDirection: "row",
100
+
alignItems: "center",
101
+
102
+
gap: 4,
103
+
backgroundColor: hovered
104
+
? lighten(semantic.primary, 5)
105
+
: semantic.primary,
106
+
alignSelf: "flex-start",
107
+
padding: 8,
108
+
paddingRight: 12,
109
+
borderRadius: atoms.radii.md,
110
+
}}
111
+
>
112
+
<Plus
113
+
height={16}
114
+
width={16}
115
+
color={semantic.textInverse}
116
+
/>
117
+
<Text
118
+
style={[
119
+
typography.weights.byName.normal,
120
+
{ color: semantic.textInverse },
121
+
]}
122
+
>
123
+
Register a Lattice
124
+
</Text>
125
+
</View>
126
+
)}
115
127
</Pressable>
116
128
<Modal
117
129
visible={showRegisterModal}
+33
-21
src/components/Settings/ShardSettings.tsx
+33
-21
src/components/Settings/ShardSettings.tsx
···
3
3
import { RegisterShardModalContent } from "@/components/Settings/RegisterShardModalContent";
4
4
import { ShardInfo } from "@/components/Settings/ShardInfo";
5
5
import { useFacet } from "@/lib/facet";
6
-
import { fade } from "@/lib/facet/src/lib/colors";
6
+
import { fade, lighten } from "@/lib/facet/src/lib/colors";
7
7
import type { AtUri } from "@/lib/types/atproto";
8
8
import { stringToAtUri } from "@/lib/utils/atproto";
9
9
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
···
88
88
)}
89
89
<View>
90
90
<Pressable
91
-
style={{
92
-
flexDirection: "row",
93
-
alignItems: "center",
94
-
marginLeft: 10,
95
-
gap: 4,
96
-
backgroundColor: semantic.primary,
97
-
alignSelf: "flex-start",
98
-
padding: 8,
99
-
paddingRight: 12,
100
-
borderRadius: atoms.radii.md,
101
-
}}
91
+
style={{ alignSelf: "flex-start", marginLeft: 10 }}
102
92
onPress={() => {
103
93
setShowRegisterModal(true);
104
94
}}
105
95
>
106
-
<Plus height={16} width={16} color={semantic.textInverse} />
107
-
<Text
108
-
style={[
109
-
typography.weights.byName.normal,
110
-
{ color: semantic.textInverse },
111
-
]}
112
-
>
113
-
Register a Shard
114
-
</Text>
96
+
{({ hovered }) => (
97
+
<View
98
+
style={{
99
+
flexDirection: "row",
100
+
alignItems: "center",
101
+
102
+
gap: 4,
103
+
backgroundColor: hovered
104
+
? lighten(semantic.primary, 5)
105
+
: semantic.primary,
106
+
alignSelf: "flex-start",
107
+
padding: 8,
108
+
paddingRight: 12,
109
+
borderRadius: atoms.radii.md,
110
+
}}
111
+
>
112
+
<Plus
113
+
height={16}
114
+
width={16}
115
+
color={semantic.textInverse}
116
+
/>
117
+
<Text
118
+
style={[
119
+
typography.weights.byName.normal,
120
+
{ color: semantic.textInverse },
121
+
]}
122
+
>
123
+
Register a Shard
124
+
</Text>
125
+
</View>
126
+
)}
115
127
</Pressable>
116
128
<Modal
117
129
visible={showRegisterModal}
+6
-6
src/lib/facet/src/lib/colors.ts
+6
-6
src/lib/facet/src/lib/colors.ts
···
33
33
const hsl = hexToHsl(hex);
34
34
35
35
if (typeof method !== "undefined") {
36
-
hsl.l += (hsl.l * amount) / 100;
36
+
hsl.l += hsl.l * amount;
37
37
} else {
38
-
hsl.l += amount / 100;
38
+
hsl.l += amount;
39
39
}
40
-
hsl.l = clamp(hsl.l);
40
+
hsl.l = clamp(hsl.l / 100) * 100;
41
41
return hslToHex(hsl);
42
42
};
43
43
···
49
49
const hsl = hexToHsl(hex);
50
50
51
51
if (typeof method !== "undefined") {
52
-
hsl.l -= (hsl.l * amount) / 100;
52
+
hsl.l -= hsl.l * amount;
53
53
} else {
54
-
hsl.l -= amount / 100;
54
+
hsl.l -= amount;
55
55
}
56
-
hsl.l = clamp(hsl.l);
56
+
hsl.l = clamp(hsl.l / 100) * 100;
57
57
return hslToHex(hsl);
58
58
};
59
59