Mantine migration

.gitignore

@@ -65,3 +65,4 @@ priv/plts/*.plt.hash
 *.pnpm-store
 
 .customization/
+{{pkgetc}}/

apps/codebattle/assets/css/custom.scss

@@ -42,6 +42,10 @@
   /* Display ellipsis for overflow text */
 }
 
+.cb-custom-event-td {
+  position: relative;
+}
+
 .cb-custom-event-td:not(:last-child)::after,
 .cb-custom-event-nav-item:not(:first-child)::after {
   content: '';
@@ -235,7 +239,7 @@
   z-index: 0;
 }
 
-.cb-hof-podium-card .card-body {
+.cb-hof-podium-card > * {
   position: relative;
   z-index: 1;
 }
@@ -1290,3 +1294,31 @@
   background-color: rgba(255, 255, 255, 0.12) !important;
   color: #fff !important;
 }
+
+// CbSelect (Mantine Combobox) — red-accented variant used by the create-game
+// dialog (TaskChoice task select + OpponentSelect). Port of the old
+// react-select inline styles: dark control/menu, red border, lighten-on-hover.
+.cb-select-danger-input {
+  background-color: #1c1c24;
+  border-color: #dc3545;
+  color: white;
+
+  &:hover {
+    border-color: #e04d5b;
+  }
+}
+
+.cb-select-danger-dropdown {
+  background-color: #1c1c24;
+}
+
+.cb-select-danger-option {
+  background-color: #1c1c24;
+  color: white;
+
+  &:hover,
+  &[data-combobox-selected] {
+    background-color: #2a2a35;
+    color: #eaffff;
+  }
+}

apps/codebattle/assets/css/style.scss

@@ -87,6 +87,10 @@ $cb-rookie-bg: $iron;
 }
 
 @import 'bootstrap/scss/bootstrap';
+// Mantine core styles are wrapped in `@layer mantine`. Unlayered Bootstrap above
+// always wins on conflicts, so existing Bootstrap-styled UI is unaffected while
+// Mantine components still get their own styling.
+@import '@mantine/core/styles.layer.css';
 @import 'nprogress/nprogress.css';
 @import 'gamePreview';
 @import 'skeleton';
@@ -413,19 +417,6 @@ input[type='range'].cb-range {
   }
 }
 
-.alert-dark-theme.cb-game-win-alert.alert-success {
-  background: linear-gradient(
-    135deg,
-    rgba(25, 135, 84, 0.95),
-    rgba(240, 199, 94, 0.75)
-  );
-  color: #ffffff;
-  border-left: 4px solid #f0c75e;
-  box-shadow:
-    0 0 0 1px rgba(240, 199, 94, 0.25),
-    0 10px 24px rgba(0, 0, 0, 0.35);
-}
-
 .gutter-vertical {
   background-image: url('../static/images/verticalGutter.svg');
   cursor: col-resize;
@@ -1333,6 +1324,20 @@ a {
   font-size: 27px;
 }
 
+// Self-sufficient ports of the Bootstrap `.h1` (stat numbers) / `.lead`
+// (stat captions) typography the profile page used to carry — the media-query
+// shrinks below depend on these bases, which inlining would have beaten.
+.cb-stats-number {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.cb-stats-caption {
+  font-size: 20px;
+  font-weight: 300;
+}
+
 .cb-profile-avatar {
   width: min(100%, 180px);
 }
@@ -1670,10 +1675,6 @@ main > #app {
   min-width: 250px;
 }
 
-.cb-game > [class*='col-'] {
-  min-width: 0;
-}
-
 .cb-game-chat-layout,
 .cb-game-chat-container {
   min-width: 0;
@@ -1731,7 +1732,8 @@ main > #app {
     font-size: 22px;
   }
 
-  .lead {
+  .lead,
+  .cb-stats-caption {
     font-size: 14px;
   }
 }
@@ -1762,7 +1764,8 @@ main > #app {
     font-size: 30px;
   }
 
