Added: Branding

src/common/layout/LayoutNotificationCredits.tsx

@@ -0,0 +1,33 @@
+import { FC, useMemo } from 'react';
+import { NotificationAlertType } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card';
+
+export interface LayoutNotificationCreditsProps extends NitroCardViewProps
+{
+    title?: string;
+    type?: string;
+    onClose: () => void;
+}
+
+export const LayoutNotificationCredits: FC<LayoutNotificationCreditsProps> = props =>
+{
+    const { title = '', onClose = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = ['nitro-alert', 'nitro-alert-credits'];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames, type ]);
+
+    return (
+        <NitroCardView classNames={ getClassNames } theme="primary" { ...rest }>
+            <NitroCardHeaderView headerText={ title } onCloseClick={ onClose } />
+            <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={ 0 }>
+                { children }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/common/layout/index.ts

@@ -12,6 +12,7 @@ export * from './LayoutItemCountView';
 export * from './LayoutLoadingSpinnerView';
 export * from './LayoutMiniCameraView';
 export * from './LayoutNotificationAlertView';
+export * from './LayoutNotificationCredits';
 export * from './LayoutNotificationBubbleView';
 export * from './LayoutPetImageView';
 export * from './LayoutProgressBar';

src/components/notification-center/NotificationCenterView.scss

@@ -36,6 +36,13 @@
         }
     }
 	
+	&.nitro-alert-credits {
+        width: 370px;
+        .notification-text {
+            min-width: auto;
+        }
+    }
+
     &.nitro-alert-moderation,
     &.nitro-alert-alert {
         width: 250px;
@@ -64,3 +71,11 @@
 .topnotifications{
     margin-top: -6px;
 }
+
+.nitro-coolui-logo {
+	width: 150px;
+	height: 78px;
+	position: relative;
+	background-image: url("@/assets/images/notifications/coolui.png");
+	background-repeat: no-repeat;
+}

src/components/notification-center/views/alert-layouts/NitroSystemAlertView.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { GetRendererVersion, GetUIVersion, NotificationAlertItem } from '../../../../api';
-import { Button, Column, Flex, Grid, LayoutNotificationAlertView, LayoutNotificationAlertViewProps, Text } from '../../../../common';
+import { Button, Column, Flex, Grid, LayoutNotificationCredits, LayoutNotificationAlertViewProps, Text } from '../../../../common';
 
 interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
 {
@@ -9,15 +9,12 @@ interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewP
 
 export const NitroSystemAlertView: FC<NotificationDefaultAlertViewProps> = props =>
 {
-    const { title = 'Nitro', onClose = null, ...rest } = props;
+    const { title = 'Nitro Cool UI Edit', onClose = null, ...rest } = props;
 
     return (
-        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest }>
+        <LayoutNotificationCredits title={ title } onClose={ onClose } { ...rest }>
             <Grid>
-                <Column center size={ 5 }>
+                <Column size={ 12 }>
-                    <object data="https://assets.nitrodev.co/logos/nitro-n-dark.svg" width="100" height="100">&nbsp;</object>
-                </Column>
-                <Column size={ 7 }>
                     <Column alignItems="center" gap={ 0 }>
                         <Text bold fontSize={ 4 }>Nitro React</Text>
                         <Text>v{ GetUIVersion() }</Text>
@@ -25,15 +22,27 @@ export const NitroSystemAlertView: FC<NotificationDefaultAlertViewProps> = props
                     <Column alignItems="center">
                         <Text><b>Renderer:</b> v{ GetRendererVersion() }</Text>
                         <Column fullWidth gap={ 1 }>
-                            <Button fullWidth variant="success" onClick={ event => window.open('https://discord.nitrodev.co') }>Discord</Button>
+                            <Button fullWidth variant="success" onClick={ event => window.open('https://discord.nitrodev.co') }>Nitro Discord</Button>
                             <Flex gap={ 1 }>
-                                <Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react') }>Git</Button>
+                                <Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react') }>Nitro Git</Button>
-                                <Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react/-/issues') }>Bug Report</Button>
+                                <Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react/-/issues') }>Nitro Bug Report</Button>
                             </Flex>
                         </Column>
                     </Column>
+                </Column>
+				<div className="nitro-coolui-logo"></div>
+                <Column size={ 10 }>
+                    <Column alignItems="left" gap={ 0 }>
+                        <Text center bold fontSize={ 5 }>Cool UI</Text>
+                        <Text>Was created by Wassehk</Text>
+						<Text>- DuckieTM (Re-Design)</Text>
+						<Text>- Jonas (Contributing)</Text>
+						<Text>- Ohlucas (Sunset resources)</Text>
+						<Text center bold small>v1.2.0</Text>
+						<Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react') }>Cool UI Git</Button>
+                    </Column>
                 </Column>
             </Grid>
-        </LayoutNotificationAlertView>
+        </LayoutNotificationCredits>
     );
 }