Updates & Fixes: Profile Modal Tab URLs, Chat Mention Case-Insensitive, G1G1 Updates, Challenge Participants, End Challenge Modal (#15493)

* Fix profile modal tab navigation URLs for both own and other users profiles - Add routes for /user/profile, /user/stats, and /user/achievements - Update selectPage() to properly update URLs when switching tabs - Own profile uses /user/{tab} format - Other users' profiles use /profile/{userId}#{tab} format - Parse hash fragments when navigating to other users' profile tabs - Ensure direct navigation to tab URLs opens correct tab * Fix undefined userId * Server now matches usernames case insensitively like client - Preserves original capitalization in mention text - Fixes profile links not working with wrong case mentions * lint fixes * g1g1 width auto sizing w/padding * Challenge participants spacing & text sizing fix * Fix inconsistent profile URL format between own and other users' profiles - Update profile tab navigation to use consistent URL format for all users - Redirect old /user/* routes to new format for backward compatibility - Update all navigation points (dropdown menu, notifications) to use new URLs * Update End Challenge modal - Replace dropdown with searchable input (384x32px) for winner selection - Add visual badge state with gems icons for challenge completion - Update Delete Challenge flow with refund info and proper styling - Add close button (X) with opacity hover effect - Enhance Award Winner button with gem icon and dynamic prize display - Apply conditional styling based on winner selection state - Update text colors: Maroon/50 for delete warning, Gray/100 for "OR" text - Add proper translations for gem/gems and refund description * lint error fixes * end challenge modal fixes * lint fix * Use existing closeX component, minor UI fixes to close challenge modal * fix lint * Delete icon color to match text on close challenge modal use color field to set delete icon color * Highlight username on close challenge modal color updates - Background color on hover: purple-600 - Text color on hover: purple-300 - Changed transition from just background-color to all so both color changes animate smoothly * Fix strings * Refactor g1g1 notifications from database-driven to event-based system Changed g1g1 (gift one get one) notifications to display automatically during event periods instead of requiring database storage. Notifications now appear based on event calendar dates and use sessionStorage for dismissal state. - Display g1g1 notification when event is active in worldState - Store dismissal state in sessionStorage with event-specific keys - Remove dependency on user.notifications database array - Maintain identical user experience and appearance * Update prize card to match participants card on challenges * End Challenge modal UI tweaks * Prevent false mention highlights Prevent false mention highlights when a user's display name matches another user's username. The purple mention indicator now only appears for actual @username mentions. * lint fixes * Remove mention highlight * Mention highlighting to only highlight w/username mentions * Update G1G1 Notification - Updated text styling for title & description - Updated button styling - Updated close button * lint fix * Add updated G1G1 notification SVGs * Don't highlight display name w/mention * g1g1 UI updates - Fix sizing of gift SVGs (96px tall) - Update button to use button element and styles <button class="btn btn-secondary mx-auto"> - Fixed positioning, color, and hover state of close icon (default white 50% opacity, hover 75% opacity) * Fix g1g1 close icon hover state Fix hover state of close icon (default white 50% opacity, hover 75% opacity) * g1g1 close hover state fix * End challenge UI updates - Fix modal title positioning - Fix close icon positioning - Fix spacing between title and gem graphic - Fix spacing between label and input field - Fix search icon position, change input hint to "@Username" - Set search results text align start/left with 16px starting padding. - Fix Award Button state * remove trailing space * Fix exit hover state on g1g1 * fix g1g1 close icon (directly render close icon) * new line * Update z-index of g1g1 close button * add display name support for mention highlighting mention highlights now trigger for both username and display name mentions. * Override default close button color (gray -> white) (Also revert the renderWithMentions change) * Fix mention display name test (& fix lint) * Revert display name mention, strictly only username Mentions work w/username only (works w/case insensitive as well) * Improved case-insensitive username matching * add close-white.svg, replace close.svg on g1g1 * find mentions that match the current user's username (case-insensitive) * fix lint errors * end challenge modal UI updates * Don't change gem color on update * disabled state button match button.scss syling * remove padding from g1g1 close * Directly use button.scss on end challenge modal * Update disabled state for button.scss * explicitly set close challenge modal button disabled/enabled state * fix trailing space * Add font details (and fix text color) for button disabled state * Update award winner button min-height & padding * button.scss button disabled styling updates * Remove redundant disabled override on award winner button * lint * Use single gifts svg, and apply transform to flip horizontally Remove unneeded gifts_end.svg * Replaced the hardcoded #1A1B1D color with the $black from colors.scss * Removed the 0.5em padding w/p-2 * added v-once to the refund text element * Converted the line-height values from pixel values to multipliers
2025-10-26 02:32:26 +01:00 · 2025-09-16 22:12:41 -05:00
parent 95494c685b
commit 8faa5b0582
26 changed files with 749 additions and 136 deletions
--- a/test/api/unit/libs/highlightMentions.test.js
+++ b/test/api/unit/libs/highlightMentions.test.js
@@ -47,6 +47,12 @@ describe('highlightMentions', () => {
    expect(result[0]).to.equal('[@user-dash](/profile/444): message [@user_underscore](/profile/555)');
  });

+  it('highlights users with case-insensitive matching', async () => {
+    const text = '@USER: message @User2 @USER3';
+    const result = await highlightMentions(text);
+    expect(result[0]).to.equal('[@USER](/profile/111): message [@User2](/profile/222) [@USER3](/profile/333)');
+  });
+
  it('doesn\'t highlight nonexisting users', async () => {
    const text = '@nouser message';
    const result = await highlightMentions(text);
--- a/test/api/v3/integration/chat/POST-chat.test.js
+++ b/test/api/v3/integration/chat/POST-chat.test.js
@@ -238,6 +238,18 @@ describe('POST /chat', () => {
    expect(groupMessages[0].id).to.exist;
  });

+  it('creates a chat with case-insensitive mentions', async () => {
+    const originalUsername = member.auth.local.username;
+    const uppercaseUsername = originalUsername.toUpperCase();
+    const messageWithMentions = `hi @${uppercaseUsername}`;
+    const newMessage = await user.post(`/groups/${groupWithChat._id}/chat`, { message: messageWithMentions });
+    const groupMessages = await user.get(`/groups/${groupWithChat._id}/chat`);
+
+    expect(newMessage.message.id).to.exist;
+    expect(newMessage.message.text).to.include(`[@${uppercaseUsername}](/profile/${member._id})`);
+    expect(groupMessages[0].id).to.exist;
+  });
+
  it('creates a chat with a max length of 3000 chars', async () => {
    const veryLongMessage = `
    123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789.
--- a/website/client/src/assets/images/gifts_bg.svg
+++ b/website/client/src/assets/images/gifts_bg.svg
@@ -0,0 +1,9 @@
+<svg width="378" height="176" viewBox="0 0 378 176" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H378V174C378 175.105 377.105 176 376 176H1.99999C0.895423 176 0 175.105 0 174V0Z" fill="url(#paint0_linear_2257_239)"/>
+<defs>
+<linearGradient id="paint0_linear_2257_239" x1="378" y1="0" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#925CF3"/>
+<stop offset="1" stop-color="#34B5C1"/>
+</linearGradient>
+</defs>
+</svg>
--- a/website/client/src/assets/images/gifts_start.svg
+++ b/website/client/src/assets/images/gifts_start.svg
@@ -0,0 +1,37 @@
+<svg width="48" height="96" viewBox="0 0 48 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.10104 12.0483C-2.82088 9.43721 -3.53422 6.57214 -5.6115 5.24584C-7.68877 3.91954 -9.89543 4.92709 -10.1422 6.808C-10.3891 8.68891 -9.06061 9.83066 -4.97737 13.9337C-3.81821 15.0985 -3.3812 14.6594 -3.10104 12.0483Z" stroke="#FFA624" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.34089 15.2054C4.45116 13.6561 7.27707 12.8443 9.45877 13.9889C11.6405 15.1334 11.8754 17.5575 10.3778 18.7127C8.88016 19.868 7.23193 19.2828 1.65411 17.781C0.0706697 17.3546 0.230624 16.7548 2.34089 15.2054Z" stroke="#FFBE5D" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.549002 12.0098C-3.61871 9.59194 -3.87667 15.8322 -2.20457 16.8023C-0.532473 17.7724 4.71671 14.4277 0.549002 12.0098Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.76917 16.0445L13.637 24.9825L9.18965 32.7229L-6.21656 23.785L-1.76917 16.0445Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-6.90457 13.0652L3.36623 19.0238L-1.08116 26.7643L-11.352 20.8057L-6.90457 13.0652Z" fill="#FFBE5D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.76917 16.0445L3.36623 19.0238L1.88377 21.604L-3.25163 18.6247L-1.76917 16.0445Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-6.21656 23.785L6.62195 31.2333L-3.75529 49.2944L-16.5938 41.8461L-6.21656 23.785Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.64886 25.2747L6.62195 31.2333L5.13948 33.8134L-5.13132 27.8548L-3.64886 25.2747Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.401307 24.1842L10.6721 30.1428L9.18965 32.7229L-1.08116 26.7643L0.401307 24.1842Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7924 38.4607L17.9387 42.0519L21.31 40.5834L24.8838 41.4413L23.4225 38.0537L24.2762 34.4625L20.9049 35.9309L17.3311 35.0731L18.7924 38.4607Z" fill="white" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.93867 71.2331L-4.79238 74.8243L-1.42111 73.3559L2.15271 74.2137L0.691383 70.8261L1.54509 67.2349L-1.82618 68.7033L-5.4 67.8455L-3.93867 71.2331Z" fill="white" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.8949 25.3807L35.0583 29.8802L37.9424 26.2452L42.4202 25.0761L38.8028 22.178L37.6393 17.6786L34.7552 21.3135L30.2775 22.4826L33.8949 25.3807Z" fill="white" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2596 71.999L40.579 68.1435L45.9507 88.2881L31.6312 92.1436L26.2596 71.999Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9401 75.8545L26.2589 71.9966L31.6273 92.1421L17.3084 96L11.9401 75.8545Z" fill="#DDF3F3"/>
+<rect width="2.96589" height="20.8485" transform="matrix(0.965611 -0.25999 0.257652 0.966238 23.3957 72.7701)" fill="#FFA624"/>
+<rect width="2.96589" height="20.8485" transform="matrix(0.965611 -0.25999 0.257652 0.966238 26.2596 71.999)" fill="#FFBE5D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9999 90.0369L30.8638 89.2658L31.6312 92.1436L28.7673 92.9147L27.9999 90.0369Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3957 72.7701L26.2596 71.999L27.0269 74.8768L24.163 75.6479L23.3957 72.7701Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9401 75.8545L23.3951 72.7682L24.162 75.6461L12.707 78.7325L11.9401 75.8545Z" fill="#C1E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5443 93.1213L27.9999 90.0369L28.7673 92.9147L17.3117 95.9991L16.5443 93.1213Z" fill="#C1E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1235 71.2279L40.579 68.1435L41.3464 71.0213L29.8908 74.1057L29.1235 71.2279Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7277 88.4947L45.1833 85.4103L45.9507 88.2881L34.4951 91.3725L33.7277 88.4947Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8638 89.2658L33.7277 88.4947L34.4951 91.3725L31.6312 92.1436L30.8638 89.2658Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2596 71.999L29.1235 71.2279L29.8908 74.1057L27.0269 74.8768L26.2596 71.999Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5224 56.3076C25.8087 53.7812 24.0792 51.3933 21.6588 50.9455C19.2383 50.4977 17.5679 52.2625 18.0403 54.0994C18.5126 55.9363 20.17 56.4948 25.4855 58.7621C26.9945 59.4057 27.236 58.834 26.5224 56.3076Z" stroke="#FFA624" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.745 57.1864C34.124 54.9555 36.4415 53.1391 38.8911 53.3791C41.3406 53.6191 42.4621 55.7782 41.5042 57.413C40.5463 59.0479 38.7999 59.1258 33.0684 59.8329C31.4413 60.0337 31.366 59.4173 32.745 57.1864Z" stroke="#FFBE5D" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.8923 54.898C25.1267 54.225 27.2139 60.108 29.1258 60.378C31.0378 60.648 34.6579 55.571 29.8923 54.898Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.247 59.5115L46.8635 61.9994L45.6255 70.8503L28.0091 68.3625L29.247 59.5115Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6306 57.0236L29.247 59.5114L28.0091 68.3624L10.3927 65.8745L11.6306 57.0236Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3749 58.6822L35.1192 60.3408L33.8813 69.1917L22.137 67.5332L23.3749 58.6822Z" fill="#FFBE5D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3749 58.6822L29.247 59.5115L28.0091 68.3625L22.137 67.5332L23.3749 58.6822Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.247 59.5115L35.1192 60.3408L34.7065 63.2911L28.8344 62.4618L29.247 59.5115Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3749 58.6822L29.247 59.5115L28.8344 62.4618L22.9622 61.6326L23.3749 58.6822Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8053 62.9241L22.5496 64.5827L22.137 67.533L10.3927 65.8745L10.8053 62.9241Z" fill="#C1E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.2939 66.2414L46.0382 67.9L45.6255 70.8503L33.8813 69.1917L34.2939 66.2414Z" fill="#DDF3F3"/>
+</svg>
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -30,12 +30,23 @@
    cursor: default;
    color: $gray-200;
    opacity: 1;
-    box-shadow: none;
-    background-color: $gray-700;
+    background-color: transparent;
    border: 2px solid transparent;
-
+    box-shadow:
+      0 1px 3px 0 rgba($black, 0.12),
+      0 1px 2px 0 rgba($black, 0.24);
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 4px 12px;
+    min-height: 32px;
+    max-height: 32px;
+    gap: 8px;
+    border-radius: 4px;
+    
    .svg {
-      color: $gray-300;
+      color: $gray-200;
    }
  }

--- a/website/client/src/assets/svg/close-white.svg
+++ b/website/client/src/assets/svg/close-white.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#FFFFFF" fill-rule="nonzero">
+            <polygon points="12.1973467 2 14 3.80265326 9.80187117 8 14 12.1973467 12.1973467 14 8 9.80187117 3.80265326 14 2 12.1973467 6.19812883 8 2 3.80265326 3.80265326 2 8 6.19812883"></polygon>
+        </g>
+    </g>
+</svg>
--- a/website/client/src/assets/svg/for-css/end_challenge_badge.svg
+++ b/website/client/src/assets/svg/for-css/end_challenge_badge.svg
--- a/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg
+++ b/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg
@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1792 31.6843L46.8536 22.3769L23.918 28.6988L18.861 42.5218L44.341 58.5813L58.1792 31.6843Z" fill="#FF944C"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L46.1108 26.1328L36.2812 28.8422L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M30.2393 39.0304L26.4518 31.5515L36.2813 28.8422L30.2393 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L36.2813 28.8422L30.2393 39.0304L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.1108 26.1328L46.6218 34.5148L53.8301 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L26.4518 31.5516L30.2393 39.0304L23.0309 41.0173Z" fill="#FA8537"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.6218 34.5148L43.0424 53.79L53.8301 32.5279Z" fill="#FA8537"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L30.2393 39.0304L43.0425 53.79L23.0309 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L30.2393 39.0304L43.0425 53.79L46.6218 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.555 4.15937L47.026 0.420004L38.7773 1.59601L36.4144 6.17539L44.5675 12.8919L50.555 4.15937Z" fill="#FFBE5D"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L46.6034 1.6924L43.0682 2.1964L46.414 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M40.5221 5.46854L39.5331 2.7004L43.0682 2.1964L40.5221 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L43.0683 2.1964L40.5221 5.46855L46.414 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25894L46.6034 1.6924L46.414 4.62854L49.0064 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M37.9296 5.83815L39.5331 2.70041L40.5221 5.46855L37.9296 5.83815Z" fill="#FFA624"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25893L46.414 4.62853L44.3259 11.1688L49.0064 4.25893Z" fill="#FFA624"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M37.9297 5.83815L40.5221 5.46855L44.326 11.1688L37.9297 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L40.5221 5.46855L44.326 11.1688L46.414 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2986 16.7775L24.6513 8.36623L11.1016 3.94533L4.07056 9.19883L11.614 25.6769L27.2986 16.7775Z" fill="#FF6165"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L23.0573 10.0026L17.2502 8.10789L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.908 11.2141L11.4432 6.21322L17.2502 8.10789L10.908 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L17.2502 8.10789L10.9081 11.2141L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L23.0573 10.0026L20.5864 14.3719L24.8449 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M6.64955 9.82464L11.4432 6.21321L10.908 11.2141L6.64955 9.82464Z" fill="#F23035"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L20.5864 14.3719L12.5221 22.8464L24.8449 15.7613Z" fill="#F23035"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.64959 9.82464L10.9081 11.2141L12.5221 22.8463L6.64959 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L10.9081 11.2141L12.5221 22.8463L20.5864 14.3719Z" fill="white"/>
+</svg>
--- a/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg
+++ b/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg
@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.82083 31.6843L17.1464 22.3769L40.082 28.6988L45.139 42.5218L19.659 58.5813L5.82083 31.6843Z" fill="#24CC8F"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L17.8892 26.1328L27.7188 28.8422L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.7607 39.0304L37.5482 31.5515L27.7187 28.8422L33.7607 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L27.7187 28.8422L33.7607 39.0304L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.8892 26.1328L17.3782 34.5148L10.1699 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L37.5482 31.5516L33.7607 39.0304L40.9691 41.0173Z" fill="#1CA372"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.3782 34.5148L20.9576 53.79L10.1699 32.5279Z" fill="#1CA372"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L33.7607 39.0304L20.9575 53.79L40.9691 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L33.7607 39.0304L20.9575 53.79L17.3782 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.445 4.15937L16.974 0.420004L25.2227 1.59601L27.5856 6.17539L19.4325 12.8919L13.445 4.15937Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L17.3966 1.6924L20.9318 2.1964L17.586 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M23.4779 5.46854L24.4669 2.7004L20.9318 2.1964L23.4779 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L20.9317 2.1964L23.4779 5.46855L17.586 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25894L17.3966 1.6924L17.586 4.62854L14.9936 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M26.0704 5.83815L24.4669 2.70041L23.4779 5.46855L26.0704 5.83815Z" fill="#4F2A93"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25893L17.586 4.62853L19.6741 11.1688L14.9936 4.25893Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M26.0703 5.83815L23.4779 5.46855L19.674 11.1688L26.0703 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L23.4779 5.46855L19.674 11.1688L17.586 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7014 16.7775L39.3487 8.36623L52.8984 3.94533L59.9294 9.19883L52.386 25.6769L36.7014 16.7775Z" fill="#50B5E9"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L40.9427 10.0026L46.7498 8.10789L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M53.092 11.2141L52.5568 6.21322L46.7498 8.10789L53.092 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L46.7498 8.10789L53.0919 11.2141L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L40.9427 10.0026L43.4136 14.3719L39.1551 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L52.5568 6.21321L53.092 11.2141L57.3504 9.82464Z" fill="#46A7D9"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L43.4136 14.3719L51.4779 22.8464L39.1551 15.7613Z" fill="#46A7D9"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L53.0919 11.2141L51.4779 22.8463L57.3504 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L53.0919 11.2141L51.4779 22.8463L43.4136 14.3719Z" fill="white"/>
+</svg>
--- a/website/client/src/components/achievements/onboardingComplete.vue
+++ b/website/client/src/components/achievements/onboardingComplete.vue
@@ -117,7 +117,7 @@ export default {
    closeWithAction () {
      this.close();
      setTimeout(() => {
-        this.$router.push({ name: 'achievements' });
+        this.$router.push(`/profile/${this.$store.state.user.data._id}#achievements`);
      }, 200);
    },
  },
--- a/website/client/src/components/challenges/challengeDetail.vue
+++ b/website/client/src/components/challenges/challengeDetail.vue
@@ -72,32 +72,40 @@
        </div>
        <div class="col-12 col-md-6 text-right">
          <div
-            class="box member-count"
+            class="box member-count p-2"
            @click="showMemberModal()"
          >
-            <div
-              class="svg-icon member-icon"
-              v-html="icons.memberIcon"
-            ></div>
-            {{ challenge.memberCount }}
-            <div
-              v-once
-              class="details"
-            >
-              {{ $t('participantsTitle') }}
+            <div class="box-content">
+              <div class="icon-number-row">
+                <div
+                  class="svg-icon member-icon"
+                  v-html="icons.memberIcon"
+                ></div>
+                <span class="number">{{ challenge.memberCount }}</span>
+              </div>
+              <div
+                v-once
+                class="details"
+              >
+                {{ $t('participantsTitle') }}
+              </div>
            </div>
          </div>
-          <div class="box">
-            <div
-              class="svg-icon gem-icon"
-              v-html="icons.gemIcon"
-            ></div>
-            {{ challenge.prize || 0 }}
-            <div
-              v-once
-              class="details"
-            >
-              {{ $t('prize') }}
+          <div class="box prize-count p-2">
+            <div class="box-content">
+              <div class="icon-number-row">
+                <div
+                  class="svg-icon gem-icon"
+                  v-html="icons.gemIcon"
+                ></div>
+                <span class="number">{{ challenge.prize || 0 }}</span>
+              </div>
+              <div
+                v-once
+                class="details"
+              >
+                {{ $t('prize') }}
+              </div>
            </div>
          </div>
        </div>
@@ -304,7 +312,6 @@

  .box {
    display: inline-block;
-    padding: 1em;
    border-radius: 2px;
    background-color: $white;
    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
@@ -314,22 +321,88 @@
    text-align: center;
    font-size: 20px;
    vertical-align: bottom;
+    overflow: hidden;
+    position: relative;

    &.member-count:hover {
      cursor: pointer;
    }

+    .box-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+    }
+
+    .icon-number-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0.1em;
+
+      .number {
+        font-size: 20px;
+        font-weight: normal;
+        margin-left: 0.2em;
+      }
+    }
+
    .svg-icon {
      width: 30px;
      display: inline-block;
-      margin-right: .2em;
      vertical-align: bottom;
    }

    .details {
      font-size: 12px;
-      margin-top: 0.4em;
      color: $gray-200;
+      width: 100%;
+      padding: 0 4px;
+      line-height: 1.15;
+      word-break: break-word;
+      max-height: 2.3em;
+      overflow: visible;
+    }
+
+    &.member-count {
+      .icon-number-row {
+        .svg-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        .number {
+          font-size: 18px;
+        }
+      }
+
+      .details {
+        font-size: 11px;
+        line-height: 1.1;
+        max-height: 2.2em;
+      }
+    }
+
+    &.prize-count {
+      .icon-number-row {
+        .svg-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        .number {
+          font-size: 18px;
+        }
+      }
+
+      .details {
+        font-size: 11px;
+        line-height: 1.1;
+        max-height: 2.2em;
+      }
    }
  }

