Styling for hidden attendees elements

2 files changed, 30 insertions, 4 deletions

diff --git a/public/css/style.css b/public/css/style.css
index d50ab11..dd59d6b 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -187,6 +187,28 @@ body, html {
     font-weight: bold;
 }
 
+.attendeesList > li.hidden-attendee {
+    border: 4px solid #ccc;
+    background: #eee;
+}
+
+.attendeesList > li.hidden-attendee a {
+    color: #555;
+}
+
+.hidden-attendees-message {
+    display: inline-block;
+    border: 4px solid #ccc;
+    text-align: center;
+    border-radius: 2em;
+    padding: 0.5em 1em;
+    background: #eee;
+    color: #555;
+    font-size: 0.95em;
+    font-weight: bold;
+    margin: 0;
+}
+
 .expand {
     -webkit-transition: height 0.2s;
     -moz-transition: height 0.2s;
@@ -321,6 +343,10 @@ body, html {
     color: #fff;
 }
 
+li.hidden-attendee .attendee-name {
+    color: #555;
+}
+
 .remove-attendee {
     color: #fff;
 }
diff --git a/views/event.handlebars b/views/event.handlebars
index 2440623..763aa22 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -139,7 +139,7 @@
       <button type="button" id="unattendEvent" class="btn btn-secondary" data-toggle="modal" data-target="#unattendModal"><i class="fas fa-user-times"></i> Remove me</button>
     </div>
   </h5>
-  <div class="card-body">
+  <div class="card-body text-center">
     {{#if eventData.maxAttendees}}
       {{#if noMoreSpots}}
         <div class="alert alert-warning text-center" id="attendees-alert">This event is at capacity.</div>
@@ -147,20 +147,20 @@
         <div class="alert alert-warning text-center" id="attendees-alert">{{spotsRemaining}} {{plural spotsRemaining "spot(s)"}} remaining - add yourself now!</div>
       {{/if}}
     {{/if}}
-    {{#if visibleAttendees}}
+    {{#if numberOfAttendees}}
       <ul class="attendeesList">
         {{#each visibleAttendees}}
           <li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}}><span class="attendee-name">{{this.name}}</span>{{#if ../editingEnabled}} <a href="#" class="remove-attendee" data-toggle="modal" data-target="#removeAttendeeModal" title="Remove user from event"><i class="fas fa-user-times"></i></a>{{/if}}</li>
         {{/each}}
         {{#if editingEnabled}}
           {{#each hiddenAttendees}}
-            <li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}}><span class="attendee-name">{{this.name}} (hidden from public list)</span>{{#if ../editingEnabled}} <a href="#" class="remove-attendee" data-toggle="modal" data-target="#removeAttendeeModal" title="Remove user from event"><i class="fas fa-user-times"></i></a>{{/if}}</li>
+            <li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}} class="hidden-attendee"><span class="attendee-name">{{this.name}} (hidden from public list)</span>{{#if ../editingEnabled}} <a href="#" class="remove-attendee" data-toggle="modal" data-target="#removeAttendeeModal" title="Remove user from event"><i class="fas fa-user-times"></i></a>{{/if}}</li>
           {{/each}}
         {{/if}}
       </ul>
       {{#unless editingEnabled}}
         {{#if numberOfHiddenAttendees}}
-          <p class="text-center text-muted mb-0">+{{numberOfHiddenAttendees}} hidden attendee{{plural numberOfHiddenAttendees ""}}</p>
+          <div class="hidden-attendees-message">{{numberOfHiddenAttendees}} hidden attendee{{plural numberOfHiddenAttendees ""}}</div>
         {{/if}}
       {{/unless}}
     {{else}}