From 63a77f9005f8aa1e4fb48ba6bc9d9cc9123c6251 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 4 Mar 2022 12:42:57 -0500
Subject: [PATCH] Update trophy style

---
 src/common/index.scss                  | 16 ++++----------
 src/common/layout/LayoutTrophyView.tsx | 30 +++++++++++++-------------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/common/index.scss b/src/common/index.scss
index 1348db61..856edd26 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -78,32 +78,24 @@
     }
 
     .trophy-header {
+        height: 22px;
+
         .trophy-close {
-            position: absolute;
-            cursor: pointer;
             width: 15px;
             height: 15px;
+            right: 5.5px;
             top: 5px;
-            right: 5px;
-        }
-
-        .trophy-title {
-            padding-top: 3px;
         }
     }
 
     .trophy-content {
         width: 297px;
-        height: 110px;
-        margin-top: 3px;
-        margin-left: 23px;
+        height: 116px;
         white-space: pre-wrap;
     }
 
     .trophy-footer {
         width: 297px;
-        margin-top: 5px;
-        margin-left: 23px;
     }
 }
 
diff --git a/src/common/layout/LayoutTrophyView.tsx b/src/common/layout/LayoutTrophyView.tsx
index db6319b3..1320625e 100644
--- a/src/common/layout/LayoutTrophyView.tsx
+++ b/src/common/layout/LayoutTrophyView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { Base, Column, Flex, Text } from '..';
 import { LocalizeText } from '../../api';
 import { DraggableWindow } from '../draggable-window';
 
@@ -18,22 +19,21 @@ export const LayoutTrophyView: FC<LayoutTrophyViewProps> = props =>
 
     return (
         <DraggableWindow handleSelector=".drag-handler">
-            <div className={ `nitro-layout-trophy trophy-${ color }` }>
-                <div className="trophy-header drag-handler">
-                    <div className="float-end trophy-close" onClick={ onCloseClick }></div>
-                    <div className="trophy-title fw-bold text-center">
-                        { LocalizeText('widget.furni.trophy.title') }
-                    </div>
-                </div>
-                <div className="trophy-content">
-                    { customTitle && <div className="mb-2 fw-bold">{ customTitle }</div> }
+            <Column gap={ 0 } alignItems="center" className={ `nitro-layout-trophy trophy-${ color }` }>
+                <Flex center fullWidth position="relative" className="trophy-header drag-handler">
+                    <Base position="absolute" pointer className="trophy-close" onClick={ onCloseClick } />
+                    <Text bold>{ LocalizeText('widget.furni.trophy.title') }</Text>
+                </Flex>
+                <Column className="trophy-content py-1" gap={ 1 }>
+                    { customTitle &&
+                        <Text bold>{ customTitle }</Text> }
                     { message }
-                </div>
-                <div className="trophy-footer d-flex justify-content-between fw-bold">
-                    <div>{ date }</div>
-                    <div>{ senderName }</div>
-                </div>
-            </div>
+                </Column>
+                <Flex alignItems="center" justifyContent="between" className="trophy-footer mt-1">
+                    <Text bold>{ date }</Text>
+                    <Text bold>{ senderName }</Text>
+                </Flex>
+            </Column>
         </DraggableWindow>
     );
 }