commit 3faec24277a1b08c8e002a84301b5fb5a5b985db · notnite.com/moonlight

+6 -2

packages/core-extensions/src/moonbase/style.css

···

       251
       251
        
         padding-top: 0.5rem;

     

       252
       252
        
       }

     

       253
       253
        
       

     

       254
       254
       +
       .moonbase-dev {

     

       255
       255
       +
         height: 4rem;

     

       256
       256
       +
       }

     

       257
       257
       +
       

     

       254
       258
        
       .moonbase-dev-avatar {

     

       255
       259
        
         width: 2rem;

     

       256
       260
        
         border-radius: 50%;

     
···

       260
       264
        
         gap: 0.5rem;

     

       261
       265
        
       }

     

       262
       266
        
       

     

       263
       263
       -
       .moonbase-about-text {

     

       264
       264
       -
         padding-top: 0.5rem;

     

       267
       267
       +
       .moonbase-about-page {

     

       268
       268
       +
         gap: 1rem;

     

       265
       269
        
       }

+22 -40

packages/core-extensions/src/moonbase/webpackModules/ui/about.tsx

···

       1
       1
        
       import {

     

       2
       2
       -
         Card,

     

       3
       2
        
         Text,

     

       4
       3
        
         useThemeContext,

     

       5
       4
        
         Button,

     
···

       10
       9
        
       import Flex from "@moonlight-mod/wp/discord/uikit/Flex";

     

       11
       10
        
       import React from "@moonlight-mod/wp/react";

     

       12
       11
        
       import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";

     

       13
       13
       -
       import AppCardClasses from "@moonlight-mod/wp/discord/modules/guild_settings/web/AppCard.css";

     

       14
       12
        
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       15
       13
        
       

     

       16
       14
        
       const wordmark = "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark.png";

     
···

       27
       25
        
       

     

       28
       26
        
       function Dev({ name, picture, link }: { name: string; picture: string; link: string }) {

     

       29
       27
        
         return (

     

       30
       30
       -
           <Card editable={true} className={AppCardClasses.card}>

     

       31
       31
       -
             <div className={AppCardClasses.cardHeader + " moonbase-dev"}>

     

       32
       32
       -
               <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER}>

     

       33
       33
       -
                 <img src={picture} alt={name} className="moonbase-dev-avatar" />

     

       28
       28
       +
           <Button onClick={() => window.open(link)} color={Button.Colors.PRIMARY} className="moonbase-dev">

     

       29
       29
       +
             <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">

     

       30
       30
       +
               <img src={picture} alt={name} className="moonbase-dev-avatar" />

     

       34
       31
        
       

     

       35
       35
       -
                 <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>

     

       36
       36
       -
                   <a href={link} rel="noreferrer noopener" target="_blank" tabIndex={-1}>

     

       37
       37
       -
                     <Text variant="text-md/semibold">{name}</Text>

     

       38
       38
       -
                   </a>

     

       39
       39
       -
                 </Flex>

     

       40
       40
       -
               </Flex>

     

       41
       41
       -
             </div>

     

       42
       42
       -
           </Card>

     

       32
       32
       +
               <Text variant="text-md/semibold">{name}</Text>

     

       33
       33
       +
             </Flex>

     

       34
       34
       +
           </Button>

     

       43
       35
        
         );

     

       44
       36
        
       }

     

       45
       37
        
       

     
···

       85
       77
        
         const darkTheme = useThemeContext()?.theme !== "light";

     

       86
       78
        
       

     

       87
       79
        
         return (

     

       88
       88
       -
           <div>

     

       89
       89
       -
             <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>

     

       90
       90
       -
               <img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />

     

       91
       91
       -
               <Text variant="heading-lg/medium">created by:</Text>

     

       92
       92
       -
               <div className="moonbase-devs">

     

       93
       93
       -
                 <Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />

     

       94
       94
       -
                 <Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />

     

       95
       95
       -
                 <Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />

     

       96
       96
       -
                 <Dev

     

       97
       97
       -
                   name="redstonekasi"

     

       98
       98
       -
                   picture="https://github.com/redstonekasi.png"

     

       99
       99
       -
                   link="https://github.com/redstonekasi"

     

       100
       100
       -
                 />

     

       101
       101
       -
               </div>

     

       80
       80
       +
           <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER} className="moonbase-about-page">

     

       81
       81
       +
             <img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />

     

       102
       82
        
       

     

       103
       103
       -
               <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">

     

       104
       104
       -
                 <IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />

     

       105
       105
       -
                 <IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />

     

       106
       106
       -
                 <IconButton

     

       107
       107
       -
                   text="Join the server"

     

       108
       108
       -
                   icon={ClydeIcon}

     

       109
       109
       -
                   link="https://discord.gg/FdZBTFCP6F"

     

       110
       110
       -
                   openInClient={true}

     

       111
       111
       -
                 />

     

       112
       112
       -
               </Flex>

     

       83
       83
       +
             <Text variant="heading-lg/medium">created by:</Text>

     

       84
       84
       +
             <div className="moonbase-devs">

     

       85
       85
       +
               <Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />

     

       86
       86
       +
               <Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />

     

       87
       87
       +
               <Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />

     

       88
       88
       +
               <Dev name="redstonekasi" picture="https://github.com/redstonekasi.png" link="https://github.com/redstonekasi" />

     

       89
       89
       +
             </div>

     

       90
       90
       +
       

     

       91
       91
       +
             <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">

     

       92
       92
       +
               <IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />

     

       93
       93
       +
               <IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />

     

       94
       94
       +
               <IconButton text="Join the server" icon={ClydeIcon} link="https://discord.gg/FdZBTFCP6F" openInClient={true} />

     

       113
       95
        
             </Flex>

     

       114
       96
        
       

     

       115
       115
       -
             <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START} className="moonbase-about-text">

     

       97
       97
       +
             <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START}>

     

       116
       98
        
               <Text variant="text-sm/normal">

     

       117
       99
        
                 {parse(`moonlight \`${window.moonlight.version}\` on \`${window.moonlight.branch}\``)}

     

       118
       100
        
               </Text>

     
···

       123
       105
        
                 )}

     

       124
       106
        
               </Text>

     

       125
       107
        
             </Flex>

     

       126
       126
       -
           </div>

     

       108
       108
       +
           </Flex>

     

       127
       109
        
         );

     

       128
       110
        
       }