Layout updates

.prettierignore

@@ -0,0 +1 @@
+*.scss

src/common/Button.tsx

@@ -7,11 +7,12 @@ export interface ButtonProps extends FlexProps
 {
     variant?: ColorVariantType;
     size?: ButtonSizeType;
+    disabled?: boolean;
 }
 
 export const Button: FC<ButtonProps> = props =>
 {
-    const { variant = 'primary', size = null, classNames = [], ...rest } = props;
+    const { variant = 'primary', size = null, disabled = false, classNames = [], ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -21,10 +22,12 @@ export const Button: FC<ButtonProps> = props =>
 
         if(size) newClassNames.push('btn-' + size);
 
+        if(disabled) newClassNames.push('disabled');
+
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ variant, size, classNames ]);
+    }, [ variant, size, disabled, classNames ]);
 
     return <Flex center classNames={ getClassNames } { ...rest } />;
 }

src/common/Grid.tsx

@@ -17,7 +17,9 @@ export const Grid: FC<GridProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'h-100' ];
+        const newClassNames: string[] = [];
+
+        if(!grow) newClassNames.push('h-100');
 
         if(inline) newClassNames.push('inline-grid');
         else newClassNames.push('grid');
@@ -27,7 +29,7 @@ export const Grid: FC<GridProps> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ inline, gap, classNames ]);
+    }, [ grow, inline, gap, classNames ]);
 
     const getStyle = useMemo(() =>
     {

src/common/Text.tsx

@@ -1,19 +1,22 @@
 import { FC, useMemo } from 'react';
 import { Base, BaseProps } from './Base';
 import { ColorVariantType } from './types/ColorVariantType';
+import { FontSizeType } from './types/FontSizeType';
 import { FontWeightType } from './types/FontWeightType';
 
 export interface TextProps extends BaseProps<HTMLDivElement>
 {
     variant?: ColorVariantType;
     fontWeight?: FontWeightType;
+    fontSize?: FontSizeType;
     underline?: boolean;
+    truncate?: boolean;
     center?: boolean;
 }
 
 export const Text: FC<TextProps> = props =>
 {
-    const { variant = 'black', fontWeight = null, underline = false, center = false, ...rest } = props;
+    const { variant = 'black', fontWeight = null, fontSize = 0, underline = false, truncate = false, center = false, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -23,12 +26,16 @@ export const Text: FC<TextProps> = props =>
 
         if(fontWeight) newClassNames.push('fw-' + fontWeight);
 
+        if(fontSize) newClassNames.push('fs-' + fontSize);
+
         if(underline) newClassNames.push('text-decoration-underline');
 
+        if(truncate) newClassNames.push('text-truncate');
+
         if(center) newClassNames.push('text-center');
 
         return newClassNames;
-    }, [ variant, fontWeight, underline, center ]);
+    }, [ variant, fontWeight, fontSize, underline, truncate, center ]);
 
     return <Base classNames={ getClassNames } { ...rest } />;
 }

src/common/types/FontSizeType.ts

@@ -0,0 +1 @@
+export type FontSizeType = 1 | 2 | 3 | 4 | 5;

src/index.scss

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed:wght@300;400;500&display=swap');
 @import './assets/styles';
 
 html,

src/layout/card/header/NitroCardHeaderView.tsx

@@ -1,3 +1,4 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, MouseEvent, useCallback } from 'react';
 import { useNitroCardContext } from '../context/NitroCardContext';
 import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
@@ -21,7 +22,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
                     <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                         <div className="h5 text-shadow header-text">{ headerText }</div>
                         <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
-                            <i className="fas fa-times" />
+                            <FontAwesomeIcon icon="times" />
                         </div>
                     </div>
                 </div>
@@ -35,7 +36,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 text-shadow header-text">{ headerText }</div>
                     <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
-                        <i className="fas fa-times" />
+                        <FontAwesomeIcon icon="times" />
                     </div>
                 </div>
             </div>

src/views/shared/limited-edition/compact-plate/LimitedEditionCompactPlateView.tsx

@@ -1,19 +1,30 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+import { Base } from '../../../../common/Base';
 import { LimitedEditionStyledNumberView } from '../styled-number/LimitedEditionStyledNumberView';
 import { LimitedEditionCompactPlateViewProps } from './LimitedEditionCompactPlateView.types';
 
 export const LimitedEditionCompactPlateView: FC<LimitedEditionCompactPlateViewProps> = props =>
 {
-    const { uniqueNumber = 0, uniqueSeries = 0 } = props;
+    const { uniqueNumber = 0, uniqueSeries = 0, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'unique-compact-plate', 'z-index-1' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
 
     return (
-        <div className="unique-compact-plate" style={ { zIndex: 1 } }>
+        <Base classNames={ getClassNames } { ...rest }>
             <div>
                 <LimitedEditionStyledNumberView value={ uniqueNumber } />
             </div>
             <div>
                 <LimitedEditionStyledNumberView value={ uniqueSeries } />
             </div>
-        </div>
+            { children }
+        </Base>
     );
 }

src/views/shared/limited-edition/compact-plate/LimitedEditionCompactPlateView.types.ts

@@ -1,4 +1,6 @@
-export interface LimitedEditionCompactPlateViewProps
+import { BaseProps } from '../../../../common/Base';
+
+export interface LimitedEditionCompactPlateViewProps extends BaseProps<HTMLDivElement>
 {
     uniqueNumber: number;
     uniqueSeries: number;

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

@@ -1,13 +1,24 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+import { Base } from '../../../common/Base';
 import { RarityLevelViewProps } from './RarityLevelView.types';
 
 export const RarityLevelView: FC<RarityLevelViewProps> = props =>
 {
-    const { level = 0 } = props;
+    const { level = 0, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-rarity-level' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
 
     return (
-        <div className="nitro-rarity-level">
+        <Base classNames={ getClassNames } { ...rest }>
             <div>{ level }</div>
-        </div>
+            { children }
+        </Base>
     );
 }

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

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