Update layout

src/layout/card/NitroCardView.scss

@@ -5,15 +5,26 @@ $nitro-card-tabs-height: 33px;
     pointer-events: all;
     resize: both;
 
-    &.theme-dark {
-        padding: 2px;
-        background-color: #1C323F;
-        border: 2px solid rgba(255, 255, 255, 0.5);
-        border-radius: 0.25rem;
-    }
-
     &.theme-primary {
         border: $border-width solid $border-color;
+
+        .nitro-card-header-container {
+            background-color: $primary;
+
+            .nitro-card-header {
+                .header-text {
+                    color: $white;
+                }
+            }
+        }
+
+        .nitro-card-tabs {
+            background-color: $secondary;
+        }
+
+        .content-area {
+            background-color: $light;
+        }
     }
 }
 
@@ -27,7 +38,6 @@ $nitro-card-tabs-height: 33px;
     overflow: hidden;
 
     @include media-breakpoint-down(lg) {
-        
         .draggable-window {
             top: 0 !important;
             left: 0 !important;
@@ -41,15 +51,10 @@ $nitro-card-tabs-height: 33px;
             max-width: 75%;
             max-height: calc(100% - 20px);
             margin: 10px auto 10px;
-    
-            // &.rounded {
-            //     border-radius: 0 !important;
-            // }
         }
     }
 
     @include media-breakpoint-down(sm) {
-        
         .draggable-window {
             top: 0 !important;
             left: 0 !important;
@@ -72,8 +77,8 @@ $nitro-card-tabs-height: 33px;
     }
 }
 
-@import './accordion/NitroCardAccordionView';
+@import "./accordion/NitroCardAccordionView";
-@import './content/NitroCardContentView';
+@import "./content/NitroCardContentView";
-@import './grid/NitroCardGridView';
+@import "./grid/NitroCardGridView";
-@import './header/NitroCardHeaderView';
+@import "./header/NitroCardHeaderView";
-@import './tabs/NitroCardTabsView';
+@import "./tabs/NitroCardTabsView";

src/layout/card/accordion/NitroCardAccordionView.scss

@@ -1 +1 @@
-@import './item/NitroCardAccordionItemView';
+@import "./set/NitroCardAccordionSetView";

src/layout/card/accordion/NitroCardAccordionView.tsx

@@ -6,7 +6,7 @@ export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
     const { className = '' } = props;
 
     return (
-        <div className={ 'nitro-card-accordion bg-light text-black ' + className }>
+        <div className={ 'nitro-card-accordion text-black ' + className }>
             { props.children }
         </div>
     );

src/layout/card/accordion/index.ts

@@ -1,3 +1,4 @@
 export * from './item';
 export * from './NitroCardAccordionView';
 export * from './NitroCardAccordionView.types';
+export * from './set';

src/layout/card/accordion/item/NitroCardAccordionItemView.scss

@@ -1,9 +0,0 @@
-.nitro-card-accordion-item {
-    .nitro-card-accordion-item-header {
-        border-bottom: 1px solid rgba($black, 0.2);
-    }
-
-    .nitro-card-accordion-item-content {
-        background: rgba($white, 0.5);
-    }
-}

src/layout/card/accordion/item/NitroCardAccordionItemView.tsx

@@ -1,30 +1,14 @@
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
+import { NitroLayoutBase } from '../../../base';
 import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types';
 
 export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
 {
-    const { className = '', headerClassName = '', contentClassName = '', headerText = '', defaultState = false } = props;
+    const { children = null, ...rest } = props;
-
-    const [ isExpanded, setIsExpanded ] = useState(false);
-
-    useEffect(() =>
-    {
-        setIsExpanded(defaultState);
-    }, [ defaultState ]);
 
     return (
-        <div className={ 'nitro-card-accordion-item ' + className + (isExpanded ? ' active' : '') }>
+        <NitroLayoutBase className="px-2 py-1 d-flex gap-1 align-items-center">
-            <div className={ 'nitro-card-accordion-item-header px-2 py-1 d-flex ' + headerClassName } onClick={ () => setIsExpanded((value) => !value) }>
+            { children }
-                <div className="w-100">
+        </NitroLayoutBase>
-                    { headerText }
-                </div>
-                <div className="justify-self-center">
-                    <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } />
-                </div>
-            </div>
-            <div className={ 'nitro-card-accordion-item-content ' + contentClassName + (!isExpanded ? ' d-none' : '') }>
-                { props.children }
-            </div>
-        </div>
     );
 }

src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts

@@ -1,8 +1,6 @@
-export interface NitroCardAccordionItemViewProps
+import { NitroLayoutBaseProps } from '../../../base';
+
+export interface NitroCardAccordionItemViewProps extends NitroLayoutBaseProps
 {
-    className?: string;
+
-    headerClassName?: string;
-    contentClassName?: string;
-    headerText: string;
-    defaultState?: boolean;
 }

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

