From 57fdbccd46a0c2f422ad821606b8f5646580b73e Mon Sep 17 00:00:00 2001
From: Areeb Jamal <jamal.areeb@gmail.com>
Date: Sun, 23 Aug 2020 12:10:16 +0530
Subject: [PATCH] feat: Use track colors in session item (#4847)

---
 .../components/public/session-item.hbs            | 10 +++++-----
 app/components/public/session-item.js             | 12 ++++--------
 app/styles/partials/utils.scss                    | 15 ++++++++++++++-
 3 files changed, 23 insertions(+), 14 deletions(-)
 rename app/{templates => }/components/public/session-item.hbs (84%)

diff --git a/app/templates/components/public/session-item.hbs b/app/components/public/session-item.hbs
similarity index 84%
rename from app/templates/components/public/session-item.hbs
rename to app/components/public/session-item.hbs
index 8f6ffdf8a68..c9e1c0372d8 100644
--- a/app/templates/components/public/session-item.hbs
+++ b/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')}}">
diff --git a/app/components/public/session-item.js b/app/components/public/session-item.js
index 422e470b256..18d6fa624d7 100644
--- a/app/components/public/session-item.js
+++ b/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;
     }
   }
 }
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index 43d388e438d..b65d3578696 100644
--- a/app/styles/partials/utils.scss
+++ b/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;
 }