From e9f6f39aca8399dc3e6b9e3d77ca34a73fbf9f86 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 16 Feb 2022 14:56:27 -0500
Subject: [PATCH] Update wardrobe

---
 .../avatar-editor/AvatarEditorView.scss       | 45 +++++++++++++++++++
 .../wardrobe/AvatarEditorWardrobeView.tsx     | 20 ++++-----
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/components/avatar-editor/AvatarEditorView.scss b/src/components/avatar-editor/AvatarEditorView.scss
index 71ae6a9b..3b8b6304 100644
--- a/src/components/avatar-editor/AvatarEditorView.scss
+++ b/src/components/avatar-editor/AvatarEditorView.scss
@@ -212,6 +212,51 @@
     }
 }
 
+.nitro-avatar-editor-wardrobe-figure-preview {
+    background-color: $pale-sky;
+    overflow: hidden;
+    z-index: 1;
+
+    .avatar-image {
+        position: absolute;
+        bottom: -15px;
+        margin: 0 auto;
+        z-index: 4;
+    }
+
+    .avatar-shadow {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 25px;
+        width: 40px;
+        height: 20px;
+        margin: 0 auto;
+        border-radius: 100%;
+        background-color: rgba(0, 0, 0, 0.20);
+        z-index: 2;
+    }
+
+    &:after {
+        position: absolute;
+        content: '';
+        top: 75%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border-radius: 50%;
+        background-color: $pale-sky;
+        box-shadow: 0 0 8px 2px rgba($white,.6);
+        transform: scale(2);
+    }
+
+    .button-container {
+        position: absolute;
+        bottom: 0;
+        z-index: 5;
+    }
+}
+
 .nitro-avatar-editor {
     width: $avatar-editor-width;
     height: $avatar-editor-height;
diff --git a/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
index b484e57c..c35917a1 100644
--- a/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
@@ -1,9 +1,7 @@
 import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
-import { Button } from 'react-bootstrap';
 import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
-import { AutoGrid } from '../../../../common/AutoGrid';
-import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
+import { AutoGrid, Base, Button, Flex, LayoutGridItem } from '../../../../common';
 import { SendMessageHook } from '../../../../hooks';
 import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
@@ -58,14 +56,16 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
                 if(figureContainer) clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
 
                 items.push(
-                    <LayoutGridItem key={ index } position="relative" justifyContent="end" alignItems="center">
+                    <LayoutGridItem key={ index } position="relative" overflow="hidden" className="nitro-avatar-editor-wardrobe-figure-preview">
                         { figureContainer &&
-                            <AvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } position="absolute" className="bottom-3" /> }
+                            <AvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
+                        <Base className="avatar-shadow" />
                         { (clubLevel > 0) && <CurrencyIcon className="position-absolute top-1 start-1" type="hc" /> }
-                        <div className="d-flex w-100 figure-button-container p-1">
-                            <Button variant="link" size="sm" className="w-100" onClick={ event => saveFigureAtWardrobeIndex(index) }>Save</Button>
-                            { figureContainer && <Button variant="link" size="sm" className="w-100" onClick={ event => wearFigureAtIndex(index) } disabled={ (clubLevel > GetSessionDataManager().clubLevel) }>Use</Button> }
-                        </div>
+                        <Flex gap={ 1 } className="button-container">
+                            <Button variant="link" fullWidth onClick={ event => saveFigureAtWardrobeIndex(index) }>Save</Button>
+                            { figureContainer &&
+                                <Button variant="link" fullWidth onClick={ event => wearFigureAtIndex(index) } disabled={ (clubLevel > GetSessionDataManager().clubLevel) }>Use</Button> }
+                        </Flex>
                     </LayoutGridItem>
                 );
             });
@@ -74,7 +74,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     }, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
 
     return (
-        <AutoGrid grow columnCount={ 5 } overflow="auto" columnMinWidth={ 80 } columnMinHeight={ 140 }>
+        <AutoGrid columnCount={ 5 } columnMinWidth={ 80 } columnMinHeight={ 140 }>
             { figures }
         </AutoGrid>
     );