different notifications n sizes

src/api/notification/NotificationAlertItem.ts

@@ -35,6 +35,11 @@ export class NotificationAlertItem
         return this._messages;
     }
 
+    public set alertType(alertType: string)
+    {
+        this._alertType = alertType;
+    }
+
     public get alertType(): string
     {
         return this._alertType;

src/api/notification/NotificationAlertType.ts

@@ -6,4 +6,5 @@ export class NotificationAlertType
     public static EVENT: string = 'event';
     public static NITRO: string = 'nitro';
     public static SEARCH: string = 'search';
+    public static ALERT: string = 'alert';
 }

src/api/notification/NotificationUtilities.ts

@@ -137,7 +137,7 @@ export class NotificationUtilities
 
     public static showModeratorMessage(message: string, url: string = null, showHabboWay: boolean = true): void
     {
-        this.simpleAlert(message, NotificationAlertType.MODERATION, url, LocalizeText('mod.alert.link'), LocalizeText('mod.alert.title'));
+        this.simpleAlert(message, NotificationAlertType.DEFAULT, url, LocalizeText('mod.alert.link'), LocalizeText('mod.alert.title'));
     }
 
     public static handleModeratorCaution(message: string, url: string = null): void

src/common/index.scss

@@ -190,25 +190,6 @@
     background-color: rgba($black, .125);
 }
 
-.nitro-alert {
-    min-width: 350px;
-    min-height: 150px;
-    max-height: 350px;
-}
-
-.nitro-notification-bubble {
-    pointer-events: all;
-    padding: 6px 5px;
-    background-color: rgba($dark,.95);
-    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
-    font-size: $font-size-sm;
-
-    .bubble-image-container {
-        width: 50px;
-        height: 50px;
-    }
-}
-
 #draggable-windows-container {
     position: absolute;
     top: 0;

src/common/layout/LayoutNotificationAlertView.tsx

@@ -1,24 +1,28 @@
 import { FC, useMemo } from 'react';
+import { NotificationAlertType } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card';
 
 export interface LayoutNotificationAlertViewProps extends NitroCardViewProps
 {
     title?: string;
+    type?: string;
     close: () => void;
 }
 
 export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> = props =>
 {
-    const { title = '', close = null, classNames = [], children = null, ...rest } = props;
+    const { title = '', close = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'nitro-alert' ];
+        const newClassNames: string[] = ['nitro-alert'];
+        
+        newClassNames.push('nitro-alert-' + type);
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ classNames ]);
+    }, [ classNames, type ]);
 
     return (
         <NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>

src/components/catalog/CatalogView.tsx

@@ -1,6 +1,6 @@
 import { CatalogPublishedMessageEvent, FrontPageItem, GetCatalogIndexComposer, GetCatalogPageComposer, GetClubGiftInfo, GetGiftWrappingConfigurationComposer, ILinkEventTracker, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { AddEventLinkTracker, GetRoomEngine, LocalizeText, NotificationUtilities, PlaySound, RemoveLinkEventTracker, SendMessageComposer, SoundNames } from '../../api';
+import { AddEventLinkTracker, GetRoomEngine, LocalizeText, NotificationAlertType, NotificationUtilities, PlaySound, RemoveLinkEventTracker, SendMessageComposer, SoundNames } from '../../api';
 import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { CatalogPurchasedEvent } from '../../events';
 import { BatchUpdates, UseMessageEventHook, UseUiEvent } from '../../hooks';
@@ -65,7 +65,7 @@ export const CatalogView: FC<{}> = props =>
 
         resetState();
 
-        if(wasVisible) NotificationUtilities.simpleAlert(LocalizeText('catalog.alert.published.description'), null, null, null, LocalizeText('catalog.alert.published.title'));
+        if(wasVisible) NotificationUtilities.simpleAlert(LocalizeText('catalog.alert.published.description'), NotificationAlertType.ALERT, null, null, LocalizeText('catalog.alert.published.title'));
     }, [ isVisible, resetState ]);
 
     UseMessageEventHook(CatalogPublishedMessageEvent, onCatalogPublishedMessageEvent);

src/components/notification-center/NotificationCenterView.scss

@@ -14,8 +14,46 @@
     }
 }
 