@@ -0,0 +1,9 @@
+.nitro-card-accordion-set {
+    .nitro-card-accordion-set-header {
+        border-bottom: 1px solid rgba($black, 0.2);
+    }
+
+    .nitro-card-accordion-set-content {
+        background: rgba($white, 0.5);
+    }
+}

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

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { NitroLayoutFlex } from '../../..';
+import { NitroLayoutBase } from '../../../base';
+import { NitroCardAccordionSetViewProps } from './NitroCardAccordionSetView.types';
+
+export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
+{
+    const { headerText = '', isExpanded = false, className = '', children = null, ...rest } = props;
+    const [ isOpen, setIsOpen ] = useState(false);
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'nitro-card-accordion-set';
+
+        if(isOpen) newClassName += ' active';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, isOpen ]);
+
+    useEffect(() =>
+    {
+        setIsOpen(isExpanded);
+    }, [ isExpanded ]);
+
+    return (
+        <NitroLayoutBase className={ getClassName } { ...rest }>
+            <NitroLayoutFlex className="nitro-card-accordion-set-header px-2 py-1" onClick={ event => setIsOpen(!isOpen) }>
+                <div className="w-100">
+                    { headerText }
+                </div>
+                <div className="justify-self-center">
+                    <i className={ 'fas fa-caret-' + (isOpen ? 'up' : 'down') } />
+                </div>
+            </NitroLayoutFlex>
+            <NitroLayoutBase className={ 'nitro-card-accordion-set-content ' + classNames({ 'd-none': !isOpen }) }>
+                { children }
+            </NitroLayoutBase>
+        </NitroLayoutBase>
+    );
+}

src/layout/card/accordion/set/NitroCardAccordionSetView.types.ts

@@ -0,0 +1,7 @@
+import { NitroLayoutBaseProps } from '../../../base';
+
+export interface NitroCardAccordionSetViewProps extends NitroLayoutBaseProps
+{
+    headerText: string;
+    isExpanded?: boolean;
+}

src/layout/card/accordion/set/index.ts

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

src/layout/card/content/NitroCardContentView.tsx

@@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid ${ theme === 'primary' ? 'bg-light' : ''} content-area d-flex flex-column overflow-auto theme-${theme} ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );

src/layout/card/grid/item/NitroCardGridItemView.scss

@@ -22,12 +22,6 @@
         background-color: rgba($success, 0.4);
     }
 
-    .badge {
-        top: 2px;
-        right: 2px;
-        font-size: 8px;
-    }
-
     .avatar-image {
         background-position-y: 10px;
     }

src/layout/card/grid/item/NitroCardGridItemView.tsx

@@ -1,4 +1,5 @@
 import { FC, useMemo } from 'react';
+import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView';
 import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
 import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
