From 5e7daba027a8165f3463766da732a2a52635f8dc Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Mon, 6 Jan 2025 11:53:18 -0600
Subject: [PATCH] styling:

---
 .../rewind/action/best_posts.rb               |  2 +-
 .../components/reports/activity-calendar.gjs  |  2 +-
 .../components/reports/best-posts.gjs         | 16 +++++++---
 .../components/reports/best-topics.gjs        |  5 +--
 .../reports/favorite-categories.gjs           |  2 +-
 .../components/reports/favorite-tags.gjs      |  2 +-
 .../components/reports/reactions.gjs          |  4 +--
 .../components/reports/word-cloud.gjs         |  2 +-
 assets/stylesheets/common/best-posts.scss     | 31 +++++++++++++++++++
 assets/stylesheets/common/card.scss           |  3 +-
 assets/stylesheets/common/fonts.scss          |  2 ++
 assets/stylesheets/common/report.scss         |  1 +
 assets/stylesheets/common/rewind.scss         |  2 +-
 13 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/app/services/discourse_rewind/rewind/action/best_posts.rb b/app/services/discourse_rewind/rewind/action/best_posts.rb
index 3f676ed..d3bf29c 100644
--- a/app/services/discourse_rewind/rewind/action/best_posts.rb
+++ b/app/services/discourse_rewind/rewind/action/best_posts.rb
@@ -11,7 +11,7 @@ module DiscourseRewind
           .where("post_number > 1")
           .order("like_count DESC NULLS LAST")
           .limit(3)
-          .pluck(:id, :topic_id, :like_count, :reply_count, :raw, :cooked)
+          .pluck(:post_number, :topic_id, :like_count, :reply_count, :raw, :cooked)
 
       { data: best_posts, identifier: "best-posts" }
     end
