From 256c33393c3382df0d4a366138a1328d2e0e0970 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Thu, 10 Jun 2021 21:00:53 +0200
Subject: [PATCH] style: display private

style changes to display private events
---
 .../src/common/components/views/Paginator.jsx |  2 --
 .../components/views/Paginator.module.css     | 32 +++++++++++++++----
 .../src/common/components/views/TodayItem.jsx | 10 ++++--
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/client/src/common/components/views/Paginator.jsx b/client/src/common/components/views/Paginator.jsx
index 5ba8b8881..2412b49bd 100644
--- a/client/src/common/components/views/Paginator.jsx
+++ b/client/src/common/components/views/Paginator.jsx
@@ -32,8 +32,6 @@ export default function Paginator(props) {
     // if array is completely in past, show depending on SCROLL_PAST
   }, [events, selPage, LIMIT_PER_PAGE]);
 
-  console.log('debug events', events);
-
   // every SCROLL_TIME go to the next array
   useInterval(() => {
     if (numEvents > LIMIT_PER_PAGE) {
diff --git a/client/src/common/components/views/Paginator.module.css b/client/src/common/components/views/Paginator.module.css
index e52e2dcfc..5e58e99ad 100644
--- a/client/src/common/components/views/Paginator.module.css
+++ b/client/src/common/components/views/Paginator.module.css
@@ -26,11 +26,13 @@
   margin-left: 0.5vw;
 }
 
-.entryStart,
-.entryEnd {
+.entryTimes {
   font-family: 'Open Sans', sans-serif;
-  min-width: 5vw;
+  font-size: 1.4vw;
+
+  min-width: 10vw;
   opacity: 0.9;
+  letter-spacing: 0.035em;
 }
 
 .entryTitle {
@@ -40,26 +42,42 @@
 .entryPast,
 .entryNow,
 .entryFuture {
-  background-color: rgba(255, 255, 255, 0.03);
   display: flex;
   font-size: 1.3vw;
   padding: 0.2vh 1vw;
   margin-bottom: 1.5vh;
+  border-radius: 3px;
 }
 
 .entryPast {
-  color: #aaa;
+  background-color: rgba(255, 255, 255, 0.01);
   font-size: 1.2vw;
 }
 
+.entryPast > .entryTitle {
+  color: #999;
+}
+
 .entryFuture {
+  background-color: rgba(255, 255, 255, 0.03);
   color: #ddd;
 }
 
 .entryNow {
   color: #fff;
   line-height: 5vh;
-  background-color: rgba(255, 255, 255, 0.09);
+  background-color: rgba(255, 255, 255, 0.07);
   border-bottom: 0.5vh solid #ff7597aa;
-  margin-left: -0.5vw;
+  margin-left: -0.5em;
+  padding-left: 0.5em;
+}
+
+.backstageInd {
+  color: #ff7597aa;
+  margin-left: auto;
+  margin-right: -0.5vw;
+}
+
+.backstageInd::before {
+  content: '*';
 }
diff --git a/client/src/common/components/views/TodayItem.jsx b/client/src/common/components/views/TodayItem.jsx
index 04848cb9d..3238e9e2c 100644
--- a/client/src/common/components/views/TodayItem.jsx
+++ b/client/src/common/components/views/TodayItem.jsx
@@ -1,7 +1,7 @@
 import { stringFromMillis } from 'common/dateConfig';
 import style from './Paginator.module.css';
 export default function TodayItem(props) {
-  const { selected, timeStart, timeEnd, title } = props;
+  const { selected, timeStart, timeEnd, title, backstageEvent } = props;
 
   // Format timers
   const start = stringFromMillis(timeStart, false) || '';
@@ -13,9 +13,13 @@ export default function TodayItem(props) {
   else if (selected === 2) selectStyle = style.entryFuture;
   return (
     <div className={selectStyle}>
-      <div className={style.entryStart}>{start}</div>
-      <div className={style.entryEnd}>{end}</div>
+      <div
+        className={`${style.entryTimes} ${
+          backstageEvent ? style.backstage : undefined
+        }`}
+      >{`${start} · ${end}`}</div>
       <div className={style.entryTitle}>{title}</div>
+      {backstageEvent && <div className={style.backstageInd}></div>}
     </div>
   );
 }