-  .lead {
+  .lead,
+  .cb-stats-caption {
     font-size: 16px;
   }
 
@@ -1999,7 +2002,7 @@ $cb-bronze-bottom: #4a3223;
 
 .dropdown-menu,
 .cb-dropdown-menu {
-  & .dropdown-item.cb-dropdown-item {
+  & .cb-dropdown-item {
     color: white !important;
 
     &:hover:not(:active):not(.active),
@@ -2030,32 +2033,6 @@ div.cb-dropdown-menu {
   transform: translate3d(-100%, 0, 0);
 }
 
-.cb-height-info {
-  min-height: 300px;
-  height: 300px;
-
-  .nav-link.active {
-    color: white;
-    border-bottom: 1px;
-    background-color: $cb-secondary-hover-background;
-  }
-
-  .nav-link:hover {
-    color: white;
-    background-color: $cb-secondary-hover-background;
-  }
-
-  .nav-link:not(.active):hover {
-    color: white;
-    background-color: $cb-secondary-hover-background;
-    border-bottom: 1px;
-  }
-
-  @media (max-width: $sm) {
-    height: auto;
-  }
-}
-
 @keyframes scale {
 }
 
@@ -4635,7 +4612,7 @@ a.cb-text-light:hover {
 }
 
 .cb-settings-social-links {
-  > .d-flex {
+  > * {
     margin-bottom: 8px !important;
     padding: 12px 14px;
     border: 1px solid rgba(255, 255, 255, 0.08);

apps/codebattle/assets/js/__tests__/ChatMessageDelete.test.tsx

@@ -5,22 +5,26 @@ import React from 'react';
 
 import Message from '../widgets/components/Message';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('react-redux', () => ({ useSelector: () => ({ name: 'General' }) }));
 
 test('shows a delete action on the current user own message and calls back with its id', async () => {
   const user = userEvent.setup();
   const handleDelete = vi.fn();
 
   render(
-    <Message
-      id={7}
-      name="Alice"
-      userId={42}
-      currentUserId={42}
-      time={1}
-      text="my message"
-      onDeleteMessage={handleDelete}
-    />,
+    <MantineTestProvider>
+      <Message
+        id={7}
+        name="Alice"
+        userId={42}
+        currentUserId={42}
+        time={1}
+        text="my message"
+        onDeleteMessage={handleDelete}
+      />
+    </MantineTestProvider>,
   );
 
   await user.click(screen.getByRole('button', { name: 'Delete message' }));
@@ -29,15 +33,17 @@ test('shows a delete action on the current user own message and calls back with
 
 test('hides the delete action on another user message for a non-privileged user', () => {
   render(
-    <Message
-      id={7}
-      name="Bob"
-      userId={99}
-      currentUserId={42}
-      time={1}
-      text="not mine"
-      onDeleteMessage={vi.fn()}
-    />,
+    <MantineTestProvider>
+      <Message
+        id={7}
+        name="Bob"
+        userId={99}
+        currentUserId={42}
+        time={1}
+        text="not mine"
+        onDeleteMessage={vi.fn()}
+      />
+    </MantineTestProvider>,
   );
 
   expect(screen.queryByRole('button', { name: 'Delete message' })).not.toBeInTheDocument();
@@ -48,16 +54,18 @@ test('shows the delete action on another user message when the viewer can delete
   const handleDelete = vi.fn();
 
   render(
-    <Message
-      id={7}
-      name="Bob"
-      userId={99}
-      currentUserId={42}
-      time={1}
-      text="not mine"
-      canDeleteAny
-      onDeleteMessage={handleDelete}
-    />,
+    <MantineTestProvider>
+      <Message
+        id={7}
+        name="Bob"
+        userId={99}
+        currentUserId={42}
+        time={1}
+        text="not mine"
+        canDeleteAny
+        onDeleteMessage={handleDelete}
+      />
+    </MantineTestProvider>,
   );
 
   await user.click(screen.getByRole('button', { name: 'Delete message' }));