notnite.com
+6
-2
packages/core-extensions/src/moonbase/style.css
+6
-2
packages/core-extensions/src/moonbase/style.css
+22
-40
packages/core-extensions/src/moonbase/webpackModules/ui/about.tsx
+22
-40
packages/core-extensions/src/moonbase/webpackModules/ui/about.tsx
···
1
import {
2
-
Card,
3
Text,
4
useThemeContext,
5
Button,
···
10
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
11
import React from "@moonlight-mod/wp/react";
12
import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
13
-
import AppCardClasses from "@moonlight-mod/wp/discord/modules/guild_settings/web/AppCard.css";
14
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
15
16
const wordmark = "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark.png";
···
27
28
function Dev({ name, picture, link }: { name: string; picture: string; link: string }) {
29
return (
30
-
<Card editable={true} className={AppCardClasses.card}>
31
-
<div className={AppCardClasses.cardHeader + " moonbase-dev"}>
32
-
<Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER}>
33
-
<img src={picture} alt={name} className="moonbase-dev-avatar" />
34
35
-
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
36
-
<a href={link} rel="noreferrer noopener" target="_blank" tabIndex={-1}>
37
-
<Text variant="text-md/semibold">{name}</Text>
38
-
</a>
39
-
</Flex>
40
-
</Flex>
41
-
</div>
42
-
</Card>
43
);
44
}
45
···
85
const darkTheme = useThemeContext()?.theme !== "light";
86
87
return (
88
-
<div>
89
-
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
90
-
<img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />
91
-
<Text variant="heading-lg/medium">created by:</Text>
92
-
<div className="moonbase-devs">
93
-
<Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />
94
-
<Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />
95
-
<Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />
96
-
<Dev
97
-
name="redstonekasi"
98
-
picture="https://github.com/redstonekasi.png"
99
-
link="https://github.com/redstonekasi"
100
-
/>
101
-
</div>
102
103
-
<Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
104
-
<IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />
105
-
<IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />
106
-
<IconButton
107
-
text="Join the server"
108
-
icon={ClydeIcon}
109
-
link="https://discord.gg/FdZBTFCP6F"
110
-
openInClient={true}
111
-
/>
112
-
</Flex>
113
</Flex>
114
115
-
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START} className="moonbase-about-text">
116
<Text variant="text-sm/normal">
117
{parse(`moonlight \`${window.moonlight.version}\` on \`${window.moonlight.branch}\``)}
118
</Text>
···
123
)}
124
</Text>
125
</Flex>
126
-
</div>
127
);
128
}
···
1
import {
2
Text,
3
useThemeContext,
4
Button,
···
9
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
10
import React from "@moonlight-mod/wp/react";
11
import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
12
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
13
14
const wordmark = "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark.png";
···
25
26
function Dev({ name, picture, link }: { name: string; picture: string; link: string }) {
27
return (
28
+
<Button onClick={() => window.open(link)} color={Button.Colors.PRIMARY} className="moonbase-dev">
29
+
<Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
30
+
<img src={picture} alt={name} className="moonbase-dev-avatar" />
31
32
+
<Text variant="text-md/semibold">{name}</Text>
33
+
</Flex>
34
+
</Button>
35
);
36
}
37
···
77
const darkTheme = useThemeContext()?.theme !== "light";
78
79
return (
80
+
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER} className="moonbase-about-page">
81
+
<img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />
82
83
+
<Text variant="heading-lg/medium">created by:</Text>
84
+
<div className="moonbase-devs">
85
+
<Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />
86
+
<Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />
87
+
<Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />
88
+
<Dev name="redstonekasi" picture="https://github.com/redstonekasi.png" link="https://github.com/redstonekasi" />
89
+
</div>
90
+
91
+
<Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
92
+
<IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />
93
+
<IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />
94
+
<IconButton text="Join the server" icon={ClydeIcon} link="https://discord.gg/FdZBTFCP6F" openInClient={true} />
95
</Flex>
96
97
+
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START}>
98
<Text variant="text-sm/normal">
99
{parse(`moonlight \`${window.moonlight.version}\` on \`${window.moonlight.branch}\``)}
100
</Text>
···
105
)}
106
</Text>
107
</Flex>
108
+
</Flex>
109
);
110
}