Update layout components

src/common/index.scss

@@ -539,4 +539,30 @@
     }
 }
 
+.nitro-progress-bar {
+    border: 1px solid $white;
+    padding: 2px;
+    height: 20px;
+    border-radius: $border-radius;
+    overflow: hidden;
+    background: $primary;
+
+    &.large {
+        height: 30px;
+    }
+
+    .nitro-progress-bar-inner {
+        height: 100%;
+        z-index: 1;
+        transition: all 1s;
+        border-radius: calc(#{$border-radius} / 2);
+        background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
+    }
+
+    .nitro-progress-bar-text {
+        text-shadow: 0px 4px 4px rgba($black, 0.25);
+        z-index: 2;
+    }
+}
+
 @import './card/NitroCardView';

src/common/layout/LayoutBackgroundImage.tsx

@@ -0,0 +1,23 @@
+import { FC, useMemo } from 'react';
+import { Base, BaseProps } from '../Base';
+
+export interface LayoutBackgroundImageProps extends BaseProps<HTMLDivElement>
+{
+    imageUrl?: string;
+}
+
+export const LayoutBackgroundImage: FC<LayoutBackgroundImageProps> = props =>
+{
+    const { imageUrl = null, fit = true, style = null, ...rest } = props;
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        if(imageUrl) newStyle.background = `url(${ imageUrl }) center no-repeat`;
+
+        return newStyle;
+    }, [ style, imageUrl ]);
+
+    return <Base fit={ fit } style={ getStyle } { ...rest } />;
+}

src/common/layout/LayoutImage.tsx

@@ -1,23 +1,13 @@
-import { FC, useMemo } from 'react';
-import { Base, BaseProps } from '../Base';
+import { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
 
-export interface LayoutImageProps extends BaseProps<HTMLDivElement>
+export interface LayoutImageProps extends DetailedHTMLProps<HTMLAttributes<HTMLImageElement>, HTMLImageElement>
 {
     imageUrl?: string;
 }
 
 export const LayoutImage: FC<LayoutImageProps> = props =>
 {
-    const { imageUrl = null, fit = true, style = null, ...rest } = props;
+    const { imageUrl = null, style = null, ...rest } = props;
 
-    const getStyle = useMemo(() =>
-    {
-        const newStyle = { ...style };
-
-        if(imageUrl) newStyle.background = `url(${ imageUrl }) center no-repeat`;
-
-        return newStyle;
-    }, [ style, imageUrl ]);
-
-    return <Base fit={ fit } style={ getStyle } { ...rest } />;
+    return <img src={ imageUrl } alt="" { ...rest } />;
 }

src/common/layout/LayoutProgressBar.tsx

@@ -1,20 +1,20 @@
 import { FC, useMemo } from 'react';
-import { Base, BaseProps, Flex } from '..';
+import { Base, Column, ColumnProps, Flex } from '..';
 
-interface LayoutProgressBarProps extends BaseProps<HTMLDivElement>
+interface LayoutProgressBarProps extends ColumnProps
 {
-    text: string;
+    text?: string;
     progress: number;
     maxProgress?: number;
 }
 
 export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
 {
-    const { text = '', progress = 0, maxProgress = 0, position = 'relative', classNames = [], children = null, ...rest } = props;
+    const { text = '', progress = 0, maxProgress = 100, position = 'relative', justifyContent = 'center', classNames = [], children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'progress', 'text-black' ];
+        const newClassNames: string[] = [ 'nitro-progress-bar', 'text-white' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
@@ -22,10 +22,11 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
     }, [ classNames ]);
 
     return (
-        <Base position={ position } classNames={ getClassNames } { ...rest }>
-            <Flex fit center position="absolute">{ text }</Flex>
-            <Base className="progress-bar bg-success" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') }} />
+        <Column position={ position } justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
+            { text && (text.length > 0) &&
+                <Flex fit center position="absolute" className="nitro-progress-bar-text small">{ text }</Flex> }
+            <Base className="nitro-progress-bar-inner" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') }} />
             { children }
-        </Base>
+        </Column>
     );
 }

src/common/layout/index.ts

@@ -1,4 +1,5 @@
 export * from './LayoutAvatarImageView';
+export * from './LayoutBackgroundImage';
 export * from './LayoutBadgeImageView';
 export * from './LayoutCurrencyIcon';
 export * from './LayoutFurniImageView';