--- a/website/client/src/components/challenges/closeChallengeModal.vue
+++ b/website/client/src/components/challenges/closeChallengeModal.vue
@@ -4,6 +4,7 @@
      id="close-challenge-modal"
      :title="$t('endChallenge')"
      size="md"
+      :hide-header="false"
    >
      <div
        slot="modal-header"
@@ -15,6 +16,9 @@
        >
          {{ $t('endChallenge') }}
        </h2>
+        <close-x
+          @close="$root.$emit('bv::hide::modal', 'close-challenge-modal')"
+        />
      </div>
      <div class="row text-center">
        <span
@@ -28,28 +32,67 @@
          class="col-12"
        >
          <div class="col-12">
-            <div class="support-habitica">
-              <!-- @TODO: Add challenge achievement badge here-->
+            <div class="badge-section">
+              <div
+                class="gems-left"
+                v-html="icons.gemsOrange"
+              ></div>
+              <div
+                class="challenge-badge"
+                v-html="icons.endChallengeBadge"
+              ></div>
+              <div
+                class="gems-right"
+                v-html="icons.gemsPurple"
+              ></div>
            </div>
          </div>
          <div class="col-12">
            <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
          </div>
-          <div class="col-12">
-            <member-search-dropdown
-              :text="winnerText"
-              :members="members"
-              :challenge-id="challengeId"
-              @member-selected="selectMember"
-            />
+          <div class="col-12 search-input-container">
+            <div class="search-input-wrapper">
+              <div
+                class="search-icon"
+                v-html="icons.search"
+              ></div>
+              <input
+                v-model="searchTerm"
+                class="search-input"
+                type="text"
+                placeholder="@Username"
+                @input="searchMembers"
+                @focus="showResults = true"
+                @blur="handleBlur"
+              >
+              <div
+                v-if="showResults && filteredMembers.length > 0"
+                class="search-results"
+              >
+                <div
+                  v-for="member in filteredMembers"
+                  :key="member._id"
+                  class="search-result-item"
+                  @mousedown="selectMember(member)"
+                >
+                  {{ getMemberDisplayName(member) }}
+                </div>
+              </div>
+            </div>
          </div>
          <div class="col-12">
            <button
