diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index d0353dd25c1..c3d8031eab4 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -5,9 +5,31 @@ background: hsl(var(--hsl-b4)); border-radius: @border-radius-large; min-width: 0; + position: relative; display: flex; align-items: center; - padding: 3px; + padding: 1px; + border: 2px solid transparent; + + &--played-today { + border-color: @osu-colour-lime-1; + + &::before { + .fas(); + .center-content(); + background-color: @osu-colour-lime-1; + border-radius: 50%; + color: @osu-colour-b6; + content: @fa-var-check; + font-size: 8px; // icon size + height: 16px; + position: absolute; + right: 0; + top: 0; + transform: translate(50%, -50%); + width: $height; + } + } &__name { font-size: @font-size--normal; @@ -20,7 +42,7 @@ } &__value-box { - border-radius: @border-radius-large; + border-radius: @border-radius-small; background: hsl(var(--hsl-b6)); padding: 5px 10px; } diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx index 44cf465e2c4..abd07f6db93 100644 --- a/resources/js/profile-page/daily-challenge.tsx +++ b/resources/js/profile-page/daily-challenge.tsx @@ -4,6 +4,8 @@ import DailyChallengeUserStatsJson from 'interfaces/daily-challenge-user-stats-json'; import { autorun } from 'mobx'; import { observer } from 'mobx-react'; +import * as moment from 'moment'; +import core from 'osu-core-singleton'; import * as React from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; import { classWithModifiers, Modifiers } from 'utils/css'; @@ -122,10 +124,13 @@ export default class DailyChallenge extends React.Component { return null; } + const playedToday = this.props.stats.last_update !== null && moment.utc(this.props.stats.last_update).isSame(Date.now(), 'day'); + const userIsOnOwnProfile = this.props.stats.user_id === core.currentUser?.id; + return (