UX: Events UI Edits

This PR restyles the current events post UI:

- Minimize size of invitee avatars
- move CTA buttons to bottom
- remove invitee header & show more button (show more is in ellipses drop down)
- restyle border
- restyle month & date size & spacing
- increase font size for title
- add "0 going" placeholder to prevent jumpiness when invitees are rendered

assets/javascripts/discourse/components/discourse-post-event/dates.gjs

@@ -7,6 +7,7 @@ import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { applyLocalDates } from "discourse/lib/local-dates";
 import { cook } from "discourse/lib/text";
+import icon from "discourse-common/helpers/d-icon";
 import guessDateFormat from "../../lib/guess-best-date-format";
 
 export default class DiscoursePostEventDates extends Component {
@@ -79,6 +80,6 @@ export default class DiscoursePostEventDates extends Component {
     <section
       class="event__section event-dates"
       {{didInsert this.computeDates}}
-    >{{this.htmlDates}}</section>
+    >{{icon "far-clock"}}{{this.htmlDates}}</section>
   </template>
 }

assets/javascripts/discourse/components/discourse-post-event/index.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
 import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
+import { or } from "truth-helpers";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import replaceEmoji from "discourse/helpers/replace-emoji";
@@ -108,12 +109,6 @@ export default class DiscoursePostEvent extends Component {
             />
           </header>
 
-          {{#if @event.canUpdateAttendance}}
-            <section class="event__section event-actions">
-              <Status @event={{@event}} />
-            </section>
-          {{/if}}
-
           <PluginOutlet
             @name="discourse-post-event-info"
             @outletArgs={{hash
@@ -122,11 +117,22 @@ export default class DiscoursePostEvent extends Component {
               Url=(component Url url=@event.url)
               Dates=(component Dates event=@event)
               Invitees=(component Invitees event=@event)
+              Status=(component Status event=@event)
             }}
           >
-            <Url @url={{@event.url}} />
+            {{#if
+              (or
+                @event.watchingInvitee.isGoing
+                @event.watchingInvitee.isInterested
+              )
+            }}
+              <Url @url={{@event.url}} />
+            {{/if}}
             <Dates @event={{@event}} />
             <Invitees @event={{@event}} />
+            {{#if @event.canUpdateAttendance}}
+              <Status @event={{@event}} />
+            {{/if}}
           </PluginOutlet>
         {{/if}}
       </div>

assets/javascripts/discourse/components/discourse-post-event/invitees.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import PostEventInvitees from "../modal/post-event-invitees";
 import Invitee from "./invitee";
@@ -70,11 +71,22 @@ export default class DiscoursePostEventInvitees extends Component {
               @action={{this.showAllInvitees}}
             />
           </div>
-          <ul class="event-invitees-avatars">
-            {{#each @event.sampleInvitees as |invitee|}}
-              <Invitee @invitee={{invitee}} />
-            {{/each}}
-          </ul>
+          <div class="event-invitees-avatars-container">
+            {{icon "users"}}
+            <ul class="event-invitees-avatars">
+              {{#each @event.sampleInvitees as |invitee|}}
+                <Invitee @invitee={{invitee}} />
+              {{/each}}
+            </ul>
+          </div>
+        </section>
+      {{else}}
+        <section class="event__section no-rsvp">
+          <div class="header">
+            <div class="event-invitees-status">
+              <p class="no-rsvp-description">0 going</p>
+            </div>
+          </div>
         </section>
       {{/if}}
     {{/unless}}

assets/javascripts/discourse/components/discourse-post-event/status.gjs

@@ -107,9 +107,9 @@ export default class DiscoursePostEventStatus extends Component {
   }
 
   <template>
-    <div
+    <section
       class={{concatClass
-        "event-status"
+        "event__section event-actions event-status"
         (if
           this.watchingInviteeStatus
           (concat "status-" this.watchingInviteeStatus)
@@ -177,6 +177,6 @@ export default class DiscoursePostEventStatus extends Component {
           {{/unless}}
         {{/if}}
       </PluginOutlet>
-    </div>
+    </section>
   </template>
 }

assets/javascripts/discourse/models/discourse-post-event-invitee.js

@@ -15,6 +15,18 @@ export default class DiscoursePostEventInvitee {
     this.user = this.#initUserModel(args.user);
   }
 
+  isGoing() {
+    return this.status === "going";
+  }
+
+  isInterested() {
+    return this.status === "interested";
+  }
+
+  isNotGoing() {
+    return this.status === "not_going";
+  }
+
   #initUserModel(user) {
     if (!user || user instanceof User) {
       return user;