diff --git a/assets/javascripts/discourse/components/reports/activity-calendar.gjs b/assets/javascripts/discourse/components/reports/activity-calendar.gjs
index 067f1fb..130b9bb 100644
--- a/assets/javascripts/discourse/components/reports/activity-calendar.gjs
+++ b/assets/javascripts/discourse/components/reports/activity-calendar.gjs
@@ -38,7 +38,7 @@ export default class ActivityCalendar extends Component {
   <template>
     <div class="rewind-report-page -activity-calendar">
       <div class="rewind-card">
-        <h3 class="rewind-report-title">Activity Calendar</h3>
+        <h2 class="rewind-report-title">Activity Calendar</h2>
         <table class="rewind-calendar">
           <thead>
             <tr>
diff --git a/assets/javascripts/discourse/components/reports/best-posts.gjs b/assets/javascripts/discourse/components/reports/best-posts.gjs
index bcac2cb..e8a296d 100644
--- a/assets/javascripts/discourse/components/reports/best-posts.gjs
+++ b/assets/javascripts/discourse/components/reports/best-posts.gjs
@@ -1,19 +1,25 @@
 import Component from "@glimmer/component";
 import { get } from "@ember/object";
 import { htmlSafe } from "@ember/template";
+import dIcon from "discourse-common/helpers/d-icon";
 
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class BestPosts extends Component {
   <template>
     <div class="rewind-report-page -best-posts">
-      <h3 class="rewind-report-title">Your 3 best posts</h3>
+      <h2 class="rewind-report-title">Your 3 best posts</h2>
       <div class="rewind-report-container">
+        {{log @report.data}}
         {{#each @report.data as |post|}}
           <div class="rewind-card">
             <div class="best-posts__post">{{htmlSafe (get post "5")}}</div>
-            <span class="best-posts__likes">Likes:
-              {{htmlSafe (get post "2")}}</span>
-            <span class="best-posts__replies">Replies:
-              {{htmlSafe (get post "3")}}</span>
+            <div class="best-posts__metadata">
+              <span class="best-posts__likes">
+                {{dIcon "heart"}}{{htmlSafe (get post "2")}}</span>
+              <span class="best-posts__replies">
+                {{dIcon "comment"}}{{htmlSafe (get post "3")}}</span>
+              <a href="/t/{{get post '1'}}/{{get post '0'}}">View post</a>
+            </div>
           </div>
         {{/each}}
       </div>
diff --git a/assets/javascripts/discourse/components/reports/best-topics.gjs b/assets/javascripts/discourse/components/reports/best-topics.gjs
index c67181d..6115a5d 100644
--- a/assets/javascripts/discourse/components/reports/best-topics.gjs
+++ b/assets/javascripts/discourse/components/reports/best-topics.gjs
@@ -1,12 +1,13 @@
 import Component from "@glimmer/component";
 import { concat } from "@ember/helper";
 
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class BestTopics extends Component {
   <template>
     <div class="rewind-report-page -best-topics">
-      <h3 class="rewind-report-title">Your 3 best topics</h3>
+      <h2 class="rewind-report-title">Your 3 best topics</h2>
       <div class="rewind-report-container">
-        {{log @report.data}}
+        {{!-- {{log @report.data}} --}}
         {{#each @report.data as |topic|}}
           <div class="rewind-card">
             <a
diff --git a/assets/javascripts/discourse/components/reports/favorite-categories.gjs b/assets/javascripts/discourse/components/reports/favorite-categories.gjs
index 2efe9af..b7cc72b 100644
--- a/assets/javascripts/discourse/components/reports/favorite-categories.gjs
+++ b/assets/javascripts/discourse/components/reports/favorite-categories.gjs
@@ -4,7 +4,7 @@ import { concat } from "@ember/helper";
 export default class FavoriteCategories extends Component {
   <template>
     <div class="rewind-report-page -favorite-categories">
-      <h3 class="rewind-report-title">Your favorite categories</h3>
+      <h2 class="rewind-report-title">Your favorite categories</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
           <div class="rewind-card">
diff --git a/assets/javascripts/discourse/components/reports/favorite-tags.gjs b/assets/javascripts/discourse/components/reports/favorite-tags.gjs
index 02e0e01..e9aff96 100644
--- a/assets/javascripts/discourse/components/reports/favorite-tags.gjs
+++ b/assets/javascripts/discourse/components/reports/favorite-tags.gjs
@@ -4,7 +4,7 @@ import { concat } from "@ember/helper";
 export default class FavoriteTags extends Component {
   <template>
     <div class="rewind-report-page -favorite-tags">
-      <h3 class="rewind-report-title">Your favorite tags</h3>
+      <h2 class="rewind-report-title">Your favorite tags</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
           <div class="rewind-card">
diff --git a/assets/javascripts/discourse/components/reports/reactions.gjs b/assets/javascripts/discourse/components/reports/reactions.gjs
index 4a8cab8..2e75fce 100644
--- a/assets/javascripts/discourse/components/reports/reactions.gjs
+++ b/assets/javascripts/discourse/components/reports/reactions.gjs
@@ -32,7 +32,7 @@ export default class Reactions extends Component {
 
   <template>
     <div class="rewind-report-page -post-received-reactions">
-      <h3 class="rewind-report-title">Most received reactions in topics</h3>
+      <h2 class="rewind-report-title">Most received reactions in topics</h2>
       <div class="rewind-report-container">
         {{#each-in @report.data.post_received_reactions as |emojiName count|}}
           <div
@@ -53,7 +53,7 @@ export default class Reactions extends Component {
 
     <div class="rewind-report-page -post-used-reactions">
       <div class="rewind-card">
-        <h3 class="rewind-report-title">Most used reactions in topics</h3>
+        <h2 class="rewind-report-title">Most used reactions in topics</h2>
         <div class="rewind-reactions-chart">
           {{#each-in @report.data.post_used_reactions as |emojiName count|}}
             <div class="rewind-reactions-row">
diff --git a/assets/javascripts/discourse/components/reports/word-cloud.gjs b/assets/javascripts/discourse/components/reports/word-cloud.gjs
index 8c603f8..113b2ee 100644
--- a/assets/javascripts/discourse/components/reports/word-cloud.gjs
+++ b/assets/javascripts/discourse/components/reports/word-cloud.gjs
@@ -7,7 +7,7 @@ export default class WordCloud extends Component {
 
   <template>
     <div class="rewind-report-page -word-cloud">
-      <h3 class="rewind-report-title">Most used words</h3>
+      <h2 class="rewind-report-title">Most used words</h2>
       <div class="rewind-report-container">
         {{#each-in @report.data as |word count|}}
           <div class="rewind-card__wrapper" style={{this.randomStyle}}>
diff --git a/assets/stylesheets/common/best-posts.scss b/assets/stylesheets/common/best-posts.scss
index 649a7b7..42adc9d 100644
--- a/assets/stylesheets/common/best-posts.scss
+++ b/assets/stylesheets/common/best-posts.scss
@@ -3,4 +3,35 @@
     flex-direction: column;
     gap: 1em;
   }
+  .rewind-card {
+    max-width: 700px;
+    text-align: left;
+    align-items: unset;
+  }
+  .best-posts__post {
+    font-weight: normal;
+    font-size: 16px;
+    width: 100%;
+    text-align: left;
+  }
+  .best-posts__metadata {
+    font-weight: normal;
+    font-size: 12px;
+    display: flex;
+    gap: 10px;
+    color: var(--primary-700);
+    align-items: center;
+  }
+  .best-posts__likes,
+  .best-posts__replies {
+    border: 1px solid var(--primary-200);
+    padding: 3px 8px;
+    border-radius: 5px;
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    svg {
+      color: var(--primary-700);
+    }
+  }
 }
diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss
index 9d8ad8d..4cc601b 100644
--- a/assets/stylesheets/common/card.scss
+++ b/assets/stylesheets/common/card.scss
@@ -71,8 +71,9 @@ body {
 
 .rewind-card {
   background-color: var(--secondary);
-  box-shadow: 0 0 0 1px var(--primary-300), 0 0 0 3px var(--primary-100);
+  border: 1px solid var(--primary-300);
   border-radius: var(--d-border-radius);
+  background-size: cover;
   display: flex;
   flex-direction: column;
   text-align: center;
diff --git a/assets/stylesheets/common/fonts.scss b/assets/stylesheets/common/fonts.scss
index 5a8ead1..ba5f40d 100644
--- a/assets/stylesheets/common/fonts.scss
+++ b/assets/stylesheets/common/fonts.scss
@@ -10,10 +10,12 @@
   h4,
   h5 {
     font-family: var(--heading-font);
+    -webkit-font-smoothing: antialiased;
   }
 
   p,
   span {
     font-family: var(--regular-font);
+    -webkit-font-smoothing: antialiased;
   }
 }
diff --git a/assets/stylesheets/common/report.scss b/assets/stylesheets/common/report.scss
index 825d6d9..d4d5c0f 100644
--- a/assets/stylesheets/common/report.scss
+++ b/assets/stylesheets/common/report.scss
@@ -19,6 +19,7 @@
 
 .rewind-report-container {
   display: flex;
+  max-width: 100%;
 }
 
 .rewind-report-title {
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index aea4883..a06d79c 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -70,7 +70,7 @@
 
 .rewind__exit-fullscreen-btn {
   position: absolute;
-  top: 5px;
+  top: 20px;
   right: 20px;
   z-index: 1;
 }