-.notification-frank {
+.nitro-alert {
-    background-image: url('../../assets/images/notifications/frank.gif');
+    min-height: 150px;
-    width:47px;
+    max-height: 350px;
-    height: 85px;
+
+    .notification-frank {
+        background-image: url('../../assets/images/notifications/frank.gif');
+        width:47px;
+        height: 85px;
+    }
+
+    .notification-text {
+        min-width: 250px;
+    }
+
+    &.nitro-alert-default,
+    &.nitro-alert-motd {
+        width: 350px;
+        .notification-text {
+            min-width: auto;
+        }
+    }
+
+    &.nitro-alert-moderation,
+    &.nitro-alert-alert {
+        width: 250px;
+        .notification-text {
+            min-width: 225px;
+        }
+    }
+}
+
+.nitro-notification-bubble {
+    pointer-events: all;
+    padding: 6px 5px;
+    background-color: rgba($dark,.95);
+    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+    font-size: $font-size-sm;
+
+    .bubble-image-container {
+        width: 50px;
+        height: 50px;
+    }
 }

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

@@ -14,7 +14,7 @@ export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =
         case NotificationAlertType.NITRO:
             return <NitroSystemAlertView {...props} />
         case NotificationAlertType.SEARCH:
-            return <NotificationSeachAlertView { ...props } />
+            return <NotificationSeachAlertView {...props} />
         default:
             return <NotificationDefaultAlertView { ...props } />
     }

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

@@ -18,32 +18,37 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
         NotificationUtilities.openUrl(item.clickUrl);
         
         close();
-    }, [ item, close ]);
+    }, [item, close]);
     
-
+    const hasFrank = item.alertType === NotificationAlertType.DEFAULT;
-    const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
-
-    const hasFrank = item.alertType === NotificationAlertType.DEFAULT || item.alertType === NotificationAlertType.MODERATION;
 
     return (
-        <LayoutNotificationAlertView title={title} close={close} {...rest}>
+        <LayoutNotificationAlertView title={title} close={close} {...rest} type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
-            <Flex fullHeight overflow="auto" gap={2}>
+            <Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
-                {hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
+            {hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
-                {item.imageUrl && !imageFailed && <img src={item.imageUrl} alt={ item.title } onError={() => { setImageFailed(true) } } /> }
+            {item.imageUrl && !imageFailed && <img src={item.imageUrl} alt={item.title} onError={() => { setImageFailed(true) }} className="align-self-baseline" />}
+            <Base classNames={['notification-text overflow-y-auto d-flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-content-center' : '']}>
                 { (item.messages.length > 0) && item.messages.map((message, index) =>
                 {
                     const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
 
-                    return <Base grow fullHeight overflow="auto" key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
+                    return <Base key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
                 })}
+                    {item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
+                        <hr className="my-2 w-100" />
+                        <Button onClick={visitUrl} className="align-self-center px-3">{LocalizeText(item.clickUrlText)}</Button>
+                    </>}
+            </Base>
             </Flex>
-            <hr className="my-2"/>
+            { (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
-            <Column alignItems="center" center gap={ 1 }>
+                <Column alignItems="center" center gap={0}>
-                { !isAction && !item.clickUrl &&
+                    <hr className="my-2 w-100" />
-                    <Button onClick={ close }>{ LocalizeText('generic.close') }</Button> }
+                    { !item.clickUrl &&
-                { item.clickUrl && (item.clickUrl.length > 0) &&
+                        <Button onClick={close}>{LocalizeText('generic.close')}</Button>}
-                    <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
+                    { item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={visitUrl}>{LocalizeText(item.clickUrlText)}</Button> }
-            </Column>
+                </Column>
+            </> }
         </LayoutNotificationAlertView>
     );
+
 }

src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NotificationConfirmItem } from '../../../../api';
+import { NotificationAlertType, NotificationConfirmItem } from '../../../../api';
 import { Button, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps, Text } from '../../../../common';
 
 export interface NotificationDefaultConfirmViewProps extends LayoutNotificationAlertViewProps
@@ -27,7 +27,7 @@ export const NotificationDefaultConfirmView: FC<NotificationDefaultConfirmViewPr
     }
 
     return (
-        <LayoutNotificationAlertView title={ title } close={ close } { ...rest }>
+        <LayoutNotificationAlertView title={title} close={close} {...rest} type={ NotificationAlertType.ALERT }>
             <Flex grow center>
                 <Text>{ message }</Text>
             </Flex>