-              v-once
-              class="btn btn-primary"
+              class="btn award-winner-btn"
+              :class="{'has-winner': winner._id}"
+              :disabled="!winner._id"
              @click="closeChallenge"
            >
-              {{ $t('awardWinners') }}
+              <span>{{ $t('awardWinners') }}</span>
+              <div
+                class="gem-icon"
+                v-html="icons.gem"
+              ></div>
+              <span>{{ prize }} {{ prize === 1 ? $t('gem') : $t('gems') }}</span>
            </button>
          </div>
        </span>
@@ -60,14 +103,27 @@
          </div>
        </div>
        <div class="col-12">
-          <strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+          <strong
+            v-once
+            class="delete-challenge-text"
+          >{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+        </div>
+        <div
+          v-once
+          class="col-12 refund-text"
+        >
+          {{ $t('deleteChallengeRefundDescription') }}
        </div>
        <div class="col-12">
          <button
            v-once
-            class="btn btn-danger"
+            class="btn btn-danger delete-challenge-btn"
            @click="deleteChallenge()"
          >
+            <div
+              class="svg-icon color delete-icon"
+              v-html="icons.deleteIcon"
+            ></div>
            {{ $t('deleteChallenge') }}
          </button>
        </div>
@@ -82,6 +138,7 @@

 <style lang='scss'>
  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/button.scss';

  #close-challenge-modal {
    h2 {
@@ -94,26 +151,190 @@

    .header-wrap {
      width: 100%;
-      padding-top: 2em;
+      padding-top: 32px;
+      position: relative;
    }

-    .support-habitica {
-      background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw');
-      width: 325px;
-      height: 89px;
+    .modal-close {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      padding: 0;
+      margin: 0;
+    }
+
+    .search-input-container {
+      margin-top: 1em !important;
+    }
+
+    .search-input-wrapper {
+      position: relative;
+      width: 384px;
      margin: 0 auto;
+
+      .search-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-55%);
+        width: 16px;
+        height: 16px;
+        color: $gray-200;
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+      }
+
+      .search-input {
+        width: 100%;
+        height: 32px;
+        padding-left: 36px;
+        padding-right: 12px;
+        border: 1px solid $gray-400;
+        border-radius: 4px;
+        font-size: 14px;
+        transition: border-color 0.2s ease, border-width 0.2s ease;
+
+        &:focus {
+          outline: none;
+          border: 2px solid $purple-400;
+        }
+
+        &::placeholder {
+          color: $gray-300;
+        }
+      }
+
+      .search-results {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: $white;
+        border: 1px solid $gray-400;
+        border-top: none;
+        border-radius: 0 0 4px 4px;
+        max-height: 200px;
+        overflow-y: auto;
+        z-index: 1000;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+        .search-result-item {
+          padding: 8px 16px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          text-align: left;
+
+          &:hover {
+            background-color: $purple-600;
+            color: $purple-300;
+          }
+        }
+      }
+    }
+
+    .delete-challenge-text {
+      color: $maroon-50;
+    }
+
+    .refund-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $gray-50;
+      margin-top: 0.5em !important;
+    }
+
+    .delete-challenge-btn {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 24px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+
+      .delete-icon {
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+      }
+    }
+
+    .award-winner-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 32px;
+      padding: 4px 12px;
+      transition: all 0.2s ease;
+
+      &:not(:disabled) {
+        background-color: $white;
+        color: $gray-200;
+        border: 1px solid $gray-400;
+        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+
+        &.has-winner {
+          background-color: $purple-200;
+          color: $white;
+          border-color: $purple-200;
+        }
+
+        &:hover:not(.has-winner) {
+          background-color: $gray-700;
+        }
+      }
+
+      .gem-icon {
+        width: 20px;
+        height: 20px;
+        display: inline-flex;
+        align-items: center;
+        color: $gems-color;
+      }
+    }
+
+    .badge-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1.5rem;
+      margin: -24px auto 0;
+      padding: 0.5rem 0;
+
+      .gems-left, .gems-right {
+        width: 64px;
+        height: 64px;
+        flex-shrink: 0;
+      }
+
+      .challenge-badge {
+        width: 48px;
+        height: 52px;
+        flex-shrink: 0;
+      }
    }

    .modal-footer, .modal-header {
      border: none !important;
    }

