feat: Use track colors in session item (#4847)

app/templates/components/public/session-item.hbs → app/components/public/session-item.hbs

@@ -1,9 +1,9 @@
-<UiAccordion>
-  <div class="title" {{action 'hideSpeakerImage'}} role="button">
+<UiAccordion class="segment p-0" style={{css background-color=@session.track.color border-color='lightgray'}}>
+  <div class="title p-4" {{action 'hideSpeakerImage'}} role="button" style={{css color=(text-color @session.track.color)}}>
     <div class="ui">
-      <h3 class="ui header" id="session-id-{{@session.id}}">
+      <h3 class="ui header" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
         {{@session.title}}
-        <div class="sub header">
+        <div class="sub header" style={{css color=(text-color @session.track.color) opacity=0.6}}>
           {{@session.sessionType.name}}
         </div>
       </h3>
@@ -41,7 +41,7 @@
       </div>
     </div>
   </div>
-  <div class="content">
+  <div class="content pt-0 p-4 rounded-t-none" style={{css background-color='white' border-radius='0.2rem'}}>
     {{#each @session.speakers as |speaker|}}
       <div class="ui divider"></div>
       <img alt="speaker" class="ui tiny avatar image" src="{{if speaker.thumbnailImageUrl speaker.thumbnailImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">

app/components/public/session-item.js

@@ -1,18 +1,14 @@
-import classic from 'ember-classic-decorator';
 import { action } from '@ember/object';
-import { classNames } from '@ember-decorators/component';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
-@classic
-@classNames('ui', 'segment')
 export default class SessionItem extends Component {
   hideImage = false;
 
   @action
   hideSpeakerImage() {
-    this.toggleProperty('hideImage');
-    if (!this.session.speakers.length) {
-      this.set('hideImage', false);
+    this.hideImage = !this.hideImage;
+    if (!this.args.session.speakers.length) {
+      this.hideImage = false;
     }
   }
 }

app/styles/partials/utils.scss

@@ -19,13 +19,18 @@
 }
 
 .rounded-default {
-  border-radius: .3rem;
+  border-radius: .28571429rem;
 }
 
 .rounded-none {
   border-radius: 0 !important;
 }
 
+.rounded-t-none {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
 .rounded-r-none {
   border-bottom-right-radius: 0 !important;
   border-top-right-radius: 0 !important;
@@ -36,10 +41,18 @@
   border-top-left-radius: 0 !important;
 }
 
+.p-0 {
+  padding: 0 !important;
+}
+
 .p-4 {
   padding: 1rem !important;
 }
 
+.pt-0 {
+  padding-top: 0 !important;
+}
+
 .mt-8 {
   margin-top: 2rem;
 }