More layout changes

src/layout/card/content/NitroCardContentView.tsx

@@ -1,15 +1,23 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+import { Column } from '../../../common/Column';
 import { useNitroCardContext } from '../context';
 import { NitroCardContentViewProps } from './NitroCardContextView.types';
 
 export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
 {
-    const { theme = 'primary',  children = null, className = '', ...rest } = props;
+    const { theme = 'primary', classNames = [], ...rest } = props;
     const { simple = false } = useNitroCardContext();
 
-    return (
+    const getClassNames = useMemo(() =>
-        <div className={ `container-fluid content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+    {
-            { children }
+        const newClassNames: string[] = [ 'container-fluid', 'content-area' ];
-        </div>
+
-    );
+        if(simple) newClassNames.push('simple');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ simple, classNames ]);
+
+    return <Column classNames={ getClassNames } overflow="auto" { ...rest } />;
 }

src/layout/card/content/NitroCardContextView.types.ts

@@ -1,7 +1,7 @@
-import { DetailsHTMLAttributes } from 'react';
+import { ColumnProps } from '../../../common/Column';
 
 
-export interface NitroCardContentViewProps extends DetailsHTMLAttributes<HTMLDivElement>
+export interface NitroCardContentViewProps extends ColumnProps
 {
     theme?: string;
 }

src/views/catalog/CatalogView.tsx

@@ -1,10 +1,12 @@
 import { GetCatalogIndexComposer, GetCatalogPageComposer, GetGiftWrappingConfigurationComposer, ILinkEventTracker, INodeData, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api';
+import { Column } from '../../common/Column';
+import { Grid } from '../../common/Grid';
 import { CatalogEvent } from '../../events';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { CatalogMessageHandler } from './CatalogMessageHandler';
 import { CatalogMode, CatalogViewProps } from './CatalogView.types';
 import { BuildCatalogPageTree } from './common/CatalogUtilities';
@@ -195,6 +197,8 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                     <NitroCardTabsView>
                         { root && root.children.length && root.children.map((page, index) =>
                             {
+                                if(!page.visible) return null;
+                                
                                 return (
                                     <NitroCardTabsItemView key={ index } isActive={ (currentTab === page) } onClick={ event => setCurrentTab(page) }>
                                         { page.localization }
@@ -203,15 +207,15 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                             }) }
                     </NitroCardTabsView>
                     <NitroCardContentView>
-                        <NitroLayoutGrid>
+                        <Grid>
                             { currentNavigationPage && !navigationHidden &&
-                                <NitroLayoutGridColumn size={ 3 }>
+                                <Column size={ 3 }>
                                     <CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
-                                </NitroLayoutGridColumn> }
+                                </Column> }
-                            <NitroLayoutGridColumn size={ (navigationHidden ? 12 : 9) }>
+                            <Column size={ (navigationHidden ? 12 : 9) }>
                                 <CatalogPageView roomPreviewer={ roomPreviewer } />
-                            </NitroLayoutGridColumn>
+                            </Column>
-                        </NitroLayoutGrid>
+                        </Grid>
                     </NitroCardContentView>
                 </NitroCardView> }
                 <CatalogGiftView />

src/views/friends/views/friend-bar/FriendBarView.tsx

@@ -1,5 +1,6 @@
 import { FC, useMemo, useState } from 'react';
-import { NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
+import { Flex } from '../../../../common/Flex';
+import { NitroLayoutButton } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
@@ -26,7 +27,7 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
     }, [ maxDisplayCount, indexOffset, onlineFriends ]);
 
     return (
-        <NitroLayoutFlex className="friend-bar align-items-center">
+        <Flex alignItems="center" className="friend-bar">
             <NitroLayoutButton className="friend-bar-button" variant="black" size="sm" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
                 <NitroLayoutBase className="fas fa-chevron-left" />
             </NitroLayoutButton>
@@ -37,6 +38,6 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
             <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
                 <i className="fas fa-chevron-right" />
             </button>
-        </NitroLayoutFlex>
+        </Flex>
     );
 }

src/views/notification-center/common/NotificationUtilities.ts

@@ -161,6 +161,8 @@ export class NotificationUtilities
 
     public static openUrl(url: string): void
     {
+        if(!url || !url.length) return;
+        
         if(url.startsWith('http'))
         {
             HabboWebTools.openWebPage(url);