@@ -39,7 +40,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
     return (
         <div className={ getClassName } style={ getStyle } { ...rest }>
             { (itemCount > itemCountMinimum) &&
-                <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
+                <ItemCountView count={ itemCount } /> }
             { (itemUniqueNumber > 0) && 
                 <div className="position-absolute unique-item-counter">
                     <LimitedEditionStyledNumberView value={ itemUniqueNumber } />

src/layout/card/header/NitroCardHeaderView.scss

@@ -1,64 +1,66 @@
-.nitro-card-header {
+.nitro-card-header-container {
-    min-height: 33px;
+    .nitro-card-header {
-    max-height: 33px;
+        min-height: 33px;
-    white-space: nowrap;
+        max-height: 33px;
+        white-space: nowrap;
 
-    .header-text {
+        .header-text {
-        margin: 0 35px;
+            margin: 0;
-    }
+        }
 
-    &.simple-header {
+        &.simple-header {
-        min-height: 28px;
+            min-height: 28px;
+
+            .header-close {
+                font-size: 12px;
+            }
+        }
+
+        &.theme-dark {
+            background-color: #3d5f6e !important;
+            color: #fff;
+        }
+
+        .bg-tertiary-split {
+            position: relative;
+            border-bottom: 2px solid darken($quaternary, 5);
+            box-shadow: 0 2px white;
+            width: 100%;
+            margin: 0;
+
+            &:before {
+                position: absolute;
+                content: " ";
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 2px;
+                background-color: rgba($white, 0.3);
+            }
+        }
 
         .header-close {
-            font-size: 12px;
+            right: 6px;
-        }
+            border-radius: $border-radius;
-    }
+            box-shadow: 0 0 0 1.5px $white;
+            border: 2px solid #921911;
+            background: repeating-linear-gradient(
+                rgba(245, 80, 65, 1),
+                rgba(245, 80, 65, 1) 50%,
+                rgba(194, 48, 39, 1) 50%,
+                rgba(194, 48, 39, 1) 100%
+            );
+            cursor: pointer;
+            line-height: 1;
+            padding: 1px 3px;
 
-    &.theme-dark {
+            &:hover {
-        background-color: #3d5f6e !important;
+                filter: brightness(1.2);
-        color: #fff;
+            }
-    }
 
-    .bg-tertiary-split {
+            &:active {
-        position: relative;
+                filter: brightness(0.8);
-        border-bottom: 2px solid darken($quaternary, 5);
+            }
-        box-shadow: 0 2px white;
-        width: 100%;
-        margin: 0;
-
-        &:before {
-            position: absolute;
-            content: " ";
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background-color: rgba($white, 0.3);
-        }
-    }
-
-    .header-close {
-        right: 6px;
-        border-radius: $border-radius;
-        box-shadow: 0 0 0 1.5px $white;
-        border: 2px solid #921911;
-        background: repeating-linear-gradient(
-            rgba(245, 80, 65, 1),
-            rgba(245, 80, 65, 1) 50%,
-            rgba(194, 48, 39, 1) 50%,
-            rgba(194, 48, 39, 1) 100%
-        );
-        cursor: pointer;
-        line-height: 1;
-        padding: 1px 3px;
-
-        &:hover {
-            filter: brightness(1.2);
-        }
-
-        &:active {
-            filter: brightness(0.8);
         }
     }
 }

src/layout/card/header/NitroCardHeaderView.tsx

@@ -4,7 +4,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, onCloseClick = null, theme= 'primary' } = props;
+    const { headerText = null, onCloseClick = null, theme = 'primary' } = props;
     const { simple = false } = useNitroCardContext();
 
     const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
@@ -16,10 +16,10 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     if(simple)
     {
         return (
-            <div className="container-fluid bg-light">
+            <div className="drag-handler container-fluid nitro-card-header-container bg-tertiary-split">
-                <div className="row nitro-card-header simple-header overflow-hidden">
+                <div className="row nitro-card-header overflow-hidden">
-                    <div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
+                    <div className="d-flex justify-content-center align-items-center w-100 position-relative">
-                        <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
+                        <div className="h5 text-shadow header-text">{ headerText }</div>
                         <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                             <i className="fas fa-times" />
                         </div>
@@ -30,10 +30,10 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     }
 
     return (
-        <div className="drag-handler container-fluid bg-primary">
+        <div className="drag-handler container-fluid nitro-card-header-container">
-            <div className={`row nitro-card-header overflow-hidden theme-${theme}`}>
+            <div className="row nitro-card-header overflow-hidden">
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
-                    <div className="h4 text-white text-shadow header-text">{ headerText }</div>
+                    <div className="h4 text-shadow header-text">{ headerText }</div>
                     <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                         <i className="fas fa-times" />
                     </div>

src/layout/card/tabs/NitroCardTabsView.scss

@@ -2,6 +2,4 @@
     min-height: $nitro-card-tabs-height;
     max-height: $nitro-card-tabs-height;
     border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-
-    @import './tabs-item/NitroCardTabsItemView';
 }

src/layout/card/tabs/NitroCardTabsView.tsx

@@ -4,8 +4,8 @@ import { NitroCardTabsViewProps } from './NitroCardTabsView.types';
 export const NitroCardTabsView: FC<NitroCardTabsViewProps> = props =>
 {
     return (
-        <div className="container-fluid d-flex bg-secondary pt-1 nitro-card-tabs justify-content-center">
+        <div className="container-fluid d-flex pt-1 nitro-card-tabs justify-content-center">
-            <ul className="nav nav-tabs border-0">
+            <ul className="nav nav-tabs border-0 gap-1">
                 { props.children }
             </ul>
         </div>

src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss

@@ -1,13 +0,0 @@
-.nav-item {
-
-    &:last-child() {
-        margin-right: 0 !important;
-    }
-
-    .count {
-        color: $white;
-        font-size: 10px;
-        line-height: 10px;
-        padding: 2px 3px;
-    }
-}

src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { FC } from 'react';
+import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView';
 import { NitroCardTabsItemViewProps } from './NitroCardTabsItemView.types';
 
 export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
@@ -7,12 +8,10 @@ export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
     const { children = null, isActive = false, count = 0, onClick = null } = props;
 
     return (
-        <li className="nav-item me-1 cursor-pointer" onClick={ onClick }>
+        <li className={ 'nav-link cursor-pointer position-relative' + classNames({ ' active': isActive }) } onClick={ onClick }>
-            <span className={ 'nav-link ' + classNames({ 'active': isActive }) }>
+            { children }
-                { children }
+            { (count > 0) &&
-                { (count > 0) &&
+                <ItemCountView count={ count } /> }
-                    <span className="bg-danger ms-1 rounded count">{ count }</span> }
-            </span>
         </li>
     );
 }