more solid styling choices

assets/javascripts/discourse/components/reports/best-posts.gjs

@@ -1,16 +1,22 @@
 import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
 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 {
+  rank(idx) {
+    return idx + 1;
+  }
+
   <template>
     <div class="rewind-report-page -best-posts">
       <h2 class="rewind-report-title">Your 3 best posts</h2>
       <div class="rewind-report-container">
-        {{#each @report.data as |post|}}
+        {{#each @report.data as |post idx|}}
-          <div class="rewind-card">
+          <div class={{concat "rewind-card" " rank-" (this.rank idx)}}>
+            <span class="best-posts -rank"></span>
+            <span class="best-posts -rank"></span>
             <div class="best-posts__post">{{htmlSafe (get post "5")}}</div>
             <div class="best-posts__metadata">
               <span class="best-posts__likes">

assets/javascripts/discourse/components/reports/best-topics.gjs

@@ -1,25 +1,12 @@
 import Component from "@glimmer/component";
 import { concat } from "@ember/helper";
 import { htmlSafe } from "@ember/template";
-import emoji from "discourse/helpers/emoji";
 
 export default class BestTopics extends Component {
   rank(idx) {
     return idx + 1;
   }
 
-  emojiName(rank) {
-    if (rank + 1 === 1) {
-      return "1st_place_medal";
-    } else if (rank + 1 === 2) {
-      return "2nd_place_medal";
-    } else if (rank + 1 === 3) {
-      return "3rd_place_medal";
-    } else {
-      return "medal";
-    }
-  }
-
   <template>
     <div class="rewind-report-page -best-topics">
       <h2 class="rewind-report-title">Your 3 best topics</h2>
@@ -30,9 +17,9 @@ export default class BestTopics extends Component {
               href={{concat "/t/-/" topic.topic_id}}
               class={{concat "best-topics__topic" " rank-" (this.rank idx)}}
             >
-              <span class="best-topics__rank">{{emoji
+              <span class="best-topics -rank"></span>
-                  (this.emojiName idx)
+              <span class="best-topics -rank"></span>
-                }}</span><h2>{{topic.title}}</h2>
+              <h2>{{topic.title}}</h2>
               <span class="best-topics__excerpt">{{htmlSafe
                   topic.excerpt
                 }}</span>

assets/javascripts/discourse/components/reports/introduction.gjs

@@ -1,12 +1,21 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
+import dIcon from "discourse-common/helpers/d-icon";
 
 export default class Rewind extends Component {
   @service siteSettings;
 
   <template>
-    <div class="rewind-report-page">
+    <div class="rewind__introduction">
-      <h1>{{this.siteSettings.title}} 2024 rewind</h1>
+      <img
+        class="rewind-logo-light"
+        src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
+      />
+      <img
+        class="rewind-logo-dark"
+        src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
+      />
+
     </div>
   </template>
 }

assets/javascripts/discourse/components/reports/reactions.gjs

@@ -16,10 +16,6 @@ export default class Reactions extends Component {
     ).reduce((acc, count) => acc + count, 0);
   }
 
-  get randomModifier() {
-    return Math.random();
-  }
-
   @action
   computePercentage(count) {
     return `${((count / this.totalPostUsedReactions) * 100).toFixed(2)}%`;
@@ -39,17 +35,11 @@ export default class Reactions extends Component {
       <h2 class="rewind-report-title">Most received reactions in topics</h2>
       <div class="rewind-report-container">
         {{#each-in this.receivedReactions as |emojiName count|}}
-          <div
+          <div class="rewind-card scale">
-            class="rewind-card scale"
-            style="--rand: {{this.randomModifier}}"
-          >
             <span class="rewind-card__emoji">{{replaceEmoji
                 (concat ":" emojiName ":")
               }}</span>
-            <span class="rewind-card__title">{{this.cleanEmoji
+            <span class="rewind-card__data">{{count}}</span>
-                emojiName
-              }}</span>
-            <span class="rewind-card__data">{{count}} times</span>
           </div>
         {{/each-in}}
       </div>

assets/javascripts/discourse/components/reports/reading-time.gjs

@@ -11,7 +11,8 @@ export default class ReadingTime extends Component {
 
   <template>
     <div class="rewind-report-page -reading-time">
-      <div class="rewind-report-container">
+      <h2 class="rewind-report-title">Reading Time</h2>
+      <div class="rewind-card">
         <p class="reading-time__text">You spent
           <code>{{this.readTimeString}}</code>
           reading on our site! That's the time it would take to read through

assets/javascripts/discourse/components/reports/word-card.gjs

@@ -4,6 +4,7 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import emoji from "discourse/helpers/emoji";
+import discourseLater from "discourse-common/lib/later";
 
 const MYSTERY_EMOJIS = [
   "mag", // 🔍
@@ -54,9 +55,19 @@ export default class WordCard extends Component {
     this.cardContainer.classList.toggle("flipped");
   }
 
+  @action
+  handleLeave() {
+    const cardContainer = this.cardContainer;
+    cardContainer.classList.toggle("mouseleave");
+    discourseLater(() => {
+      cardContainer.classList.remove("mouseleave");
+    }, 100);
+  }
+
   <template>
     <div
       {{on "click" (fn this.handleClick)}}
+      {{on "mouseleave" (fn this.handleLeave)}}
       class="rewind-card__wrapper"
       style={{concat this.randomStyle "; " this.mysteryData.color ";"}}
       {{didInsert this.registerCardContainer}}

assets/javascripts/discourse/components/reports/word-cards.gjs

@@ -8,15 +8,17 @@ export default class WordCards extends Component {
 
   <template>
     <div class="rewind-report-page -word-cloud">
-      <h2 class="rewind-report-title">Word Usage</h2>
       <div class="rewind-report-container">
-        {{#each this.topWords as |entry index|}}
+        <h2 class="rewind-report-title">Word Usage</h2>
-          <WordCard
+        <div class="cards-container">
-            @word={{entry.word}}
+          {{#each this.topWords as |entry index|}}
-            @count={{entry.score}}
+            <WordCard
-            @index={{index}}
+              @word={{entry.word}}
-          />
+              @count={{entry.score}}
-        {{/each}}
+              @index={{index}}
+            />
+          {{/each}}
+        </div>
       </div>
     </div>
   </template>

assets/javascripts/discourse/components/rewind.gjs

@@ -85,8 +85,8 @@ export default class Rewind extends Component {
       tabindex="0"
     >
       <div class="rewind">
+        <Introduction />
         <div class="background-1 parallax-bg"></div>
-        {{! <canvas class="background-2 parallax-bg"></canvas> }}
         {{#if this.loadingRewind}}
           <div class="rewind-loader">
             <div class="spinner small"></div>
@@ -98,15 +98,11 @@ export default class Rewind extends Component {
             @icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
             @action={{this.toggleFullScreen}}
           />
-
           <div
             class="rewind__scroll-wrapper"
             {{didInsert this.registerScrollWrapper}}
             {{on "scroll" this.handleScroll}}
           >
-            <div class="rewind-report">
-              <Introduction />
-            </div>
 
             {{#each this.rewind as |report|}}
               <div class={{concatClass "rewind-report" report.identifier}}>

assets/stylesheets/common/activity-calendar.scss

@@ -1,4 +1,7 @@
 .rewind-report-page.-activity-calendar {
+  .rewind-card {
+    @include rewind-border;
+  }
   .rewind-calendar {
     border-collapse: unset;
     border-spacing: 3px;
@@ -16,7 +19,7 @@
   .rewind-calendar-cell {
     height: 10px;
     width: 10px;
-    border-radius: 2px;
+    border-radius: var(--rewind-border-radius);
     border: 1px solid rgba(var(--primary-rgb), 0.2);
     &.-empty {
       background: var(--primary-low);

assets/stylesheets/common/best-posts.scss

@@ -7,6 +7,48 @@
     max-width: 700px;
     text-align: left;
     align-items: unset;
+    position: relative;
+    @include rewind-border;
+    &.rank-1 {
+      --background: #ffe46a;
+      --border-color: #ffd82a;
+    }
+    &.rank-2 {
+      --background: #d6d6d6;
+      --border-color: #c4c4c4;
+    }
+    &.rank-3 {
+      --background: #dca570;
+      --border-color: #cd7f32;
+    }
+  }
+  .best-posts.-rank {
+    z-index: -1;
+    position: absolute;
+    top: 8px;
+    left: -28px;
+    width: 0px;
+    height: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    border-right: 28px solid var(--border-color);
+    border-top: 28px solid transparent;
+    &:nth-child(2) {
+      z-index: -1;
+      position: absolute;
+      top: 8px;
+      left: -28px;
+      width: 0px;
+      height: 0px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-left: 28px solid var(--border-color);
+      border-right: 0;
+      transform: rotate(180deg);
+    }
   }
   .best-posts__post {
     font-weight: normal;
@@ -26,7 +68,7 @@
   .best-posts__replies {
     border: 1px solid var(--primary-200);
     padding: 3px 8px;
-    border-radius: 5px;
+    border-radius: var(--rewind-border-radius);
     display: flex;
     gap: 5px;
     align-items: center;

assets/stylesheets/common/best-topics.scss

@@ -21,6 +21,7 @@
     flex-direction: column;
     text-align: left;
     max-width: 700px;
+    @include rewind-border;
     &.rank-1 {
       --background: #ffe46a;
       --border-color: #ffd82a;
@@ -34,23 +35,34 @@
       --border-color: #cd7f32;
     }
     background: var(--secondary);
-    border: 1px solid var(--primary-300);
   }
-  .best-topics__rank {
+  .best-topics.-rank {
+    z-index: -1;
     position: absolute;
-    top: -15px;
+    top: 8px;
-    left: -19px;
+    left: -28px;
-    width: 35px;
+    width: 0px;
-    height: 35px;
+    height: 0px;
-    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--secondary);
+    box-shadow: none;
-    border: 1px solid var(--primary-300);
+    border-right: 28px solid var(--border-color);
-  }
+    border-top: 28px solid transparent;
-  .best-topics__rank img.emoji {
+    &:nth-child(2) {
-    display: block;
+      z-index: -1;
+      position: absolute;
+      top: 8px;
+      left: -28px;
+      width: 0px;
+      height: 0px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-left: 28px solid var(--border-color);
+      border-right: 0;
+      transform: rotate(180deg);
+    }
   }
   .best-topics__excerpt {
     font-size: var(--font-down-2);

assets/stylesheets/common/card.scss

@@ -9,13 +9,12 @@ body {
 
 .rewind-report-container {
   perspective: 1000px;
-  gap: 0.5em;
 }
 
 .rewind-card {
   background-color: var(--secondary);
   border: 1px solid var(--primary-300);
-  border-radius: var(--d-border-radius);
+  border-radius: var(--rewind-border-radius);
   background-size: cover;
   display: flex;
   flex-direction: column;
@@ -24,6 +23,8 @@ body {
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  max-width: 700px;
   &__title {
     font-family: var(--heading-font) !important;
     font-weight: 600;

assets/stylesheets/common/fonts.scss

@@ -9,7 +9,7 @@
   h3,
   h4,
   h5 {
-    font-family: var(--heading-font);
+    font-family: roboto;
     -webkit-font-smoothing: antialiased;
   }
 
@@ -19,3 +19,8 @@
     -webkit-font-smoothing: antialiased;
   }
 }
+
+h2.rewind-report-title {
+  font-size: var(--font-down-2);
+  text-transform: uppercase;
+}

assets/stylesheets/common/post-received-reactions.scss

@@ -1,32 +1,48 @@
 .-post-received-reactions {
+  .rewind-report-container {
+    align-items: center;
+    gap: 0.5em;
+  }
   .rewind-card {
-    width: 177px;
-    height: 190px;
     background: var(--secondary);
-
+    flex-direction: row;
+    gap: 0.5em;
+    height: min-content;
+    @include rewind-border;
     .emoji {
-      width: 72px;
+      width: 30px;
-      height: 72px;
+      height: 30px;
     }
   }
-
+  .rewind-card__emoji {
+    font-size: 12px;
+  }
   .scale:nth-child(1) {
-    scale: 0.6;
+    padding: 0.25em;
+    .emoji {
+      width: 20px;
+      height: 20px;
+    }
   }
   .scale:nth-child(2) {
-    scale: 0.7;
+    padding: 0.35em;
-    margin-left: -70px;
+    .emoji {
+      width: 22px;
+      height: 22px;
+    }
   }
   .scale:nth-child(3) {
-    scale: 0.8;
+    padding: 0.5em;
-    margin-left: -50px;
+    .emoji {
+      width: 24px;
+      height: 24px;
+    }
   }
   .scale:nth-child(4) {
-    scale: 0.9;
+    padding: 0.75em;
-    margin-left: -30px;
+    .emoji {
-  }
+      width: 26px;
-  .scale:nth-child(5) {
+      height: 26px;
-    scale: 1;
+    }
-    margin-left: -10px;
   }
 }

assets/stylesheets/common/post-used-reactions.scss

@@ -1,4 +1,7 @@
 .-post-used-reactions {
+  .rewind-card {
+    @include rewind-border;
+  }
   .rewind-reactions-chart {
     display: flex;
     flex-direction: column;
@@ -29,7 +32,7 @@
     background: var(--tertiary-600);
     border: 1px solid rgba(var(--primary-rgb), 0.2);
     height: 25px;
-    border-radius: 2px;
+    border-radius: calc(var(--rewind-border-radius) * 0.75);
   }
 
   .rewind-total-reactions {

assets/stylesheets/common/reading-time.scss

@@ -81,16 +81,13 @@
   width: 50%;
 }
 
-.reading-time .rewind-report-container {
+.reading-time .rewind-card {
-  max-width: 600px;
   gap: 1em;
   padding: 1.5em;
+  flex-direction: row;
   justify-content: space-around;
   align-items: center;
-  background-color: rgba(var(--d-green), 1);
+  background-color: var(--secondary);
-  @media (prefers-color-scheme: dark) {
-    background-color: rgba(var(--d-green-dark), 1);
-  }
   --book-color: rgba(var(--primary-rgb), 0.4);
-  border-radius: 2px;
+  @include rewind-border;
 }

assets/stylesheets/common/report.scss

@@ -1,12 +1,12 @@
 .rewind-report-page {
   display: flex;
-  align-items: center;
   justify-content: center;
   padding: 1em;
   box-sizing: border-box;
   font-size: var(--font-up-2);
   width: 100%;
-  gap: 1em;
+  max-width: 700px;
+  margin: 0 auto;
   flex-direction: column;
 }
 

assets/stylesheets/common/rewind.scss

@@ -21,7 +21,7 @@
     width: calc(100vw - (100vw - 100%) + 2px);
     height: 100vh;
     position: fixed;
-    background: rgba(255, 255, 255, 0.5);
+    background: rgba(var(--secondary-rgb), 0.5);
     backdrop-filter: blur(4.9px);
     -webkit-backdrop-filter: blur(4.9px);
   }
@@ -33,12 +33,12 @@
   max-height: 100%;
   max-width: 100%;
   background-color: var(--secondary);
-  border: 1px solid var(--primary-300);
+  border: 1px solid var(--primary);
-  border-radius: calc(var(--d-border-radius) / 2);
+  border-radius: var(--rewind-border-radius);
   container-type: size;
   position: relative;
   overflow: hidden;
-  max-width: 960px;
+  // max-width: 960px;
   background: var(--secondary);
 }
 
@@ -54,17 +54,6 @@
   height: 1000%;
   opacity: 0.45;
 }
-
-// .background-2 {
-//   position: absolute;
-//   width: 100%;
-//   height: 1000%;
-//   background: url(/plugins/discourse-rewind/images/bg-2.png);
-//   background-size: contain;
-//   transform: translateY(0px);
-//   opacity: 0.85;
-// }
-
 .rewind__scroll-wrapper {
   overflow-y: auto;
   overflow-x: hidden;
@@ -76,11 +65,40 @@
   gap: 2em;
 }
 
+.rewind__introduction {
+  padding: 1em 0 1em 1em;
+  background-color: var(--secondary);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  box-shadow: 1px 0px 0px 1px var(--primary);
+  img {
+    height: 50px;
+    margin-bottom: 5px;
+    &.rewind-logo-dark {
+      display: none;
+    }
+    @media (prefers-color-scheme: dark) {
+      &.rewind-logo-dark {
+        display: block;
+      }
+      &.rewind-logo-light {
+        display: none;
+      }
+    }
+  }
+  p {
+    margin: 0 0.5em 0 0;
+    text-transform: uppercase;
+    font-size: var(--font-up-1);
+  }
+}
+
 .rewind__exit-fullscreen-btn {
   position: absolute;
   top: 20px;
   right: 20px;
-  z-index: 1;
+  z-index: 2;
 }
 
 .rewind__prev-btn {

assets/stylesheets/common/variables.scss

@@ -9,4 +9,15 @@
   --d-green-dark: 17, 138, 68;
   --d-orange-dark: 188, 105, 65;
   --d-red-dark: 183, 64, 70;
+
+  --rewind-border-radius: 4px;
+}
+
+@mixin rewind-border() {
+  border: 2px solid var(--primary);
+  border-radius: var(--rewind-border-radius);
+  box-shadow: 4px 4px 0 0 rgba(var(--primary-rgb), 0.25);
+  @media screen and (prefers-color-scheme: dark) {
+    box-shadow: 0 4px 5px -2px rgba(var(--secondary-rgb), 0.5);
+  }
 }

assets/stylesheets/common/word-card.scss

@@ -1,10 +1,21 @@
+.rewind-report-page.-word-cloud .rewind-report-container {
+  border: none;
+  background-color: transparent;
+  width: 100%;
+  flex-direction: column;
+}
+
+.cards-container {
+  display: flex;
+}
+
 .rewind-card__wrapper {
   width: 150px;
   height: 175px;
   perspective: 1000px;
   will-change: transform;
   transform-style: preserve-3d;
-  border-radius: 0.25vw;
+  border-radius: var(--rewind-border-radius);
   cursor: pointer;
   animation-name: ambientMovement;
   animation-duration: 4000ms;
@@ -18,7 +29,7 @@
     border: none;
     @media (prefers-color-scheme: dark) {
       background-color: var(--primary-200);
-      box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 0.75);
+      box-shadow: 0 0 0 4px rgba(var(--mystery-color-dark), 1);
     }
   }
   .rewind-card__inner {
@@ -27,17 +38,25 @@
     height: 100%;
     text-align: center;
     transform-style: preserve-3d;
-    transition: transform;
+    transition: transform, box-shadow;
-    transition-duration: 0.5s;
+    transition-duration: 0.35s;
     transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
   }
+  &.mouseleave {
+    animation: flip-shrink 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s
+      forwards;
+    z-index: 999;
+  }
   &.flipped .rewind-card__inner {
     transform: rotateY(180deg);
   }
   &:hover {
-    animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
+    animation: flip-zoom 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
     z-index: 999;
   }
+  &:hover .rewind-card__inner {
+    box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+  }
   .rewind-card.-back {
     transform: rotateY(180deg);
   }
@@ -104,6 +123,18 @@
   }
 }
 
+@keyframes flip-shrink {
+  0% {
+    transform: scale(1.25);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 @keyframes ambientMovement {
   0% {
     --ambientAmount: 0.1;