+    .modal-header {
+      padding: 0 !important;
+    }
+
    .footer-wrap {
      display: none;
    }

    .col-12 {
-      margin-top: 2em;
+      margin-top: 1.5em;
+    }
+
+    .col-12:first-child {
+      margin-top: 0;
    }

    .or {
@@ -123,21 +344,39 @@
      margin-right: auto;
      margin-left: auto;
      font-weight: bold;
+      color: $gray-100;
    }
  }
 </style>

 <script>
-import memberSearchDropdown from '@/components/members/memberSearchDropdown';
+import searchIcon from '@/assets/svg/for-css/search.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import endChallengeBadge from '@/assets/svg/for-css/end_challenge_badge.svg?raw';
+import gemsOrange from '@/assets/svg/for-css/orange100_red100_yellow100_gems.svg?raw';
+import gemsPurple from '@/assets/svg/for-css/purple200_green10_blue100_gems.svg?raw';
+import closeX from '@/components/ui/closeX';

 export default {
  components: {
-    memberSearchDropdown,
+    closeX,
  },
  props: ['challengeId', 'members', 'prize', 'flagCount'],
  data () {
    return {
      winner: {},
+      searchTerm: '',
+      showResults: false,
+      filteredMembers: [],
+      icons: Object.freeze({
+        search: searchIcon,
+        deleteIcon,
+        gem: gemIcon,
+        endChallengeBadge,
+        gemsOrange,
+        gemsPurple,
+      }),
    };
  },
  computed: {
@@ -150,8 +389,35 @@ export default {
    },
  },
  methods: {
+    searchMembers () {
+      if (!this.searchTerm) {
+        this.filteredMembers = [];
+        return;
+      }
+
+      const searchLower = this.searchTerm.toLowerCase().replace('@', '');
+      this.filteredMembers = this.members.filter(member => {
+        const username = member.auth?.local?.username || '';
+        const displayName = member.profile?.name || '';
+        return username.toLowerCase().includes(searchLower)
+               || displayName.toLowerCase().includes(searchLower);
+      }).slice(0, 10);
+    },
+    getMemberDisplayName (member) {
+      if (member.auth?.local?.username) {
+        return `@${member.auth.local.username}`;
+      }
+      return member.profile?.name || '';
+    },
    selectMember (member) {
      this.winner = member;
+      this.searchTerm = this.getMemberDisplayName(member);
+      this.showResults = false;
+    },
+    handleBlur () {
+      setTimeout(() => {
+        this.showResults = false;
+      }, 200);
    },
    async closeChallenge () {
      this.challenge = await this.$store.dispatch('challenges:selectChallengeWinner', {
--- a/website/client/src/components/header/notifications/g1g1.vue
+++ b/website/client/src/components/header/notifications/g1g1.vue
@@ -1,37 +1,43 @@
 <template>
  <div
-    class="notification d-flex flex-column justify-content-center text-center"
+    class="notification d-flex justify-content-center align-items-center"
  >
-    <strong
-      v-once
-      class="mx-auto mb-2"
+    <img
+      src="@/assets/images/gifts_start.svg"
+      class="gift-start"
+      alt=""
    >
-      {{ $t('g1g1') }}
-    </strong>
-    <small
-      v-once
-      class="mx-4 mb-3"
-    >
-      {{ $t('g1g1Details') }}
-    </small>
-    <div
-      class="btn-secondary mx-auto d-flex"
-      @click="showSelectUser()"
-    >
-      <div
+    <div class="content-wrapper d-flex flex-column justify-content-center text-center">
+      <strong
        v-once
-        class="m-auto"
+        class="mx-auto mb-2"
+      >
+        {{ $t('g1g1') }}
+      </strong>
+      <small
+        v-once
+        class="mx-4 mb-3"
+      >
+        {{ $t('g1g1Details') }}
+      </small>
+      <button
+        class="btn btn-secondary mx-auto"
+        @click="showSelectUser()"
      >
        {{ $t('sendGift') }}
-      </div>
+      </button>
    </div>
+    <img
+      src="@/assets/images/gifts_start.svg"
+      class="gift-end"
+      alt=""
+    >
    <div
-      class="notification-remove"
-      @click.stop="remove()"
+      class="close-x"
+      @click="remove()"
    >
      <div
-        v-once
-        class="svg-icon"
+        class="svg-icon svg-close"
        v-html="icons.close"
      ></div>
    </div>
@@ -41,51 +47,89 @@
 <style lang='scss' scoped>
  @import '@/assets/scss/colors.scss';

-  small, strong {
+  small {
    color: $white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: 0;
+  }
+
+  strong {
+    color: $white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 1.714;
  }

  .notification {
-    background-image: url('@/assets/images/g1g1-notif.png');
+    background-image: url('@/assets/images/gifts_bg.svg');
+    background-size: cover;
+    background-position: center;
    height: 10rem;
-    padding: 3rem;
+    padding: 0;
    position: relative;
    overflow: hidden;
    white-space: normal;
    cursor: pointer;
  }

-  .notification-remove {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    padding: 4px;
-    right: 24px;
-    top: 24px;
-
-    .svg-icon {
-      width: 10px;
-      height: 10px;
-    }
+  .content-wrapper {
+    flex: 1;
+    padding: 2rem;
+    z-index: 1;
  }

-  .btn-secondary {
-    width: 5.75rem;
-    min-height: 1.5rem;
-    border-radius: 2px;
-    border-color: $white;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    font-size: 12px;
-    font-weight: bold;
+  .gift-start {
+    height: 96px;
+    width: auto;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 0;
+  }
+
+  .gift-end {
+    height: 96px;
+    width: auto;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%) scaleX(-1);
+    z-index: 0;
+  }
+
+  .close-x {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+    z-index: 2;
+
+    &:hover .svg-close {
+      opacity: 0.75;
+    }
+
+    .svg-close {
+      width: 18px;
+      height: 18px;
+      opacity: 0.5;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+    }
  }
 </style>

 <script>
-import closeIcon from '@/assets/svg/close-teal.svg?raw';
-import { mapActions } from '@/libs/store';
+import closeIcon from '@/assets/svg/close-white.svg?raw';

 export default {
-  props: ['notification'],
+  props: ['notification', 'eventKey'],
  data () {
    return {
      icons: Object.freeze({
@@ -94,11 +138,11 @@ export default {
    };
  },
  methods: {
-    ...mapActions({
-      readNotification: 'notifications:readNotification',
-    }),
    remove () {
-      this.readNotification({ notificationId: this.notification.id });
+      if (this.eventKey) {
+        window.sessionStorage.setItem(`hide-g1g1-${this.eventKey}`, 'true');
+      }
+      this.$emit('notification-removed');
    },
    showSelectUser () {
      this.$root.$emit('bv::show::modal', 'select-user-modal');
--- a/website/client/src/components/header/notifications/onboardingComplete.vue
+++ b/website/client/src/components/header/notifications/onboardingComplete.vue
@@ -71,7 +71,7 @@ export default {
  props: ['notification', 'canRemove'],
  methods: {
    action () {
-      this.$router.push({ name: 'achievements' });
+      this.$router.push(`/profile/${this.$store.state.user.data._id}#achievements`);
    },
  },
 };
--- a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
+++ b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
@@ -43,7 +43,7 @@ export default {
  },
  methods: {
    action () {
-      this.$router.push({ name: 'stats' });
+      this.$router.push(`/profile/${this.$store.state.user.data._id}#stats`);
    },
  },
 };
--- a/website/client/src/components/header/notificationsDropdown.vue
+++ b/website/client/src/components/header/notificationsDropdown.vue
@@ -49,6 +49,12 @@
        v-if="showOnboardingGuide"
        :never-seen="hasSpecialBadge"
      />
+      <gift-one-get-one-notification
+        v-if="shouldShowG1g1"
+        :notification="g1g1Notification"
+        :event-key="g1g1EventKey"
+        @notification-removed="handleG1g1Removed"
+      />
      <component
        :is="notification.type"
        v-for="notification in notifications"
@@ -114,6 +120,7 @@
 <script>
 import * as quests from '@/../../common/script/content/quests';
 import { hasCompletedOnboarding } from '@/../../common/script/libs/onboarding';
+import find from 'lodash/find';
 import { mapState, mapActions } from '@/libs/store';
 import notificationsIcon from '@/assets/svg/notifications.svg?raw';
 import MenuDropdown from '../ui/customMenuDropdown';
@@ -151,6 +158,7 @@ export default {
    CARD_RECEIVED,
    CHALLENGE_INVITATION,
    GIFT_ONE_GET_ONE,
+    GiftOneGetOneNotification: GIFT_ONE_GET_ONE,
    GROUP_TASK_ASSIGNED,
    GROUP_TASK_CLAIMED,
    GROUP_TASK_NEEDS_WORK,
@@ -178,17 +186,14 @@ export default {
      hasSpecialBadge: false,
      quests,
      openStatus: undefined,
+      g1g1Hidden: false,
      actionableNotifications: [
        'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
        'QUEST_INVITATION',
      ],
-      // A list of notifications handled by this component,
-      // listed in the order they should appear in the notifications panel.
-      // NOTE: Those not listed here won't be shown in the notification panel!
      handledNotifications: [
        'NEW_STUFF',
        'ITEM_RECEIVED',
-        'GIFT_ONE_GET_ONE',
        'GROUP_TASK_NEEDS_WORK',
        'GUILD_INVITATION',
        'PARTY_INVITATION',
@@ -207,7 +212,10 @@ export default {
    };
  },
  computed: {
-    ...mapState({ user: 'user.data' }),
+    ...mapState({
+      user: 'user.data',
+      currentEventList: 'worldState.data.currentEventList',
+    }),
    notificationsOrder () {
      // Returns a map of NOTIFICATION_TYPE -> POSITION
      const orderMap = {};
@@ -286,9 +294,9 @@ export default {

      return notifications;
    },
-    // The total number of notification, shown inside the dropdown
    notificationsCount () {
-      return this.notifications.length;
+      const g1g1Count = this.shouldShowG1g1 ? 1 : 0;
+      return this.notifications.length + g1g1Count;
    },
    hasUnseenNotifications () {
      return this.notifications.some(notification => (notification.seen === false));
@@ -299,6 +307,30 @@ export default {
    showOnboardingGuide () {
      return !hasCompletedOnboarding(this.user);
    },
+    currentG1g1Event () {
+      return find(this.currentEventList, event => event.promo === 'g1g1');
+    },
+    g1g1EventKey () {
+      if (!this.currentG1g1Event || !this.currentG1g1Event.start) return null;
+      const startDate = new Date(this.currentG1g1Event.start);
+      return `${startDate.getFullYear()}-${startDate.getMonth()}`;
+    },
+    shouldShowG1g1 () {
+      if (!this.currentG1g1Event) return false;
+      const eventKey = this.g1g1EventKey;
+      if (eventKey && window.sessionStorage.getItem(`hide-g1g1-${eventKey}`) === 'true') {
+        return false;
+      }
+      return !this.g1g1Hidden;
+    },
+    g1g1Notification () {
+      return {
+        type: 'GIFT_ONE_GET_ONE',
+        id: `g1g1-event-${this.currentG1g1Event?.start || 'default'}`,
+        data: {},
+        seen: false,
+      };
+    },
  },
  mounted () {
    const onboardingPanelState = getLocalSetting(CONSTANTS.keyConstants.ONBOARDING_PANEL_STATE);
@@ -364,6 +396,9 @@ export default {
    isActionable (notification) {
      return this.actionableNotifications.indexOf(notification.type) !== -1;
    },
+    handleG1g1Removed () {
+      this.g1g1Hidden = true;
+    },
  },

 };
--- a/website/client/src/components/header/userDropdown.vue
+++ b/website/client/src/components/header/userDropdown.vue
@@ -176,7 +176,12 @@ export default {
      }
    },
    showProfile (startingPage) {
-      this.$router.push({ name: startingPage });
+      const userId = this.$store.state.user.data._id;
+      let path = `/profile/${userId}`;
+      if (startingPage !== 'profile') {
+        path += `#${startingPage}`;
+      }
+      this.$router.push(path);
    },
    toLearnMore () {
      this.$router.push({ name: 'subscription' });
--- a/website/client/src/components/messages/messageCard.vue
+++ b/website/client/src/components/messages/messageCard.vue
@@ -454,17 +454,14 @@ export default {
    },
    isUserMentioned () {
      const message = this.msg;
-
      if (message.highlight) {
        return true;
      }
-
      const { user } = this;
-      const displayName = user.profile.name;
      const { username } = user.auth.local;
-      const pattern = `@(${escapeRegExp(displayName)}|${escapeRegExp(username)})(\\b)`;
-      message.highlight = new RegExp(pattern, 'i').test(message.text);
-
+      if (!username) return false;
+      const usernamePattern = new RegExp(`@${escapeRegExp(username)}(?:\\b|(?=[^a-zA-Z0-9_]))`, 'i');
+      message.highlight = usernamePattern.test(message.text);
      return message.highlight;
    },
    flagCountDescription () {
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -1126,7 +1126,12 @@ export default {
    this.loadUser();
    this.oldTitle = this.$store.state.title;
    this.handleExternalLinks();
-    this.selectPage(this.startingPage);
+    // Check if there's a hash in the URL to determine the starting page
+    let pageToSelect = this.startingPage;
+    if (window.location.hash && (window.location.hash === '#stats' || window.location.hash === '#achievements')) {
+      pageToSelect = window.location.hash.substring(1);
+    }
+    this.selectPage(pageToSelect);
    this.$root.$on('habitica:report-profile-result', () => {
      this.loadUser();
    });
@@ -1211,10 +1216,15 @@ export default {
    },
    selectPage (page) {
      this.selectedPage = page || 'profile';
-      window.history.replaceState(null, null, '');
+      const profileUserId = this.userId || this.userLoggedIn._id;
+      let newPath = `/profile/${profileUserId}`;
+      if (page !== 'profile') {
+        newPath += `#${page}`;
+      }
+      window.history.replaceState(null, null, newPath);
      this.$store.dispatch('common:setTitle', {
        section: this.$t('user'),
-        subSection: this.$t(this.startingPage),
+        subSection: this.$t(page),
      });
    },
    getNextIncentive () {
--- a/website/client/src/libs/renderWithMentions.js
+++ b/website/client/src/libs/renderWithMentions.js
@@ -1,7 +1,16 @@
 import habiticaMarkdown from 'habitica-markdown/withMentions';
+import escapeRegExp from 'lodash/escapeRegExp';

 export default function renderWithMentions (text, user) {
  if (!text) return null;
-  const env = { userName: user.auth.local.username, displayName: user.profile.name };
-  return habiticaMarkdown.render(String(text), env);
+  const env = { userName: user.auth.local.username };
+  let html = habiticaMarkdown.render(String(text), env);
+
+  if (user.auth.local.username) {
+    const username = escapeRegExp(user.auth.local.username);
+    const regex = new RegExp(`(<span class="at-text">@)(${username})(</span>)`, 'gi');
+    html = html.replace(regex, (match, p1, p2, p3) => `${p1.replace('at-text', 'at-text at-highlight')}${p2}${p3}`);
+  }
+
+  return html;
 }
--- a/website/client/src/router/index.js
+++ b/website/client/src/router/index.js
@@ -90,6 +90,9 @@ const router = new VueRouter({
      path: '/profile/:userId',
      props: true,
    },
+    { name: 'profile', path: '/user/profile' },
+    { name: 'stats', path: '/user/stats' },
+    { name: 'achievements', path: '/user/achievements' },
    {
      path: '/inventory',
      component: InventoryContainer,
@@ -369,6 +372,10 @@ router.beforeEach(async (to, from, next) => {
    if (to.params.startingPage !== undefined) {
      startingPage = to.params.startingPage;
    }
+    // Check if there's a hash in the URL for stats or achievements
+    if (to.hash === '#stats' || to.hash === '#achievements') {
+      startingPage = to.hash.substring(1);
+    }
    if (from.name === null) {
      store.state.postLoadModal = `profile/${to.params.userId}`;
      return next({ name: 'tasks' });
@@ -389,10 +396,18 @@ router.beforeEach(async (to, from, next) => {
  }

  if ((to.name === 'stats' || to.name === 'achievements' || to.name === 'profile') && from.name !== null) {
+    const userId = store.state.user.data._id;
+    let redirectPath = `/profile/${userId}`;
+    if (to.name === 'stats') {
+      redirectPath += '#stats';
+    } else if (to.name === 'achievements') {
+      redirectPath += '#achievements';
+    }
    router.app.$emit('habitica:show-profile', {
+      userId,
      startingPage: to.name,
      fromPath: from.path,
-      toPath: to.path,
+      toPath: redirectPath,
    });
    return null;
  }
--- a/website/client/tests/unit/libs/renderWithMentions.spec.js
+++ b/website/client/tests/unit/libs/renderWithMentions.spec.js
@@ -12,12 +12,12 @@ describe('renderWithMentions', () => {
    expect(result).to.be.null;
  });

-  test('highlights displayname', () => {
+  test('does not highlight displayname to prevent impersonation', () => {
    const text = 'hello @displayedUser with text after';

    const result = renderMarkdown(text, user('user', 'displayedUser'));
-
-    expect(result).to.contain('<span class="at-text at-highlight">@displayedUser</span>');
+    expect(result).to.contain('<span class="at-text">@displayedUser</span>');
+    expect(result).to.not.contain('<span class="at-text at-highlight">@displayedUser</span>');
  });

  test('highlights username', () => {
@@ -56,7 +56,8 @@ describe('renderWithMentions', () => {

    const result = renderMarkdown(plainText, user('use', 'mentions'));

-    expect(result).to.contain('<span class="at-text at-highlight">@mentions</span>');
+    expect(result).to.contain('<span class="at-text">@mentions</span>');
+    expect(result).to.not.contain('<span class="at-text at-highlight">@mentions</span>');
    expect(result).to.contain('<span class="at-text at-highlight">@use</span>');
    expect(result).to.contain('<span class="at-text">@mail</span>');
    expect(result).to.not.contain('<span class="at-text at-highlight">@mentions</span>.com');
--- a/website/common/locales/en/challenge.json
+++ b/website/common/locales/en/challenge.json
@@ -69,6 +69,7 @@
  "awardWinners": "Award Winner",
  "doYouWantedToDeleteChallenge": "Do you want to delete this Challenge?",
  "deleteChallenge": "Delete Challenge",
+  "deleteChallengeRefundDescription": "If you delete this Challenge, you will be refunded the Gem prize and the Challenge tasks will remain on the participants' task boards.",
  "challengeNamePlaceholder": "What is your Challenge name?",
  "challengeSummary": "Summary",
  "challengeSummaryPlaceholder": "Write a short description advertising your Challenge to other Habiticans. What is the main purpose of your Challenge and why should people join it? Try to include useful keywords in the description so that Habiticans can easily find it when they search!",
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -51,6 +51,7 @@
  "notEnoughGems": "Not enough Gems",
  "alreadyHave": "Whoops! You already have this item. No need to buy it again!",
  "delete": "Delete",
+  "gem": "Gem",
  "gems": "Gems",
  "needMoreGems": "Need More Gems?",
  "needMoreGemsInfo": "Purchase Gems now, or become a subscriber to buy Gems with Gold, get monthly mystery items, enjoy increased drop caps and more!",
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -116,7 +116,7 @@
  "needsTextPlaceholder": "Type your message here.",
  "messageCopiedToClipboard": "Message copied to clipboard.",
  "leaderOnlyChallenges": "Only group leader can create challenges",
-  "sendGift": "Send a Gift",
+  "sendGift": "Send Gift",
  "selectGift": "Select Gift",
  "selectSubscription": "Select Subscription",
  "sendGiftToWhom": "Who would you like to send a gift to?",
--- a/website/server/libs/highlightMentions.js
+++ b/website/server/libs/highlightMentions.js
@@ -164,18 +164,24 @@ export default async function highlightMentions (text) {

  if (mentions && mentions.length <= 5) {
    const usernames = mentions.map(mention => mention.substr(1));
+    const usernameRegexes = usernames.map(username => new RegExp(`^${escapeRegExp(username)}$`, 'i'));
    members = await User
-      .find({ 'auth.local.username': { $in: usernames }, 'flags.verifiedUsername': true })
+      .find({
+        $or: usernameRegexes.map(regex => ({ 'auth.local.username': regex })),
+        'flags.verifiedUsername': true,
+      })
      .select(['auth.local.username', '_id', 'preferences.pushNotifications', 'pushDevices', 'party', 'guilds'])
      .lean()
      .exec();
    const baseUrl = determineBaseUrl();
    members.forEach(member => {
      const { username } = member.auth.local;
-      const regex = new RegExp(`@${username}(?![\\-\\w])`, 'g');
-      const replacement = `[@${username}](${baseUrl}/profile/${member._id})`;
+      const regex = new RegExp(`@${escapeRegExp(username)}(?![\\-\\w])`, 'gi');

-      textBlocks.transformValidBlocks(blockText => blockText.replace(regex, replacement));
+      textBlocks.transformValidBlocks(blockText => blockText.replace(regex, match => {
+        const mentionedUsername = match.substr(1);
+        return `[@${mentionedUsername}](${baseUrl}/profile/${member._id})`;
+      }));
    });
  }