Update layout

src/layout/base/NitroLayoutBase.tsx

@@ -3,7 +3,7 @@ import { NitroLayoutBaseProps } from './NitroLayoutBase.types';
 
 export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
 {
-    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+    const { className = '', overflow = null, position = null, gap = null, ref = null, innerRef = null, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
@@ -21,7 +21,7 @@ export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
     }, [ className, overflow, position, gap ]);
 
     return (
-        <div className={ getClassName } { ...rest }>
+        <div className={ getClassName } ref={ innerRef } { ...rest }>
             { children }
         </div>
     );

src/layout/base/NitroLayoutBase.types.ts

@@ -1,8 +1,9 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { DetailedHTMLProps, HTMLAttributes, LegacyRef } from 'react';
 import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
 
 export interface NitroLayoutBaseProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 {
+    innerRef?: LegacyRef<HTMLDivElement>;
     overflow?: NitroLayoutOverflow;
     position?: NitroLayoutPosition;
     gap?: NitroLayoutSpacing;

src/layout/card/accordion/set/NitroCardAccordionSetView.scss

@@ -3,12 +3,10 @@
     &.active {
         height: 100%;
         background: rgba($white, 0.5);
+        border-bottom: 1px solid rgba($black, 0.2);
     }
 
     .nitro-card-accordion-set-header {
         border-bottom: 1px solid rgba($black, 0.2);
     }
-
-    .nitro-card-accordion-set-content {
-    }
 }

src/layout/common/NitroLayoutVariant.type.ts

@@ -1 +1 @@
-export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary';
+export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black';

src/layout/index.ts

@@ -14,3 +14,4 @@ export * from './notification-alert';
 export * from './notification-bubble';
 export * from './transitions';
 export * from './trophy';
+export * from './user-profile-icon';

src/layout/user-profile-icon/UserProfileIconView.tsx

@@ -0,0 +1,26 @@
+import { FC, useMemo } from 'react';
+import { GetUserProfile } from '../../api';
+import { NitroLayoutBase } from '../base';
+import { UserProfileIconViewProps } from './UserProfileIconView.types';
+
+export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
+{
+    const { userId = 0, userName = null } = props;
+
+    const { className = '', children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'nitro-friends-spritesheet icon-profile-sm me-1 cursor-pointer';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return (
+        <NitroLayoutBase className={ getClassName } onClick={ event => GetUserProfile(userId) }>
+            { children }
+        </NitroLayoutBase>
+    );
+}

src/layout/user-profile-icon/UserProfileIconView.types.ts

@@ -0,0 +1,7 @@
+import { NitroLayoutBaseProps } from '../base';
+
+export interface UserProfileIconViewProps extends NitroLayoutBaseProps
+{
+    userId?: number;
+    userName?: string;
+}

src/layout/user-profile-icon/index.ts

@@ -0,0 +1,2 @@
+export * from './UserProfileIconView';
+export * from './UserProfileIconView.types';

src/views/chat-history/ChatHistoryView.scss

@@ -1,18 +1,13 @@
-.nitro-chat-history
-{
-    width: 300px;
+.nitro-chat-history {
+    width: $chat-history-width;
+    height: $chat-history-height;
 
-    .chat-history-content
-    {
-
-        .chat-history-container
-        {
+    .chat-history-content {
+        .chat-history-container {
             min-height: 200px;
 
-            .chat-history-list
-            {
-                .chathistory-entry
-                {
+            .chat-history-list {
+                .chathistory-entry {
                     .light {
                         background-color: #121f27;
                     }

src/views/shared/user-profile-icon/UserProfileIconView.tsx

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { GetUserProfile } from '../../../api';
-import { UserProfileIconViewProps } from './UserProfileIconView.types';
-
-export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
-{
-    const { userId = 0, userName = null } = props;
-
-    return (<>
-        <i className="icon icon-user-profile me-1 cursor-pointer" onClick={ () => GetUserProfile(userId) } />
-    </>);
-}

src/views/shared/user-profile-icon/UserProfileIconView.types.ts

@@ -1,5 +0,0 @@
-export interface UserProfileIconViewProps
-{
-    userId?: number;
-    userName?: string;
-}