more

assets/javascripts/discourse/connectors/after-header-panel/rewind-decoration.gjs

@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { TrackedObject } from "@ember-compat/tracked-built-ins";
+import bodyClass from "discourse/helpers/body-class";
+import KeyValueStore from "discourse/lib/key-value-store";
+import isRewindActive from "discourse/plugins/discourse-rewind/discourse/lib/is-rewind-active";
+
+export default class AvatarDecorator extends Component {
+  store = new TrackedObject(
+    new KeyValueStore("discourse_rewind_" + this.fetchYear)
+  );
+
+  get fetchYear() {
+    const currentDate = new Date();
+    const currentMonth = currentDate.getMonth();
+    const currentYear = currentDate.getFullYear();
+
+    if (currentMonth === 0) {
+      return currentYear - 1;
+    } else {
+      return currentYear;
+    }
+  }
+
+  get dismissed() {
+    return this.store.getObject("_dismissed") ?? false;
+  }
+
+  get showDecorator() {
+    return isRewindActive() && !this.dismissed;
+  }
+
+  <template>
+    {{#if this.showDecorator}}
+      {{bodyClass "rewind-notification-active"}}
+    {{/if}}
+  </template>
+}

assets/stylesheets/common/rewind-callout.scss

@@ -1,19 +1,33 @@
 .rewind-callout {
   background: var(--primary);
-  padding: 0.5em;
+  padding: 12px;
   margin-bottom: 0.5em;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
+  width: calc(100% - 12px);
   border-radius: var(--d-border-radius);
+  height: calc(100% - 12px);
+  margin: 0 auto;
+  box-shadow: 0 0 0 6px var(--primary);
+  transition: box-shadow;
+  transition-duration: 0.5s;
+  transition-timing-function: ease-in-out;
+  .rewind-logo {
+    height: 30px;
+  }
 
   &:hover,
   &:focus {
-    background: var(--primary-low-mid) !important;
+    background: var(--primary) !important;
-  }
+    box-shadow: 0 0 0 2px rgba(var(--d-blue), 1),
-
+      0 0 0 4px rgba(var(--d-green), 1), 0 0 0 6px rgba(var(--d-orange), 1),
-  &__arrow {
+      0 0 0 8px rgba(var(--d-red), 1);
-    color: var(--secondary);
+    @if color-scheme-is-light {
+      box-shadow: 0 0 0 2px rgba(var(--d-blue-dark), 1),
+        0 0 0 4px rgba(var(--d-green-dark), 1),
+        0 0 0 6px rgba(var(--d-orange-dark), 1),
+        0 0 0 8px rgba(var(--d-red-dark), 1);
+    }
   }
 }