From 74670f40cc926a865308e1489812cb73eb385238 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Fri, 26 Nov 2021 01:07:00 -0300
Subject: [PATCH] Update Hall Of Fame

---
 .../hall-of-fame-item/HallOfFameItemView.tsx  | 10 +++---
 .../hall-of-fame/HallOfFameWidgetView.scss    | 35 ++++++++++++-------
 .../hall-of-fame/HallOfFameWidgetView.tsx     |  2 +-
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
index 2aef86fe..4c6297b7 100644
--- a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
+++ b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../../../api';
+import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
 import { UserProfileIconView } from '../../../../../layout';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { HallOfFameItemViewProps } from './HallOfFameItemView.types';
@@ -9,12 +9,12 @@ export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
     const { data = null, level = 0 } = props;
 
     return (
-        <div className="hof-user-container cursor-pointer">
+        <div className="hof-user-container">
             <div className="hof-tooltip">
-                <div className="hof-tooltip-content">
-                    <div className="fw-bold">{ level }. { data.userName } <UserProfileIconView userId={ data.userId } /></div>
-                    <div className="muted fst-italic small text-center">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ data.currentScore.toString() ])}</div>
+                <div className="hof-header">
+                { level }. { data.userName } <UserProfileIconView userId={ data.userId } />
                 </div>
+                <div className="small text-center text-white">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ])}</div>
             </div>
             <AvatarImageView figure={ data.figure } direction={ 2 } />
         </div>
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
index 74fa0189..63033a46 100644
--- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
+++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
@@ -1,7 +1,7 @@
 .hall-of-fame {
     background-color: rgba($black,.3);
     border-radius: $border-radius;
-    display: inline-block;
+    justify-content: center;
 
     .hof-user-container {
         display:inline-flex;
@@ -16,22 +16,31 @@
 
         .hof-tooltip {
             position: absolute;
-            display: inline;
-            z-index: 2;
             display: none;
-            background-color: #1c323f;
+            width: 125px;
+            max-width: 125px;
+            padding: 2px;
+            background-color: $gable-green;
             border: 2px solid rgba($white, 0.5);
             border-radius: $border-radius;
-            bottom:calc(100% - 20px);
-            left: 0;
-            right: 0;
-            margin: auto;
-            padding:2px;
-            color: #fff;
+            font-size: $font-size-sm;
+            z-index: $context-menu-zindex;
+            pointer-events: all;
+            left: -15px;
+            bottom: calc(100% - 10px);
 
-            .hof-tooltip-content {
-                padding:3px;
-                background-color: #3d5f6e;
+            .hof-header {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 5px;
+                background-color: $william;
+                color: $white;
+                min-width: 117px;
+                height: 25px;
+                max-height: 25px;
+                font-size: 16px;
+                margin-bottom: 2px;
             }
 
             &:after {
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
index 5676a9be..2cbfdc8c 100644
--- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
+++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
@@ -26,7 +26,7 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
     if(!data) return null;
 
     return (
-        <div className="hall-of-fame widget">
+        <div className="hall-of-fame d-flex">
             { data.hof && (data.hof.length > 0) && data.hof.map((entry, index) =>
                 {
                     return <HallOfFameItemView key={ index } data={ entry } level={ (index + 1) } />;