diff --git a/website/client/src/assets/svg/for-css/end_challenge_badge.svg b/website/client/src/assets/svg/for-css/end_challenge_badge.svg new file mode 100644 index 0000000000..e7beb8115a --- /dev/null +++ b/website/client/src/assets/svg/for-css/end_challenge_badge.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git 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 new file mode 100644 index 0000000000..1b9f48d5a5 --- /dev/null +++ b/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git 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 new file mode 100644 index 0000000000..7c38566dc4 --- /dev/null +++ b/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/src/components/challenges/closeChallengeModal.vue b/website/client/src/components/challenges/closeChallengeModal.vue index 2bee9a2b70..42caa3b457 100644 --- 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="true" >
{{ $t('endChallenge') }} +
-
- +
+
+
+
{{ $t('selectChallengeWinnersDescription') }}
- +
+
+ +
+
+ {{ getMemberDisplayName(member) }} +
+
+
@@ -60,14 +108,24 @@
- {{ $t('doYouWantedToDeleteChallenge') }} + {{ $t('doYouWantedToDeleteChallenge') }} +
+
+ {{ $t('deleteChallengeRefundDescription') }}
@@ -95,13 +153,175 @@ .header-wrap { width: 100%; padding-top: 2em; + position: relative; } - .support-habitica { - background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw'); - width: 325px; - height: 89px; + .close-button { + position: absolute; + top: 1rem; + right: 1rem; + background: none; + border: none; + padding: 0.5rem; + cursor: pointer; + opacity: 0.5; + transition: opacity 0.2s ease; + + &:hover { + opacity: 1; + } + + .svg-icon { + width: 16px; + height: 16px; + color: $gray-10; + } + } + + .search-input-wrapper { + position: relative; + width: 384px; margin: 0 auto; + + .search-icon { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + color: $gray-200; + pointer-events: none; + } + + .search-input { + width: 100%; + height: 32px; + padding-left: 36px; + padding-right: 12px; + border: 2px solid $gray-400; + border-radius: 4px; + font-size: 14px; + transition: border-color 0.2s ease; + + &:focus { + outline: none; + border-color: $purple-300; + } + + &::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 12px; + cursor: pointer; + transition: background-color 0.2s ease; + + &:hover { + background-color: $gray-700; + } + } + } + } + + .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; + padding: 8px 16px; + 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); + transition: all 0.2s ease; + + &.has-winner { + background-color: $purple-200; + color: $white; + border-color: $purple-200; + + .gem-icon { + color: $white; + } + } + + &: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: 0 auto; + padding: 1rem 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 { @@ -123,21 +343,37 @@ margin-right: auto; margin-left: auto; font-weight: bold; + color: $gray-100; } }