Merge branch 'dev' into @update/groups

src/common/index.scss

@@ -6,7 +6,10 @@
 
     &.active {
         border-color: $grid-active-border-color !important;
-        background-color: $grid-active-bg-color;
+
+        &:not(.clear-bg) {
+            background-color: $grid-active-bg-color !important;
+        }
     }
 
     &.disabled {

src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx

@@ -26,7 +26,7 @@ export const AvatarEditorPaletteSetItem: FC<AvatarEditorPaletteSetItemProps> = p
     });
 
     return (
-        <LayoutGridItem itemHighlight itemColor={ colorItem.color } itemActive={ colorItem.isSelected } { ...rest }>
+        <LayoutGridItem itemHighlight itemColor={ colorItem.color } itemActive={ colorItem.isSelected } className="clear-bg" { ...rest }>
             { colorItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> }
             { children }
         </LayoutGridItem>

src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx

@@ -3,8 +3,7 @@ import { FC, useCallback, useRef } from 'react';
 import { GetRoomEngine } from '../../../../api';
 import { CatalogPurchasedEvent } from '../../../../events';
 import { useUiEvent } from '../../../../hooks';
-import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
+import { RoomPreviewerView, RoomPreviewerViewProps } from '../../../../views/shared/room-previewer/RoomPreviewerView';
-import { RoomPreviewerViewProps } from '../../../../views/shared/room-previewer/RoomPreviewerView.types';
 
 export const CatalogRoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 {

src/views/friends/FriendsContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, FC, ProviderProps, useContext } from 'react';
+import { MessengerFriend } from './common/MessengerFriend';
+import { MessengerRequest } from './common/MessengerRequest';
+import { MessengerSettings } from './common/MessengerSettings';
+
+interface IFriendsContext
+{
+    friends: MessengerFriend[];
+    requests: MessengerRequest[];
+    settings: MessengerSettings;
+    canRequestFriend: (userId: number) => boolean;
+    requestFriend: (userId: number, userName: string) => void;
+    acceptFriend: (userId: number) => void;
+    declineFriend: (userId: number, declineAll?: boolean) => void;
+}
+
+const FriendsContext = createContext<IFriendsContext>({
+    friends: null,
+    requests: null,
+    settings: null,
+    canRequestFriend: null,
+    requestFriend: null,
+    acceptFriend: null,
+    declineFriend: null
+});
+
+export const FriendsContextProvider: FC<ProviderProps<IFriendsContext>> = props =>
+{
+    return <FriendsContext.Provider value={ props.value }>{ props.children }</FriendsContext.Provider>
+}
+
+export const useFriendsContext = () => useContext(FriendsContext);

src/views/friends/FriendsView.tsx

@@ -12,7 +12,7 @@ import { FriendsHelper } from './common/FriendsHelper';
 import { MessengerFriend } from './common/MessengerFriend';
 import { MessengerRequest } from './common/MessengerRequest';
 import { MessengerSettings } from './common/MessengerSettings';
-import { FriendsContextProvider } from './context/FriendsContext';
+import { FriendsContextProvider } from './FriendsContext';
 import { FriendBarView } from './views/friend-bar/FriendBarView';
 import { FriendsListView } from './views/friends-list/FriendsListView';
 import { FriendsMessengerView } from './views/messenger/FriendsMessengerView';

src/views/friends/FriendsView.types.ts

@@ -1,6 +0,0 @@
-export class FriendListTabs
-{
-    public static readonly FRIENDS: string  = 'friendlist.friends';
-    public static readonly REQUESTS: string = 'friendlist.requests';
-    public static readonly SEARCH: string   = 'generic.search';
-}

src/views/friends/context/FriendsContext.tsx

@@ -1,19 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { FriendsContextProps, IFriendsContext } from './FriendsContext.type';
-
-const FriendsContext = createContext<IFriendsContext>({
-    friends: null,
-    requests: null,
-    settings: null,
-    canRequestFriend: null,
-    requestFriend: null,
-    acceptFriend: null,
-    declineFriend: null
-});
-
-export const FriendsContextProvider: FC<FriendsContextProps> = props =>
-{
-    return <FriendsContext.Provider value={ props.value }>{ props.children }</FriendsContext.Provider>
-}
-
-export const useFriendsContext = () => useContext(FriendsContext);

src/views/friends/context/FriendsContext.type.ts

@@ -1,20 +0,0 @@
-import { ProviderProps } from 'react';
-import { MessengerFriend } from '../common/MessengerFriend';
-import { MessengerRequest } from '../common/MessengerRequest';
-import { MessengerSettings } from '../common/MessengerSettings';
-
-export interface IFriendsContext
-{
-    friends: MessengerFriend[];
-    requests: MessengerRequest[];
-    settings: MessengerSettings;
-    canRequestFriend: (userId: number) => boolean;
-    requestFriend: (userId: number, userName: string) => void;
-    acceptFriend: (userId: number) => void;
-    declineFriend: (userId: number, declineAll?: boolean) => void;
-}
-
-export interface FriendsContextProps extends ProviderProps<IFriendsContext>
-{
-
-}

src/views/friends/views/friend-bar-item/FriendBarItemView.scss

@@ -1,35 +0,0 @@
-.friend-bar-item {
-    width: 130px;
-    margin: 0 3px;
-    z-index: 0;
-    position: relative;
-    padding-left:38px;
-    text-align: left;
-
-    &.friend-bar-item-active {
-        margin-bottom:21px;
-    }
-
-    .friend-bar-item-head {
-        &.avatar {
-            top: -30px;
-            left: -30px;
-        }
-        &.group {
-            top: -5px;
-            left: -5px;
-        }
-
-        pointer-events: none;
-    }
-
-    &.friend-bar-search {
-        .friend-bar-item-head {
-            top: -3px;
-            left: 5px;
-            width: 31px;
-            height: 34px;
-            background-image: url('../../../../assets/images/toolbar/friend-search.png');
-        } 
-    }
-}

src/views/friends/views/friend-bar-item/FriendBarItemView.types.ts

@@ -1,6 +0,0 @@
-import { MessengerFriend } from '../../common/MessengerFriend';
-
-export interface FriendBarItemViewProps
-{
-    friend: MessengerFriend;
-}

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

@@ -5,7 +5,12 @@ import { SendMessageHook } from '../../../../hooks/messages';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
-import { FriendBarItemViewProps } from './FriendBarItemView.types';
+import { MessengerFriend } from '../../common/MessengerFriend';
+
+interface FriendBarItemViewProps
+{
+    friend: MessengerFriend;
+}
 
 export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
 {

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

@@ -1,7 +1,42 @@
 .friend-bar {
+
     .friend-bar-button {
         z-index: 2;
     }
 
-    @import '../friend-bar-item/FriendBarItemView.scss';
+    .friend-bar-item {
+        width: 130px;
+        margin: 0 3px;
+        z-index: 0;
+        position: relative;
+        padding-left:38px;
+        text-align: left;
+    
+        &.friend-bar-item-active {
+            margin-bottom:21px;
+        }
+    
+        .friend-bar-item-head {
+            &.avatar {
+                top: -30px;
+                left: -30px;
+            }
+            &.group {
+                top: -5px;
+                left: -5px;
+            }
+    
+            pointer-events: none;
+        }
+    
+        &.friend-bar-search {
+            .friend-bar-item-head {
+                top: -3px;
+                left: 5px;
+                width: 31px;
+                height: 34px;
+                background-image: url('../../../../assets/images/toolbar/friend-search.png');
+            } 
+        }
+    }
 }

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

@@ -1,9 +1,14 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useMemo, useState } from 'react';
+import { Button } from '../../../../common';
 import { Flex } from '../../../../common/Flex';
-import { NitroLayoutButton } from '../../../../layout';
+import { MessengerFriend } from '../../common/MessengerFriend';
-import { NitroLayoutBase } from '../../../../layout/base';
+import { FriendBarItemView } from './FriendBarItemView';
-import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
+
-import { FriendBarViewProps } from './FriendBarView.types';
+interface FriendBarViewProps
+{
+    onlineFriends: MessengerFriend[];
+}
 
 export const FriendBarView: FC<FriendBarViewProps> = props =>
 {
@@ -28,16 +33,16 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
 
     return (
         <Flex alignItems="center" className="friend-bar">
-            <NitroLayoutButton className="friend-bar-button" variant="black" size="sm" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
+            <Button variant="black" className="friend-bar-button" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
-                <NitroLayoutBase className="fas fa-chevron-left" />
+                <FontAwesomeIcon icon="chevron-left" />
-            </NitroLayoutButton>
+            </Button>
             { Array.from(Array(maxDisplayCount), (e, i) =>
                 {
                     return <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />;
                 }) }
-            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
+            <Button variant="black" className="friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
-                <i className="fas fa-chevron-right" />
+                <FontAwesomeIcon icon="chevron-right" />
-            </button>
+            </Button>
         </Flex>
     );
 }

src/views/friends/views/friend-bar/FriendBarView.types.ts

@@ -1,5 +0,0 @@
-import { MessengerFriend } from './../../common/MessengerFriend';
-export interface FriendBarViewProps
-{
-    onlineFriends: MessengerFriend[];
-}

src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts

@@ -1,9 +0,0 @@
-import { NitroLayoutFlexProps } from '../../../../layout';
-import { MessengerFriend } from '../../common/MessengerFriend';
-
-export interface FriendsGroupItemViewProps extends NitroLayoutFlexProps
-{
-    friend: MessengerFriend;
-    selected?: boolean;
-    selectFriend: () => void;
-}

src/views/friends/views/friends-group/FriendsGroupItemView.tsx

@@ -3,10 +3,16 @@ import classNames from 'classnames';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
-import { NitroLayoutFlex, UserProfileIconView } from '../../../../layout';
+import { NitroLayoutFlex, NitroLayoutFlexProps, UserProfileIconView } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { MessengerFriend } from '../../common/MessengerFriend';
-import { FriendsGroupItemViewProps } from './FriendsGroupItemView.types';
+
+interface FriendsGroupItemViewProps extends NitroLayoutFlexProps
+{
+    friend: MessengerFriend;
+    selected?: boolean;
+    selectFriend: () => void;
+}
 
 export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
 {

src/views/friends/views/friends-group/FriendsGroupView.tsx

@@ -1,6 +1,13 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
-import { FriendsGroupItemView } from '../friends-group-item/FriendsGroupItemView';
+import { MessengerFriend } from '../../common/MessengerFriend';
-import { FriendsGroupViewProps } from './FriendsGroupView.types';
+import { FriendsGroupItemView } from './FriendsGroupItemView';
+
+interface FriendsGroupViewProps
+{
+    list: MessengerFriend[];
+    selectedFriendsIds: number[];
+    selectFriend: (userId: number) => void;
+}
 
 export const FriendsGroupView: FC<FriendsGroupViewProps> = props =>
 {

src/views/friends/views/friends-group/FriendsGroupView.types.ts

@@ -1,8 +0,0 @@
-import { MessengerFriend } from '../../common/MessengerFriend';
-
-export interface FriendsGroupViewProps
-{
-    list: MessengerFriend[];
-    selectedFriendsIds: number[];
-    selectFriend: (userId: number) => void;
-}

src/views/friends/views/friends-list/FriendsListView.tsx

@@ -4,12 +4,20 @@ import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import { MessengerFriend } from '../../common/MessengerFriend';
+import { MessengerRequest } from '../../common/MessengerRequest';
 import { FriendsGroupView } from '../friends-group/FriendsGroupView';
 import { FriendsRemoveConfirmationView } from '../friends-remove-confirmation/FriendsRemoveConfirmationView';
 import { FriendsRequestView } from '../friends-request/FriendsRequestView';
 import { FriendsRoomInviteView } from '../friends-room-invite/FriendsRoomInviteView';
 import { FriendsSearchView } from '../friends-search/FriendsSearchView';
-import { FriendsListViewProps } from './FriendsListView.types';
+
+interface FriendsListViewProps
+{
+    onCloseClick: () => void;
+    onlineFriends: MessengerFriend[];
+    offlineFriends: MessengerFriend[];
+    friendRequests: MessengerRequest[];
+}
 
 const MODE_FRIENDS: number = 0;
 const MODE_SEARCH: number = 1;

src/views/friends/views/friends-list/FriendsListView.types.ts

@@ -1,9 +0,0 @@
-import { MessengerFriend } from './../../common/MessengerFriend';
-import { MessengerRequest } from './../../common/MessengerRequest';
-export interface FriendsListViewProps
-{
-    onCloseClick: () => void;
-    onlineFriends: MessengerFriend[];
-    offlineFriends: MessengerFriend[];
-    friendRequests: MessengerRequest[];
-}

src/views/friends/views/friends-remove-confirmation/FriendsRemoveConfirmationView.tsx

@@ -1,7 +1,14 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { FriendsRemoveConfirmationViewProps } from './FriendsRemoveConfirmationView.types';
+
+interface FriendsRemoveConfirmationViewProps
+{
+    selectedFriendsIds: number[];
+    removeFriendsText: string;
+    removeSelectedFriends: () => void;
+    onCloseClick: () => void;
+}
 
 export const FriendsRemoveConfirmationView: FC<FriendsRemoveConfirmationViewProps> = props =>
 {

src/views/friends/views/friends-remove-confirmation/FriendsRemoveConfirmationView.types.ts

@@ -1,7 +0,0 @@
-export interface FriendsRemoveConfirmationViewProps
-{
-    selectedFriendsIds: number[];
-    removeFriendsText: string;
-    removeSelectedFriends: () => void;
-    onCloseClick: () => void;
-}

src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts

@@ -1,6 +0,0 @@
-import { MessengerRequest } from '../../common/MessengerRequest';
-
-export interface FriendsRequestItemViewProps
-{
-    request: MessengerRequest;
-}

src/views/friends/views/friends-request/FriendsRequestItemView.tsx

@@ -1,8 +1,13 @@
 import { FC } from 'react';
 import { NitroCardAccordionItemView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
-import { useFriendsContext } from '../../context/FriendsContext';
+import { MessengerRequest } from '../../common/MessengerRequest';
-import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
+import { useFriendsContext } from '../../FriendsContext';
+
+interface FriendsRequestItemViewProps
+{
+    request: MessengerRequest;
+}
 
 export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
 {

src/views/friends/views/friends-request/FriendsRequestView.tsx

@@ -1,9 +1,14 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../api';
 import { NitroCardAccordionSetView, NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
-import { useFriendsContext } from '../../context/FriendsContext';
+import { MessengerRequest } from '../../common/MessengerRequest';
-import { FriendsRequestItemView } from '../friends-request-item/FriendsRequestItemView';
+import { useFriendsContext } from '../../FriendsContext';
-import { FriendsRequestViewProps } from './FriendsRequestView.types';
+import { FriendsRequestItemView } from './FriendsRequestItemView';
+
+interface FriendsRequestViewProps
+{
+    requests: MessengerRequest[];
+}
 
 export const FriendsRequestView: FC<FriendsRequestViewProps> = props =>
 {

src/views/friends/views/friends-request/FriendsRequestView.types.ts

@@ -1,6 +0,0 @@
-import { MessengerRequest } from '../../common/MessengerRequest';
-
-export interface FriendsRequestViewProps
-{
-    requests: MessengerRequest[];
-}

src/views/friends/views/friends-room-invite/FriendsRoomInviteView.tsx

@@ -1,7 +1,13 @@
 import { FC, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { FriendsRoomInviteViewProps } from './FriendsRoomInviteView.types';
+
+interface FriendsRoomInviteViewProps
+{
+    selectedFriendsIds: number[];
+    onCloseClick: () => void;
+    sendRoomInvite: (message: string) => void;
+}
 
 export const FriendsRoomInviteView: FC<FriendsRoomInviteViewProps> = props =>
 {

src/views/friends/views/friends-room-invite/FriendsRoomInviteView.types.ts

@@ -1,6 +0,0 @@
-export interface FriendsRoomInviteViewProps
-{
-    selectedFriendsIds: number[];
-    onCloseClick: () => void;
-    sendRoomInvite: (message: string) => void;
-}

src/views/friends/views/friends-search/FriendsSearchView.tsx

@@ -4,7 +4,7 @@ import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
 import { NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
-import { useFriendsContext } from '../../context/FriendsContext';
+import { useFriendsContext } from '../../FriendsContext';
 
 export const FriendsSearchView: FC<{}> = props =>
 {

src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts

@@ -1,8 +0,0 @@
-import { MessengerThread } from '../../common/MessengerThread';
-import { MessengerThreadChatGroup } from '../../common/MessengerThreadChatGroup';
-
-export interface FriendsMessengerThreadGroupProps
-{
-    thread: MessengerThread;
-    group: MessengerThreadChatGroup;
-}

src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts

@@ -1,6 +0,0 @@
-import { MessengerThread } from '../../common/MessengerThread';
-
-export interface FriendsMessengerThreadViewProps
-{
-    thread: MessengerThread;
-}

src/views/friends/views/messenger/FriendsMessengerThreadGroup.tsx

@@ -4,9 +4,16 @@ import { NitroLayoutFlex } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { GroupType } from '../../common/GroupType';
+import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
+import { MessengerThreadChatGroup } from '../../common/MessengerThreadChatGroup';
 import { getGroupChatData } from '../../common/Utils';
-import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
+
+interface FriendsMessengerThreadGroupProps
+{
+    thread: MessengerThread;
+    group: MessengerThreadChatGroup;
+}
 
 export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
 {

src/views/friends/views/messenger/FriendsMessengerThreadView.tsx

@@ -1,6 +1,11 @@
 import { FC } from 'react';
-import { FriendsMessengerThreadGroup } from '../messenger-thread-group/FriendsMessengerThreadGroup';
+import { MessengerThread } from '../../common/MessengerThread';
-import { FriendsMessengerThreadViewProps } from './FriendsMessengerThreadView.types';
+import { FriendsMessengerThreadGroup } from './FriendsMessengerThreadGroup';
+
+interface FriendsMessengerThreadViewProps
+{
+    thread: MessengerThread;
+}
 
 export const FriendsMessengerThreadView: FC<FriendsMessengerThreadViewProps> = props =>
 {

src/views/friends/views/messenger/FriendsMessengerView.tsx

@@ -11,8 +11,8 @@ import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { ItemCountView } from '../../../shared/item-count/ItemCountView';
 import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
-import { useFriendsContext } from '../../context/FriendsContext';
+import { useFriendsContext } from '../../FriendsContext';
-import { FriendsMessengerThreadView } from '../messenger-thread/FriendsMessengerThreadView';
+import { FriendsMessengerThreadView } from './FriendsMessengerThreadView';
 
 export const FriendsMessengerView: FC<{}> = props =>
 {

src/views/shared/badge-image/badge-info/BadgeInformationView.tsx

@@ -1,5 +1,10 @@
 import { FC } from 'react';
-import { BadgeInformationViewProps } from './BadgeInformationView.types';
+
+interface BadgeInformationViewProps
+{
+    title: string;
+    description: string;
+}
 
 export const BadgeInformationView: FC<BadgeInformationViewProps> = props =>
 {

src/views/shared/badge-image/badge-info/BadgeInformationView.types.ts

@@ -1,5 +0,0 @@
-export interface BadgeInformationViewProps
-{
-    title: string;
-    description: string;
-}

src/views/shared/friendly-time/FriendlyTimeView.tsx

@@ -1,16 +1,19 @@
 import { FriendlyTime } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { FriendlyTimeViewProps } from './FriendlyTimeView.types';
+import { Base, BaseProps } from '../../../common';
+
+interface FriendlyTimeViewProps extends BaseProps<HTMLDivElement>
+{
+    seconds: number;
+    isShort?: boolean;
+}
 
 export const FriendlyTimeView: FC<FriendlyTimeViewProps> = props =>
 {
-    const { seconds = 0, isShort = false, ...rest } = props;
+    const { seconds = 0, isShort = false, children = null, ...rest } = props;
     const [ updateId, setUpdateId ] = useState(-1);
 
-    const getStartSeconds = useMemo(() =>
+    const getStartSeconds = useMemo(() => (Math.round(new Date().getSeconds()) - seconds), [ seconds ]);
-    {
-        return (Math.round(new Date().getSeconds()) - seconds);
-    }, [ seconds ]);
 
     const getFriendlyTime = useCallback(() =>
     {
@@ -28,7 +31,5 @@ export const FriendlyTimeView: FC<FriendlyTimeViewProps> = props =>
         return () => clearInterval(interval);
     }, []);
 
-    return (
+    return <Base { ...rest }>{ getFriendlyTime() }</Base>;
-        <div { ...rest }>{ getFriendlyTime() }</div>
-    );
 }

src/views/shared/friendly-time/FriendlyTimeView.types.ts

@@ -1,7 +0,0 @@
-import { DetailsHTMLAttributes } from 'react';
-
-export interface FriendlyTimeViewProps extends DetailsHTMLAttributes<HTMLDivElement>
-{
-    seconds: number;
-    isShort?: boolean;
-}

src/views/shared/item-count/ItemCountView.tsx

@@ -1,5 +1,9 @@
 import { FC } from 'react';
-import { ItemCountViewProps } from './ItemCountView.types';
+
+interface ItemCountViewProps
+{
+    count: number;
+}
 
 export const ItemCountView: FC<ItemCountViewProps> = props =>
 {

src/views/shared/item-count/ItemCountView.types.ts

@@ -1,4 +0,0 @@
-export interface ItemCountViewProps
-{
-    count: number;
-}

src/views/shared/pet-image/PetImageView.tsx

@@ -1,7 +1,19 @@
-import { PetFigureData, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
+import { PetCustomPart, PetFigureData, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
 import { GetRoomEngine } from '../../../api';
-import { PetImageViewProps } from './PetImageView.types';
+
+interface PetImageViewProps
+{
+    figure?: string;
+    typeId?: number;
+    paletteId?: number;
+    color?: number;
+    customParts?: PetCustomPart[];
+    posture?: string;
+    headOnly?: boolean;
+    direction?: number;
+    scale?: number;
+}
 
 export const PetImageView: FC<PetImageViewProps> = props =>
 {

src/views/shared/pet-image/PetImageView.types.ts

@@ -1,14 +0,0 @@
-import { PetCustomPart } from '@nitrots/nitro-renderer';
-
-export interface PetImageViewProps
-{
-    figure?: string;
-    typeId?: number;
-    paletteId?: number;
-    color?: number;
-    customParts?: PetCustomPart[];
-    posture?: string;
-    headOnly?: boolean;
-    direction?: number;
-    scale?: number;
-}

src/views/shared/rarity-level/RarityLevelView.tsx

@@ -1,6 +1,10 @@
 import { FC, useMemo } from 'react';
-import { Base } from '../../../common/Base';
+import { Base, BaseProps } from '../../../common';
-import { RarityLevelViewProps } from './RarityLevelView.types';
+
+interface RarityLevelViewProps extends BaseProps<HTMLDivElement>
+{
+    level: number;
+}
 
 export const RarityLevelView: FC<RarityLevelViewProps> = props =>
 {

src/views/shared/rarity-level/RarityLevelView.types.ts

@@ -1,6 +0,0 @@
-import { BaseProps } from '../../../common/Base';
-
-export interface RarityLevelViewProps extends BaseProps<HTMLDivElement>
-{
-    level: number;
-}

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

@@ -1,7 +1,12 @@
-import { ColorConverter, IRoomRenderingCanvas, TextureUtils } from '@nitrots/nitro-renderer';
+import { ColorConverter, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { GetNitroInstance } from '../../../api';
-import { RoomPreviewerViewProps } from './RoomPreviewerView.types';
+
+export interface RoomPreviewerViewProps
+{
+    roomPreviewer: RoomPreviewer;
+    height?: number;
+}
 
 export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 {

src/views/shared/room-previewer/RoomPreviewerView.types.ts

@@ -1,7 +0,0 @@
-import { RoomPreviewer } from '@nitrots/nitro-renderer';
-
-export interface RoomPreviewerViewProps
-{
-    roomPreviewer: RoomPreviewer;
-    height?: number;
-}