From 9fc4d20ebd5722c395b08e6d9ba07461bffd9803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= <dach.bartlomiej@gmail.com>
Date: Thu, 9 Jan 2025 10:22:40 +0100
Subject: [PATCH 1/4] Add completion marker to daily challenge profile counter

Implements https://github.com/ppy/osu-web/issues/11597 for the website.
---
 resources/css/bem/daily-challenge.less        | 26 ++++++++++++--
 resources/js/profile-page/daily-challenge.tsx | 35 +++++++++++--------
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less
index d0353dd25c1..0d7d2aa6ddf 100644
--- a/resources/css/bem/daily-challenge.less
+++ b/resources/css/bem/daily-challenge.less
@@ -5,9 +5,29 @@
   background: hsl(var(--hsl-b4));
   border-radius: @border-radius-large;
   min-width: 0;
-  display: flex;
-  align-items: center;
-  padding: 3px;
+  position: relative;
+
+  &--played-today {
+    border: 2px solid @osu-colour-lime-1;
+
+    &::before {
+      .fas();
+      background-color: @osu-colour-b6;
+      border-radius: 50%;
+      color: @osu-colour-lime-1;
+      content: @fa-var-check-circle;
+      font-size: 16px;
+      position: absolute;
+      right: -8px;
+      top: -8px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    padding: 3px;
+  }
 
   &__name {
     font-size: @font-size--normal;
diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx
index 44cf465e2c4..79d5a511704 100644
--- a/resources/js/profile-page/daily-challenge.tsx
+++ b/resources/js/profile-page/daily-challenge.tsx
@@ -4,6 +4,7 @@
 import DailyChallengeUserStatsJson from 'interfaces/daily-challenge-user-stats-json';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
+import * as moment from 'moment';
 import * as React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { classWithModifiers, Modifiers } from 'utils/css';
@@ -122,26 +123,30 @@ export default class DailyChallenge extends React.Component<Props> {
       return null;
     }
 
+    const playedToday = this.props.stats.last_update != null && moment.utc(this.props.stats.last_update).isSame(Date.now(), 'day');
+
     return (
       <div
         ref={this.valueRef}
-        className='daily-challenge'
+        className={classWithModifiers('daily-challenge', { 'played-today': playedToday })}
         onMouseOver={this.onMouseOver}
       >
-        <div className='daily-challenge__name'>
-          {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => (
-            <div key={i}>{line}</div>
-          ))}
-        </div>
-        <div className='daily-challenge__value-box'>
-          <div
-            className='daily-challenge__value'
-            style={tierStylePlaycount(this.props.stats.playcount)}
-          >
-            {trans(
-              'users.show.daily_challenge.unit.day',
-              { value: formatNumber(this.props.stats.playcount) },
-            )}
+        <div className='daily-challenge__content'>
+          <div className='daily-challenge__name'>
+            {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => (
+              <div key={i}>{line}</div>
+            ))}
+          </div>
+          <div className='daily-challenge__value-box'>
+            <div
+              className='daily-challenge__value'
+              style={tierStylePlaycount(this.props.stats.playcount)}
+            >
+              {trans(
+                'users.show.daily_challenge.unit.day',
+                { value: formatNumber(this.props.stats.playcount) },
+              )}
+            </div>
           </div>
         </div>
       </div>

From b8adbac16b6ba1c94a5f114d2a675959076405c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= <dach.bartlomiej@gmail.com>
Date: Thu, 9 Jan 2025 10:26:06 +0100
Subject: [PATCH 2/4] Adjust radius of inner box

As mentioned in https://github.com/ppy/osu-web/issues/11597.
---
 resources/css/bem/daily-challenge.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less
index 0d7d2aa6ddf..e3e97b527c4 100644
--- a/resources/css/bem/daily-challenge.less
+++ b/resources/css/bem/daily-challenge.less
@@ -40,7 +40,7 @@
   }
 
   &__value-box {
-    border-radius: @border-radius-large;
+    border-radius: @border-radius-small;
     background: hsl(var(--hsl-b6));
     padding: 5px 10px;
   }

From 5f2ab58224c3654db2ea9e8fbdff270c7036ea8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= <dach.bartlomiej@gmail.com>
Date: Thu, 9 Jan 2025 10:52:38 +0100
Subject: [PATCH 3/4] Remove superfluous div

---
 resources/css/bem/daily-challenge.less        |  9 ++----
 resources/js/profile-page/daily-challenge.tsx | 30 +++++++++----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less
index e3e97b527c4..ecee003191d 100644
--- a/resources/css/bem/daily-challenge.less
+++ b/resources/css/bem/daily-challenge.less
@@ -6,6 +6,9 @@
   border-radius: @border-radius-large;
   min-width: 0;
   position: relative;
+  display: flex;
+  align-items: center;
+  padding: 3px;
 
   &--played-today {
     border: 2px solid @osu-colour-lime-1;
@@ -23,12 +26,6 @@
     }
   }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    padding: 3px;
-  }
-
   &__name {
     font-size: @font-size--normal;
     padding: 0 5px;
diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx
index 79d5a511704..73c380bf9ec 100644
--- a/resources/js/profile-page/daily-challenge.tsx
+++ b/resources/js/profile-page/daily-challenge.tsx
@@ -131,22 +131,20 @@ export default class DailyChallenge extends React.Component<Props> {
         className={classWithModifiers('daily-challenge', { 'played-today': playedToday })}
         onMouseOver={this.onMouseOver}
       >
-        <div className='daily-challenge__content'>
-          <div className='daily-challenge__name'>
-            {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => (
-              <div key={i}>{line}</div>
-            ))}
-          </div>
-          <div className='daily-challenge__value-box'>
-            <div
-              className='daily-challenge__value'
-              style={tierStylePlaycount(this.props.stats.playcount)}
-            >
-              {trans(
-                'users.show.daily_challenge.unit.day',
-                { value: formatNumber(this.props.stats.playcount) },
-              )}
-            </div>
+        <div className='daily-challenge__name'>
+          {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => (
+            <div key={i}>{line}</div>
+          ))}
+        </div>
+        <div className='daily-challenge__value-box'>
+          <div
+            className='daily-challenge__value'
+            style={tierStylePlaycount(this.props.stats.playcount)}
+          >
+            {trans(
+              'users.show.daily_challenge.unit.day',
+              { value: formatNumber(this.props.stats.playcount) },
+            )}
           </div>
         </div>
       </div>

From e69ab6ad6c50f3eafeecc9dcb50c296e76b50c59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= <dach.bartlomiej@gmail.com>
Date: Wed, 15 Jan 2025 14:47:25 +0100
Subject: [PATCH 4/4] Apply review suggestions

---
 resources/css/bem/daily-challenge.less | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less
index ecee003191d..0f95ff5d90a 100644
--- a/resources/css/bem/daily-challenge.less
+++ b/resources/css/bem/daily-challenge.less
@@ -8,10 +8,11 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 3px;
+  padding: 1px;
+  border: 2px solid transparent;
 
   &--played-today {
-    border: 2px solid @osu-colour-lime-1;
+    border-color: @osu-colour-lime-1;
 
     &::before {
       .fas();
@@ -19,10 +20,11 @@
       border-radius: 50%;
       color: @osu-colour-lime-1;
       content: @fa-var-check-circle;
-      font-size: 16px;
+      font-size: 16px; // icon size
       position: absolute;
-      right: -8px;
-      top: -8px;
+      right: 0;
+      top: 0;
+      transform: translate(50%, -50%);
     }
   }