Minor UI fixes

src/css/ingame_hud/standalone_advantages.scss

@@ -13,8 +13,23 @@
         @include S(grid-column-gap, 10px);
         @include S(grid-row-gap, 20px);
         @include S(margin, 10px, 0, 20px);
-        grid-template-rows: #{D(40px)};
+        grid-template-rows: #{D(30px)};
         align-items: center;
+        background: #eef1f4;
+        @include S(border-radius, $globalBorderRadius);
+        @include S(padding, 15px, 4px);
+    }
+
+    .title {
+        @include Heading;
+        text-transform: none;
+        text-align: center;
+        color: $colorRedBright;
+    }
+    .subTitle {
+        @include PlainText;
+        text-transform: none;
+        text-align: center;
     }
 
     .lowerBar {
@@ -106,7 +121,7 @@
     .point {
         display: grid;
         grid-template-columns: #{D(55px)} auto;
-        grid-template-rows: 1fr 1fr;
+        grid-template-rows: D(20px) D(20px);
 
         > strong {
             grid-column: 2 / 3;

src/css/main.scss

@@ -116,11 +116,11 @@ ingame_HUD_BetaOverlay,
 ingame_HUD_Shop,
 ingame_HUD_Statistics,
 ingame_HUD_ShapeViewer,
+ingame_HUD_DemoTimer,
 ingame_HUD_StandaloneAdvantages,
 ingame_HUD_UnlockNotification,
 ingame_HUD_PuzzleCompleteNotification,
 ingame_HUD_SettingsMenu,
-ingame_HUD_DemoTimer,
 ingame_HUD_ModalDialogs;
 
 $zindex: 100;

src/js/game/hud/parts/standalone_advantages.js

@@ -20,6 +20,15 @@ export class HUDStandaloneAdvantages extends BaseHUDPart {
                 ? T.ingame.standaloneAdvantages.title_expired
                 : T.ingame.standaloneAdvantages.title
         );
+        if (["1", "2"].includes(this.root.app.gameAnalytics.abtVariant)) {
+            this.subTitle = makeDiv(
+                this.dialogInner,
+                null,
+                ["subTitle"],
+                T.ingame.standaloneAdvantages.title
+            );
+        }
+
         this.contentDiv = makeDiv(
             this.dialogInner,
             null,