Update navigator

src/views/navigator/NavigatorView.tsx

@@ -140,7 +140,7 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
                         </button>
                     </div>
                     <NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
-                    <TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 200 }>
+                    <TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 150 }>
                         <NavigatorResultListsView resultLists={ searchResults } />
                     </TransitionAnimation>
                 </div>

src/views/navigator/result-lists/NavigatorResultListsView.tsx

@@ -9,7 +9,7 @@ export function NavigatorResultListsView(props: NavigatorResultListsViewProps):
         <div className="nitro-navigator-result-lists w-100">
             { resultLists && resultLists.length && resultLists.map((resultList, index) =>
                 {
-                    return <NavigatorResultListView key={ index } resultList={ resultList } isLast={ index + 1 === resultLists.length }  />
+                    return <NavigatorResultListView key={ index } resultList={ resultList } />
                 })
             }
         </div>

src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx

@@ -6,7 +6,7 @@ import { NavigatorResultView } from './result/NavigatorResultView';
 
 export function NavigatorResultListView(props: NavigatorResultListViewProps): JSX.Element
 {
-    const { resultList = null, isLast = false } = props;
+    const { resultList = null } = props;
 
     const [ isExtended, setIsExtended ]     = useState(true);
     const [ displayMode, setDisplayMode ]   = useState<number>(0);
@@ -55,12 +55,10 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
                 <div className="align-self-center w-100 ml-2">{ LocalizeText(getListCode()) }</div>
                 <i className={ "fas " + classNames({ 'fa-bars': displayMode === NavigatorResultListViewDisplayMode.LIST, 'fa-th': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }></i>
             </div>
-            <div className={ 'row row-grid row-cols-' + classNames({ '1': displayMode === NavigatorResultListViewDisplayMode.LIST, '2': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS }) }>
+            <div className={ 'row mx-n2 row-cols-' + classNames({ '1': displayMode === NavigatorResultListViewDisplayMode.LIST, '2': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS }) }>
                 { isExtended && resultList && resultList.rooms.map((room, index) =>
                     {
-                        return <div className="col">
+                        return <NavigatorResultView key={ index } result={ room } />
-                            <NavigatorResultView key={ index } result={ room } />
-                        </div>
                     })
                 }
             </div>

src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts

@@ -3,7 +3,6 @@ import { NavigatorSearchResultList } from 'nitro-renderer';
 export interface NavigatorResultListViewProps
 {
     resultList: NavigatorSearchResultList;
-    isLast: boolean;
 }
 
 export class NavigatorResultListViewDisplayMode

src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss

@@ -6,21 +6,32 @@
 }
 
 .nitro-navigator-result-list {
-    .row {
+
-        &.row-cols-1 {
-            .col:nth-child(odd) {
     .nitro-navigator-result {
         border-radius: $border-radius;
-                    background: $secondary !important;
+        background: $secondary;
+    }
+
+    .row {
+
+        &.row-cols-1 {
+
+            .col:nth-child(even) {
+
+                .nitro-navigator-result {
+                    border-radius: $border-radius;
+                    background: $primary !important;
                 }
             } 
         }
 
         &.row-cols-2 {
-            .col {
+
+            .col:nth-child(4n+3),
+            .col:nth-child(4n+4) {
                 .nitro-navigator-result {
                     border-radius: $border-radius;
-                    background: $secondary !important;
+                    background: $primary !important;
                 }
             }
         }

src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx

@@ -39,6 +39,7 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
     }
 
     return (
+        <div className="col px-2">
             <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
                 <div className="d-flex justify-content-between w-100 px-2 py-1">
                     <div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
@@ -58,5 +59,6 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
                     </div>
                 </div>
             </div>
+        </div>
     );
 }