Random changes

src/common/Flex.tsx

@@ -1,6 +1,7 @@
 import { FC, useMemo } from 'react';
 import { Base, BaseProps } from './Base';
 import { AlignItemType } from './types/AlignItemType';
+import { AlignSelfType } from './types/AlignSelfType';
 import { JustifyContentType } from './types/JustifyContentType';
 import { SpacingType } from './types/SpacingType';
 
@@ -11,13 +12,14 @@ export interface FlexProps extends BaseProps<HTMLDivElement>
     reverse?: boolean;
     gap?: SpacingType;
     center?: boolean;
+    alignSelf?: AlignSelfType;
     alignItems?: AlignItemType;
     justifyContent?: JustifyContentType;
 }
 
 export const Flex: FC<FlexProps> = props =>
 {
-    const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignItems = null, justifyContent = null, classNames = [], ...rest } = props;
+    const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignSelf = null, alignItems = null, justifyContent = null, classNames = [], ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -38,6 +40,8 @@ export const Flex: FC<FlexProps> = props =>
 
         if(gap) newClassNames.push('gap-' + gap);
 
+        if(alignSelf) newClassNames.push('align-self-' + alignSelf);
+
         if(alignItems) newClassNames.push('align-items-' + alignItems);
 
         if(justifyContent) newClassNames.push('justify-content-' + justifyContent);
@@ -47,7 +51,7 @@ export const Flex: FC<FlexProps> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ inline, column, reverse, gap, center, alignItems, justifyContent, classNames ]);
+    }, [ inline, column, reverse, gap, center, alignSelf, alignItems, justifyContent, classNames ]);
 
     return <Base classNames={ getClassNames } { ...rest } />;
 }

src/common/types/AlignSelfType.ts

@@ -0,0 +1 @@
+export type AlignSelfType = 'start' | 'end' | 'center' | 'baseline' | 'stretch';

src/common/utils/CreateTransitionToIcon.ts

@@ -0,0 +1,14 @@
+import { NitroToolbarAnimateIconEvent } from '@nitrots/nitro-renderer';
+import { GetRoomEngine } from '../../api';
+
+export const CreateTransitionToIcon = (image: HTMLImageElement, fromElement: HTMLElement, icon: string) =>
+{
+    const bounds = fromElement.getBoundingClientRect();
+    const x = (bounds.x + (bounds.width / 2));
+    const y = (bounds.y + (bounds.height / 2));
+    const event = new NitroToolbarAnimateIconEvent(image, x, y);
+
+    event.iconName = icon;
+
+    GetRoomEngine().events.dispatchEvent(event);
+}

src/views/shared/badge-image/BadgeImageView.tsx

@@ -1,8 +1,7 @@
 import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
 import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
-import { BaseProps } from '../../../common/Base';
+import { Base, BaseProps } from '../../../common/Base';
-import { NitroLayoutBase } from '../../../layout/base';
 import { BadgeInformationView } from './badge-info/BadgeInformationView';
 
 export interface BadgeImageViewProps extends BaseProps<HTMLDivElement>
@@ -17,7 +16,7 @@ export interface BadgeImageViewProps extends BaseProps<HTMLDivElement>
 
 export const BadgeImageView: FC<BadgeImageViewProps> = props =>
 {
-    const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, className = '', style = null, children = null, ...rest } = props;
+    const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props;
     const [ badgeUrl, setBadgeUrl ] = useState<string>('');
     const [ isListening, setIsListening ] = useState<boolean>(true);
 
@@ -36,25 +35,27 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
         return `scale-${ scaleName }`;
     }, [ scale ]);
 
-    const getClassName = useMemo(() =>
+    const getClassNames = useMemo(() =>
     {
-        let newClassName = 'badge-image';
+        const newClassNames: string[] = [ 'badge-image' ];
 
-        if(isGrayscale) newClassName += ' grayscale';
+        if(isGrayscale) newClassNames.push('grayscale');
 
-        if((scale !== 1) && getScaleClass.length) newClassName += ` ${ getScaleClass }`;
+        if((scale !== 1) && getScaleClass.length) newClassNames.push(getScaleClass);
 
-        if(className && className.length) newClassName += ' ' + className;
+        if(classNames.length) newClassNames.push(...classNames);
 
-        return newClassName;
+        return newClassNames;
-    }, [ className, isGrayscale, scale, getScaleClass ]);
+    }, [ classNames, isGrayscale, scale, getScaleClass ]);
 
     const getStyle = useMemo(() =>
     {
-        const newStyle = { ...style };
+        let newStyle: CSSProperties = {};
 
         if(badgeUrl && badgeUrl.length) newStyle.backgroundImage = `url(${ badgeUrl })`;
 
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
         return newStyle;
     }, [ style, badgeUrl ]);
 
@@ -99,9 +100,9 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
     }, [ badgeCode, isGroup, isListening ]);
 
     return (
-        <NitroLayoutBase className={ getClassName } style={ getStyle }>
+        <Base classNames={ getClassNames } style={ getStyle } { ...rest }>
             { showInfo && <BadgeInformationView title={ isGroup ? customTitle : LocalizeBadgeName(badgeCode) } description={ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) } /> }
             { children }
-        </NitroLayoutBase>
+        </Base>
     );
 }

src/views/shared/currency-icon/CurrencyIcon.scss

@@ -1,6 +1,6 @@
 .nitro-currency-icon {
     background-position: center;
     background-repeat: no-repeat;
-    width: 18px;
+    width: 15px;
-    height: 17px;
+    height: 15px;
 }

src/views/shared/room-previewer/RoomPreviewerView.scss

@@ -12,6 +12,7 @@
         background-color: $light;
         background-repeat: no-repeat;
         background-position: center;
+        overflow: hidden;
     
         &.border-0 {
             &::after {