add frank to alerts, mod tool fixes

src/assets/styles/bootstrap/_reboot.scss

@@ -65,7 +65,7 @@ body {
 hr {
     margin: $hr-margin-y 0;
     color: $hr-color; // 1
-    background-color: currentColor;
+    background-color: rgba(black,.2);
     border: 0;
     opacity: $hr-opacity;
 }

src/common/index.scss

@@ -193,7 +193,7 @@
 .nitro-alert {
     width: 350px;
     min-height: 150px;
-    max-height: 350px;
+    max-height: 550px;
 }
 
 .nitro-notification-bubble {

src/common/layout/LayoutNotificationAlertView.tsx

@@ -23,7 +23,7 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
     return (
         <NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>
             <NitroCardHeaderView headerText={ title } onCloseClick={ close } />
-            <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black">
+            <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={0}>
                 { children }
             </NitroCardContentView>
         </NitroCardView>

src/components/mod-tools/views/user/ModToolsUserModActionView.tsx

@@ -15,8 +15,8 @@ interface ModToolsUserModActionViewProps
 const MOD_ACTION_DEFINITIONS = [
     new ModActionDefinition(1, 'Alert', ModActionDefinition.ALERT, 1, 0),
     new ModActionDefinition(2, 'Mute 1h', ModActionDefinition.MUTE, 2, 0),
-    new ModActionDefinition(4, 'Ban 7 days', ModActionDefinition.BAN, 4, 0),
     new ModActionDefinition(3, 'Ban 18h', ModActionDefinition.BAN, 3, 0),
+    new ModActionDefinition(4, 'Ban 7 days', ModActionDefinition.BAN, 4, 0),
     new ModActionDefinition(5, 'Ban 30 days (step 1)', ModActionDefinition.BAN, 5, 0),
     new ModActionDefinition(7, 'Ban 30 days (step 2)', ModActionDefinition.BAN, 7, 0),
     new ModActionDefinition(6, 'Ban 100 years', ModActionDefinition.BAN, 6, 0),
@@ -98,14 +98,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                     return;
                 }
 
-                if(message.trim().length === 0)
+                SendMessageComposer(new ModAlertMessageComposer(user.userId, messageOrDefault, category.id));
-                {
-                    sendAlert('Please write a message to user');
-
-                    return;
-                }
-
-                SendMessageComposer(new ModAlertMessageComposer(user.userId, message, category.id));
                 break;
             }
             case ModActionDefinition.MUTE: 
@@ -172,9 +165,9 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                     <Text small>Optional message type, overrides default</Text>
                     <textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) }/>
                 </Column>
-                <Flex justifyContent="between" gap={ 1 }>
+                <Flex justifyContent="between" gap={1}>
-                    <Button variant="danger" onClick={ sendSanction }>Sanction</Button>
+                    <Button variant="primary" onClick={ sendDefaultSanction }>Default Sanction</Button>
-                    <Button variant="success" onClick={ sendDefaultSanction }>Default Sanction</Button>
+                    <Button variant="success" onClick={ sendSanction }>Sanction</Button>
                 </Flex>
             </NitroCardContentView>
         </NitroCardView>

src/components/notification-center/NotificationCenterView.scss

@@ -13,3 +13,9 @@
         pointer-events: all;
     }
 }
+
+.notification-frank {
+    background-image: url('../../assets/images/notifications/frank.gif');
+    width:47px;
+    height: 85px;
+}

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

@@ -1,6 +1,6 @@
 import { FC, useCallback } from 'react';
-import { LocalizeText, NotificationAlertItem, NotificationUtilities } from '../../../../api';
+import { LocalizeText, NotificationAlertItem, NotificationAlertType, NotificationUtilities } from '../../../../api';
-import { Base, Button, Column, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
+import { Base, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
 
 interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
 {
@@ -20,20 +20,24 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
 
     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}>
+            <Flex fullHeight overflow="auto" gap={ 2 }>
+                { hasFrank && <Base className="notification-frank flex-shrink-0" /> }
                 { (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 } } />;
-                }) }
+                })}
+            </Flex>
+            <hr className="my-2"/>
             <Column alignItems="center" center gap={ 1 }>
-                { !isAction &&
+                { !isAction && !item.clickUrl &&
                     <Button onClick={ close }>{ LocalizeText('generic.close') }</Button> }
-                { !isAction && item.clickUrl && (item.clickUrl.length > 0) &&
+                { item.clickUrl && (item.clickUrl.length > 0) &&
-                    <Button variant="link" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
-                { isAction && item.clickUrl && (item.clickUrl.length > 0) &&
                     <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
             </Column>
         </LayoutNotificationAlertView>